Banners
The Banners section allows you to create visually engaging blocks that highlight promotions, announcements, collections, or any content you want to feature across your store.

This section serves as a container for multiple individual Banner items — each with its own image, video, and text settings. You can adjust layout, spacing, and style to match your brand’s look and feel while maintaining flexible content control.
Location: Sections -> Templates -> Banners → Banners
Banners — Options Overview
Option
Description
Heading / Subheading / Description
Add main title, subtitle, and descriptive text for the banner group.
Heading alignment
Align text content to the Left or Center.
Top spacing
Adjust vertical spacing above the section: None, Small, Medium, or Normal.
Width
Defines the section width: Default, Boxed, Wide, or Full width. The Wide option is available on screens with 1440px width or more.
Number of columns
Set how many banners appear in a row (from 1 to 12).
Number of columns on tablet
Define how many columns display on tablet devices (1–6).
Mobile grid
Choose banner layout for mobile view: One item per row or Two items per row.
Image hover effect
Select image hover animation: Basic theme settings, Disable, Zoom in #1, Zoom in and rotate, Zoom in #2, Zoom out #1, Zoom out #2, Slide, or Shine.
Image ratio
Choose image proportions: Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), or Widescreen (16:9).
Image ratio mobile
Set separate image ratio for mobile devices.
Dividing line
Show or hide a line between banner items.
Background
Choose background type: Hide, Color, Gradient, or Image.
Colors
Adjust section colors: Base, Accent, and Lines.
Adding Banners
The Banners section can include multiple Banner blocks. You can add as many individual Banner items as needed, each with unique images, videos, or text. This allows you to build flexible, grid-based layouts to highlight collections, promotions, or brand visuals.
Banner — Options Overview
The Banner section defines each individual banner within the Banners group. You can use either an image or video, set overlay effects, and control text styling and alignment.
Option
Description
Type
Select media type for the banner: Image or Video.
Image
Upload an image for the banner background.
Image ratio mobile
Define mobile image proportions: Default, Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Social story (9:16), or Widescreen (16:9).
Image overlay opacity
Adjust overlay transparency (0–100%).
Image overlay fill
Choose overlay fill color or gradient.
Link
Add a link to make the entire banner clickable.
Heading / Description / Heading after description
Add and arrange text content displayed over the banner.
Button
Add a button with custom text and link.
Heading size
Set heading font size on desktop (16–200px).
Heading size tablet
Set heading font size on tablets (16–100px).
Heading size mobile
Set heading font size on mobile (16–100px).
Underline on hover
Enables text underline animation when hovered.
Text position
Choose text placement on desktop: Top left, Top, Top right, Center left, Center, Center right, Bottom left, Bottom, or Bottom right.
Text position mobile
Define text placement for mobile view.
Text align
Align text inside the content area (Left or Center).
Description width / Description width tablet / Description width mobile
Control text area width (0–100%) for each device type.
Show text box
Enable a visible background box behind the text for better readability.
Heading / Heading hover
Set colors for the heading text and its hover state.
Description / Description hover
Set colors for the description text and its hover state.
Button
Customize button color styling.
Show background
Enable background color or gradient behind text.
Background / Background gradient / Border / Text
Define general color and border styling for the banner.
Show background on hover
Enable hover background color for the banner.
Background hover / Background gradient hover / Border hover / Text hover
Set color effects for hover state.
Enable shadow
Add a shadow behind the banner element.
Shadow / Shadow hover
Define normal and hover shadow appearance.
Box background / Box background hover
Adjust text box background colors for normal and hover states.
Media button background
Set background color for media (video or slider) buttons.
Media button icon
Define icon color for media or slider buttons.
Background hover / Icon hover
Set hover colors for media buttons and icons.
Image overlay color
Define overlay color applied over the banner image.
Last updated