Home / Shopify Apps / Sale & Discount Manager / Manual Sale Tag Installation
Sale & Discount Manager - Shopify App
Sale & Discount Manager
Storewide sales, product discounts & scheduled sales.
View in Shopify Store

‹ Back to Faqs

Manual Sale Tag installation

Before you customize your theme, it's a good idea to duplicate your theme.
If you're not familiar with theme editing click on the following link for more information.

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-card-grid.liquid file and add the following code snippet. Usually on line:27

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
debut-collection

3. Edit the product-template.liquid file and add the following code snippet. Usually on line:40

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div style="position:relative;"><div class="hc-sale-tag"><span>{{ discount }}</span></div></div>
{%- endif -%}
debut-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the partial-product.liquid file and add the following code snippet. Usually on line:94

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
blockshop-collection

3. Edit the product.liquid file and add the following code snippet. Usually on line:285

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
blockshop-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-grid-item.liquid file and add the following code snippet. Usually on line:48

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
brooklyn-collection

3. Edit the product-template.liquid file and add the following code snippet. Usually on line:26

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div style="position:relative;"><div class="hc-sale-tag"><span>{{ discount }}</span></div></div>
{%- endif -%}
brooklyn-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-item.liquid file and add the following code snippet. Usually on line:51

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
prestige-collection

3. Edit the product-template.liquid file and add the following code snippet. Usually on line:26

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
prestige-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-grid-item.liquid file and add the following code snippet. Usually on line:72

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
pipeline-collection

3. Edit the product.liquid file and add the following code snippet. Usually on line:32

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div style="position:relative;"><div class="hc-sale-tag"><span>{{ discount }}</span></div></div>
{%- endif -%}
pipeline-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-card.liquid file and add the following code snippet. Usually on line:3

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
narrative-collection

3. Edit the product-template.liquid file and add the following code snippet. Usually on line:19

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div style="position:relative;"><div class="hc-sale-tag"><span>{{ discount }}</span></div></div>
{%- endif -%}
narrative-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-thumbnail.liquid file and add the following code snippet. Usually on line:96

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
retina-collection

3. Edit the product-template.liquid file and add the following code snippet. Usually on line:57

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div style="position:relative;"><div class="hc-sale-tag"><span>{{ discount }}</span></div></div>
{%- endif -%}
retina-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-grid-item.liquid file and add the following code snippet. Usually on line:46

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
minimal-collection

3. Edit the product-template.liquid file and add the following code snippet. Usually on line:44

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div style="position:relative;"><div class="hc-sale-tag"><span>{{ discount }}</span></div></div>
{%- endif -%}
minimal-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-listing.liquid file and add the following code snippet. Usually on line:10

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
vantage-collection

3. Edit the product-template.liquid file and add the following code snippet. Usually on line:16

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
vantage-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-thumbnail.liquid file and add the following code snippet. Usually on line:99

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
responsive-collection

3. Edit the product-template.liquid file and add the following code snippet. Usually on line:42

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
responsive-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-grid-item.liquid file and add the following code snippet. Usually on line:63

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
boundless-collection

3. Edit the product-template.liquid file and add the following code snippet. Usually on line:52

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
boundless-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-grid-item.liquid file and add the following code snippet. Usually on line:41

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
supply-collection

3. Edit the product-template.liquid file and add the following code snippet. Usually on line:47

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
supply-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-grid--indiv-product.liquid file and add the following code snippet. Usually on line:2

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
envy-collection

3. Edit the product-media.liquid file and add the following code snippet. Usually on line:106

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
envy-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-grid-item.liquid file and add the following code snippet. Usually on line:53

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
streamline-collection

3. Edit the product-images.liquid file and add the following code snippet. Usually on line:28

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
streamline-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-grid-item.liquid file and add the following code snippet. Usually on line:45

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
story-collection

3. Edit the product-slideshow.liquid file and add the following code snippet. Usually on line:6

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
story-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-thumbnails.liquid file and add the following code snippet. Usually on line:43

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
turbo-collection

3. Edit the product-details.liquid file and add the following code snippet. Usually on line:15

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
turbo-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-grid-item.liquid file and add the following code snippet. Usually on line:22

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
impulse-collection

3. Edit the product-images.liquid file and add the following code snippet. Usually on line:6

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
impulse-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-listing.liquid file and add the following code snippet. Usually on line:8

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
icon-collection

3. Edit the product-template.liquid file and add the following code snippet. Usually on line:96

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
icon-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-card.liquid file and add the following code snippet. Usually on line:16

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
venture-collection

3. Edit the product-template.liquid file and add the following code snippet. Usually on line:21

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
venture-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-grid-item.liquid file and add the following code snippet. Usually on line:257

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
empire-collection

3. Edit the product-gallery.liquid file and add the following code snippet. Usually on line:38

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
empire-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-listing.liquid file and add the following code snippet. Usually on line:8

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
testament-collection

3. Edit the product-image-gallery.liquid file and add the following code snippet. Usually on line:15

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
testament-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-grid-item.liquid file and add the following code snippet. Usually on line:27

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
simple-collection

3. Edit the product-template.liquid file and add the following code snippet. Usually on line:26

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
simple-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the product-block.liquid file and add the following code snippet. Usually on line:11

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
boost-collection

3. Edit the product-template.liquid file and add the following code snippet. Usually on line:11

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div style="position:relative;"><div class="hc-sale-tag"><span>{{ discount }}</span></div></div>
{%- endif -%}
boost-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop

1. Edit the theme.liquid file and add the following code snippet just before the closing </head> tag

{{ shop.metafields.saletag.hc_tag_css }}
theme

2. Edit the collection_product-content.liquid file and add the following code snippet. Usually on line:6

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
split-collection

3. Edit the product.liquid file and add the following code snippet. Usually on line:6

{%- if product.available and product.compare_at_price_min > product.price_min -%}
{%- capture discount -%}{{ product.compare_at_price_min | minus:product.price_min | times:100.0 | divided_by:product.compare_at_price_min | round }}%{%- endcapture -%}
<div class="hc-sale-tag"><span>{{ discount }}</span></div>
{%- endif -%}
split-product

4. Now you can simply customize your sale tag inside our app in the "Storefront Sale Tag" section.
Don't forget to click on the top right button Sync to online Shop

last step - sync to online shop