How to use a Custom position for a Banner?

BSS: Banner & Pop-up application allows you to customize the position of banners on your theme using App Block.

Follow the steps below to set a custom position for your banner:

---

Phase 1: Actions within the BSS: Banner & Pop-up.

Please first create a banner in the BSS: Banner & Pop-up app. For more details, see the article: How to Create a Banner?

Step 1: Choose Custom Position

Go to the Position section and select Custom Position.

Step 2: Get the Banner ID

Copy the Banner ID below

Note: If the Banner ID is not available, click Save to save the banner. The Banner ID will be generated automatically after saving.

How to get the Banner ID

Banner ID

Step 3: Save banner

Click Save to save the banner.

---

Phase 2: Actions within the Theme Editor

Step 1: Open theme editor

Go to Online Store > Click Customize to access the Theme Editor.

Customize Theme

Step 2: Add an App Block

• On the page where you want to display the banner, select Add Section.

• Choose the section for BSS: Banner & Pop-up app.

Add app block

• In the section you've added, select the app block for BSS: Banner & Pop-up. Enter the Banner ID you copied earlier from Step 2 of Phase 1.

Enter Banner ID

• If you want the banner to display in full width, select the App Section and uncheck the option Make section margins the same as theme.

Mark banner full width

Step 3: Save changes

Click Save and check the result in the Theme Editor and Storefront.

Additionally, you can set a custom position for the banner by copying the code snippet from the app and pasting it into your theme’s code.

Banner code snippet

Watch the following video to learn more about custom positioning:

How to use a Custome position for a Banner?

Related questions:

I don't see the banner ID?

If you create a new banner, make sure to save it so the system generates an ID. You can watch this quick tutorial video:

How to make the banner full width?

If you want the banner to display in full width, select the App Section and uncheck the option Make section margins the same as theme. You can watch this quick tutorial video:

---

💬 If you have any related questions, please contact us via Live chat or [e-mail] for further assistance.