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


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.

Configure your account details

Jump to this spot in the video  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 on your Cloudinary console dashboard.

Configure your media delivery preferences

Jump to this spot in the video  1:50 Set your preferences for image and video delivery, for example format, quality, bitrate etc.

Embed a Cloudinary Image Component

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  8:28 See how your images and videos look on the page.

Custom integrations of Cloudinary's components

Jump to this spot in the video  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

Related topics

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

SFCC Site Cartridge
Introduction to the Salesforce Commerce Cloud site cartridge
Cloudinary-Shopify Zap
Use Zapier to automatically upload images to Shopify
SFMC App
Learn how to use the Salesforce Marketing Cloud app

 

Cloudinary Academy

 

Check out 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.

 

✔️ Feedback sent!

Rate this page: