Elevate your store’s storytelling with Athora - Premium Shopify theme. Move at the speed of modern retail! Try Theme Free →  

Header background

Hero Image

Mie Tran

Written by Mie Tran

Last updated

3 views

On this page


The Hero Image section displays a large banner image with customizable content and layout options.

hero image.png

1. Content Blocks

Available blocks:

  • Heading – Add a title or headline.

  • Text – Add descriptive content.

  • Button – Add a call-to-action button.

  • Button Group – Display multiple buttons together.

  • Countdown – Add a countdown timer.

  • Spacer – Create spacing between elements.

  • Custom – Add custom content.

  • Custom Button – Add a customizable button.

  • Custom Text – Add custom text content.

2. Option config Hero Image section

2.1. Image Settings

  • Image – Upload the desktop image.

  • Image Mobile – Upload a separate image for mobile devices.

  • Link URL – Make the entire image clickable.

  • Open in New Tab – Open the link in a new browser tab.

  • Image Height – Configure the image height.

  • Min Height – Set the minimum desktop height.

  • Mobile Image Height – Configure the image height on mobile devices.

  • Mobile Min Height – Set the minimum mobile height.

  • Animation – Apply an animation effect to the image.

2.2. Content Position

Desktop

  • Content Position Type – Choose between Container and Custom positioning.

  • Content Position – Set the content location within the image.

  • Text Alignment – Align content left, center, or right.

Mobile

  • Content Position – Set the content location on mobile devices.

  • Text Alignment – Align content left, center, or right.

2.3. Overlay Settings

  • Overlay – Enable or disable the overlay layer.

  • Overlay Color – Select the overlay color.

  • Overlay Opacity – Adjust the overlay transparency.

2.4. Layout Settings

  • Display Colors by Section – Enable custom colors for this section.

  • Color Scheme – Select a predefined color scheme.

  • Background Opacity – Adjust the background transparency.

  • Width – Choose the section width.

  • Background Image – Upload a background image.

2.5. Section Spacing

  • Margin – Set the outer spacing around the section.

  • Margin (Mobile) – Set the outer spacing on mobile devices.

  • Padding – Set the inner spacing inside the section.

Note: Margin and Padding values use the following format: Top, Right, Bottom, Left

Leave a value blank if you do not want to apply spacing to that side.

🎁 Exclusive Deals for The4 Customers

EComposer

🎉 EComposer – Free 6-Month Plan

Build landing pages, sales funnels, and more with drag & drop.
The4 users get 6 months free (save $150) on Standard plan.

  • ✅ 400+ templates ready to use
  • ✅ AI powered page building toolkits
  • ✅ Build any Shopify page
  • ✅ No coding required
🔓 Get 6 Months Free
SectionAI

🤖 EcomRise: Upsell & Bundles

Boost sales effortlessly with product bundles, upsell and cross-sell, buy X get Y, volume discounts

  • ✅ Easy upsell & cross-sell
  • ✅ Works with the latest themes
  • ✅ Trusted by 10k customers
🚀 Get 6 Months Free

Enjoy a free 3-day trial. Then get your first month for $1. Try Now

We uses cookies to ensure you get the best experience on our website.