Hero Banners
Master the most impactful, high-conversion sections of your homepage.
 Preview.png)
Overview
The Hero section is typically the first visual element your customers see. Sellzar includes two unique, highly customizable hero options built to fit different branding requirements: a split-layout banner with an integrated categories menu for catalog-heavy stores, and an immersive full-width media slider for visual storytelling.
Hero Banner Variations
Hero Banner (with Collections Menu)
Features a dual-column layout: a left-hand Premium Collections Menuand a right-hand Slideshow Slider. The left menu automatically collapses into a neat, interactive accordion on tablet and mobile viewports.
sections/hero-banner.liquid Preview.png)
Hero Banner Two (Full-Width Slider)
A high-impact, edge-to-edge media slideshow supporting background images, native Shopify-uploaded videos, and external streaming video URLs. Each slide supports custom content positioning, overlay tints, and dual call-to-action buttons.
sections/hero-banner-two.liquidConfiguring Hero Banner (with Collections Menu)
This section is designed to establish immediate category navigation paths while maintaining an engaging visual slider.
Select up to 6 collections to display in the grid-based left sidebar. Each item shows the featured collection thumbnail image.
- Title & Icon: Customize the header text and Lucide icon (e.g.,
crown,shopping-bag) displayed at the top of the menu. - Border Settings: Toggle borders, configure border colors, and set border radius (in pixels).
- Interactive Colors: Customize menu background color, header background color, title text, items border, items text, and hover state colors.
Add multiple slide blocks inside the slideshow. Each slide features:
- Media: Upload a high-resolution background image (minimum 2400px width recommended).
- Gradient Overlay: Apply a smooth left-to-right gradient overlay to guarantee text legibility. Adjust opacity from 0% to 100% and pick a custom color.
- Typography: Toggle text banner blocks and configure subheading and heading size, text, and colors.
- CTA Buttons: Add up to two buttons with customizable text, link URLs, background colors, text colors, and icons (Arrow, Cart, Eye, or None).
.png)
Configuring Hero Banner Two (Full-Width Slider)
The full-width slider spans the container width and is optimized for rich typography overlays paired with video backdrops or lifestyle photography.
Choose from three background media modes per slide block:
- Background Image: Standard high-resolution image upload.
- Shopify Video: Select a video file directly from your Shopify Admin files directory using the native video picker.
- External Video URL: Input a direct URL path to an MP4 video or hosted external video file.
.png)
Image Aspect Ratios
To ensure maximum visual appeal and prevent image cropping across various device screens:
- Desktop Banners: We recommend using a 16:9 aspect ratio (e.g. 1920x1080px or 2400x1350px).
- Mobile Banners: When configuring separate mobile elements, we recommend 4:5 or 1:1 aspect ratios to ensure the slider fills portrait-oriented mobile displays.
Animation Settings
Sellzar's hero sections support native slide transition and text entrance animations. The overlay headings support animated text reveals as they enter the viewport, giving the landing experience a premium, high-fidelity feeling.
.png)