Salesforce Commerce Cloud Site Cartridge FAQ

Last updated: Nov-14-2022

Here are some frequently asked questions about Cloudinary's Salesforce Commerce Cloud site 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 site cartridge?

Depending on the SFCC reference architecture that you're using, see:

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 SiteGenesis | Code changes for SFRA


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

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

  • Option 1 is the recommended way, where all your media is stored in and delivered from Cloudinary.
  • Option 2, where your media is stored in SFCC, but also uploaded to Cloudinary so that it is delivered from Cloudinary.
  • Option 3, where media is automatically uploaded from its existing location to Cloudinary when requested by the end user, and subsequently delivered from Cloudinary.

Learn more: Media mapping options


How does the site 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 site 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.

Notes

  • If you have multiple assets with sfcc-is-main set to 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.

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

Note
If you disable the video player, you may be disabling videos elsewhere on your site too, depending on how your site is set up. For help with custom configurations, contact our support team.

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, 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 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 domain name> or https://<cloud_name>-res.cloudinary.com.

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

Learn more: Private CDNs and CNAMEs

✔️ Feedback sent!

Rate this page: