Top

Sales Icon Install Instructions

Note: Some themes have sale icons/graphics built into them by default. Refer to the theme settings, or the theme developer to turn off the icon.

To install the sales icon on your theme, follow these steps:

  1. Duplicate themes, to create a backup copy.
  2. From "Shopify Admin", select Online Store.

    select online store 

  3. Select Actions.

    Select Actions 

  4. Select Edit code.

    Select Edit code 

  5. Under "Templates", select product.liquid.

    Note: If your theme contains sections you may find this code within product-template.liquid under "Sections" instead.

    select product.liquid 

  6. Copy and paste this code where you would like the icon to appear:

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

    Note: This code can go anywhere, but we recommend it over the product image.

    copy and paste this code 

  7. Select Save.

    select save 

  8. Under "Templates", select collection.liquid.

    Note: If your theme contains sections you may find this code within collection-template.liquid under "Sections" instead.

    select collection.liquid 

  9. Copy and paste this code where you would like the icon to appear:

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

    Note: This code can go anywhere, but we recommend you place it over the product image.

    copy and paste this code 

  10. Select Save.

    Select save 

  11. Select Apps.

    Select Apps 

  12. Select Product Discount.

    Select Product Discount 

  13. Select Sales Icon.

    Select Sales Icon 

  14. Under "Customize Your Icon CSS" add your custom code:

    Note: This is customizable but is a good starting point if your 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;

    Enter the code 

  15. Select Save.

    Select Save 

  16. Under "Snippets", look for shappify-sales-icon liquid files.

    Note: If the files are missing, visit Product Discount Snippet Files for the instructions to add the snippet file.

    sales icon liquid filed 

That's it!