Step 1: Select the placeholder option
- Select the last option under the "position" setting in the bar configuration in the App
- 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 beginning 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_bar").height();console.log(ctb_height);$( "#epb_background" ).css("height", ctb_height + "px");$( "#ctb_placeholder" ).css("padding-bottom", ctb_height + "px");}});</script></div>