SFCC Page Designer cartridge (video tutorial)

On this page:

• Overview
• Video tutorial
• Tutorial contents
  • Configure your product environment details
  • Configure your media delivery preferences
  • Embed a Cloudinary Image Component
  • Configure the Cloudinary Image Component
  • Embed a Cloudinary Video Component
  • Configure the Cloudinary Video Component
  • View a preview of your page
  • Custom integrations of Cloudinary's components
• Keep learning

Rate this page:

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

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.

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 the API Keys page of the Console Settings.

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.