Product asset workflows

This section outlines an example workflow for managing product assets. Use these recommendations as a guide and change implementation to suite your company's needs.

Product asset workflows are largely automated. Once you link Cloudinary assets specific products, they sync to the appropriate website components, already optimized and formatted for the ideal display.

Upload assets to Cloudinary

Upload assets directly to Cloudinary as the central source of truth for all images and videos via the upload endpoint, automated system triggers, or batch processing. Cloudinary automatically generates public IDs and delivery URLs for the assets.

Step 1: Associate an asset with its product SKU

You might be able to retrieve essential metadata, such as SKU or unique product ID, and product information embedded within the asset files themselves (e.g., EXIF, XMP). Alternatively, you could pull this information from your PIM, database, or spreadsheet containing filenames, SKUs, and other relevant details.

Depending on your use case, you can associate the asset with its product SKU within Cloudinary using:

Step 2: Set up normalization

Normalization standardizes assets during upload, ensuring they meet your specific requirements for dimensions, format, and quality. This guarantees consistency across all assets and simplifies management.

Rather than storing only the normalized version in Cloudinary, you can consider keep the original and generating the modifications as derived assets. To do this, instead of applying the named transformation as an incoming transformation of an upload preset, use it as an eager transformation. See Step 5.

Some common normalization actions include:

Example:

Original Normalized

• The following code defines a named transformation called product_images that applies the requirements in the product image above, using the Transformations Admin API method:

Step 3: Create metadata fields

Metadata can help system users, developers, or third-party stakeholders search for and retrieve assets for management or delivery. Retrieve metadata from information within the uploaded files themselves or your product management platform.

To create metadata fields:

• Use the metadata_fields endpoint in the Admin API.

Example:

Create SKU and Expiration fields with expiration date 2 months from today:

Step 4: Register for add-ons

In order to enable some upload preset options, you first need to register for Cloudinary's add-ons. The upload preset options requiring registrations are on the Addons page of a new upload preset.

Here are some of the add-ons you may want to apply:

Step 5: Use an upload preset for normalization, auto-tagging, access control, accessibility, and optimization

An upload preset enables you to centrally define a set of upload options, ensuring consistency and efficiency when uploading assets. It applies the options you set up in the previous steps, as well as other best practices for metadata, access control, normalization, accessibility, and optimization.

Below is a structured best practices table showing recommended upload preset options, how they align with best practices, and how they're implemented in the example preset.

Example:

Step 6: Upload with an upload preset

Upload assets to Cloudinary with the upload preset applied, use:

• The upload endpoint of the Upload API for single asset or batch uploads.
• The migrate command of the Cloudinary CLI for batch uploads. Use this method for initiating uploads automatically from another source.
• The Media Library for manually uploading one or multiple assets, or a folder structure.

Examples:

• Upload using the use the upload endpoint and apply the product_images preset:

• Batch upload using the migrate command:

  • Create an upload mapping to transfer assets from your source domain https://your-source-domain.com/media/uploads/ to Cloudinary’s product_assets folder
  • Run this command to migrate all the assets listed in the url_file.txt to the product_assets folder in your Cloudinary product environment, showing verbose output. The product_assets upload preset, which has the same name as the upload mapping, gets applied automatically:

• Upload assets to the Media Library:

  1. Navigate to the target folder:
  2. Open the Media Library and click the Folders tab.
  3. Browse to the folder where you want to upload assets.
  4. Open the Upload Widget:
     • Click Upload to launch the Upload Widget.
  5. Select an Upload Preset:
     • In the Advanced section, select the appropriate preset from the Upload Preset drop-down.
     • This ensures that transformations and metadata rules you configured get applied to the upload.

       

  6. Upload the assets:
     • Drag and drop the assets or folder structure into the Upload Widget.

Sync assets with your product data

After uploading your assets to Cloudinary, ensure they're linked to the other elements within your tech stack. Use product-identifying details (like SDK or product ID) in the asset's public ID or metadata for seamless integration.

Sync assets using a PIM integration

For businesses utilizing a PIM (Product Information Management) system, product information often exists in the PIM before adding assets to Cloudinary. Cloudinary serves as the central source of truth, allowing PIM systems to pull asset data directly from Cloudinary.

Key benefits of PIM integration:

• Automatic syncing: Asset delivery URLs or public IDs are automatically saved in the PIM.

• Bi-directional updates: Updates in the PIM sync to Cloudinary, and vice versa.

• Consistent metadata: Cloudinary retrieves and stores product metadata from the PIM to maintain consistency.

PIMs that are integrated with Cloudinary include Akeneo and Syndigo. See Integrations for a complete list.

Sync assets without a PIM integration

If you don’t use a PIM and instead manage product information through a database or spreadsheet, you can create a custom connector between Cloudinary and your system.

Essential components of a custom integration

Additional considerations for integration

• Make sure your connector is robust and handles all possible scenarios, such as asset deletion. Sync deletions from Cloudinary to your PIM or database.

