Salesforce Commerce Cloud B2C Commerce Cartridge FAQ

Here are some frequently asked questions about Cloudinary's Salesforce Commerce Cloud B2C Commerce Cartridge. If you need help with a question not covered here, try the Knowledge Base or contact our support team.

How do I install the B2C Commerce Cartridge?

See SFRA or SiteGenesis B2C Commerce Cartridge installation to install either the SiteGenesis or SFRA cartridge.

Following installation, you need to make code changes to the templates to enable all of Cloudinary's functionality in your site. For reference, we provide cartridges that contain the necessary code changes for SFCC's demo site, which you can use as a guide.

Learn more: Code changes for SFRA and SiteGenesis

How do I map my product assets in SFCC to my images and videos in Cloudinary?

There are two main ways to map your SFCC product assets to your media in Cloudinary:

• Option 1 - media directly uploaded to Cloudinary is the recommended way, where all your media is stored in and delivered from Cloudinary.
• Option 2 - media uploaded to SFCC and copied to Cloudinary, where your media is stored in SFCC, but also uploaded to Cloudinary so that it is delivered from Cloudinary.

Learn more: Media mapping options

How does the B2C Commerce Cartridge decide which asset to use in the product listing page (PLP)?

You may have many assets associated with one product, but in the PLP, you only want one asset to be displayed. The B2C Commerce Cartridge chooses the asset set for the master variant of the product that has the sfcc-is-main metadata set to true. Additionally, for each of the product variants, one of the assets must have sfcc-is-main set to true, so that when the customer selects a certain swatch, the matching variant's main asset is displayed.

Learn more: Example images showing tags and structured metadata

How do I use Cloudinary's Product Gallery?

You can enable the Product Gallery for product detail pages in the custom preferences, set its look and feel, determine which assets will be shown and in what order, and supply alt text for each asset.

Learn more: Product Gallery configuration

How do I display videos on my site?

You can display videos on your product details pages (PDPs) using the Cloudinary Product Gallery. Additionally, you can display videos separately using the Cloudinary Video Player, or via standard HTML video tags.

In addition to displaying videos on PDPs, you can configure videos to display on other page types too, through code customizations.

Learn more: Displaying videos

Why is my video either not displaying, or showing twice in a product details page (PDP)?

Cloudinary's Product Gallery displays all assets (images and videos) that have the same tag. So, to include a video in your Product Gallery ensure that it has a tag of the form <master-product-tagname>-<variation-color-value-id>, where <master-product-tagname> is the unique product identifier, and <variation-color-value-id> is the color ID of the variation. If the video is set for the master variant of the product then it should also have <master-product-tagname> as a separate tag.

If Cloudinary's video player is enabled, any videos tagged for the product are displayed in the PDP. Therefore, if you are using the Product Gallery and have the video player enabled, you will see the video both in the gallery and displayed separately on the page. If this is not desired, and you only want it to be displayed in the Product Gallery, ensure you disable the video player by going to Merchant Tools > Custom Preferences > Cloudinary Asset Management Configurations and set Use Cloudinary Video Player to No​.

Learn more: Product Gallery configuration | Displaying videos

How do I make my images and videos responsive?

Any images and videos displayed with Cloudinary's Product Gallery are responsive by default, so they'll adapt to whatever viewing device your customer is using.

Likewise, videos displayed using Cloudinary's video player are also responsive by default.

To make Cloudinary images outside of the Product Gallery responsive, you can set the Cloudinary Image Page Type Settings custom preference to either generate HTML srcset and sizes attributes for <img> tags, or use Cloudinary client-side libraries.

Learn more: Making images and videos responsive

Why are my lazy loaded images not responsive?

Images are made responsive through the function call, makeCloudinaryImagesResponsive(). This is called on page load from int_cloudinary/cartridge/js/cloudinaryWidgets.js. Images that are lazy loaded are requested after this call has been made, so they are not made responsive. In order to make them responsive you need to call makeCloudinaryImagesResponsive() after they have loaded.

Learn more: Lazy loading

How do I provide alt text for images?

The source of the alt text for images depends on whether or not you are using the Product Gallery, and which mapping option you are using.

Learn more: Providing alt text for images.

How do I manage tags and structured metadata for products?

If using Option 1 - media directly uploaded to Cloudinary, assets in Cloudinary need to have certain tags and metadata applied.

You can apply tags by managing individual media assets or through bulk updates.

You can set structured metadata values for assets individually. To update the structured metadata values of many assets at the same time, contact support, who can guide you through the process of creating a CSV file containing a list of your Cloudinary assets and the metadata values to apply, to use for a bulk update.

Learn more: Tags and structured metadata

How do I set a custom hostname?

If you have a private CDN or custom delivery hostname (CNAME) set up for your Cloudinary product environment, you need to set this in SFCC, as follows:

1. In Business Manager, select your site, then navigate to Merchant Tools > Site Preferences > Custom Preferences > Cloudinary Core Configurations.
2. Set Cloudinary Base Delivery Path to the base path, for example https://<custom delivery hostname> or https://<cloud_name>-res.cloudinary.com.

If you want to set up a private CDN or custom delivery hostname (CNAME) for your Cloudinary product environment, contact support.

Learn more: Private CDNs and custom delivery hostnames (CNAMEs)