Product Customization With Cloudinary

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.

1. Sign up for free at Cloudinary.
   
   Afterwards, take a few moments to familiarize yourself with Cloudinary’s intuitive dashboard. Copy and save the cloud_name, api_key, and api_secret variables for use in a later step.
2. Install and configure an SDK, say, the one for Python:
   1. Type this terminal command
      pip install cloudinary
   2. Set the global configurations:

cloudinary.config( 
  cloud_name = "sample", 
  api_key = "874837483274837", 
  api_secret = "a676b67565c6767a6767d6767f676fe1",
  secure = true
)Code language: JavaScript (javascript)

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.

cloudinary.uploader.upload("/home/shirt.png", 
  folder = "myfolder/mysubfolder/", 
  public_id = "my_name",
  tags = ["shirt"]) Code language: JavaScript (javascript)

Your asset 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:

cloudinary.uploader.upload("gs://my_samples/sample.jpg")Code language: JavaScript (javascript)

For S3, type:

cloudinary.uploader.upload("s3://my-bucket/my-path/example.jpg")Code language: JavaScript (javascript)

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:

CloudinaryImage("sample_woman.png").image(transformation=[
   {'border': "3px_solid_black", 'radius': 20},
  {'overlay': "business_icon"},
   ])Code language: JavaScript (javascript)

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:

<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript">  
</script>Code language: HTML, XML (xml)

3. Go to the merchandise page on which to render the Product Gallery widget and assign it a special ID, e.g., my-gallery:

<div id="my-gallery" style="max-width:80%">
</div>Code language: HTML, XML (xml)

Next, initialize the Product Gallery widget by editing the JavaScript file that accompanied the installation. That file initiates the Cloudinary class and grants you access to the cloudinary.galleryWidget (options) method, which then creates an instance in the memory. 

Specify these three parameters in the JavaScript file:

• 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 shirt tag:

const myGallery = cloudinary.galleryWidget({ 
  container: "#my-gallery", 
  cloudName: "demo", 
  mediaAssets: [{ tag: "shirt" }]    // by default mediaType: "image"
});Code language: JavaScript (javascript)

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.

var myGallery= cloudinary.galleryWidget({
  container: "#my-gallery",
  cloudName: "demo",
  displayProps: {
    mode: "expanded",
    topOffset: 70 // to account for the menu element at the top of this documentation page
  },
  aspectRatio: "4:3", // most of the assets are in landscape orientation
  mediaAssets: [
    {tag: "shirt"}, // by default mediaType: "image"
    {tag: "shirt", mediaType: "video"}, 
    {tag: "shirt", mediaType: "spin"}
  ]
});
myGallery.render();Code language: JavaScript (javascript)

Add a carousel that displays the number of assets with the code below, which leverages a thumbnail method:

var myGallery = cloudinary.galleryWidget({ 
  container: "#my-gallery", 
  cloudName: "demo", 
  carouselStyle: "thumbnails",   // default value: included for clarity
  thumbnailProps: { width: 75, height: 75, spacing: 4, navigationColor: "green"},
  mediaAssets: [{ tag: "shirt" }] });
myGallery.render();Code language: JavaScript (javascript)

To track visitor behavior for analytical purposes, initialize the `myGallery` widget to record where your visitors click, like this:

myGallery.on('mouseenter', (data) => {
  console.log('MouseEnter', data);
});Code language: JavaScript (javascript)

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 mediaAltId parameter.
  • metadata, which uses the value of a structured metadata field for each asset, as specified by external_id, which is passed in the mediaAltId parameter.
  • 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:

var myGallery = cloudinary.galleryWidget({
  container: "#my-gallery",
  cloudName: "demo",
  mediaAssets: [{ tag: "shoes" }],
  accessibilityProps: {
    mediaAltSource: "metadata", 
    mediaAltId: "alt_id"
  }
});
myGallery.render();Code language: JavaScript (javascript)

Keep in mind these three tips:

• Specifying the fill cropping 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 delivery type method.
• 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!