> ## 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. # Salesforce Commerce Cloud Page Designer Cartridge [rnIntegrationLink]: integrations_release_notes#salesforce_commerce_cloud_page_designer_cartridge_img_src_https_cloudinary_res_cloudinary_com_image_upload_w_28_q_auto_docsite_cms_sfcc_svg_title_salesforce_commerce_cloud_page_designer_width_25px ## 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 Cloudinary 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](https://res.cloudinary.com/demo/image/upload/bo_1px_solid_gray/f_auto/q_auto/docs/Salesforce/page_designer_overview_overlay.png "thumb: w_600,dpr_2, with_code:false, with_url:false, width: 600") > **TIP**: To see the latest updates, improvements and bug fixes, check out the Salesforce Commerce Cloud Page Designer Cartridge [release notes][rnIntegrationLink]. ## Installation and configuration Follow the installation and configuration steps on the [Setup and configuration](sfcc_page_designer_setup_and_configuration) page. ## Image and video components Cloudinary's SFCC Page Designer cartridge provides two components: * [Cloudinary Image Component](sfcc_page_designer_image_component) * [Cloudinary Video Component](sfcc_page_designer_video_component) > **INFO**: > > * Once you've published your page components, any changes you make to the global configuration are not applied to these components. You need to recreate your components for the configuration changes to take effect. This is a limitation of SFCC. > * If you first publish to your SFCC staging environment and promote that to production, ensure that any media links are set to your production URLs, as these cannot be changed between the staging and production environments. ## Page Designer cartridge 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. 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. | ## Integrating components into your custom attribute editor If you are developing your own Page Designer components, you may wish to combine the functionality provided by Cloudinary's image and video components with your own functionality. See [Integrating Cloudinary components into your custom attribute editor](integrating_cloudinary_components_into_your_custom_attribute_editor) for details. ## Cloudinary Professional Services configuration support The Salesforce Commerce Cloud Page Designer Cartridge {variable:platformLabel} falls under Cloudinary's [**Premium**](integrations#premium_integrations) Professional Services integrations. If you need assistance setting up this integration, you can purchase configuration support for it at an additional cost. **Learn more: [Cloudinary Professional Services packages](integrations#cloudinary_professional_services_packages)**