Hero slideshow
The section is managed through:
Customize Theme → Sections → Template → Hero slideshow
Introduction:
The Hero slideshow 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.
Make slides content full width: Allows the user to use the full width of the screen according to the text content (small gaps are left at both ends that cannot be absorbed). Note: It doesn't take effect if the content is in the center, according to Horizontal content alignment block setting.
Enable arrows: Gives the user the control to change the slides manually (if more than one block has been added).
Enable fade: Enables or disables the fade effect when changing the slides. At least 2 slides (blocks) needed.
Enable loop mode: A setting that enables a loop mode for the slides. It means that if the user goes to the last slide, the next slide will be the first one, which forms the continuous infinity loop.
Enable pagination: Enables or disables the pagination setting of the Hero slideshow. See the illustration below.
Enable autoplay: It enables or disables the setting for autoplaying the slideshow.
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.
Pagination position: That setting controls the position of the pagination. One of three possibilities is to be chosen: Left, Center or Right.
Media ratio on desktop: Gives control over the media ratio for the desktop version.
Media ratio on mobile: Gives control over the media ratio for the mobile version.
Color scheme: With that setting, the user can choose the color scheme of the Hero slideshow. For more information on setting up the color schemes, refer to Theme settings → Colors → Schemes.
Add block:
Wide slide:
Image on desktop*: Select an image for the slide on the desktop version.
Image on mobile*: Select an image for the slide on the mobile version.
Video on desktop*: Select a video for the slide on the desktop version.
Video on mobile*: Select a video for the slide on the mobile version.
* Note: If an image and video are both selected, the video will appear as a preferred media.
Color scheme: With that setting, the user can choose the color scheme of the block. For more information on setting up the color schemes, refer to Theme setting → Colors → Schemes.
Heading: Enter a heading for the slide.
Caption: Enter a caption for the slide.
Description: Enter a description for the slide.
Heading size: Gives control over the heading font size. One of three possibilities is to be chosen: Small, Medium or Large.
Horizontal content alignment: Gives control over the horizontal positioning of all the content. One of three possibilities is to be chosen: Left, Center or Right.
Vertical content alignment: Gives control over the vertical positioning of all the content. One of three possibilities is to be chosen: Top, Center or Bottom.
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.
Use outline button style: An additional setting to control the button presentation. The button becomes transparent, and a border in label color appears.
Two slide columns: This block gives the user the option to show 2 slides simultaneously. The settings are the same as the Wide slide block described above.
Last updated