Skip to content

Product media slideshow ​

This guide describes setting up the Product media slideshow section.

Use the section to display media associated with a product on a Product page, arranged in a slideshow layout.


The section does not change to current media dynamically or display product models.

​An example Product media slideshow section on a store's Product page.

​The previous image shows a Product media slideshow section on a store's (default) Product page. In the upper left, part of the Theme editor section menu is displayed. In the menu, the checkbox option to Hide featured media is set to off. This checkbox setting shows a product's featured media as part of the section's slideshow.

For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.

Set up a Product media slideshow section ​

To set up a Product media slideshow section:

  1. Go to Customize theme.

    At the top of the page, use the dropdown to select a template that contains a Product media slideshow section. For example, select the Products > Default product page template.


    The section is available only on the Products > Default product and Products > Quick view page templates.

  2. From the side menu, select Product media slideshow.

    The Product media slideshow section selected in Theme editor.

  3. Select a setting described in the following table.

Setting nameDescription
Hide featured mediaSelect the checkbox Hide featured media to show/hide a product's featured media inside the section.
Layout > Section heightUse the Section height dropdown to set a height for the section. The options are: 60% screen height, 80% screen height, Full screen (height) or Adaptive full screen. The Adaptive full screen option accounts for the size of the Header and Hero sections to calculate the height of the section.
Layout > Max width of slides on desktopAdjust the slider Max width of slides on desktop to set a maximum width for slides inside the section. This setting applies to desktop display devices. The default is set to 80% (percent) of the screen's width, and the slider ranges from 20% to 100%.
Media > Enable image zoomSelect the checkbox Enable image zoom to show/hide a media panel. The panel opens when a slide is selected inside the section. The panel provides zoom in/out for images.
Media > Video modeSelect the Mode radio buttons to set a mode for the section's video to Preview or Autoplay. Preview mode plays a few seconds of the video. Autoplay mode plays the entire video automatically. Autoplay does not not play the video's sound or show playback controls during automatic playback. Autoplay does not support videos hosted on YouTube or Vimeo.
Media > Video playbackSelect the Playback radio buttons to set a video playback mode for the section's video player to Inline or Modal. This setting does not apply if Mode is set to Autoplay.
Controls > Show current index and total slidesSelect the checkbox Show current index and total slides to show/hide pagination for the section's slideshow. Enable this setting to display the index number of the current slideshow item, and the total number of items in the section's slideshow.
Autoplay > Auto-rotate slidesSelect the Auto-rotate slides checkbox to turn on/off automatic slideshow mode. With this option set to on the series of slides in the slideshow are progressed automatically.
Autoplay > Change slides everyAdjust the Change slides every slider to set a time for transitioning to the next/previous slide automatically. The slider ranges from 3s to 9s (seconds).
Color > Color schemeUse the Change dropdown to set the section's color scheme to Scheme 1 or Scheme 2. Select Edit to configure the current color scheme. Refer to Colors.
Color > Theme settings (link)Follow the Theme settings link to access the Theme settings > Colors menu in Theme editor. Use the Colors menu to set how colors are displayed throughout your store.
Theme settingsSelect Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSSSelect Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.
Remove sectionSelect Remove section to delete the section from the current page.