React Storefront


import AmpImageSwitcher from 'react-storefront/amp/AmpImageSwitcher'

An AMP-compatible image switcher with pinch and zoom.

This component relied on a special route to be implemented.

The /images/{}/{} handler should return data for the AMP image switcher to update for a selected variant.

The data should follow this schema:

 images: [url],
 thumbnails: [url],
 thumbnail: url,
 selectedImage: 0

This is commonly used to provide different thumbnails for different product colors.

An example of this handler is provided in the react-storefront-boilerplate commercial branch in /src/product/images-handler.js.


typeenum : 'slides' |

The amp-carousel type. Can be "slides" or "carousel". Defaults to "slides".


Set to true to display dots indicated which image in the series is selected. Defaults to false


The property in the amp state to bind to. Defaults to "selectedImage"


Set to true to display left and right arrows. Defaults to false


You can override all the class names injected by Moov-PWA thanks to the classes property. This property accepts the following keys:

  • root
  • rootImportant
  • carouselWrap
  • thumbnails
  • thumbnailsWrap
  • thumbnail
  • thumbnailSelected
  • thumbnailSelectedLine
  • dot
  • dots
  • dotSelected
  • hidden
  • @global