SFCC Page Designer cartridge (video tutorial)

Overview

Watch this tutorial to learn about Cloudinary's Salesforce Commerce Cloud Page Designer cartridge that provides image and video components to embed media into your page.

Video tutorial

Tutorial contents

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

Configure your product environment details

1:00	Having installed the cartridge, you can configure your preferences in Merchant Tools > Custom Preferences > CloudinaryPageDesigner. Set your cloud name, API key and API secret - details can be found in your Cloudinary Console Dashboard.

Configure your media delivery preferences

1:50	Set your preferences for image and video delivery, for example format, quality, bitrate etc.

Embed a Cloudinary Image Component

2:19	Drag a Cloudinary Image Component into page designer, to display an image on your page. You can choose the image from your Media Library.

Configure the Cloudinary Image Component

2:58	You can add alt text to the image, set how a placeholder image will look when the page is loading, add image or text overlays, apply Cloudinary transformations to the image and link the image to a page in your Salesforce store.

Embed a Cloudinary Video Component

6:11	Drag a Cloudinary Video Component into page designer, to display a video on your page. You can choose the video from your Media Library.

Configure the Cloudinary Video Component

6:40	You can set a default for the poster image, specify how you want the video to play, add image or text overlays, customize the video player and apply Cloudinary transformations to the video.

View a preview of your page

8:28	See how your images and videos look on the page.

Custom integrations of Cloudinary's components

9:11	You can also integrate Cloudinary components into your own custom attribute editor if you are developing your own Page Designer components.

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.