Sales Icon Liquid Install Instructions

Follow

Warning!

This article requires technical knowledge and prior experience with liquid code. If you are not comfortable with this, Request a Bold Discounts Installation for help.

These instructions add an icon to the product/collection page indicating that this product is on sale.

Sales Clock and Sales Icon

If you would like to add a Sales Clock as well, you can follow the Sales Clock Liquid Install Instructions as well.

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, please follow these steps:

  1. Duplicate themes, to create a backup copy.
  2. From Shopify's admin, select Online Store.

    select online store

  3. Select Actions.

    Actions

  4. Select Edit code.

    Edit code

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

    Note: If the any of these files are missing, visit Bold Discounts Snippet Files for the instructions to add the snippet file.

    Find Sales Icon Snippets

  6. 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

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

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

    Note: You can place this code anywhere in the theme file. We strongly recommend placing it above the product image.

    copy and paste this code

  8. Select Save.

    select save

  9. 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

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

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

    Note: You can place this code anywhere in the theme file. We strongly recommend placing it above the product image.

    copy and paste this code

  11. Select Save.

    Select save

  12. Select Apps.

    Select Apps

  13. Select Product Discount.

    Select Product Discount

  14. Select Sales Icon.

    Select Sales Icon

  15. 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

  16. Select Save.

    Select Save

That's it!

Next Steps:

Blog Posts:

2 out of 10 found this helpful

Comments

0 comments

Please sign in to leave a comment.