Customize Sales Icons & Clock in Bold Discounts

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.

Customize sales clock walkthrough

Customize sales icons walkthrough

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.

From your Shopify admin, navigate to Online Store > Themes.
Click Customize on the theme you want to customize the sales clock on.
Using the theme’s template menu at the top of the page, select your product template.
If you haven’t already, click Add block on the left side panel and select V1: Sale Clock to add it to your theme.
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.
To change the appearance of the sales clock, use the following app block settings on the right side of the page:
- 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.
Click Save.

Sales icons

Product page sales icons

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

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

Collection page sales icons

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

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

From within Discounts, click Sales Clock.
Optional: Change the Sales Clock Type.
Optional: Change the Sales Clock Style.
Optional: Enter any Custom CSS as desired.
Note Visit W3 Schools - CSS for more information on CSS styling.
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:

From the Shopify admin, navigate to Online Store > Themes.
Duplicate your theme, and work on a backup copy.
Click the ellipsis next to your desired theme, and select Edit code.
Open theme.liquid.

Copy and paste the code below 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

Change the text in quotes to the desired translation.
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.

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

Use a custom sales icon

From the Shopify admin, navigate to Content > Files.
Click Upload files.
Select your custom icon.
Click Open.
Copy the link URL to the image.
From Shopify's admin, select Online Store.
Duplicate your theme, and work on a backup copy.
Click the ellipsis next to your desired theme, and select Edit code.
Under "Snippets", open shappify-sales-icon-product.liquid.
Copy and paste the link URL in the img src.
Click Save.
Under "Snippets", open shappify-sales-icon-collection.liquid.
Copy and paste the link URL from step 6 in the img src.
Click Save.
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.

FAQs

Can I change the sales clock style?

Yes. Depending on the theme you are using, the steps for changing the sales clock will vary.

For Online Store 2.0 themes, the sales clock style can be changed in your theme customizer. Please see the steps above for changing the sales clock style.

For Vintage themes, the clock style can be changed in the Discounts admin on the Sales Clock page.

You can also apply CSS styling to the sales clock to change the font color or size.

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

Can I change the sales icon placement

Yes. Depending on the theme you are using, the steps for changing the sales icon placement will vary.

For Online Store 2.0 themes, the sales icon placement can be changed in your theme customizer. Please see the steps above on changing the sales icon placement.

For Vintage themes, the sales icon placement can be adjusted by applying some CSS styling in the Discounts admin on the Sales Icon page.

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

Can I display the sales clock on the home or collection pages?

No, the sales clock is tied to the product and has been designed to appear on the product page. It cannot display on the home or collection pages.

Discounts uses the product's ID information to determine if it's on sale or not. Discounts is not able to read this information on the home or collection pages.

Bold Discounts Powered by Bold Price Rules allows you to place the sales clock on the home page and collection page. Visit Bold Discounts & Bold Discounts Powered by Price Rules Comparison for more information in regards to both versions of Discounts and steps for switching the Discounts version.

Can I preview the sales icon and clock on a backup theme?

Previewing the sales icon and clock depends on the theme you are using.

For Online Store 2.0 themes, the sales clock can be previewed by enabling Preview in the V1: Sale Clock app block in your theme editor.

The sales icon can be found in the theme editor on product template and collection template after enabling the app embeds. Please see the steps above on customizing the sales clock and sales icon.

For Vintage themes, the sales icon and clock can only be viewed on the storefront when a discount group has been activated in Bold Discounts.

When a discount group has been activated, the product price changes in your Shopify admin and reflects the discounted price on the storefront, along with the sales icon and sales clock, once the discount group has finished syncing.

As a workaround, we recommend creating a test product in your Shopify admin, place this test product in a discount group with a start and end date and activate the discount group. This will allow you to preview the sales icon and clock on the product page before you discount other products on your store.

Can I use my own sales icon?

Yes. You can override the sales icon that Discounts applies with your own icon.

Please see the steps above on adding your own sales icon in your theme's liquid code.

Note: Using your own sales icon is only available when using a Vintage theme. Online Store 2.0 themes cannot use a custom sales icon at this time.

Can the sales icon also appear on the home page of my store?

The sales icon appears on the home page by default with Online Store 2.0 themes using the app embed install.

For Vintage themes, the sales icon can be added to discounted products on the homepage in most cases. This would be done by applying the sales icon Liquid code to the image code in your theme.

Please visit Bold Discounts Install Instructions for steps on adding the sales icon to your theme.

Can the sales icon apply on other sales channels?

No, the sales icon only appears on the Online Store sales channel.

Why is the product page showing "Sale is over?"

The sales clock displays based on the meta-fields of the product. If the clock displays Sale is over, it means that the meta-fields of the product were not removed correctly.

The meta-fields can commonly be removed by re-enabling a discount group that has the product having the issue in the discount group, and then disabling the discount group.

If the text remains on the product page, please contact our Customer Success team for further assistance.

Troubleshooting

Sales clock is not displaying

The sales clock may not display if:

The sales clock is not installed correctly.
Your sale does not have a start or end date/time.

For steps on installing the sale clock in your theme, refer to the Bold Discounts Install Instructions to ensure it is installed correctly.

If the installation has already been completed, please ensure steps 9 - 13 of Create a Discount with Bold Discounts have been applied in a discount group in Discounts.

Sales icon appears on products that are no longer on sale

A sales icon may appear on a product that is no longer on sale because that product still has the sale tag attached to it.

To fix this, create a discount for 1% on the affected product and turn on the discount. Wait for the process to complete and turn off the discount. The sale tag should now be removed.

If the sales icon still appears or the price is still discounted, please contact our Customer Success team.

Visit Create a Discount with Bold Discounts for complete instructions.

Sales icon is appearing twice

If there are two sales icons appearing on products discounted by Bold Discounts, your theme is likely displaying a sales icon along with the sales icon from Bold Discounts. The best workaround would be to either disable the sales icon in Bold Discounts or disable the sales icon from within your theme.

Please see the steps above on changing the sales icon with Bold Discounts.

For assistance with disabling the theme's sales icon, please reach out to your theme developer.

Sales icon is not displaying

If you do not see the sales icon after creating a discount in Discounts, it could be because of one of the following reasons:

The sales icon is not installed correctly.
A sales icon has not been chosen in Discounts.

For steps on installing the sale icon in your theme, refer to the Bold Discounts Install Instructions to ensure it is installed correctly.

If the installation has already been completed on a Vintage theme, please ensure that a sales icon is chosen in Discounts.

Sales Icons