Top

Sales Icon Liquid Code Install Instructions

 

Quick Tip!

Some themes have their own sale icons / graphics built in.
Refer to the Theme Settings, or the theme developer on how to turn off the theme's icon.

Part 1: Product.liquid

1 - Product page sale icon

 

Within the product.liquid file, add this line at the desired location. Finding the ideal place to insert this snippet of code in your liquid file is the tricky part of this installation. It will likely take several attempts to find it!

{% include 'shappify-sales-icon-product' %}

 

Step 2: Edit the collection.liquid file

2 - Collection page sale icon

 

Add the following line at the desired location in your collection.liquid file. Probably even trickier than in step 1!

{% include 'shappify-sales-icon-collection' %}

Part 3: Add CSS code to adjust the icon placement (optional)

3 - Fine Tuning

 

In the Product Discount app, click on the Sales Icon menu.

Scroll down to the Customize your Product / Collection icon CSS sections, and add your code.

This is a good starting point for the CSS if the icon is over the image:

Product Icon CSS

margin-top: 20px !important;
margin-right: 0px !important;
margin-bottom: -53px !important;
margin-left: 20px !important;
position: relative !important;
float: left;
z-index: 1000 !important;

Collection Icon CSS

margin-right: 0px !important; 
margin-bottom: -73px !important;
margin-top: 20px !important;
margin-left: 20px !important;
position: relative !important;
float: left;
z-index: 1000 !important;

 

 

Have more questions? Submit a request