The app offers two primary placement types for Countdown setups:

• 📌 Default Placements
• 🧩 Custom Placements

In most cases, the default placement areas work perfectly fine.

However, sometimes merchants may want more flexibility and prefer placing the Countdown in a completely custom location depending on their storefront layout.

That’s exactly where the Custom Position feature becomes useful ✨

Using Custom Position, the Countdown can be placed:

• Inside Shopify App Blocks
• Inside Custom Liquid sections
• Inside Theme Files
• Inside manually controlled storefront locations

This documentation explains how to properly enable Custom Position and how to place the Countdown using both available methods.

🛠️ Step 1 — Open the App

Open the app from your Shopify Admin.

📂 Step 2 — Open or Create a Countdown Setup

You can either:

→ Open an existing Countdown setup

→ Or create a new setup

⚙️ Step 3 — Navigate to the Placement Tab

→ Open the Placement tab inside the Countdown setup.

The Placement tab controls where and how the Countdown appears on the storefront.

🎯 Step 4 — Change Placement to Custom Position

Inside the Placement settings:

→ Change the placement option to: Custom Position

→ Then: Click Save

⚠️ Important:

Enabling Custom Position removes the Countdown from the default placement areas.

The Countdown will now appear only where it is manually placed.

🆔 Method 1 — Using Countdown ID

This method is ideal when you want to place the Countdown directly using Shopify’s Theme Editor.

🎨 Step 5 — Open Shopify Theme Editor

From Shopify Admin:

→ Go to Sales Channels → Online Store

→ Click Edit Theme

This opens the Shopify Theme Editor.

➕ Step 6 — Add the Countdown App Block

Inside the Theme Editor:

→ Navigate to the section where you want the Countdown to appear

→ Hover around compatible sections until the blue-colored ➕ icon appears

→ Click Add Block

Then:

→ Open the Apps category

→ Select the Countdown App Block

The App Block will now be added to the selected storefront area.

🔗 Step 7 — Add the Countdown ID

Once the App Block is added:

→ Enter the Countdown ID inside the App Block settings

Then:

→ Save the Shopify Theme

→ Save the Countdown setup inside the app as well

⚠️ Important:

Both saves are required.

Otherwise, the Countdown may not appear correctly on the storefront.

🧩 Method 2 — Using Countdown Code Snippet

This method is useful when you want more advanced placement flexibility.

The Countdown Code Snippet can be:

• Added using a Custom Liquid block
• Added directly into Shopify Theme files

➕ Step 8 — Add a Custom Liquid Block

Inside Shopify Theme Editor:

→ Navigate to the area where you want the Countdown to appear

→ Hover around compatible sections until the blue-colored ➕ icon appears

→ Search for Custom Liquid

Then:

→ Add the Countdown Code Snippet inside the Custom Liquid block

This allows the Countdown to render in the selected storefront position.

💻 Adding the Code Snippet Directly into Theme Files

If needed, the Countdown Code Snippet can also be added directly into Shopify Theme code files.

This is useful when:

• App Blocks are unavailable
• Custom Liquid sections are unsupported
• Advanced storefront customization is needed

⚙️ Opening Shopify Code Editor

⚠️ Important:

It is not recommended to modify Shopify Theme files unless:

• You are comfortable working with Shopify code
• Or you understand what changes are being made

Incorrect modifications inside Theme files may affect storefront behavior.

To open the Shopify Code Editor:

→ Go to Sales Channels → Online Store

→ Click the three-dots menu beside the Edit Theme button

→ Click Edit Code

🧩 Identify the Correct Storefront Area

Before inserting the Countdown Code Snippet, it is important to identify the exact storefront location where the Countdown should appear.

One simple way to do this:

→ Open your storefront in the browser

→ Right-click near the area where you want the Countdown

→ Click Inspect

This opens the browser Developer Tools.

From there:

→ Inspect the surrounding HTML structure

→ Identify useful class names or section references

→ Match those sections with the corresponding Shopify .liquid files in the Code Editor

✨ This helps locate the correct Theme file more accurately.

🔍 Finding the Correct Theme File

After opening the Shopify Code Editor:

→ Navigate through the Theme files on the left side

→ Locate the .liquid file responsible for the area where you want the Countdown to appear

→ Search for any id/class reference using the Code Editor’s Search feature

→ Click on the most promising .liquid file

For example:

• Product-related sections may exist inside:
• main-product.liquid
• product-template.liquid
• Cart-related sections may exist inside:
• cart.liquid
• cart-drawer.liquid
• Custom sections may exist inside:
• sections/*.liquid

➕ Add the Countdown Code Snippet

Once the correct .liquid file is identified:

→ Paste the Countdown Code Snippet in the desired position inside the file

⚠️ Important:

Make sure the snippet is added carefully in the correct location.

Incorrect placement may cause:

• Layout issues
• Improper rendering
• Unexpected storefront behavior

💾 Save the Theme File

After inserting the code snippet:

→ Click Save

Then:

→ Refresh the storefront preview

→ Verify that the Countdown appears correctly in the selected custom location ✨

🎉 Final Result

Once configured successfully:

✅ The Countdown can appear in fully custom storefront positions

✅ Shopify App Blocks can connect correctly using Countdown ID

✅ Advanced storefront placement becomes possible using Code Snippets

✅ Merchants gain much more flexibility over storefront visibility ✨

Updated on: 03/06/2026