> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # πŸ“ How to Place Countdown in a Custom Position 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 ✨