Displays promotional banners with images, text, and buttons. Suitable for highlighting campaigns, collections, products, or important announcements.
Homepage
Landing page
Promotional campaign
Featured collections
Product highlights
Shopify Admin → Online Store → Themes → Customize → Add section → Banner
Section heading: Adds a title and supporting text above the banners.
Banner item: Displays a standard banner with media and content.
Banner item split: Creates a split layout using separate columns.
Content blocks: Adds Heading, Text, Paragraph, Button, or Spacer.
Setting | Description |
|---|---|
Text alignment | Aligns the section heading left, center, or right. |
Spacing between items | Adjusts spacing between heading elements. |
Margin bottom | Sets the space below the section heading. |
Setting | Description |
|---|---|
Banner URL | Sets the destination when customers click the banner. |
Open in new tab | Opens the banner link in another browser tab. |
Image hover effect | Applies an effect to the banner image on hover. |
Item effect when hover | Applies an effect to the entire banner. |
Color scheme | Controls the banner colors. |
Content position | Positions content on desktop and mobile. |
Content alignment | Aligns banner content left, center, or right. |
Creates a split banner with image and content displayed in separate columns. It supports similar link, color, position, and alignment settings as the standard Banner item.
Setting | Description |
|---|---|
Image height | Selects Fixed or Adapt to image. |
Fixed height | Sets a custom desktop banner height. |
Mobile image height | Controls image height behavior on mobile. |
Mobile fixed height | Sets a custom mobile height. |
Columns | Sets the number of banners on desktop, tablet, and mobile. |
Enable scrollsnap slider on mobile | Enables horizontal swipe navigation on mobile. |
Make section full width | Expands the section across the browser width. |
Boxed content | Keeps content inside a centered container when full width is enabled. |
Color scheme | Controls the section colors. |
Setting | Description |
|---|---|
Vertical space | Adjusts vertical gaps between banner items. |
Horizontal space | Adjusts horizontal gaps between banner items. |
Section padding | Controls spacing above and below the section. |
Rate padding (mobile) | Controls responsive section padding on mobile. |
Use consistent image dimensions across banners.
Keep the message short and focused on one action.
Upload images with clear focal points.
Check content position separately on desktop and mobile.
Use Adapt to image to avoid unnecessary cropping.
Enable mobile scroll snap when several banners appear in one row.
Issue | Solution |
|---|---|
Banner image is cropped | Use Adapt to image or adjust the fixed height. |
Banner link does not work | Add a valid Banner URL. |
Mobile layout looks crowded | Reduce mobile columns or enable scroll snap. |
Content covers important image details | Change the content position or use another image. |
Boxed content is not working | Enable Make section full width first. |
Banners have inconsistent heights | Use the same fixed height or consistent image ratios. |