Step 1: Select the placeholder option
- Select the last option under the "position" setting in the bar configuration in the App
- Check the "Pin the bar" option
- Scrolling to the very end, and click the "Save" button to save the change
![]()
Step 2: Add the bar
- Go to Admin > Online Store > Themes
- Click the "Actions" button on the right-hand side, and select "Edit code"
- Find header.liquid from the left-hand side file list and open it
- Add following codes at the very top of the file and save the changes.
<div id="ctb_placeholder"><script>var ctb_adjusted = false;$( "# ctb_placeholder" ).on( " ctb_fully_loaded", function(event, p1) {if ((p1=='inserted' || p1=='inserted_sticky') && ! ctb_adjusted ){ctb_adjusted = true;var ctb_height = $("#epb_background").height();$("<div />", {html: '<style>' + '#pageheader:not(.undock){top:' + ctb_height + 'px!important;}#epb_background{z-index:9999 !important;}' + '</style>'}).appendTo("body");}$("#epb_close").on( "click", function(){$("<div />", {html: '<style>' + '#pageheader:not(.undock){top:0!important;}' + '</style>'}).appendTo("body");});});$("# ctb_placeholder").on(" ctb_fully_unloaded", function(event, p1) {$("<div />", {html: '<style>' + '#pageheader:not(.undock){top:0!important;}' + '</style>'}).appendTo("body");});</script></div>
Enjoy the app
Congratulations. The integration is done.
If you cannot see the bar yet. Please double check Step 1 and make sure you save the settings.