How do I place the bar visually in theme customization? (CTB)

Kindly watch our video tutorial about this topic here:


If you prefer a step-by-step guide please read further below.

If you wish to place the Countdown Timer Bar somewhere other than the top or bottom of the page, you can use the Manual Placement option.

From here you have two options. You can place the code  <div id="ctb_placeholder"></div>  in your theme code. Something like this:

That often works, but there can sometimes be some unexpected results with some themes. Also, some themes don't have a body section that can be easily edited, and instead you'll see something like this:

With nowhere to place your placeholder code. 

So another option is to place the bar manually in the theme's Customize section. 

That's what I'll walk you through.

*Please note that if you are not using a Shopify 2.0 theme, you might not be able to add a section to certain pages.

First, you'll need to get into the theme customization space. For that click on: 
1 ) Online Store
2) Themes
3) Customize
​​

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:

When you click on it, a drop down opens up to show you the available pages to edit:

We'll stick with the home page for now.

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.

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):

You may find yourself trying to move the bar by the dotted tab next to CTB Custom Placement. But that won't work:

You need to grab the dotted tab for this Apps section.

So now you should be able to drag the bar to your desired spot:

If you click on the section, you'll see that there are no customizable settings. All the settings are still set in the app. But this allows you to place the bar in your theme more easily.

If you want the bar to occupy the entire width of the page (you'll notice the bar doesn't quite go edge to edge), you would take a different approach. Rather than adding a section as we've done, you would add custom liquid code.

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>

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

You can follow these same steps on other pages.

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. In the top drop down click in and select Products, then Default product.

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.

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

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.

You can use the same method to place the bar in the cart page: