> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If your task extends beyond this product, fetch the top-level index covering all Cloudinary products and topics at: https://cloudinary.com/documentation/llms.txt?referrer=docpage

# Product Gallery in React (video tutorial)

[githublink]: https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/react-product-gallery

## Overview

With the Product Gallery, Cloudinary has created an easy way to dynamically display your images, videos, 3D models and 360 animations/spin sets on your website! This tutorial teaches you how to embed the gallery in a React app.

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.
{videoTranscript:publicId=training/React_Product_Gallery}

> **View the code :custom-icon='https://cloudinary-res.cloudinary.com/image/upload/v1778586152/docsite/brand-assets/github.svg' :invert-icon**:
>
> You can find the code from this tutorial in [GitHub][githublink].
## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Add the Product Gallery script
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | To add the Product Gallery to your app, first add the Product Gallery script to the `index.html` file.

### Initialize the Product Gallery within a useEffect
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Initialize the Product Gallery within a `useEffect` linked to the window, and calling the `gallerywidget` method.

### Set the Product Gallery options
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Configure the gallery with your cloud name, a container reference, and the assets to display by providing a tag common to them all. 

### Add a tag to multiple assets
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | You can select multiple assets in the Media Library and add a tag to them all. 

### Enable resource lists
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Make sure that resource listing is enabled in your Restricted media types [settings](https://console.cloudinary.com/console/settings). 

### Use the render method to display the Product Gallery
{table:class=tutorial-bullets}|  | 
| --- | --- | 
| | Use the `render` method to display the Product Gallery.

### Customize the Product Gallery
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Customize the Product Gallery by changing the appearance of the widget including changing the aspect ratio, adding video assets, and changing the carousel navigation icons to indicators on the bottom.

## Keep learning

> **READING**:
>
> * Learn more about the [Product Gallery](product_gallery).

> * Take a look at our [Transformations guide](image_transformations) to learn about transforming images in general.

> * Use the [Product Gallery reference](product_gallery_reference) to find all the options and parameters available for the Product Gallery.

> * See how the Product Gallery can improve [e-commerce workflows](ecommerce_workflows_product#deliver_product_assets_to_your_e_commerce_website).

> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

#### If you like this, you might also like...

[Product Gallery](product_gallery_tutorial)

Embed a Product Gallery in your Web or WordPress site

[Product Gallery Accessibility](product_gallery_accessibility_tutorial)

Provide keyboard controls, alt-text for screen readers, and more

[Upload Assets in React](upload_assets_in_react_tutorial)

Upload assets using the Upload widget in a React app

 

 Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.