Shopify app (video tutorial)

On this page:

• Overview
• Video tutorial
• Tutorial contents
  • Install the custom app
  • Connect to Cloudinary
  • Specify a folder in your Cloudinary Media Library
  • Upload media to the specified folder
  • Inspect the uploaded files
  • Keep Shopify as the source of product media
  • Make Cloudinary the source of product media
  • Modify theme templates to display media from Cloudinary
• Keep learning

Rate this page:

Overview

Watch this tutorial to learn about the Cloudinary app for Shopify to deliver fast loading, customizable, responsive media on your storefront.

Video tutorial

Video Player is loading.

Play Video

Play

Mute

Current Time 0:00

/

Duration -:-

Loaded: 0%

Stream Type LIVE

Seek to live, currently behind liveLIVE

Remaining Time -0:00

 

1x

Playback Rate

• 2x
• 1.5x
• 1.25x
• 1x, selected
• 0.5x

Descriptions

• descriptions off, selected

Captions

• captions off, selected

Audio Track

Fullscreen

This is a modal window.

The media could not be loaded, either because the server or network failed or because the format is not supported.

This video is brought to you by Cloudinary's video player - embed your own!

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Install the custom app

0:26	The official Cloudinary integration for Shopify is available as a Shopify custom app that can be installed in your Shopify store. Enabling the app for your store requires help from our support team.

Connect to Cloudinary

0:54	Once the app is installed, connect to your Cloudinary account. In Shopify, open the Cloudinary app from the Apps menu item and click Connect to Cloudinary to log into Cloudinary.

Specify a folder in your Cloudinary Media Library

1:18	In the Sync to Cloudinary section of the Settings page, enter the folder path in your Cloudinary Media Library to which you want to upload your media from Shopify. If the path doesn't exist in Cloudinary, it will be created when media is uploaded.

Upload media to the specified folder

1:40	Click Start Media Upload to start uploading your product images and videos from Shopify to the specified folder in your Cloudinary Media Library. This process may take some time.

Inspect the uploaded files

2:19	Once the media files have been uploaded, you can inspect them in your Cloudinary Media Library. Notice how they are stored in product-specific sub-folders.

Keep Shopify as the source of product media

2:41	You can continue to upload media to Shopify and resync to Cloudinary each time you add files.

Make Cloudinary the source of product media

3:09	Alternatively, you can make Cloudinary the source of product media, by storing all your assets in your Media Library, and adding them to Shopify via the Cloudinary Media Manager.

Modify theme templates to display media from Cloudinary

3:53	Implement code changes in your theme templates to display media from Cloudinary on your storefront. Use the Cloudinary snippets that are installed with the app. If you change themes, you can download the snippets into your latest theme. Find out more about integrating the snippets into the code in the user guide.

Keep learning

If you like this, you might also like...

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.