Customize Sales Icons & Clock in Bold Discounts V1

Bold Discounts V1 offers a sales clock and sales icon to display on your product pages. The clock will appear on products that have an end date set in Bold Discounts V1, and the sales icons will appear on product pages and collection pages for products that are being discounted in the Discounts app. 

Visit Create a Discount with Bold Discounts V1 for steps on creating a discount with an end date. 

 Alert

To have the sales icon or clock appear on your theme, you will need to have the liquid code installed. For more information, please visit Bold Discounts V1 Install Instructions.

 


 

  1. From within Discounts, select Sales Clock.
  2. Change the Sales Clock Type (optional).
  3. Change the Sales Clock Style (optional).
  4. Enter any Custom CSS as desired (optional).

    Note: Visit W3 Schools - CSS for more information on CSS styling.

    Add Custom CSS

  5. Select Save.
  1. From within Discounts, select Sales Icon.
  2. Select a new sales icon.
  3. Select Save.
  1. From Shopify's admin, select Settings.
  2. Select Files.
  3. Select Upload files.
  4. Select your custom icon.
  5. Select Open.
  6. Copy the link URL to the image.
  7. Duplicate themes, to create a backup copy.
  8. From Shopify's admin, select Online Store.
  9. Select Actions.
  10. Select Edit code.
  11. Under "Snippets", select shappify-sales-icon-product.liquid.
  12. Copy and paste the link URL in the img src.

    Copy and paste file URL for product image

  13. Select Save.
  14. Under "Snippets", select shappify-sales-icon-collection.liquid.
  15. Copy and paste the link URL from step 6 in the img src.

    Copy and paste file URL for collection image

  16. Select Save.
  17. If you would like to replace the image with text, replace the entire image code with:
    <p>This Item is on Sale!</p>

    You can change the text to any verbiage you wish to display.

    Place image with text

Discounts allows you to translate the sales clock verbiage into another language to display on your storefront. 

 Caution

The clock can only be translated into one language at a time.

To translate the sales clock from English on your theme, please follow these steps:

  1. Duplicate themes, to create a backup copy.
  2. From Shopify's admin, select Online Store.
  3. Select Actions.
  4. Select Edit code.
  5. Under "Layout", select theme.liquid.
  6. Add this code, anywhere between the <head> and </head> tags.
    <script>
    function shappify_overwrite_sales_clock_text() {
    shappify_sale_over_label = "Sale Over";
    shappify_sale_ends_in_label = "Sale ends in";
    shappify_day_label = "day";
    shappify_days_label = "days";
    shappify_hour_label = "hour";
    shappify_hours_label = "hours";
    shappify_minute_label = "minute";
    shappify_minutes_label = "minutes";
    shappify_second_label = "second";
    shappify_seconds_label = "seconds";
    }
    </script>

    Image of code added

  7. Change the text in quotes to the desired translation.

    Text in quotes

 Alert

This method may not work with languages using special characters.

Was this article helpful?
0 out of 0 found this helpful