Last updated: May 2026 Category: Designing Your App
Overview
The Banners component displays a row, grid, or carousel of banner items on your app's home screen. Each banner can be an image, a video, or a Shopify collection, and each one can link to a different destination — making this component ideal for category navigation, promotional highlights, or featured collections.
How to Use
Adding a Banners Component
Drag the Banners component from the Component Palette into the Phone Preview.
Click on it to open the Inspector Panel.
[Screenshot: Banners component in the Phone Preview with the Inspector Panel showing the Content tab]
Adding Banner Items
In the Content tab, click Add Banner.
For each banner, configure:
Content Type — Choose Image, Video, or Collection.
Image — Click the image picker to open the Media Library. Upload a new image or select an existing one.
Video — Paste a video URL. Videos auto-play, loop, and stay muted by default.
Collection — Pick a Shopify collection. The banner uses the collection's image automatically.
Title — Optional text shown beneath the banner.
Subtitle — Optional secondary line shown below the title. Use this for short call-outs like "Up to 30% off" or "New for spring".
Text Alignment — Aligns both the title and subtitle (left, center, or right).
Action — What happens when the banner is tapped. Pick from:
Collection — open a Shopify collection (with optional product sort override).
Product — open a specific product page.
Page — open one of your in-app landing pages.
URL Webview — open an external URL inside an in-app browser.
Deeplink — open any custom
beyondcart://deep link (e.g.beyondcart://bundle-builder).Custom JSON — for advanced action payloads.
Add as many banners as your layout needs.
[Screenshot: Content tab with three banner items showing image thumbnails, titles, subtitles, and action selectors]
Choosing a Layout
In the Layout tab, set the layout style:
One Column — A single full-width banner per row. Best for hero-style images.
Two Columns — Two banners side by side. Great for category pairs or before/after visuals.
Three Columns — Three banners in a row. Ideal for category navigation tiles.
Fit Row — All items in a single non-wrapping row, height auto-adjusted. Useful for icon-style category strips.
Carousel — Horizontal scrolling row with paging or free-scrolling. Configure the carousel columns to control how many items are visible at once.
The Phone Preview updates immediately when you change the layout.
[Screenshot: Comparison of one-column, three-column, and carousel banner layouts]
Carousel Columns
When you pick Carousel, a Carousel Columns dropdown appears so you can fine-tune how many items are visible:
Linear Scrolling — Free-scrolling row, no snap-to-slide. Items keep the configured height and auto-size their width based on the image aspect ratio.
1 Column — One full-width slide at a time, with paging.
1.5 Columns — One full item plus half the next, hinting that there is more to scroll.
2 Columns, 2.5 Columns (default), 3 Columns, 3.5 Columns — More compact layouts. The half-column variants signal scrollability.
Reordering Banners
To change the display order of your banners:
In the Content tab, hover over the banner you want to move.
Grab the drag handle on the left side of the banner row.
Drag it up or down to reposition.
Release to confirm.
Banners fill the layout left to right, top to bottom — so the first banner in the list always appears in the leading position.
Removing a Banner
Click the Delete icon next to any banner item to remove it.
Settings
In the Settings tab you can adjust:
Height — The pixel height of each banner item.
Space Between — The gap (0–50px) between banners.
Border radius — Round the corners of each banner image.
Padding — Add spacing around the entire banners container.
Title and subtitle typography (font size, font family, color) are controlled from the CSS General tab. Apply your brand fonts there and they will sync across all banner titles and subtitles.
Custom CSS
For advanced visual tweaks (drop shadows, hover effects, gradient overlays, custom subtitle styling), open the Custom CSS tab and write CSS scoped to this banners component. See Styling and Custom CSS for the full styling guide.
Tips
Pair a strong title with a punchy subtitle. "Summer Sale" + "Up to 50% off through Sunday" outperforms a title alone.
Use consistent image dimensions across all banners in a grid for a clean, professional look.
For a 2-column layout, pair complementary visuals (e.g., "Men's" and "Women's", or "New Arrivals" and "On Sale").
Keep banner images simple with bold visuals and minimal baked-in text — let the title and subtitle handle copy so it scales to multiple languages.
If you have an odd number of banners in a multi-column layout, the last row will have fewer items. Consider your total count to avoid awkward gaps, or switch to a Carousel.
For video banners, use short loops (5–10 seconds) — long videos hurt scroll performance.
The Collection content type is the easiest way to keep banners fresh, since the image follows whatever you set in Shopify Admin for that collection.
Related Articles