Hero

The section is managed through:

Customize Theme → Sections → Template → Hero

Introduction:

The Hero section of a Shopify store is the first thing visitors see when they land on the homepage. It's a prime opportunity to make a bold impression, showcase products or promotions, and captivate the audience from the moment they arrive. In this section, we'll explore the various settings and customization options available for the hero section, empowering merchants to create stunning and impactful visuals that effectively communicate the brand's message and offerings.

Settings Overview:

The Settings Overview offers a comprehensive examination of all customization options available within the Hero slideshow section, enabling the creation of a captivating and visually appealing hero section that resonates with the target audience.

• Minimum height - Desktop: Gives control over the height for the desktop version. One of three possibilities is to be chosen: Small, Medium or Large.

• Minimum height - Mobile: Gives control over the height for the mobile version. One of three possibilities is to be chosen: Small, Medium or Large.

• Auto-rotate slides: A setting that enables auto-rotating of the predefined slides, which forms an infinity loop. Note: Auto-rotate slides setting would take effect if ONLY two or more slides has been added.

• Progress timer: With that setting, the user can enable or disable a timer that counts the remaining time for slide rotation to the next slide. See the illustration below. Note: The Progress timer would take effect if ONLY Auto-rotate slides setting is enabled.

  
• Change slides every: Give the user the control to modify the interval in seconds for every slide to stand on the screen. It can vary from 3 to 10 seconds.

Add slide:

When two or more slides have been added, a pagination setting will appear on the bottom so the client can manually select which slide is active. See the illustration below.

• Color scheme: With that setting, the user can choose the color scheme of the section. For more information on setting up the color schemes, refer to Theme settings → Colors → Schemes.

• Content alignment: Gives control over the horizontal positioning of all the content. One of three possibilities is to be chosen: Left, Center or Right.

• Overlay opacity: A setting that allows the user to control the overlay opacity. It can vary from 0% to 100% rounded to 10 (0%, 10%, 20%, etc.). When 0% is set, overlay is disabled; when 100% is set, the entire slide will become the color preset as a background in the color scheme even if an image has been selected.

• Media 1*/ Media 2*:

  • Image: Select an image to present.

  • Video: Select a video to present.

  • * Note: If an image and video are both selected, the video will appear as a preferred media.

• *Note: If only one media has been used, the visualization of the media would be standard. If both of the images have been selected, the slide will be split into two with both media illustrated.

  
• Subheading: Enter a subheading for the slide.

• Heading: Enter a heading for the slide.

• Heading size: Gives control over the heading font size. One of three possibilities is to be chosen: Small, Medium or Large.

• Button label: Enter a label for the button.

• Button link: With that setting, the user can choose one of the store links or enter an external link for the button.