Screenshot of banner configuration interface with live storefront preview

Configure banner appearance with live preview


Add customizable banners to your links Create eye-catching banners that appear when customers use your links and follow them throughout your entire storefront. Configure the message, colors, size, and positioning with a real-time preview of how it will look on your storefront.
Banner extensions help highlight your offer and create a more engaging link experience for customers.

​
Setup & Configuration

The banner extension provides a visual configuration interface with live preview:
1

Add a banner extension

In your link editor, add a Banner extension to activate banner functionality.
2

Configure your message

Enter the text you want to display in your banner (supports multi-line text).
3

Customize appearance

Use the live preview to adjust colors, sizing, and positioning in real-time.
4

Save and test

Save your configuration and test the banner on your actual link.

​
Styling Options

​
Visual Configuration

  • Message: Multi-line text content for your banner
  • Background Color: Custom background color with color picker
  • Text Color: Custom text color with color picker
  • Border Radius: Adjustable corner rounding (0-25px)
  • Width: Banner width as percentage of container (50-100%)
  • Margin Bottom: Bottom spacing from page edge (0-50px)
  • Dismissible: Optional close button for users
  • Storefront-wide Display: Banners appear when customers use your link and follow them throughout your entire storefront
  • Fixed Positioning: Banners are positioned at the bottom of the viewport for maximum visibility
  • Responsive Design: Automatically adapts to mobile and desktop screens
  • User Control: Optional dismiss button lets customers close the banner permanently
  • Persistent Session: Banners stay visible across all pages until dismissed or session ends
1

Set your message

Write compelling copy that highlights your offer or call-to-action.
2

Choose colors

Select background and text colors that match your brand and ensure good contrast.
3

Adjust positioning

Set the width and bottom margin to position the banner perfectly on your page.
4

Enable dismissible (optional)

Allow customers to close the banner if they prefer a cleaner view.
Use contrasting colors and clear messaging to make your banners stand out without being overwhelming.
Banners are triggered by links and then persist across your entire storefront until dismissed or the session ends.
The live preview lets you see exactly how your banner will look before saving, ensuring it matches your design expectations.