Step 1: Select the placeholder option in FSB
- Select the last option under the "position" setting in the bar configuration in the App
- Select the “Pin the bar to the position” option
- Scrolling to the very end, and click the "Save" button to save the change
Step 2: Add FSB
- 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 class="
- Add following code right after it. 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();$("#header").css("top", fsb_height + "px");$(".header").css("top", fsb_height + "px");$("#nav").css("padding-top", fsb_height + "px");$("<div />", {html: '<style>' + 'div.header_bar{top:' + fsb_height + 'px !important;}' + '</style>'}).appendTo("body");}$("#fsb_close").on( "click", function(){$("#header").css("top", 0);$(".header").css("top", 0);$("#nav").css("padding-top", 0);$("<div />", {html: '<style>' + 'div.header_bar{top:0!important;}' + '</style>'}).appendTo("body");});});$("#fsb_placeholder").on("fsb_fully_unloaded", function(event, p1) {$("#header").css("top", 0);$(".header").css("top", 0);$("#nav").css("padding-top", 0);$("<div />", {html: '<style>' + 'div.header_bar{top:0!important;}' + '</style>'}).appendTo("body");});</script></div>
Enjoy the app
Congratulations. You successfully integrate the app with your theme.
If you cannot see the bar yet. Please double check Step 1 and make sure you save the settings.