Xboost

How to show the countdown timer in a custom position

Overview

Use Manual Position to place the timer yourself with the Countdown Timer Block app block or a code snippet.

Steps

  1. Open Countdown Timer bars, click the timer name, then click Placement.
  2. Under Page to display, select Manual Position and copy the ID with the copy icon. If the field shows "Save or Publish to show ID", click Save first.
  3. Click Add liquid block to your theme, or go to Online Store > Themes > Customize.
  4. Open the page you want, click Add block (or Add section), open the Apps tab and select Countdown Timer Block.
  5. Paste the ID into Countdown Timer ID, move the block, and click Save in the theme editor.

The block shows the timer only when it uses Manual Position and is Active.

Use the code snippet instead

Paste the snippet from the Placement step in any theme file. It looks like this, with your ID in data-id:

<div class="xbcd-block" data-id="YOUR-COUNTDOWN-TIMER-ID"></div>