Enabling the timer embed

With GetSale, it is possible to display a countdown timer on the product page for any product that is part of a discount that has an end date. With the latest version, it is now possible to have multiple timers associated with their own discount(s). With this improvement comes a whole new way of designing your timer and activating in on your store; let’s dive in.

‍

Enabling the app embed

For the timer to be visible on your storefront, your first need to enable the app embed inside your theme. This is achievable in 6 steps:

1. Navigate to Shopify Admin and open your store's current theme
2. Click on the 'Customize' button
3. In the menu on the left side click on 'Theme settings'
4. Then In the Theme settings panel click App embeds
5. Activate the GetSale timer by clicking on the switch
6. Click save in the top right

Creating a timer

Creating a timer is now easier than ever. With the live preview in the top right hand corner of the page updating instantly with any changes you make, you can be confident that whatever you see there is exactly what your customers will see when they visit your store.

Remember, you can add emojis to the title and subtitle by clicking on the smile emoji, and you can edit the colour of the background or different pieces of text by clicking the coloured circle near the relevant component. We encourage you to experiment to hearts content!

‍

Advanced Positioning

By clicking on ‘Advanced settings’ at the bottom of any timer creation page, you will notice something called a JS Selector. Without diving too deep into the technical specifics, this is essentially how our app knows where to place the timer on your product page. By default, this is set to be above the add to cart button.

If you want to position it somewhere else, you’ll need to get your hands dirty and do the following:

1. Visit any product page on your store.
2. Open the browser inspector; on Chrome you can right click anywhere on the page and click inspect, on Safari you can right click anywhere on the page and click inspect element. From here on out we will be referring more specifically to chrome, but the steps for all browsers are very similar.

3. From here, make sure you have the ‘elements’ tab selected. To the left of the elements tab, you will see an icon that looks like a cursor. Click on this.
4. Now, move your cursor back over to the main webpage and click on the element you want to position your timer above or below. In my case, I want the timer to be placed below the title.

5. Once you have copied this, we need to tell the timer to use this position. In my case, the element is a div so I need to write the following:

6. Make sure you have selected the right placement, and hit save

‍

Connecting a timer to a discount

Last but not least, we need to make sure we have connected the timer to the discount. To do this, create or edit a discount on the dashboard and ensure the following is done:

1. The discount has an end date. Note that this still works for repeated schedules.
2. You have selected that you want to use the timer.

After saving the discount, you will be able to see it by visiting the product page of any discounted item!