.png){kind=icon}
How to Place Two Bars at the Top of Your Website
By default, our bar apps are designed for simple setup with no coding required. This ease of use comes with one limitation: only one bar can be automatically positioned at the top of your store at a time. To work around this, we recommend placing one bar at the top and another at the bottom. If you'd like to place two bars at the top, the app offers a Manual Placement Feature, with two options: using the App Block or Manual Insertion into your theme code.
The App Block option allows you to place your bar directly through the theme editor without using any code, while the Manual Insertion method lets you insert the placeholder code into your theme files for those who prefer more customization. Both methods are designed to help merchants and their developers implement their own customizations.
Note
Since every theme is a bit different, results may vary. We recommend placing the manual placement code into a relevant theme file.
It is recommended to hire a developer for any theme customizations and to implement any edits on a duplicated copy of your theme. Please note, we do not offer any customization services.
On this page:
- How to Place a Second Bar Using an App Block
- How to Manually Insert a Second Bar Into Your Theme Code
How to Place a Second Bar Using an App Block
In this example, we have the Countdown Timer Bar app enabled on the store and positioned as a top bar that pushes down the rest of the page and stays visible while scrolling.
Now we want to place a second bar, the Quick Announcement Bar app, at the top as well. Follow the steps below:
- Go to Quick Announcement Bar app and then click Edit on the bar you want to configure.
- Navigate to the Display Position section, select Manual Placement and make sure to save the changes. If you'd like the bar to always be visible, you can enable the Pin the Bar option.
- In your Shopify admin, go to Online Store > Themes and click Customize button:
- In the Header section, click Add Section > select Apps > then select Quick Announcement Bar or QAB Custom Placement.
- Lastly, to change the position of the bar, simply drag and drop the app block to your desired location. Then, click the Save button.
How to Manually Insert a Second Bar Into Your Theme Code
If the App Block option isn’t available in your theme, you can manually insert the second bar into your theme code. Follow the steps below:
- Go to the relevant Bar app where you'd like to place the second bar. Then click Edit on the bar you want to configure.
- Navigate to the Display Position section and select Manual Placement. Then copy the code snippet:
<div id="qab_placeholder">
- In your Shopify admin, go to Online Store > Themes. Then, click the three dots (•••) next to your theme and select Edit code.
- Inside the Layout folder, open the theme.liquid file.
- Paste the copied code above the header section, and make sure it’s placed after the
<body>tag.
Here's the result from the example insertion:
Note
As previously mentioned, the placement of the code may not work perfectly in all themes, but this solution can be helpful. Alternatively, you can place the code in the header.liquid file, which can be found in the Sections folder.
In this example, the placeholder code was inserted after the {% endstyle %} tags, but before any <div> tags. The result was similar to the previous placement method.
If you have any questions or concerns, please reach us out at help@hextom.com