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.


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