Make a selection

Customize Sales Icons & Clock in Bold Discounts

Laurel
Laurel
  • Updated

Bold Discounts provides its own optional sales clock and sales icon for you to display on your store. You can customize the color, position, size, and more, for both the sales clock and sales icon.

The sales clock and sales icons can be customized using the app block and app embeds. As vintage themes do not support app blocks, please use the legacy instructions to customize your sales clock if you are using a vintage theme.

To see how to customize your sales clock and sales icon, please view the instructions relevant to the install type you are using on your theme.

Note: The Bold Discounts sales icon and sales clock must be properly installed on your theme before they can appear on your storefront. For step-by-step instructions for both install types, please visit our Installation Guide for Bold Discounts.

 


 

Customizations (via app block & app embed)

Sales clock

To customize the sales clock, please follow the steps below.

Alert: If you are using a vintage theme, please use the Legacy customizations below.

  1. From your Shopify admin, navigate to Online Store > Themes.
  2. Click Customize on the theme you want to customize the sales clock on.
  3. Using the theme’s template menu at the top of the page, select your product template.
  4. If you haven’t already, click Add block on the left side panel and select V1: Sale Clock to add it to your theme.
  5. Change the placement of the sales clock on your product page by dragging and dropping the V1: Sale Clock app block to your preferred position in the template menu.

    Change sales clock position

  6. To change the appearance of the sales clock, use the following app block settings on the right side of the page:

    Sales clock settings

    • Preview mode - Check this box to see an example of the sales clock in your theme customizer.
    • Select a template - Use the dropdown to select a clock template design that works best for your store.
    • Text Align - Click an option to align the text to the left, center, or right side of the Sales Clock container.
    • Font size - Use the slider to increase or decrease the font size of the Sales Clock.
    • Font color - Click to select a color for Sales Clock text.
    • Margin size - Use the slider to create space around the Sales Clock, outside of any defined borders.
    • Padding size - Use the slider to create space around the Sales Clock, inside of any defined borders.
    • Border color - Click to select a new border color for the Sales Clock.
    • Border size - Use the slider to increase or decrease the border size of the Sales Clock text.
    • Background color - Click to select a new background color for the Sales Clock.
    • Custom CSS - Enter your own custom CSS into the input box.
  7. Click Save.

 

Sales icons

Product page sales icons

To customize the sales icon on your product pages, please follow the steps below.

  1. From your Shopify admin, navigate to Online Store > Themes.
  2. Click Customize on the theme you want to customize the sales icon on.
  3. Using the theme’s template menu at the top of the page, select your product template.
  4. If you haven’t already, enable the V1: Sale Icon Product app embed by moving the toggle to the right.
  5. Click the arrow on the V1: Sales Icon Product app embed to expand the settings and adjust the following as needed:

    Product page sales icon

    • Select a sale icon style - Click on Tag, Banner, or Starburst to select a shape for your sales icon.
    • Icon Height - Use the slider to increase or decrease the icon’s height.
    • Icon Width - Use the slider to increase or decrease the icon’s width.
    • Select the icon position - Use the dropdown menu to select a new position for the sales icon.
    • Custom CSS styling - Enter your own custom CSS into the input box.
  6. Click Save.

 

Collection page sales icons

To customize the sales icon on your collection pages, please follow the steps below.

  1. From your Shopify admin, navigate to Online Store > Themes.
  2. Click Customize on the theme you want to customize the sales icon on.
  3. Using the theme’s template menu at the top of the page, select your collection template.
  4. If you haven’t already, enable the V1: Sale Icon Collection app embed by moving the toggle to the right.
  5. Click the arrow on the V1: Sales Icon Collection app embed to expand the settings and adjust the following as needed:

    Collection page sales icon

    • Select a sale icon style - Click on Tag, Banner, or Starburst to select a shape for your sales icon.
    • Icon Height - Use the slider to increase or decrease the icon’s height.
    • Icon Width - Use the slider to increase or decrease the icon’s width.
    • Select the icon position - Use the dropdown menu to select a new position for the sales icon.
    • Custom CSS styling - Enter your own custom CSS into the input box.
  6. Click Save.

 


 

Customizations (legacy)

Note: The following instructions are only relevant to stores who've installed Bold Discounts using Liquid code (legacy).

Sales clock

Change the sales clock type and style

  1. From within Discounts, click Sales Clock.
  2. Optional: Change the Sales Clock Type.
  3. Optional: Change the Sales Clock Style.
  4. Optional: Enter any Custom CSS as desired.

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

    Add Custom CSS

  5. Click Save.

 

Translate the Sales Clock

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

Note: 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. From the Shopify admin, navigate to Online Store > Themes.
  2. Duplicate your theme, and work on a backup copy.
  3. Click the ellipsis next to your desired theme, and select Edit code.
  4. Open theme.liquid.
  5. Copy and paste the code below between the head and /head tags
    1. <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

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

    Text in quotes

  7. Select Save.

This method may not work with languages using special characters.

 

Sales icons

Change the sales icon

To change the sales icon to a different style, please follow the steps below.

  1. From within Discounts, click Sales Icon.
  2. Select a new sales icon.
  3. Select Save.

 

Use a custom sales icon

  1. From the Shopify admin, navigate to Content > Files
  2. Click Upload files.
  3. Select your custom icon.
  4. Click Open.
  5. Copy the link URL to the image.
  6. From Shopify's admin, select Online Store.
  7. Duplicate your theme, and work on a backup copy.
  8. Click the ellipsis next to your desired theme, and select Edit code.
  9. Under "Snippets", open shappify-sales-icon-product.liquid.
  10. Copy and paste the link URL in the img src.

    Copy and paste file URL for product image

  11. Click Save.
  12. Under "Snippets", open shappify-sales-icon-collection.liquid.
  13. Copy and paste the link URL from step 6 in the img src.

    Copy and paste file URL for collection image

  14. Click Save.
  15. 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 message you wish to display.

    Place image with text