• Here's an example of a personalized flow that can help you manage metadata sync between Cloudinary and your system.

  • Use a structured metadata field called Status.
  • Set a value for the Status field dynamically:
    • If all of the asset's required import successfully from your PIM or database to Cloudinary, set the Status field to Metadata complete.
    • If any required fields are missing, set Status to Requires data.
  • Create a saved search in Cloudinary to quickly find assets whose Status field's value is Requires data to manually complete the missing fields more easily.

Sample app: Syncing without a PIM integration

This PHP sample app simulates adding products, complete with normalized images and videos and a synchronous video moderation with webhook handling, to a database and displays them on a product catalog. This example is a good start, but to use it in a real environment, you'd modify the process to retrieve the assets and metadata programmatically and perform the upload in bulk.

Deliver product assets to your e-commerce website

Once you've organized assets in Cloudinary and linked them to your products, delivering them to your e-commerce website becomes an automated process. Whether using a pre-built integration or a custom implementation, Cloudinary dynamically optimizes and serves product images and videos based on product data and display requirements.

In both cases, you can use the Product Gallery Widget to deliver product assets dynamically on Product Detail Pages (PDPs). The Product Gallery Widget provides an interactive viewer that enhances product display with automatic image retrieval, video support, and 360° spin sets.

Using an integrated front end

If you’re using an e-commerce platform or a composable, headless front-end with built-in Cloudinary integration, follow the platform’s configuration and setup instructions to display your assets efficiently.

• E-commerce platform integrations

  • Shopify: Utilize Cloudinary’s MediaFlows integration for seamless product asset delivery and rendering on Shopify stores, ensuring assets display as expected.
  • Salesforce Commerce Cloud: Automate asset delivery using Salesforce Commerce Cloud Cartridges, ensuring efficient Cloudinary asset handling within your storefront.

• Composable storefront integrations

  • commercetools: Dynamically manage product assets for headless e-commerce experiences, providing flexibility in asset delivery.
  • Salesforce Commerce Cloud Headless Cartridge: Enable Cloudinary image and video management through Salesforce’s headless commerce for seamless API-driven asset delivery.

• Example: commercetools integration

A fully functional demo showcases the commercetools extension, offering insights into setting up a storefront and displaying product assets effectively. Developers can reference the GitHub repository for implementation details.

PLP with
responsive images

Using a standalone front end

If your platforms don't include a ready-made Cloudinary integration, you'll need to implement your own solution to render your Cloudinary assets on your front-end.

Use Cloudinary's SDKs to seamlessly integrate assets (and optionally the Product Gallery Widget) into headless front-end applications (such as React, React Native, Android, etc.). Dynamically assign assets to website components using product-match workflows.

Step 1: Schedule publishing

Automatically initiate the process of publishing assets using MediaFlows or cron jobs, ensuring your assets are always up-to-date on your website without manual intervention.

Here's an example MediaFlow that sends an HTTPS request to update your front-end with any new or updated Cloudinary assets any on a schedule, such as once a day:

Step 2: Set up optimization and adjustments according to website location

Use named transformations to modify product images dynamically based on their display location (e.g., PDPs, PLPs) while ensuring they're optimized for format and quality.

Here's an example of a named transformation (pdp_product_images) that applies cropping, resizing, format conversion, and quality adjustments:

Step 3: Search, retrieve, and render product assets

To display the correct assets on your website, retrieve an asset using its SKU or another product identifier stored in Cloudinary metadata. This ensures that assets match the appropriate product and location on your website, such as PDPs or PLPs.

Here's an example of that renders the delivery URL of an asset based on its product SKU. The asset is transformed using our pdp_product_images named transformation for rendering on the PDP:

For information about delivering to other channels besides a front-end, see Multi-channel content delivery.

Enhancing product asset display with the Product Gallery Widget

Cloudinary’s Product Gallery Widget is a ready-to-use, interactive viewer that simplifies product asset presentation. It requires only JavaScript, making it easy to integrate into any web framework while eliminating the need for custom gallery development.

Benefits:

• Seamless integration: Embed a responsive, media-rich product gallery.
• Automatic asset population: Retrieves product images and videos based on tags.
• Customizable layouts: Adjust styles, transitions, and navigation.
• 360° spin sets: Enable interactive product exploration with rotational image sets.

Implementation:

• For integrated front-ends, check your integration's documentation for specific instructions on embedding the Product Gallery Widget.

• For custom front-ends, include the remote JavaScript file and initialize the widget with:

Other delivery channels

Besides delivering non-product images on your website, you can also deliver to the following channels:

• Social media: Optimize images for different platform size and format requirements.

• Third-party stakeholders: Ensure compliance with background color or file format constraints and protect your assets by watermarking.

• Email campaigns: Maintain quality within file size and resolution limitations.

• Market places: Adhere to specific format, background, metadata, and naming rules.

For more information, see Multi-channed content delivery.