Cloudinary Blog

Integrating Cloudinary Into Your Shopify Store

Integrating Cloudinary Into Your Shopify Store

Of late, we’ve seen an increasing number of Cloudinary customers on Shopify and Shopify Plus. Since we first wrote about using Cloudinary with Shopify a while ago, both Shopify and Cloudinary have evolved to better support customers through advancements in our platforms. This post highlights three important areas in which you can integrate Cloudinary’s latest technology and tools with Shopify to accomplish the following tasks:

  • Better manage rich media assets for your products.
  • Create lightning-fast e-commerce stores along with a superior visual buying experience.

Optimization Over and Above What’s Available on Shopify

Page-load times, largely decided by the size of the images and videos on a page, influence conversion rates. Optimization is the science and art behind reducing file size and retaining quality to deliver a satisfactory experience to your customers. Even though Shopify optimizes the image format based on the viewer’s browser (for example, WebP for Chrome), your results with Cloudinary are far better.

Why? Because Cloudinary uses advanced techniques to reduce image sizes while maintaining visual quality. For example, Cloudinary determines the encoding quality and image format according to the content of the source image. For details, see the related documentation.


5 Visual Engagement Tactics That Convert Online Buyers


We recently analyzed Cloudinary’s image optimization for this product image on Desmond and Dempsey, a Shopify Plus customer. Cloudinary could further reduce the size of that image by 30 percent. Picture the positive effect in case of multiple images on a page! Those of you who are curious can examine your Shopify site to pinpoint the potential benefits by using Cloudinary’s website speed test.

Website speed test

As for video, recent studies have shown that consumers are increasingly relying on online videos to browse around, learn about products, and make purchase decisions. Given that the online audience watches over 50 percent of videos on mobile devices, highly optimized product and marketing videos are paramount.

In a welcome move, Shopify recently announced support for product videos. Similar to images, Cloudinary can do a much more superior job optimizing them, delivering two salient differences:

  • Support for optimized formats for different browsers and operating systems
  • Content-aware encoding, which, through advanced algorithms, generates the smallest-sized videos based on their content with no visual-quality loss. See a comparison below of a video downloaded from Shopify's demo store on the left and the same video optimized by Cloudinary on the right. The optimization potential is immense!

quality

Hence, unsurprisingly, many Shopify merchants are Cloudinary customers.

Better Storytelling With Cloudinary’s Product Gallery

The Product Detail Page (PDP) is where the action is on e-commerce sites. On a PDP, customers expect to feel and experience all aspects of the product, which many brands highlight by means of videos, 360 views, 3D objects in a product gallery. Realistically showcasing products minimizes customer disappointment, hence reduced return rates and losses. However, PDPs must load fast and must be consistent for all products. Plus, the experience must vary according to customer taste and competition. Toward that end, Cloudinary created the Product Gallery, which enables brands, such as its customer Guess.com, to create stunning PDPs.

You can now do the same for your Shopify site. The benefits are many:

  • Support for videos, 360 views, and 3D objects
  • Responsive design, which works great on mobile devices
  • Fully customizable behavior, UI, and colors
  • All of Cloudinary’s optimization features out of the box

Shopify Demo

For an example of the full experience, visit our Shopify demo site.

To learn how to integrate the Cloudinary Product Gallery into your Shopify site, see this post.

Media Management at Scale

As your product catalog’s size increases, so does the amount of media you must manage. For a Shopify Plus store with 2,000 products, if each product requires five images or videos for the gallery, you must manage 10,000 media assets at any given time. That’s a tedious job if performed in the Shopify store-management UI.

Managing a multitude of media assets and their workflows (upload, review, attach media to products) requires a robust Digital Asset Management (DAM) system. Cloudinary DAM enables you to do the following with ease:

  • Use tags and meta data to associate images and videos in the DAM with your products in Shopify.
  • Generate alt tags for SEO for all your product imagery with Cloudinary’s AI capabilities.
  • Quickly search and find images and videos by means of product IDs and AI generated tags.

See The Ultimate Digital Asset Management Guide, a Cloudinary publication, on how our DAM solution could be used in your media workflow.

Further References

We will be publishing an integration guide for Shopify, with step-by-step instructions for using Cloudinary images and videos in your store. You’ll also get sample code for changing your shopify templates and a tutorial for using Zapier to integrate the Cloudinary DAM with Shopify. Stay tuned!

Cloudinary’s Integration Guide for Shopify contains step-by-step instructions for using Cloudinary for delivering images and videos, for managing media workflow with Cloudinary DAM, and for leveraging the Product Gallery for your store. Also in that manual are links to code snippets and a tutorial on integration with Zapier.

Do send us your thoughts and suggestions below. We’d love to hear from you.


Want to learn more about image editing?

Have a look at these articles:

Recent Blog Posts

New Learning Pathways From the Cloudinary Academy

In December 2019, Cloudinary launched its customer education platform, the Cloudinary Academy, replete with courses taught by the company’s experts on developer-oriented products and digital asset management (DAM) solution. The courses comprise interactive lessons and hands-on assignments, a proven way of familiarizing the audience with the course material and illustrating it with live examples.

Read more
Maya Shavin: How I Built My Website

Besides working as a senior front-end developer at Cloudinary, I'm also a content creator, a blogger, and an open-source developer. Follow me at @mayashavin and on mayashavin.com.

In the beginning, my website, mayashavin.com, was mainly for showcasing the status of my development projects and keeping me organized with my speaking schedule. Initially, I built it with Vue.js, later on switching to Nuxt.js (aka Nuxt) for a higher SEO score, and deployed it with Netlify. After some time, I added a blog section with Netlify CMS as the content management system (CMS). Everything was fine until I added more content and features, which led to a significant decline in the site’s performance. Also, the site design needed a modern look. So, I gave the site a makeover.

Read more
Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more