Salesforce Commerce Cloud Page Designer Cartridge

Overview

Salesforce Commerce Cloud (formerly Demandware) is one of the industry's most agile and scalable e-commerce platforms. Cloudinary offers a certified Salesforce Commerce Cloud (SFCC) Page Designer cartridge that enables you to embed images and videos from your Cloudinary account into pages created with Page Designer. The Cloudinary image and video components allow you to transform, optimize, and deliver your images and videos to meet the performance and design needs of your website.

Overview of the Page Designer and Cloudinary components

Installation

You can download the cartridge from GitHub. Installation and basic usage instructions are provided in the Cloudinary Page Designer Guide.

Page Designer video tutorial

This video demonstrates how to embed Cloudinary images and videos into your Page Designer layout, how to add branding overlays and how to customize the video player.

Commonly-used Media Library features

The SFCC Page Designer Cartridge embeds a compact version of the Cloudinary Media Library within each image and video component. You can access almost all of the same functionality as is available in the full Media Library in your account console. The Media Library opens when you click Choose Image or Choose Video in the Cloudinary Image or Video Component panel, or by clicking the folder icon if you have already selected your image or video, as shown here:

Accessing the Media library from the image/video component

Advanced search

The advanced search lets you search by things like tags, metadata, format, orientation, resolution, or (if supported for your account), even by image analysis characteristics, such as prominent colors, presence of faces, or image location.

Media library advanced search

For more details, see Advanced search in the Digital Asset Management guide.

Collections

Collections are ad-hoc groupings of images. Images can be added to and from collections without affecting or moving the image itself, and images can be included in multiple collections. You can create your own collections (assuming you have the required permissions) or other Cloudinary users can share collections with you.

Collections can often be a convenient way to group all images that you might want to use on a particular project or campaign. You can access collections from the Navigation button at the top left of the Media Library.

Media Library collections

For more details, see Collection management in the Digital Asset Management guide.

Tagging and metadata

Assets that have tags and other metadata enable all Media Library users to better organize and search for assets in the Media Library.

In addition to the option to specify tags when you upload an image, you can also add or edit tags and other metadata after images are uploaded via the embedded Media Library, and even set the same tags or metadata on multiple images at once.

You can view and set this data using the Asset toolbar or in the Asset management page.

Asset toolbar

You can set tags and metadata for several selected assets at once from the main Media Library view using the Tag or Edit Metadata options in the asset toolbar. The type of metadata available for editing (contextual or structured) depends on the settings for your organization's account.

Media library asset toolbar

Asset management page

You can view or edit tags and metadata as well as view embedded image metadata for a specific asset from the Summary and Metadata tabs of the Asset management page.

To open the Asset management page either click on the asset or select Manage from the asset's context (right-click) menu.

Media library asset management

Tip
From the Asset management page, for images you can also select to insert a pre-defined transformation of the original asset (a 'Transformation Preset'), view or activate a variety of image analysis options in the Analysis tab, and more. For details, see Asset management drill-down in the Digital Asset Management Guide.

Media editor

The media editor is only applicable to images and is accessible from the Asset management page, by clicking the Edit Image button.

Image asset management

In the media editor you can crop and resize your image to suit your design. If you save the modified image, your current asset will be overwritten. You can retrieve the original if you have backups enabled. Otherwise, you may prefer to download the modified image and upload it as a new asset.

Media library media editor

Transformation editor

The transformation editor is accessible from the Asset management page, by clicking the Transform button.

Image asset management

In the transformation editor you can apply and preview various transformations, then click Insert to return to the Page Designer that will show your transformed asset. Unlike when using the media editor, your original asset remains unmodified.

Media library transformation editor

For more details, see Asset and transformation editing in the Digital Asset Management guide.

✔️ Feedback sent!