> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# 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!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.### Configure your product environment details
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=00 :player=cld} | Having [installed the cartridge](sfcc_page_designer_setup_and_configuration), 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](product_environment_settings#api_keys) page of the Console Settings.|

> **NOTE**:
>
> You can no longer access your full credentials directly from the Dashboard. Find your **Cloud name** on the Dashboard, and all credentials, including **API Key**, **API Secret**, and **API environment variable**, on the [API Keys](https://console.cloudinary.com/app/settings/api-keys) page of the Cloudinary Console Settings.

### Configure your media delivery preferences
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=50 :player=cld} | Set your preferences for image and video delivery, for example format, quality, bitrate etc.|

### Embed a Cloudinary Image Component
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=19 :player=cld} | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=58 :player=cld} | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=6 :sec=11 :player=cld} | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=6 :sec=40 :player=cld} | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=8 :sec=28 :player=cld} | See how your images and videos look on the page. |

### Custom integrations of Cloudinary's components
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=9 :sec=11 :player=cld} | You can also integrate Cloudinary components into your own [custom attribute editor](integrating_cloudinary_components_into_your_custom_attribute_editor) if you are developing your own Page Designer components. |

## Keep learning

> **READING**:
>
> * Learn more in the [Salesforce Commerce Cloud Page Designer Cartridge](salesforce_page_designer_cartridge_integration) documentation.

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

  
  
  
    SFCC B2C Commerce Cartridge
    Introduction to the SFCC B2C Commerce Cartridge 
  

  
  
  
    SAP Commerce Extension
    Create rich media experiences on your storefront 
  

  
  
  
    SFMC App - Image Block
    Learn how to use the Salesforce Marketing Cloud app 
  

 

 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.