More Products
Menu

Setup and configuration

Last updated: Mar-24-2025

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

On this page:

Rate this page:

Installation

Download the Cloudinary Page Designer cartridges

You can download the certified Page Designer cartridges from the Cloudinary for Page Designer page on the SFCC AppExchange. You can also get the most recent release from Cloudinary's GitHub repo.

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
  2. Import both cartridges from the Import dialog.
  3. 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.
  2. Go to Administration > Sites > Manage Sites.
  3. Select the Business Manager site.
  4. Add bm_cloudinary_pd to the cartridge path as shown:

    Business manager add BM cartridge
  5. Apply the changes.
  6. Navigate back to Manage Sites.
  7. Select the storefront site for which you want to enable the Cloudinary image and video components.
  8. Navigate to the Settings tab.
  9. Add int_cloudinary_pd to the cartridge path as shown:

    Site settings ad PD cartridge
  10. Apply the changes.

Import metadata and services

  1. In the Business Manager, navigate to Administration > Site Development > Site Import & Export.
  2. Click Choose File.
  3. Select cloudinary_pagedesigner_matadata.zip from the metadata folder of the repository.
  4. Click Upload.

    Site import metadata
  5. Select the radio button next to cloudinary_pagedesigner_matadata.zip and click Import then OK.

    Site import metadata
  6. Navigate to Administration > Operations > Services.

  7. 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 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.
  2. Click CloudinaryPageDesigner.
  3. 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.
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 page of the Cloudinary Console Settings.
Cloudinary API Secret Your product environment's API secret. Find this in the 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 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 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 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.
  2. Click Administrator.
  3. In the Business Manager Modules tab, select your site and click Apply.
  4. Then, select the Write checkboxes for Cloudinary Link and Cloudinary Asset and click Update located at the end of the list.

    Business Manager Module context

✔️ Feedback sent!