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 from the left-hand side file list and open it
- Find <header id="header"
- Add following codes before it and save the changes.
<div id="qab_placeholder"><script>var qab_adjusted = false;$( "#qab_placeholder" ).on( "qab_fully_loaded", function(event, p1) {if ((p1=='inserted' || p1=='inserted_sticky') && !qab_adjusted ){qab_adjusted = true;var qab_height = $("#qab_background").height();var sticky_header_top = parseInt($(".sticky-header").css('top'));var mobile_top = qab_height + sticky_header_top;$( ".site-header" ).css("top", qab_height + "px");$( ".promo-bar.large--hide" ).css("margin-top", qab_height + "px");$( ".sticky-header.large--hide" ).css("top", mobile_top + "px");$("<div />", {html: '<style>' + '#qab_background{z-index:99990!important;}' + '</style>'}).appendTo("body");}$("#qab_close").on( "click", function(){$( ".site-header" ).css("top", 0);$( ".promo-bar.large--hide" ).css("margin-top", 0);$( ".sticky-header.large--hide" ).css("top", sticky_header_top + "px");});});$( "#qab_placeholder" ).on( "qab_fully_unloaded", function(event, p1) {$( ".site-header" ).css("top", 0);$( ".promo-bar.large--hide" ).css("margin-top", 0);$( ".sticky-header.large--hide" ).css("top", sticky_header_top + "px");});</script></div>
Enjoy the app
Congratulations. The integration is done.
If you cannot see the bar yet. Please double check Step 1 and make sure you save the settings.