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 with specific products, they sync to the appropriate website components, already optimized and formatted for the ideal display.

Here's a diagram that shows the workflow for product assets:

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: Create folder structure

You can organize folders based on content type—such as Clothing, Accessories, and Footwear—to improve searchability, enforce access control, and streamline asset management. A well-structured folder system helps users quickly locate assets and ensures permissions are assigned correctly.

To create a folder:

1. Click the Folders tab at the top of the Media Library to navigate to that page.
2. Click the Create a Folder icon at the top left corner.
3. To create a subfolder, navigate to the parent folder first.

To share a folder:

1. Select Share from the options drop-down next to the current folder path at the top of the Media Library
2. Select the users and/or user groups you want to share the folder with, as well as the permission level for each.

For more information, see Folder management.

Step 2: 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 3: 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.

This step entails creating named transformations to normalize product assets. You'll apply them on upload using an upload preset in Step 5.

Some common normalization actions include:

Example:

Original Normalized

• Configure named transformations using the Transformation Builder UI following these instructions:
  1. Open the Cloudinary Console.
  2. From the Programmable Media product, click Transformation Center, then New Transformation.
     Note

     You can use sample assets or select your own in the Transformation Builder to preview how transformations look when applied.
  3. Configure transformations via Select Action or Quick Edit, where you can enter any transformation string.
     Tip

     Look up any transformation and find its string in the Transformation URL API reference.

Video Tutorial: Creating named transformations

Watch a short video that shows how to create named transformations in the Transformation Builder for normalizing product assets.

Step 4: 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 define metadata in the Media Library:

1. Go to the Structure Metadata page in the Console.
2. Configure metadata. Consider creating:
   • SKU field of type text with external ID sku
   • Expiration field of type date with external ID expiration_date
   • Visibility field of type single select with external ID visibility and list values Public and Private
3. The following options are available when creating and managing fields:
   • Field types: Text, number, date, single-selection, and multiple-selection lists.
   • Mandatory fields: Define required fields to ensure consistent metadata entry. (Make sure you set a realistic number of mandatory fields so your users don't get overwhelmed.)
   • Default values: Assign default values to mandatory fields to prevent upload failures.
   • List values: Specify predefined values for single- and multiple-selection fields.
   • Metadata rules: Set conditional rules (e.g., State field appears only if Country is US).

     

     For more information, see Structured metadata.

Step 5: Register for add-ons

In order to enable some upload preset options, you first need to register for Cloudinary's add-ons. You'll then activate the selected add-ons using upload preset options in Step 5.

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

Step 6: 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.

To create an upload preset to apply upload options:

• Navigate to the Upload Presets tab of the Upload Console Settings page and click Add Upload Preset.

• Use the table below to apply recommended upload preset options, see how they align with best practices, and learn how to implement them.

• Remember to click Save at the top left corner.

Step 7: Upload with an upload preset and metadata field values

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, apply the product_images preset, and add metadata values for the SKU, Expiration (2 months from today), and Visibility fields:

• 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:
  • You can update metadata programmatically using the explicit endpoint.

• 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.
  7. Bulk set metadata manually by selecting the assets you want to update and selecting Edit Structured Metadata from the assets toolbar.
  8. Update SKUs individually in the Media Library from the Metadata tab of the asset management drill-down page, or programmatically using the explicit endpoint.

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, such as public IDs and delivery URLs directly from Cloudinary.

Key benefits of PIM integration:

• Automatic syncing: Cloudinary delivery URLs or public IDs are stored in the PIM, enabling seamless product publishing with Cloudinary assets.

• Consistent metadata: Cloudinary retrieves and syncs product metadata from the PIM to ensure consistency.

• Bi-directional updates: Changes in the PIM automatically update in Cloudinary, and vice versa, ensuring the latest assets are always used.

Akeneo and Syndigo are examples of Cloudinary-integrated PIMs. 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 adds products to a database and displays them in a product catalog with normalized images and videos. Videos undergo asynchronous moderation and are processed via webhook upon approval.

While this example provides a strong foundation, a real-world implementation would require modifying the process to retrieve assets and metadata programmatically instead of relying on user input, as well as enabling bulk uploads for efficiency.

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 on your website 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 dynamically modify product images based on their display location (e.g., PDPs, PLPs) while ensuring optimal format and quality. Once created, a named transformation can be applied repeatedly on delivery without additional setup.

Here's an example of a named transformation (pdp_product_images), created programmatically, 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 each asset by its SKU (or another product identifier). You can store the SKU as part of the public ID or within the asset’s metadata. This approach ensures each asset matches the correct product and display location, such as PDPs or PLPs.

The following example creates a delivery URL for an asset using the SKU stored in the metadata field. It applies the pdp_product_images named transformation to optimize the image for a PDP:

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.