The Sales Clock countdown timer for Product Discount is a single line of code to show your customers when your sale ends, driving the urgency to purchase the product now before the discounted price ends.
Before we start...
In order to test that our sales clock code is working and looks good, we first need to put a product on sale.
1. Edit theme
From your Shopify store admin, click Online Store > Themes.
On the theme you want to add the code, click the ... button and select Edit HTML/CSS from the dropdown list The theme that is live and visible to your customers is displayed on top. Unpublished themes will be found under the live theme.
2. Edit the product page template file
Within the theme, under the Sections folder, click the product-template.liquid file.
Info If your theme does not support Sections, this change will usually be made to product.liquid, under Templates.
In the product template file, find a spot where you want the countdown timer to appear. As each theme is different, the exact placement will vary. For many themes, we suggest adding the clock under the product title or the product price.
The above example uses the "Minimal" theme. In the product-template file, we identified where the product title (1) is, and the code block for the product price (2).
3. Copy Sales Clock code
4. Paste the Sales Clock code
Paste the code into the desired spot from step 2. For this tutorial, we will add the code below the price.
Again, because each theme is different, you may need to experiment where to best place this code in your theme.
5. Check the shappify-sales-clock snippet is included
Under the Snippets folder of your theme, check that you have a file named shappify-sales-clock.liquid.
If you do, perfect! Continue to the next step.
If the file is missing, follow these instructions to add the snippet file.
6. Test your code install
Now that all the liquid code is put into your stores liquid files there's just one last thing to do, and that's to test your installation to make sure everything's working right! Below is a link to instructions on how to test this app and what to watch out for:
- Customize the sales clock display
- Translate the Sales Clock text