Step 1: Select the placeholder option
- Select the last option under the "position" setting in the bar configuration in the App
- 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
- In the file, find <header id="header
- Add the following codes after it, and save the changes
<div id="qab_placeholder"></div>
![]()
Step 3: Add part II
- Find theme.js from the left-hand side file list, and open it
- Add the following codes to the very end of the file, and save the changes
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();$("<div />", {html: '<style>' + '.site-content,.product-template{margin-top:' + qab_height + 'px;}#qab_background{z-index:9990!important;}' + '</style>'}).appendTo("body");}$("#qab_close").on( "click", function(){$("<div />", {html: '<style>' + '.site-content,.product-template{margin-top:0;}' + '</style>'}).appendTo("body");});});$( "#qab_placeholder" ).on( "qab_fully_unloaded", function(event, p1) {$("<div />", {html: '<style>' + '.site-content,.product-template{margin-top:0;}' + '</style>'}).appendTo("body");});
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.