Issue
- The bar covers the website sticky header no matter if the bar is sticky or not.
Notes
- The non sticky option of the app does NOT work for this solution. It has to be sticky.
Solution - 2 steps
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 solution
- 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>
- Add following codes after it 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>' + '#top{margin-top:' + ecb_height + 'px;}' + '</style>'}).appendTo("body");
$("<div />", {html: '<style>' + '#ecb_background{z-index:1000!important;}' + '</style>'}).appendTo("body")
}
$("#ecb_close").on( "click", function(){
$("<div />", {html: '<style>' + '#top{margin-top:0;}' + '</style>'}).appendTo("body");
});
});
$("#ecb_placeholder").on("ecb_fully_unloaded", function(event, p1) {
$("<div />", {html: '<style>' + '#top{margin-top:0;}' + '</style>'}).appendTo("body");
});
</script>
</div>

Comments
0 comments
Article is closed for comments.