This steps explains how to display Webplanex Rewards Wallet offer labels on collection/collection list and product detail pages in your Shopify store, depending on your theme version.
Theme Version 2.0 and Above (Drag-and-Drop Method):
-
Adding App Block:
On the left sidebar, locate the "Add Section/Add Block" section.
Scroll down to the "Apps" section.
-
Webplanex Offer Label Selection:
Depending on the page, choose the appropriate block:
- Collections/Collections List: Look for "WebPlanexCollectionLabel".
- Product Detail Page: Look for "WebPlanex Product Label".
-
Drag-and-Drop Positioning:
Drag and drop the chosen block onto your page preview at the desired location.
-
Saving Changes:
Click "Save" to apply the changes to your theme.
Theme Version Below 2.0 (Code Editing Method):
Theme Code Access:
- Log in to your Shopify admin panel.
- Navigate to Online Store > Themes.
- Select your current theme and click "Actions" > "Edit Code".
Create Liquid File (New):
- In the theme code editor, go to the left panel and locate the "Snippets" section.
- Create a new file named "wpcb-offer-label.liquid". Add below code to the file and save it.
Code to Liquid File:
{% assign wpcb_type = 'wpcb_campaign_' | append : wpcb_label_type %} {%- if [wpcb_label_type].metafields[wpcb_type] -%} {% capture wpcb_offer_sentance %} {% for offer_label in [wpcb_label_type].metafields[wpcb_type] %} {{ offer_label | last }} {% unless forloop.last %}, {% endunless %} {% endfor %} {% endcapture %}
{{ wpcb_offer_sentance }}{%- endif -%}
Include Code in Theme Template:
Locate the relevant theme template file for your chosen page (collection or product).
Within the template code, use the following snippet, replacing “wpcb_label_type” with the appropriate value:
Code snippet
Product Label:
{% render 'wpcb-offer-label',wpcb_label_type:'product' %}
Collection Label:
{% render 'wpcb-offer-label',wpcb_label_type:'collection' %}
Optional Parameter:
If your product or collection object variable has a different name, pass it as an additional parameter:
Code snippet
{% render 'wpcb-offer-label',wpcb_label_type:'collection',collection : card_collection %} (For collections named 'card_collection')
{% render 'wpcb-offer-label',wpcb_label_type:'product',product : card_product %} (For products named 'card_product')
Important Notes:
- For theme versions below 2.0, the specific code file locations might vary depending on your theme structure.
- Ensure you replace card_collection and card_product with the actual variable names for your collections and products in the optional parameter.