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 bar
- Go to Admin > Online Store > Themes
- Click the "Actions" button on the right-hand side, and select "Edit code"
- Find header.liquid and open it
- Find <header class="site-header
- Add following code before it and Save the changes.
<div id="fsb_placeholder"><script>var fsb_adjusted = false;$( "#fsb_placeholder" ).on( "fsb_fully_loaded", function(event, p1) {if (!fsb_adjusted ){fsb_adjusted = true;var fsb_height = $("#fsb_background").height();$("<div />", {html: '<style>' + '.site-header.sticky{top:' + fsb_height + 'px;}@media screen and (min-width: 769px){.site-header.sticky{top:' + (-70 + fsb_height) + 'px;}}' + '</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.