In today’s highly visual world, a key task of building websites is the addition of media, such as images and videos. You can do that in several effective ways, one of which is with Cloudinary’s capabilities for product customization.
By way of background, Cloudinary is a software-as-a-service (SaaS) platform through which you can efficiently and easily deliver media—images, text, audio, video—across devices and browsers. Additionally, by using Cloudinary’s API, you can customize, manage, and organize content—a task made flexible by the API’s many options. Also, a big help to developers are server- and client-side Cloudinary SDKs for Ruby on Rails, Python, Go, Node.js, JQuery, Vue.js, Android, Kotlin, and such.
This tutorial steps you through the procedure for integrating several product-customization features from Cloudinary into an e-commerce store.
- Sign up for free at Cloudinary.
Afterwards, take a few moments to familiarize yourself with Cloudinary’s intuitive dashboard. Copy and save the
api_secretvariables for use in a later step.
- Install and configure an SDK, say, the one for Python:
- Type this terminal command
pip install cloudinary
- Set the global configurations:
- Type this terminal command
Next, upload an image to the cloud. Say, you want to customize a T-shirt. You can do that with your own image of the T-shirt or with this one from Cloudinary’s sample app for product customization. Do the following:
1. Name the picture of the T-shirt
shirt.png, upload it to Cloudinary, and save it in your home directory with the code below.
shirt.png is now automatically available. Note the two parameters:
folder: Your e-commerce store must contain folders for your merchandise, e.g., shirts and cups. This parameter enables you to create folders for storing product images.
public_id: This parameter facilitates search engine optimization (SEO) for your delivery URL.
tags: This parameter categorizes the image, this will be used later by the product gallery widget.
2. Add your assets from secondary sources like Google Cloud and S3.
For Google Cloud, type:
For S3, type:
Repeat the above steps to add as many images as you desire.
Cloudinary offers several transformation options. For this tutorial, add a three-pixel-wide border in black and a transparent overlay-watermark, which prevents third-party downloads for security. Here’s the code:
First, perform these three steps:
1. Enable the list of client assets: on your console, click Settings > Security and, under Restricted media types, uncheck Resource list.
2. Add the
all.js file, which contains Cloudinary’s product-customization functions, with this code:
3. Go to the merchandise page on which to render the Product Gallery widget and assign it a special ID, e.g.,
<div id="my-gallery" style="max-width:80%"> </div>Code language: HTML, XML (xml)
cloudinary.galleryWidget (options) method, which then creates an instance in the memory.
- The cloud name of your Cloudinary account
container, which is an element on the page for the widget
mediaAsset, which contains all the media as an array of assets
Do the following:
1. Create a widget for all the images with the
2. Render the widget of the Product Gallery with
galleryWidget, which creates a widget but does not render it until the
render method is called:
<code>myGallery.render();</code>Code language: HTML, XML (xml)
Your setup is now complete. The subsections below describe the features you can add to your e-commerce store.
The code below sets up an Amazon-like display, complete with an expansion mode, a spin mechanism, and so forth.
Add a carousel that displays the number of assets with the code below, which leverages a thumbnail method:
To track visitor behavior for analytical purposes, initialize the `myGallery` widget to record where your visitors click, like this:
The accessibility-text feature helps with screen reading and enhances SEO.
Configure the text with the
AcessibilityProps object. By default, the Product Gallery throws the string
Gallery assets n of m. Optionally, you can make the gallery take the string from an asset’s contextual or structured metadata field.
AccessibilityProps takes two parameters:
mediaAltSource, which is the source of the text string for each of the media assets in the gallery. You can specify one of these three source values:
contextual, which uses the key-value pair of a contextual metadata field for each asset, as specified by the key passed in the
metadata, which uses the value of a structured metadata field for each asset, as specified by
external_id, which is passed in the
auto, which is the default that determines the order of the asset within the gallery according to the template
Gallery asset n of m.
mediaAltId, which sets the source value of
mediaAltSource, as described above.
Here’s a code sample:
Keep in mind these three tips:
- Specifying the
fillcropping mode and setting the correct aspect ratio can significantly improve the display quality of assets.
- The Product Gallery widget displays only those media assets that were uploaded to Cloudinary with the
- Be mindful of any required configurations when starting the Product Gallery widget.
Ready to scale your business? Build your next site with the expert help of Cloudinary. Besides those described in this tutorial, Cloudinary offers numerous features that help set e-commerce up for success. For details, see the platform’s comprehensive documentation and give our product customization sample app a try!