Wholesale pricing snippet customisation for collections on Shopify store

In order to customise your collections with wholesale prices, you need to add a custom code to your theme and snippets. 

Here is a short guide how to do it:

THEME FILE UPDATE

Step 1. In your Shopify Online store , go to Theme

Step 2. Click on 'Customise' and then on the three dots and choose "Edit code"

Step 3 - Go to the ‘Layout’ folder and click on the ‘theme.liquid’ file

Step 4 - In the "theme.liquid' file, insert the code the following code just above the </head> tag

<script async src="https://fena-b2b-app-public.s3.eu-west-2.amazonaws.com/theme-scripts/theme-frontend-components.js"></script>

Step 5 - Save the file 

SNIPPET UPDATE

Step 6 - Go to ‘Snippets’ folder in the navigation bar and click on ‘card-product.liquid’

Step 7 - In the 'card-product.liquid' file, find the line in the code that starts with the following: “render ‘price”. Usually there are two line starting with “render ‘price”. You want to find the first one, not the last one. 

Step 8 - When you locate the “render ‘price’” (it should look similar to the code: {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}), insert the following code just above this line starting with "render 'price'":

{% if customer and customer.tags contains 'FenaWholesale' %}
              <fena-b2b-app-card-product-pricing
                data-product='{{ card_product | json | base64_encode }}' 
                data-variant-metafields='{{ card_product.variants[0].metafields["fena-b2b-app"] | json | base64_encode }}'
                data-customer-tags='{{ customer.tags | json | base64_encode}}'
                data-shop-metafields='{{ shop.metafields["fena-b2b-app"] | base64_encode }}' 
                data-shop-money-currency-format='{{ shop.money_with_currency_format }}'
                data-cart-currency-iso='{{ cart.currency.iso_code }}'
                data-cart-currency-symbol='{{ cart.currency.symbol }}'
                >
              </fena-b2b-app-card-product-pricing> 
            {% else %}
              <!-- Copy the render ‘price’ line here  -->
            {% endif %}

Step 9 - Now please replace the line “<!-- Copy the render ‘price’ line here -->” in the code above  with the original render ‘price’ line, for example {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}. It should look like in the screenshot below:

Step 10 - Save the snippet file ‘card-product.liquid’