Category 3: Hero Banners & Media

Create a Shopify hero banner section that:

• Displays a full-width background image
• Includes a heading, subheading, and single CTA button
• Allows merchants to set image, text, and button link in the theme editor
• Is fully responsive and accessible

Build a hero banner with:

• MP4 or YouTube video background (autoplay, loop, muted)
• Overlay text and a CTA button
• Mobile fallback image
• Schema for video upload and overlay customization

Create a hero banner section that:

• Uses a parallax scrolling effect on the background image
• Includes heading, subheading, and CTA
• Allows merchants to adjust parallax speed

Generate a hero banner for Shopify that:

• Supports up to 3 customizable CTA buttons
• Lets merchants set unique button text and links for each
• Is fully responsive and accessible

Build a hero banner that:

• Features a real-time countdown timer for promotions or sales
• Merchants can set end date/time in the theme editor
• Includes heading, subheading, and CTA

Create a hero banner with:

• Animated text or CTA entrance (fade, slide, zoom)
• Optional animated background (GIF, video, or CSS animation)
• Merchants can control animation speed and style

Generate a hero banner with interactive hotspots that:

• Let users click or hover to see product info, quick links, or pricing
• Each hotspot is configurable in the theme editor
• Works on desktop and mobile

Create a hero banner that:

• Showcases a curated outfit or product set
• Lets users click items to view details or add to cart
• Includes a CTA for buying the whole look

Build a hero banner where:

• Customers can toggle between tabs to view different product variations, models, or colors
• Each tab updates the banner image/video and text
• Tabs are customizable in the theme editor

Create a hero banner section that:

• Includes a space for a short brand story or mission statement
• Features a background image or video, heading, and CTA
• Merchants can edit all text and media in the theme editor

Generate a hero banner with:

• An optional semi-transparent mask or gradient overlay on the image/video
• Merchants can adjust overlay color and opacity
• Includes heading, subheading, and CTA

Build a hero banner that:

• Displays a customizable badge (e.g., "Flash Sale", "New Arrival")
• Badge position and color are editable in theme settings
• Includes main heading, subheading, and CTA

Create a hero banner section that:

• Shows a testimonial, review snippet, or trust badge overlay
• Merchants can edit testimonial text and author
• Includes heading, subheading, and CTA

Generate a hero banner that:

• Uses a customizable CSS gradient as the background
• Includes heading, subheading, and CTA
• Merchants can set gradient colors in the theme editor

Build a hero banner that:

• Features a carousel of product images or featured products
• Includes heading, subheading, and CTA for each slide
• Merchants can add/remove slides in the theme editor

Create a hero banner with:

• An animated background (e.g., moving shapes, waves, or particles)
• Static overlay text and CTA
• Merchants can adjust animation style and speed

Generate a hero banner where:

• Heading and subheading font sizes adjust dynamically for mobile, tablet, and desktop
• Merchants can set font family and weight in the theme editor

Build a hero banner that:

• Ensures all text has sufficient contrast over background
• Includes ARIA labels and roles for all interactive elements
• Is fully navigable by keyboard

Create a hero banner section that:

• Changes background, overlay, or accent colors based on the current season or holiday
• Merchants can pre-schedule seasonal styles in the theme editor

Generate a hero banner that:

• Displays text and CTA in the customer's selected language
• Pulls translations from metafields or Shopify Markets
• Includes fallback content if translation is missing

Add an "Accessibility Statement" link to the hero banner, editable in the theme editor, ensuring compliance and easy access for all users.

Create a hero banner section that:

• Lets merchants choose layout (text left, center, or right; CTA above or below text)
• All layout options are selectable in the theme editor