Quickly Build Product Galleries for eCommerce Sites

Publikováno: 15.4.2019

When making online purchases, most shoppers make their purchasing decisions based on the use of rich-media. Being able to view the product from different angles is known to increase conversions. In fact according to Forbes, “64% of customers are more likely to buy a product online after watching a video about it.”

If you’re building an eCommerce store but would like to avoid the painstaking task of customizing it, the Cloudinary Product Gallery is your answer.

This easy-to-implement widget can be embedded in any web page, making it quick and simple to provide an interactive, and responsive browsing experience, optimized for any screen out of the box.

This post guides you through the simple process of creating a customizable and responsive product gallery with Cloudinary.

Note: The Cloudinary Product Gallery includes 360 spin sets, 3D models, and video, which are not covered in this post.

Preliminary Steps

First, create a free Cloudinary account and log in.

Next, enable the Product Gallery to dynamically fetch images in your app from Cloudinary by editing your cloud settings: Click the Security tab at the top of Settings. On the page that is displayed, deselect Resource list under Restricted image types. See the screenshot below.

The Resource List Setting Under Restricted Image Types

The example app in this post already contains images that have been uploaded to the Cloudinary Media Library. For details on how to dynamically upload images to that library, see this article.

Creation of Product Gallery

To create a product gallery, perform the steps below.

Start With an HTML File Create an HTML file by typing on the command line the following:

    touch index.html

Add the Cloudinary JavaScript Add to the index.html file this JavaScript code to enable the capabilities in the product gallery:

    <!-- index.html -->
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Cloudy Commerce</title>
    </head>
    <body>
          <script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript"></script>
    </body>
    </html>

Add a Simple Element to the Gallery Now add a banner to display featured deals, as follows:

    <!--index.html -->

    <!-- -->
    <body>
      <!-- nav bar -->
      <div class="main-carousel">
          <div id="main-gallery"></div>
      </div
      <script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript"></script>
    </body>

Initialize the Product Gallery Initialize the product gallery as follows:

    <!--index.html -->
    <!-- -->
    <body>
      <!-- nav bar -->
      <div class="main-carousel">
          <div id="main-gallery"></div>
      </div
      <script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript"></script>
        <script>
            const prodGallery = cloudinary.galleryWidget({
                container: "#main-gallery",
                cloudName: "CLOUDINARY_CLOUD_NAME",
                mediaAssets: [{ tag: "banner" }],
                carouselStyle: "none",
                carouselOffset: 0,
                navigationButtonProps: { shape: 'square' },
                zoom: false
            });

            prodGallery.render(); // render the product gallery
      </script>
    </body>

Replace the variable CLOUDINARY_CLOUD_NAME with your cloud name, which is specified in your Cloudinary Console.

The above snippet defines the following:

container: The location in which to display the gallery.
cloudName: Your Cloudinary cloud name
mediaAssets: The way in which your media assets are identified. You can specify their tags or public IDs (publicId). More details later.
carouselStyle: The style of your carousel, for example, thumbnails , indicators, or none.
carouselOffset: The space between the container the gallery is rendered and the carousel thumbnails, that is, the padding.
navigationButtonProps: The shape of the navigation arrows in the carousel.
zoom: The property, false or true, specifies if you desire a zooming capability for the image.

For details on the Cloudinary Product Gallery, see the documentation.

Now reload your store, which would look like this:

Product Gallery as the Banner for an eCommerce Store

Animated GIF of Product Gallery as a Banner for an eCommerce Store

Addition of Galleries

You can easily customize the Cloudinary Product Gallery, which offers an extensive array of options for an outstanding shopping experience. This section describes how to add sub-galleries.

Applying Transformations to the Media Assets in the Gallery To transform your media assets, update the index.html file to read like this:

    <!-- index.html -->

    <!-- -->
    <body>
        <!-- nav bar -->

        <div class="main-carousel">
            <div id="main-gallery"></div>
        </div>

        <div class="container">
            <h2 style="margin-top: 20px">New Products</h2>
            <div class="row">
                <div class="col-md-4">
                    <div id="sub-gallery1"></div>
                    <div class="price_info">
                        <h4>Headphones: $100</h4>
                    </div>
                </div>
                <div class="col-md-4">
                    <div id="sub-gallery2"></div>
                    <div class="price_info">
                        <h4>Laptop: $2,000</h4>
                    </div>
                </div>
                <div class="col-md-4">
                    <div id="sub-gallery3"></div>
                    <div class="price_info">
                        <h4>Xbox Controller: $60</h4>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript"></script>
        <script>
            // prodGallery initalization

            const subGallery1 = cloudinary.galleryWidget({
                container: "#sub-gallery1",
                cloudName: "CLOUDINARY_CLOUD_NAME",
                mediaAssets: [{ tag: "headphones" }],
                carouselStyle: "none",
                carouselOffset: 0,
                transformation: {
                    overlay: {
                        text: 'SALE',
                        font_family: 'Arial',
                        font_size: 100,
                        font_weight: 'bold',
                        font_style: 'italic',
                        letter_spacing: 2,
                        text_decoration: 'underline',
                        font_hinting: 'full'
                    },
                    color: "#fff",
                    x: 0,
                    y: -300,
                },
                zoom: false
            });

            subGallery1.render();
            // render other galleries
        </script>
    </body>

    </html>

This sub-gallery transforms the media rendered in the library, as defined in the overlay parameters. Your store now looks like this:

Multiple Subgalleries With Transformations

Animated GIFs of Subgalleries With Transformations

Uploads of Media Assets

Seamless uploads of media assets is just as important as their display. You can dynamically upload and add tags to them with Cloudinary. For the procedure, see this section in the documentation.

Conclusion

You have now learned how to define and customize the Cloudinary Product Gallery for a eCommerce store. The complete source code resides in the CodePen demo. An upcoming article will show you how to find out how users interact with your galleries by integrating them with Google Tag Manager. Do stay tuned.