Skip to main content

How to add custom position placement to the Countdown Timer?

Here's a detailed step-by-step guide for setting up the Placement/Custom Position for Countdown Timer:

Rashmi Verma avatar
Written by Rashmi Verma
Updated over 3 weeks ago

You can use Custom Position to manually place a countdown timer anywhere on your site.

✅ Step 1: Open the Hoppy Countdown timer app.

1️⃣ Go to Shopify AdminAppsHoppy Countdown timer app.

2️⃣ You will see multiple placement options for your Countdown timer. Select the Countdown Type — where you want the timer to appear on your store, and then navigate to the Placement tabs.

  • Product Page🛍️ - Show a timer on product pages. This is ideal for flash sales or limited-time offers on specific items.

  • Top/Bottom Bar🔝🔽 - A sticky bar at the top or bottom of your website is great for sitewide messages or storewide promotions.

  • Landing Page 🖥️– Use this when creating a special landing page for a campaign or product launch. The timer will be shown there to emphasize urgency.

  • Cart Page – Display the countdown on the cart page to encourage customers to complete their purchase quickly. Perfect for limited-time cart holds or shipping deadlines.

  • Email Timer✉️ – Generate a timer image to embed in your email campaigns. This helps drive urgency in email promotions with an actual ticking clock.

✅ Step 2: Placement of the Countdown Timer

3️⃣ To place a countdown timer in a custom location, select Custom Position in the Placement tab settings. This will unlock two options:

🔹 Option 1: Using App Block (Recommended for Beginners)

This method uses the Countdown ID to place the Trust Badges.

📌 Steps to Add a Countdown Timer Using App Block:

  • First, Copy the Countdown ID.

  • Go to Shopify Admin → Online Store → Themes.

  • Click on Customize to open the Theme Editor.

  • Navigate to the page and the section where you want to add the badges. Click on Add Section → Scroll to Apps → Select Hoppy Countdown.

  • Paste your Countdown ID in the right-hand settings panel.

🔹 Option 2: Using Custom Liquid (Advanced)

This method requires adding a code snippet to your theme using Custom Liquid.

📌 Steps to Add a Countdown Timer Using Custom Liquid:

  • First, copy the Code snippet.

  • Go to Shopify Admin → Online Store → Themes.

  • Click on Customize to open the Theme Editor.

  • Navigate to the page and section where you want to add the badges. Click on Add Section → Search for Custom Liquid → Click on it.

  • Paste your Countdown Timer Code Snippet into the Custom Liquid editor.

✅ Step 3: Save and Test Your Placement

4️⃣ Click Save in Shopify's Theme Editor.

5️⃣ Visit your store and check if the badges appear in the correct position.

6️⃣ If the Countdown Timer is not visible, try:

  • Clearing your browser cache.

  • Checking if Custom Positioning is enabled in the Hoppy Countdown app.

  • Refreshing your store page.

🔥 Great job! Your Hoppy Countdown Timer is now positioned just the way you want! 🚀

Did this answer your question?