Hero Banner (Hero)

The large banner that typically sits at the very top of the homepage, above everything else. It supports a single slide or a slideshow of several slides, each with its own background (image, video, or color gradient), heading text, subtitle, countdown timer, and up to two buttons. This section has no separate section title of its own - each slide carries its own text.

Layout

• Full Screen Width - when on, the hero stretches edge-to-edge across the browser window. When off, it stays within the page’s normal content width, matching the rest of the storefront.

Autoplay Slides

When turned on, the hero automatically advances to the next slide on its own. When off, visitors must click an arrow, a dot, or swipe to change slides.

Slide Duration (Seconds)

How many seconds each slide stays on screen before autoplay moves to the next one. For a slide with an uploaded video, the slide instead stays until the video finishes playing.

Pagination Style

How the slide position indicator looks: small dots, animated story-style progress bars (like on social media stories), thin lines, page numbers (like “1 / 4”), or no indicator at all.

Show Navigation Arrows

Adds left/right arrow buttons on top of the hero so visitors can click through slides manually.

Banner Aspect Ratio (Desktop)

Controls the shape of the hero on desktop screens - from the original photo proportions to fixed shapes like a wide 16:9 strip, a 3:1 wide banner, 4:3, a 1:1 square, or a tall 3:4 portrait. Choosing a fixed ratio crops the background to fit; “Original image size” lets the banner’s height follow the image’s natural proportions.

Banner Aspect Ratio (Mobile)

The same aspect-ratio choice as above (without the 3:1 option), but applied only when the storefront is viewed on a phone or small screen.

Fit to Screen Height

Keeps the hero from growing taller than the visitor’s screen, so the whole banner can be seen without scrolling. When the limit applies, the hero is made smaller and centered on the page.

• Never exceed the screen height (banner stays fully visible without scrolling) - when on, the hero’s height is capped using the limits below. When off (the default), the hero is sized only by its aspect ratio and can end up taller than the screen.
• Max Height on Desktop (% of screen height) - the tallest the hero can be on computer screens, as a percentage of the screen’s height (from 40% to 100%).
• Max Height on Mobile (% of screen height) - the same limit, but for phone screens.

Slides List

Each slide in the list is one full-screen panel in the hero. If you add more than one slide, the hero becomes a slideshow that visitors can move through.

• Layout Mode - “Standard (With Buttons)” shows the title, subtitle, countdown, and buttons on top of the background. “Media (Full Link)” hides all of that and instead makes the entire slide one clickable link - useful for a purely visual banner that just links somewhere.
• Slide Link - the web address the whole slide links to, used only when Layout Mode is “Media (Full Link)”.
• Background Type - whether this slide’s background is an Image, a Video, or a plain CSS Gradient (a smooth color blend, no image needed).
• Background Image - the picture used as the slide’s background (used when Background Type is Image, or as a fallback poster for a video).
• Video Source (required to identify the video source) - whether the background video comes from a YouTube link or an uploaded file (used when Background Type is Video).
• Video URL - a YouTube link to use as the background video.
• Video File - an uploaded video file to use as the background.
• CSS Gradient - a color-blend background written as a CSS gradient value, used when Background Type is Gradient. A ready-made default is provided if you’re not familiar with writing one.
• Use Different Mobile Background - when on, lets you set a separate background just for phone screens instead of reusing the desktop one.
• Background Type (Mobile) - whether the mobile-only background is an Image or a Video (only applies when Use Different Mobile Background is on).
• Background Image (Mobile) - the picture used as the background on phones.
• Video Source (Mobile) (required to identify the video source) - whether the mobile background video comes from a YouTube link or an uploaded file.
• Video URL (Mobile) - a YouTube link to use as the mobile background video.
• Video File (Mobile) - an uploaded video file to use as the mobile background.
• Video Autoplay - when on, a background video starts playing automatically without the visitor clicking play.
• Preload Video - when on, the video begins loading in the background as soon as the page opens, so it’s ready to play sooner.
• Show Video Controls - when on, shows a play/pause and mute/unmute button over the video so visitors can control it themselves.
• Video Controls Position - where the play/pause and mute buttons sit on the slide: bottom-left, bottom-right, bottom-center, or aligned with the title/subtitle/button text block.
• Enable Overlay - adds a semi-transparent color layer on top of the slide’s background, which can help make text easier to read.
• Overlay Color - the color used for the overlay layer, when Enable Overlay is on.
• Overlay Opacity - how strong the overlay color appears, from barely visible to fully solid. Only matters when Enable Overlay is on.
• Content Position (Desktop) - where the title, subtitle, and buttons sit within the slide on desktop screens: centered, aligned to the middle-left or middle-right, or anchored to the bottom in the center, left, or right. The Under Slide (Center), Under Slide (Left), and Under Slide (Right) options place the text and buttons beneath the image or video instead of on top of it; there the text uses your store’s regular text color unless you pick a title, subtitle, or countdown color other than white.
• Content Position (Mobile) - the same choice, but for phone screens, limited to centered, bottom-centered, or Under Slide (Center).
• Title - the main heading text shown on the slide.
• Title Color - the color of the title text.
• Title Size (Desktop) - how large the title appears on desktop screens, from Small to Extra Large.
• Title Size (Mobile) - how large the title appears on phone screens, from Small to Extra Large.
• Title Weight - how bold the title text appears, from Light to Bold.
• Title Width (% of content area) - how wide the title text block is allowed to grow, as a percentage of the available content area - narrower values force the heading to wrap onto more lines sooner.
• Subtitle - supporting text shown below the title. Line breaks you type are kept when displayed.
• Subtitle Color - the color of the subtitle text.
• Subtitle Size (Desktop) - how large the subtitle appears on desktop screens.
• Subtitle Size (Mobile) - how large the subtitle appears on phone screens.
• Subtitle Weight - how bold the subtitle text appears.
• Subtitle Width (% of content area) - how wide the subtitle text block is allowed to grow, as a percentage of the available content area.
• Show Countdown Timer - when on, displays a live days/hours/minutes/seconds countdown on the slide (not shown when Layout Mode is “Media (Full Link)”).
• End Date - the date and time the countdown counts down to. Once it’s reached, the countdown shows all zeros.
• Countdown Color - the color of the countdown numbers and labels.
• Button 1 Text - the label on the first button (not shown when Layout Mode is “Media (Full Link)”). Leave empty to hide this button.
• Button 1 Link - the web address the first button opens when clicked.
• Button 1 Style - the first button’s look: the theme’s default button style, a solid colored background, or a transparent button with just an outline.
• Button 2 Text - the label on an optional second button, shown next to the first.
• Button 2 Link - the web address the second button opens when clicked.
• Button 2 Style - the second button’s look, with the same choices as Button 1 Style.