Preview Changes will not be visible to customers until published.

How do I place the bar anywhere on my site with older themes? •

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.

Still need help? Contact Us Contact Us