Last updated: Sep-26-2023
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?
- How do I map my product assets in SFCC to my images and videos in Cloudinary?
- How does the B2C Commerce Cartridge decide which asset to use in the product listing page (PLP)?
- How do I use Cloudinary's Product Gallery?
- How do I display videos on my site?
- Why is my video either not displaying, or showing twice in a product details page (PDP)?
- How do I make my images and videos responsive?
- Why are my lazy loaded images not responsive?
- How do I provide alt text for images?
- How do I manage tags and structured metadata for products?
- How do I set a custom hostname?
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
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
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.
- If you have multiple assets with
true, the first asset returned in the Cloudinary API response is used in the PLP.
- When you change the structured metadata value for assets, it can take some time for the Cloudinary caches to update and for the changes to appear on the site.
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
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
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> 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.
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
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
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.
If using Option 1 - media directly uploaded to Cloudinary, assets in Cloudinary need to have certain tags and metadata applied.
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
If you have a private CDN or CNAME set up for your Cloudinary product environment, you need to set this in SFCC, as follows:
- In Business Manager, select your site, then navigate to Merchant Tools > Site Preferences > Custom Preferences > Cloudinary Core Configurations.
- Set Cloudinary Base Delivery Path to the base path, for example
https://<custom domain name>or
If you want to set up a private CDN or CNAME for your Cloudinary product environment, contact support.
Learn more: Private CDNs and CNAMEs