> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

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

> **TIP**: :title=View the code

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}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=11 :player=cld} | 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}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=26 :player=cld} | 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}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=35 :player=cld} | 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}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=17 :player=cld} | You can select multiple assets in the Media Library and add a tag to them all. 

### Enable resource lists
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=26 :player=cld} | 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}|  | 
| --- | --- | 
|{videotime:id=media :min=1 :sec=34 :player=cld} | Use the `render` method to display the Product Gallery.

### Customize the Product Gallery
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=46 :player=cld} | 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
    Embed a Product Gallery in your Web or WordPress site 
  

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

  
  
  
    Upload Assets in React
    Upload assets using the Upload widget in a React app 
  

&nbsp;

&nbsp;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.
&nbsp;