Banners

These banners can highlight special offers, featured collections, or key announcements to engage customers while they browse search results.

In the outer section “Banners,” you can modify the main Heading to define the title or purpose of your banner group.

Within this section, you can also add multiple Banner items — there’s no limit to how many you can include. Each Banner item functions as an individual visual block and shares the same set of customizable options, allowing you to create a consistent layout.

These options let you control the banner type (image or video), adjust overlay effects, set content alignment, configure button and link behavior, and fine-tune colors, shadows, and text styles for both desktop and mobile views. This flexibility makes it easy to design promotional or visual sections that align with your store’s branding.


Banners Item — Options Overview

Option

Description

Type

Select the media type for the banner. Options: Image or Video. This defines whether your banner displays a static image or embedded video.

Image

Upload the main banner image that will appear on the desktop view. Recommended high-quality image for best display.

Image hover

Upload an optional secondary image that appears when the user hovers over the banner. Useful for hover animations or image transitions.

Image mobile

Upload a mobile-specific image to optimize the banner display on smaller screens.

Image overlay opacity

Adjust the transparency level (0–100%) of the overlay applied over the banner image. Lower opacity makes the image more visible.

Image overlay fill

Define the color fill for the image overlay to enhance text readability or visual style.

Content

Section for adding textual and interactive elements over the image.

Link

Add a URL or internal Shopify link that the banner directs to when clicked.

Heading

Add a title text that appears prominently on the banner. This is typically the main message or call-to-action.

Description

Add supporting text below the heading, describing the banner content or promotion.

Heading after description

Display the heading below the description text instead of above it (optional alternative layout).

Button

Add a button with a customizable label that links to a product, collection, or page. Useful for calls-to-action.

Settings

Group of settings that control text appearance and layout.

Heading size

Choose the heading font size for desktop view.

Heading size tablet

Adjust heading size specifically for tablet devices.

Heading size mobile

Adjust heading size for mobile devices.

Underline on hover

Option to show an underline effect when hovering over the heading text.

Text position

Set the text block position relative to the banner image for desktop: Top left, Top, Top right, Center left, Center, Center right, Bottom left, Bottom, Bottom right.

Text position mobile

Set the text position specifically for mobile devices with the same placement options.

Text align

Align text within the text box: Left or Center.

Description width

Define the width of the description block (0–100%) on desktop screens.

Description width tablet

Adjust description width for tablets.

Description width mobile

Adjust description width for mobile devices.

Show text box

Toggle to enable or disable the text background box for better contrast and readability.

Colors

Set the color scheme for text and button elements.

Heading

Define the color of the heading text.

Heading hover

Define the heading color on hover.

Description

Define the color of the description text.

Description hover

Define the description color on hover.

Button

Define the button’s color and style.

Show background

Enable a background color or gradient behind text elements.

Background

Choose the static background color for text or button areas.

Background gradient

Apply a gradient color background.

Border

Define a border color and style around the text or button.

Text

Choose the color of text inside the button or box.

Show background on hover

Enable a background effect when the element is hovered.

Background hover

Set the color of the background when hovered.

Background gradient hover

Define a gradient background for hover state.

Border hover

Set border color or style when hovered.

Text hover

Define text color when hovered.

Enable shadow

Add a shadow effect to enhance depth.

Shadow

Customize the default shadow’s intensity and color.

Shadow hover

Define the shadow color or intensity on hover.

Box

Control the overall banner box appearance.

Background

Set the box background color.

Background hover

Set the box background color on hover.

Media button

Customize media control buttons (e.g., play, pause, slider navigation).

Background

Set background color for video or slider buttons.

Video button / slider buttons (Icon)

Choose the icon style for media controls (e.g., play icon).

Background hover

Set background color when hovering over media buttons.

Icon hover

Define hover color for button icons.

Other

Miscellaneous additional settings.

Image overlay color

Choose a specific overlay color applied over the image to improve text visibility or achieve a specific design effect.

Last updated