How to place 2 bars at the top (FSB)

Our bar apps can only display one bar per page at a time. The benefit of have multiple bars be active is that they can be targeted to certain countries or pages, but only one bar can be displayed per page.

What you can do is display a bar from another bar app along with one from FSB. However, since both bars use the same technique for placement, and most themes don't know how to handle the conflict, the result is usually that the theme will only display one bar. The recommendation is to place one bar at the top and one at the bottom.

That said, the apps do have manual placement or app block placement options .

Option 1: Manual Placement

The Manual Placement feature, and the associated insertion code, are provided to make it possible for merchants and their developers to implement their own customizations. 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.

Every theme is a little different, so your mileage may vary, but you can try placing the manual placement code into a theme file.

First, select the Manual Placement option and copy the code snippet.

Screen_Shot_2021-11-10_at_2.29.46_PM.png

Next, you'll need to get into the code editing space. For that click on:
1 ) Online Store
2) Themes
3) Then click Actions drop down(on the right side of the page) and click 'Edit Code'

Next click on theme.liquid

Then place the code snippets that you copied above the header section in the theme.liquid file. Make sure it's after the <body> tag.

Screen_Shot_2021-11-10_at_2.40.10_PM.png

In my test theme, my result was:

Screen_Shot_2021-11-05_at_4.28.43_PM.png

Alternatively, the code can sometimes be placed in the header.liquid file. The header.liquid file can be found in the Sections folder. In this theme, I placed the placeholder code after the {% - endstyle -%} tags but before any <div> tags. The final results were similar to the previous option.

Screen_Shot_2021-11-07_at_11.19.29_AM.png

Please Note: As previously mentioned, this may not work perfectly in all themes. But we wanted to share this tool in the event that it helps.

Option 2: App Block Placement

First step for this option is to set both bars positioning to Manual Placement:

Next, you'll need to get into the theme editor space. For that click on:

1 ) Online Store

2) Themes

3) Customize

In the editor, click on this Add section / + icon in between the Header label and the other sections under it:

After you click that + icon, a popup will appear, click on the Apps tab and choose the first bar you want to display on the header:

Next, click on Add block and add the second bar.

After adding both bars in this section and depending if your theme supports it, you would now be able to see two bars in your header:

If the bars are not filling the full width page as in the sample above, click on the "Apps" block and uncheck this option and then the bars should fill the page:

If they appear normally, simply click on "Save".

Please Note: As previously mentioned, this may not work perfectly in all themes. But we wanted to share this tool in the event that it helps.