How do I place the bar anywhere on my site with older themes? (CTB)

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 wish to place the Countdown Timer Bar somewhere other than the top or bottom of the page, you can use the Manual Placement option.

 

Screen_Shot_2022-03-29_at_4.57.16_PM.png

 

 

From here you have two options:

You can place the code  <div id="ctb_placeholder"></div>  in your theme code where you would like the bar to display. Something like this:

Screen_Shot_2022-03-29_at_5.00.02_PM.png

 

But sometimes that doesn't quite work. For instance, there are some themes that have only 

 {{ content_for_layout }}

as their code for the main body of the page. 

Other times, you may want to place the bar visually in the theme. In both these cases, you can do so using a custom section.

 

Enter the theme code editing space. 

 

Inside the Sections folder, click on Add a new section

Screen_Shot_2022-12-22_at_1.56.06_PM.png

 

Give the section the name ctb_bar and click done.

Screen_Shot_2022-12-22_at_3.01.07_PM.png

 

A new section will be created with default code. Delete that code and paste in the following:

<div class="ctb-section">
<div>{{ section.settings.ctb_section_body }}</div>
</div>

<section>
<div id="ctb_placeholder"></div>
</section>
{% schema %}

{
"name": "CTB",
"limit":1,
"presets": [
{
"name": "CTB",
"category": "Custom"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

Like so:

Screen_Shot_2022-12-22_at_3.05.22_PM.png

 

Then save (top right).

 

From here you have 2 options.

 

1 - You can place that section in a liquid file like so:

Screen_Shot_2022-12-22_at_3.01.55_PM.png

 

2 - You can place the section visually in the theme.

Enter theme customization. 

In the left menu, click Add section

Screen_Shot_2022-12-22_at_2.05.30_PM.png

 

 

Choose CTB:

Screen_Shot_2022-12-22_at_3.07.16_PM.png

 

 

The CTB section will then be added to the bottom of the layout.

Screen_Shot_2022-12-22_at_3.08.05_PM.png

 

 

You can drag it to where you would like it to be by hovering over the right side of the label and then clicking on the dotted tab:

Screen_Shot_2022-12-22_at_3.08.35_PM.png

 

You may need to save the theme to see the bar appear. Even then, depending on the theme, you may need to preview the theme to see the bar display.

 

Here's an example of the bar dragged up to below a slide show element.

Screen_Shot_2022-12-22_at_3.10.17_PM.png

 

 

 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.