> ## 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.

# Setup and configuration


This page provides instructions for setting up and configuring the Cloudinary Page Designer cartridges.

## Installation

### Download the Cloudinary Page Designer cartridges

You can download the certified Page Designer cartridges from the [Cloudinary for Page Designer page](https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000G0yFEUAZ) on the SFCC AppExchange. You can also get the most recent release from Cloudinary's [GitHub repo](https://github.com/cloudinary/cloudinary_sfcc_pagedesigner/releases). 

### Install the cartridges on the sandbox

There are two cartridges to install:

* **int_cloudinary_pd** (the base cartridge)
* **bm_cloudinary_pd** (the Business Manager extension allowing access to your Cloudinary Media Library)

1. Open B2C Commerce UX Studio
1. Import both cartridges from the **Import** dialog.
1. Link the cartridges to the sandbox. Select the sandbox connection and then select **Properties**. Select **Project Reference** and check in.

### Assign the cartridges to relevant sites through the Business Manager

1. Log in to the Business Manager.
1. Go to **Administration > Sites > Manage Sites**. 
1. Select the **Business Manager** site.
1. Add **bm_cloudinary_pd** to the cartridge path as shown:
    ![Business manager add BM cartridge](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742480970/docs/SFCC/sfcc_pd_business_manager_settings.png "thumb:c_scale,w_600/dpr_2.0, width: 600, popup:true")
1. Apply the changes.
1. Navigate back to **Manage Sites**.
1. Select the storefront site for which you want to enable the Cloudinary image and video components. 
1. Navigate to the **Settings** tab.
1. Add **int_cloudinary_pd** to the cartridge path as shown:
    ![Site settings ad PD cartridge](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742481761/docs/SFCC/sfcc_pd_site_settings.png "thumb:c_scale,w_600/dpr_2.0, width: 600, popup:true")
1. Apply the changes.

### Import metadata and services

1. In the Business Manager, navigate to **Administration > Site Development > Site Import & Export**. 
1. Click **Choose File**.
1. Select **cloudinary_pagedesigner_matadata.zip** from the **metadata** folder of the repository.
1. Click **Upload**.
    ![Site import metadata](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742481761/docs/SFCC/sfcc_pd_import_metadata.png "thumb:c_scale,w_600/dpr_2.0, width: 600, popup:true")
1. Select the radio button next to **cloudinary_pagedesigner_matadata.zip** and click **Import** then **OK**.
    ![Site import metadata](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742481761/docs/SFCC/sfcc_pd_import_button.png "thumb:c_scale,w_600/dpr_2.0, width: 600, popup:true")
1.	Navigate to **Administration > Operations > Services**.
1.	After successful import of metadata, you'll see the **cloudinary.https.api** service. In the service's credentials add the following details:
    *	**URL**: https://api.cloudinary.com/v1_1/[cloud_name]
    *	**User**: Your API Key
    *	**Password**: Your API Secret

    > **TIP**: You can find your product environment configuration credentials in the [API Keys](https://console.cloudinary.com/app/settings/api-keys) page of the Cloudinary Console Settings.

## Configuration

### Configure Cloudinary credentials and other settings in the Business Manager

1. In the Business Manager, navigate to **Merchant Tools > Site Preferences > Custom Preferences**. 
1. Click **CloudinaryPageDesigner**.
1. Populate the settings according to your product environment and display preferences.

Setting Name | Description 
--|--
Cloudinary Cloud Name | Your product environment's cloud name.  Find this on your [Console Dashboard](https://console.cloudinary.com/console).
Cloudinary CNAME (Optional) | The CNAME of your product environment, if you have a custom one configured.
Cloudinary API Key | Your product environment's API key. Find this in the [API Keys](https://console.cloudinary.com/app/settings/api-keys) page of the Cloudinary Console Settings.
Cloudinary API Secret | Your product environment's API secret. Find this in the [API Keys](https://console.cloudinary.com/app/settings/api-keys) page of the Cloudinary Console Settings.
Cloudinary Page Designer Shrinkwrap Static JS URL | The URL for the Cloudinary client side Shrinkwrap JS library.
Cloudinary Video Player Static CSS URL | The URL for the Cloudinary Video Player client side CSS library.
Cloudinary Video Player Static JS URL | The URL for the Cloudinary Video Player client side JS library.
Default image Device Pixel Ratio (DPR) | The Device Pixel Ratio setting to apply to all your images on delivery.
Default image format | The format in which to deliver all your images. If you select **auto**, Cloudinary decides on the best format to deliver based on the user's browser.
Default image quality | The quality setting to apply to all your images on delivery. If you select **auto**, Cloudinary decides on the optimal compression to apply, reducing the file size without impacting visual quality.
Use image alt text from Cloudinary | If set to **Yes**, Page Designer uses the asset's **Description** in Cloudinary as the image's alt text.
Default image transformations | Transformations in [URL syntax](transformation_reference) to apply to all your images on delivery, e.g. `c_limit,w_800/e_enhance`.
Cloudinary Image Breakpoints | Breakpoints to use for responsive images. Specify an array of image widths in pixels.
Default video format | The format in which to deliver all your videos.
Default video bitrate | The bitrate to apply to all your videos on delivery.
Default video quality | The quality setting to apply to all your videos on delivery. If you select **auto**, Cloudinary decides on the optimal compression to apply, reducing the file size without impacting visual quality.
Default video transformations | Transformations in [URL syntax](transformation_reference) to apply to all your videos on delivery, e.g. `c_limit,w_800/r_max`.
Cloudinary Page Designer Environment | The Cloudinary iframe environment.
Cloudinary poster image transformation | Transformations in [URL syntax](transformation_reference) to apply to all your video poster images on delivery, e.g. `e_grayscale,bo_5px_solid_black`.

### Allow access to Business Manager endpoints

Allow access to the endpoints in Business Manager to avoid CORS errors.

1. Navigate to **Administration > Roles and Permissions**.
1. Click **Administrator**.
1. In the **Business Manager Modules** tab, select your site and click **Apply**.
1. Then, click to allow **Write** permissions for **Media Library**, **Cloudinary Link** and **Cloudinary Asset**.
    ![Business Manager Module context](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1742725244/docs/SFCC/bmm_write.png "thumb:c_scale,w_600/dpr_2.0, width: 600, popup:true")