BSS: Banner & Pop-up
  • About us
  • How to create a Banner?
    • πŸ“’ How to create a Single Announcement Banner?
    • πŸƒ How do you create a Running/Scrolling/Marquee Banner?
    • πŸ”„ How to create a Rotating/Carousel Banner?
    • ⏳ How to create a Countdown Timer Banner?
    • 🚚 How to use the Free shipping banner?
    • πŸ’° How to use the Discount banner?
    • πŸ“© How to use the Email Signup banner?
    • 🌍 How to Create a Multilingual Banner?
  • How to create a Window Popup?
  • How to create a Sale Pop-up?
  • FAQs?
    • How to Design Window Popups for Desktop and Mobile (Best Practices)
    • What’s the difference between Countdown Timer and Schedule Time?
    • How to Upload and Optimize Background Banner Images
    • How to Setup Conditions for a Banner?
    • How to Setup Conditions for a Sales Pop-up?
    • How to use a Custom position for a Banner?
    • How to Translate Banner Content?
      • Manual Translation
      • Automatic Translation with LangShop
    • How to Add Languages to Your Shopify Store?
    • How to provide the store's collaborator code?
    • How to approve our support request?
  • Contact us
Powered by GitBook
On this page
  • Phase 1: Actions within the BSS: Banner & Pop-up.
  • Step 1: Choose Custom Position
  • Step 2: Get the Banner ID
  • Step 3: Save banner
  • Phase 2: Actions within the Theme Editor
  • Step 1: Open theme editor
  • Step 2: Add an App Block
  • Step 3: Save changes
  • Related questions:

Was this helpful?

  1. FAQs?

How to use a Custom position for a Banner?

PreviousHow to Setup Conditions for a Sales Pop-up?NextHow to Translate Banner Content?

Last updated 2 months ago

Was this helpful?

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:

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.

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.

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.

  • 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.

  • 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.

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.

Watch the following video to learn more about custom positioning:

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 for further assistance.

support-sbc-ta@bsscommerce.com
How to Create a Banner?
How to use a Custome position for a Banner?
How to get the Banner ID
Banner ID
Customize Theme
Add app block
Enter Banner ID
Mark banner full width
Banner code snippet