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 Part I
- 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
- At top, add the following code and save the changes.
<div id="fsb_placeholder"><script>var fsb_adjusted = false;$( "#fsb_placeholder" ).on( "fsb_fully_loaded", function(event, p1) {if ((p1=='inserted' || p1=='inserted_sticky') && !fsb_adjusted ){fsb_adjusted = true;var fsb_height = $("#fsb_background").height();$("<div />", {html: '<style>' + '.sticky-header{top:' + fsb_height + 'px;}#fsb_background{z-index:9!important;}' + '</style>'}).appendTo("body");}$("#fsb_close").on( "click", function(){$("<div />", {html: '<style>' + '.sticky-header{top:0;}' + '</style>'}).appendTo("body");});});$("#fsb_placeholder").on("fsb_fully_unloaded", function(event, p1) {$("<div />", {html: '<style>' + '.sticky-header{top:0;}' + '</style>'}).appendTo("body");});</script></div>
Issue
- When selecting any sticky position option, the bar covers the website sticky header when scrolling.
- The bar covers the mobile menu.
Notes
- The non sticky option of the app does NOT work for this solution. It has to be sticky.