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 theme.liquid from the left-hand side file list and open it
- Find <body
- After it, add the following code and save the changes.
<div id="ecb_placeholder"><script>var ecb_adjusted = false;$( "#ecb_placeholder" ).on( "ecb_fully_loaded", function(event, p1) {if ((p1=='inserted' || p1=='inserted_sticky') && !ecb_adjusted ){ecb_adjusted = true;var ecb_height = $("#ecb_bar").outerHeight();$("<div />", {html: '<style>' + '@media screen and (max-width: 767px){.nt-header-top-cart{top:' + ecb_height + 'px;}}' + '</style>'}).appendTo("body");}$("#ecb_close").on( "click", function(){$("<div />", {html: '<style>' + '@media screen and (max-width: 767px){.nt-header-top-cart{top:0;}}' + '</style>'}).appendTo("body");});});$( "#ecb_placeholder" ).on( "ecb_fully_unloaded", function(event, p1) {$("<div />", {html: '<style>' + '@media screen and (max-width: 767px){.nt-header-top-cart{top:0;}}' + '</style>'}).appendTo("body");});</script></div>
Enjoy the app
Congratulations. You successfully integrate the bar.
If you cannot see the bar yet. Please double check Step 1 and make sure you save the settings.