How do I place the bar visually in theme customization? •

The Manual Placement feature, and the associated insertion code, are provided to make it possible for merchants and their developers to implement their own customizations. It is recommended to hire a developer for any theme customizations and to implement any edits on a duplicated copy of your theme. Please note, we do not offer any customization services.

If you want to position the Countdown Timer Bar somewhere other than the top or bottom of the page, you can use the Manual Placement for the display position. There are two ways to do this:

• Insert the Placeholder Code to Your Theme
• Use Custom Section to Display the Bar

Insert the Placeholder Code to Your Theme

To manually insert the placeholder code into your Shopify theme, follow these steps:

1. Copy the placeholder code below:

<div id="ctb_placeholder"></div>

2. In your Shopify admin, go to Online Store > Themes.
3. Click the 3 dots > Edit Code on the theme you want to edit.

4. Navigate to the desired file where you want to add the placeholder.

5. Paste the copied code into the file.

   

6. Save your changes.

Use Custom Section to Display the Bar

If you want to visually place the bar within your theme, you can do so by using the Customize section. Follow these steps:

1. In your Shopify Admin, go to Online Store > Themes > Customize.

   

2. When you enter the Customize page, the home page will load. You can choose to edit a page other than the home page by clicking on the drop-down at the top center area. For this tutorial, we will stick with the homepage.

3. On the left side menu, at the very bottom, you can click Add section. If you scroll down, you'll find a section called Apps. In there, you'll find CTB Custom Placement. Click that.

4. The section will then be inserted into the page at the bottom:

You can move the bar around the page by clicking and dragging the dotted tab (hover over that area to see the tab):

5. So now you should be able to drag the bar to your desired spot. Once you are done with the change, don't forget to save your changes.

Additional information:

After following the steps above for customizing the bar visually, you may find that the bar does not occupy the entire width of the page. If you want the bar to occupy the entire width of the page, you would take a different approach.

1. Rather than adding a section as we've done, you would add a custom liquid code.

2. This new section will load at the bottom of the page. When you click into it, there will be an empty box. In there is where you will place this code:

<div id="ctb_placeholder"></div>

3. Then Save (top right) and the bar will then load and go from edge to edge.

Place the bar as a block inside another section

So far we've been placing the bar as its own section. But you can place the bar as a block inside another section. For that example, we'll switch over to the product page.

1. In the top drop-down click in and select Products, then Default product.

2. The product page will load. We're going to focus on the section called Product information. You can see all of the components that make up that section. We can add our bar to that by adding a block.

3. At the bottom of the section in the menu, click Add block. Just as before, select the CTB Custom Placement block.

4. It will then appear at the bottom of the section. Now you can use the dotted tab directly next to the bar to drag it up. 

You can place it just above the buy buttons if you like.

We also have a video tutorial for reference: