# Hero slideshow

This guide describes setting up the Hero slideshow section.

The section displays a series of images, at the top of a store page (hero), overlaid with text.

The previous video shows a Hero slideshow section in Theme editor, with the following settings:

  • On the left, the Hero slideshow section menu is displayed.
  • On the right, the section is displayed at the top of the store’s homepage.
  • Note how the arrow icons move to the next/ previous slide in the slideshow.
  • The Hero slideshow contains two slides (blocks).
  • Each block’s button is configured to link to a store collection page.

For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks (opens new window)

# Set up a Hero slideshow section

To set up a Hero slideshow section:

  1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Hero slideshow section.

    Note

    The Hero slideshow section can be added into any page, except Checkout and Giftcard pages. To add a Hero slideshow section into the current page, select Add section > Hero slideshow. Refer to Shopify help: Add a section (opens new window)

  2. From the side menu, select Hero slideshow.

    The Hero slideshow section selected in the Theme editor side menu.
  3. Select a section setting described in the following table.

Section setting name Description
Slideshow style Select the Slideshow style radio buttons to set the section’s width to Inset or Full width.
Height Use the Height dropdown to set the section’s height. The options are:
  • Adapt to first slide
  • Screen height
  • Three quarters screen height
  • Two thirds screen height
  • Half screen height
  • 600px (pixels)
  • 700px
  • 800px
Display text overlay on cards Select the checkbox Display text overlay on cards to show/ hide a card behind the section’s text overlay area. Refer to Shopify help: Cards (opens new window)
Display content below image on mobile Select the checkbox Display content below image on mobile to display the slide’s overlay text below (on) or inside (off) the slide’s image area. This setting applies to mobile display devices.
Text overlay defaults > Content position Select the Content position dropdown to set a position for the text overlay area inside the section. The dropdown options are:
  • Top left
  • Top center
  • Top right
  • Middle left
  • Middle center
  • Middle right
  • Bottom left
  • Bottom center
  • Bottom right
Text overlay defaults > Text alignment Select the Text alignment dropdown to align text inside the text overlay area to the Left, Center, or Right.
Text overlay defaults > Heading size Select the Heading size radio buttons to set the heading to use the same text size as Base or Template text. This setting applies to the heading inside the text overlay area.
Color > Color scheme Use the Color scheme dropdown to set the color scheme for the section to Primary, Secondary, Tertiary, or Quaternary. Refer to Colors.
Color > Use gradient for background Select the checkbox Use gradient for background to turn on/ off using a gradient as the section’s background.
Theme settings Select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Remove section Select Remove section to delete the section from the current page.

# Configure a block within a hero slideshow section

A default Hero slideshow section contains two slides (blocks). To configure a block inside the section:

  1. Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a Hero slideshow section.

  2. From the side menu, expand the Hero slideshow section menu.

  3. To configure an existing block, select the block from the side menu.

    To add a new block, select Add block, choose a block to add, and then select the block you added.

    The Hero slideshow' add block menu in Theme editor.

    Note

    Inside a Hero slideshow section, you can add, remove, show/ hide, or move blocks. Refer to Configure blocks inside a section, and Shopify help: Sections and blocks (opens new window)

  4. Apply a block setting described in the Table: Hero slideshow blocks.

# Table: Hero slideshow blocks

The following table describes the blocks inside the Hero slideshow section, and their corresponding settings.

The blocks indicated with an asterisk * are contained in a default Hero slideshow section. To configure a block, refer to Configure a block within a Hero slideshow section.

Block name Block description Block setting(s)
Slide * Displays an image, within a series of images, overlaid with text.
  • Use the following Image selector options to set up an image inside the block.
    • To add an image, choose Select image, and then upload an image or select an image file from your store’s file library.
    • To replace an image, choose Change > Change image, and then select or upload a new image.
    • To remove an image, select Change > Remove image.
  • In the Title box, enter text to display as a title (heading) inside the block.

  • In the Text box, enter text to display as body text inside the block. Format the text or add a link using the Text editor pane.

  • In the Call to action > Link box, enter a URL for the block’s button to use or select a link to a store page. The button is displayed inside the block’s text overlay area. To remove a link, select the X icon inside the text box.

  • In the Call to action > Button text box, enter text to display as a label for the block’s button. The button is displayed inside the block’s text overlay area.

  • Use the dropdown Text overlay > Content position to set a position for the text overlay area inside the block. The dropdown options are: Follow section, Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, and Bottom right.

  • Use the dropdown Text overlay > Text alignment to set the alignment for text inside the text overlay area to: Follow section, Left, Center, or Right.

  • Use the dropdown Text overlay > Text overlay color to set a color for the text overlay area to Follow color scheme, Black or White.

  • Select Remove block to delete the block from the current section.
  • Sticker Overlays the section with a stylized sticker. Refer to Stickers.
    Shape divider Displays a stylized separator between the current section and the next/ previous section. Refer to Shape divider.