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