# 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.

A Hero slideshow section on a store's homepage in Theme editor.

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

  • On the left, the Hero slideshow section menu is displayed.
  • In the menu, to reduce the section’s width the Slideshow style option is set to Inset.
  • The checkbox option is enabled to Display text overlay on cards.
  • The Content position and Text alignment for the text overlay are set using the corresponding dropdown controls.
  • On the right, the section is displayed at the top of the store’s homepage.
  • Note the arrow icons for moving to the next/ previous slide in the slideshow.

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.