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 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 (Cannot find header.liquid file? You are using a legacy version of the Brooklyn theme. Find theme.liquid file instead.)
- In the file, find <header class="site-header
- Add following codes before it and save the changes.
<div id="qab_placeholder"></div>
Step 3: Add CSS
- Find theme.scss.liquid from the left-hand side file list and open it
- Add following codes at the end of it and save the changes.
#qab_background{ z-index: 9 !important; }
Enjoy the app
Congratulations. You successfully integrate the Quick Announcement Bar with your Brooklyn theme.
If you cannot see the Quick Announcement Bar yet. Please double check Step 1 and make sure you save the settings.