How can I add the banner anywhere on the page?
You can add the banner in two different ways, depending on your theme type:
Online Store 2.0 theme (most cases) – supports app blocks.
Legacy theme without app blocks – requires adding custom HTML code manually.
First, create and save a banner in the app. Then, go to the Placement tab copy Banner ID and click “Go to Theme Editor”, you’ll be redirected to your store’s editor. Alternatively, you can manually go to Online Store → Themes → Customize.
Option 1. For most themes (Online Store 2.0)
Create and save a banner in the app.
Go to the Placement tab, copy the Banner ID, and click “Go to Theme Editor”.
A section with Fab Scrolling Logo block will be added automatically.
Alternatively, you can manually open the Shopify Theme Editor (Online Store → Themes → Customize), navigate to the page where you want the banner to appear, click “Add section”, switch to the Apps tab, and select Fab Scrolling Logo block.
Click on the Fab Scrolling Logo block to open settings and paste the Banner ID you want to display.
Move the block to the desired position and click Save.
✅ Your banner will now be displayed exactly where you placed it. Give it a few seconds, refresh your store page, the banner should become visible.
💡 You can add multiple banners the same way by using their unique Banner IDs.
Option 2. For older themes (Legacy theme without app blocks)
If your theme does not support app blocks, you’ll need to add the banner manually with Custom HTML code:
In the app’s dashboard, go to the Placement tab and copy the Custom HTML embed code for your banner.
In Shopify admin, go to Online Store → Themes → ... → Edit code.
Decide where you want the banner to appear (for example: at the very top of the page, above the footer, or inside product pages). Then:
To add the banner on all pages (site-wide) → open the theme.liquid file and paste the code:
- To show the banner above the header → paste the code right after the opening <body> tag.
- To show the banner above the footer → paste the code right before the closing </body> tag.
To add the banner only on a specific page type (e.g., product page, collection page, homepage):
- Open the corresponding template file, such as product.liquid, collection.liquid, or index.liquid, and paste the code where you want it to appear.
Click Save.
Refresh your store — the banner should now be visible.
💡 Tip: If you’re not sure where to place the code, start by adding it right before the closing tag. This way, you’ll easily confirm that the banner works, and then you can move it to the exact spot you need.
ℹ️️ Important: If you later decide to remove the banner, don’t forget to also delete the embed code you added in the theme file. Otherwise, the old code will remain in your theme and may cause layout or performance issues.
💡 If banner doesn’t show on the store Most common reasons why your banner might not appear:
Make sure the widget is activated in the app.
After adding the code or block, ensure you clicked Save to apply the changes. Then refresh the page — sometimes it takes up to 1 minute for the banner to update on the live store.
If you see a red message: "banner not added. There is a problem with the app block" → this means you are using a legacy theme. In this case, you need to insert the Custom HTML code manually (see instructions at the end of this article).
Last updated