> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# SAP Commerce Extension


[rnIntegrationLink]: integrations_release_notes#sap_commerce_extension_img_src_https_cloudinary_res_cloudinary_com_image_upload_v1617879432_sap_commerce_extension_plain_svg_title_sap_commerce_extension_width_30px

  
  

## Overview

SAP is the market leader in enterprise application software, helping companies of all sizes and in all industries run at their best. 
The SAP Commerce solution simplifies selling and buying processes on a modern, agile e-commerce platform. 

[Cloudinary's SAP Commerce extension](https://store.sap.com/dcp/en/product/display-0000059939_live_v1/Cloudinary%20for%20SAP%20Commerce) enables you to create rich media experiences on your storefront, whether B2B or B2C, by leveraging Cloudinary's automatic image and video optimization and transformation capabilities, and delivering responsive media through global content delivery networks.
> **TIP**: To see the latest updates, improvements and bug fixes, check out the SAP Commerce Extension [release notes][rnIntegrationLink].

## SAP Commerce extension video tutorial

To get an idea of the functionality provided by Cloudinary's SAP Commerce extension, watch the following video:

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

### Tutorial contents This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Setup and installation

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=0 :sec=15 :player=cld} | Before installing the Cloudinary extension, make sure you have a Cloudinary account. [Sign up for a Free plan](https://cloudinary.com/users/register_free), starting with generous usage limits. If your requirements grow, you can easily [upgrade to a plan](https://cloudinary.com/pricing) that best fits your needs. |
 
### Locate your product environment credentials

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=0 :sec=39 :player=cld}> | Your product environment credentials include your cloud name, API key, API secret, and environment variable. They are located on the [API Keys](https://console.cloudinary.com/app/settings/api-keys) page of the Cloudinary Console Settings. |

> **NOTE**:
>
> You can no longer access your full credentials directly from the Dashboard. Find your **Cloud name** on the Dashboard, and all credentials, including **API Key**, **API Secret**, and **API environment variable**, on the [API Keys](https://console.cloudinary.com/app/settings/api-keys) page of the Cloudinary Console Settings.

### Apply upload presets

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=1 :sec=18 :player=cld} | With [upload presets](upload_presets), you can also automatically specify how assets should be stored in your Cloudinary Media Library when uploaded from SAP.|

### Configure global transformation and breakpoint settings

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=1 :sec=39 :player=cld} | [Global transformations can be applied](transformations_intro) across all of your images and videos in SAP. These transformations can be overwritten on the catalog level or even on an individual level. The extension provides automatic settings to apply Cloudinary's most powerful transformations such as [f_auto](image_optimization#how_to_optimize_image_format) and [q_auto](image_optimization#automatic_quality_selection_q_auto) to ensure each image and video is optimized for website performance.|

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=2 :sec=26 :player=cld} | Use the "auto" setting to streamline the breakpoint generation process using [Cloudinary's automated breakpoint solution](responsive_images). |

### Set up your Cloudinary Product Gallery

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=3 :sec=02 :player=cld} | Incorporate [Cloudinary's Product Gallery](product_gallery_tutorial) and select your carousel style, zoom features, and other properties to display images, videos, 360 spin sets, and 3D models. |

### Deliver videos with Cloudinary's Video Player 

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=3 :sec=46 :player=cld} | The embedded [Cloudinary Video Player](cloudinary_video_player) is a feature-rich HTML5-based video player that allows you to customize the look, features and functionality of your videos on your storefront. |

### Update your global settings

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=4 :sec=41 :player=cld} | If you want to replace or change any of your global settings, all you need to do is click on the folder path in the configuration window. |

### Insert assets with Cloudinary's Media Library

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=4 :sec=50 :player=cld} | When you're ready to add media items, select and insert your Cloudinary assets directly from your SAP Backoffice. |

### Add product spin sets to your storefront

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=5 :sec=36 :player=cld} | To add a [product spin set](product_gallery#360_spin_sets), you first have to prepare the image set in your [Cloudinary Media Library](digital_asset_management_overview#media_library_overview).  |

### Apply transformations to individual assets

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=media :min=6 :sec=20 :player=cld} | To apply a unique transformation to an individual asset or overwrite a global transformation on the individual product level, you will need to go to the Multimedia tab for the specific asset. |

## Installation and setup

The SAP Commerce Cloudinary extension is freely available from the [SAP store](https://store.sap.com/dcp/en/product/display-0000059939_live_v1/Cloudinary%20for%20SAP%20Commerce) and can also be downloaded directly from [GitHub](https://github.com/cloudinary/cloudinary_sap_commerce). 

It supports the following SAP Commerce versions: 2005, 1905 and 1811, and both the Accelerator and Spartacus storefronts.

> **INFO**:
>
> Cloudinary's latest SAP Commerce Extension (version 1.3) is compatible with SAP version 2211. It includes most of the features outlined in the documentation, such as delivering Cloudinary assets across both product and content catalogs, including PDP (Product Detail Pages) and PLP (Product Listing Pages). However, the following features described in the documentation are not yet supported:

> * [Responsive breakpoints](#set_responsive_breakpoints)

> * [Cloudinary Product Gallery Widget](#display_the_product_gallery)

> * [Cloudinary Video Player](#embed_the_video_player)

Download the following documents for installation and basic usage instructions:

* [SAP Commerce Cloudinary Extension Setup Guide](https://cloudinary-res.cloudinary.com/image/upload/v1696764744/docs/SAP/SAP_Commerce_Cloudinary_extension_setup-guide.pdf), which covers:
    * Setup steps for the SAP Commerce B2C Accelerator
    * Setup steps for the SAP Commerce B2B Accelerator
* [SAP Commerce Cloudinary Extension Functional Guide](https://cloudinary-res.cloudinary.com/image/upload/v1696764785/docs/SAP/SAP_Commerce_Cloudinary_extension_functional-guide.pdf), which covers:
    * Configuration of the Cloudinary extension in the Backoffice
    * Synchronization of media assets from SAP Commerce to Cloudinary
    * Media creation and product association
    * Enabling the Cloudinary [Product Gallery](#display_the_product_gallery)
    * Enabling the Cloudinary [Video Player](#embed_the_video_player)
    * Bulk uploading of media for the product catalog
    * Setting up Cloudinary [transformations](#apply_transformations_and_optimizations) at different levels (product catalog, category, product and asset)

## Main features

This architecture diagram shows how Cloudinary is integrated into various SAP Commerce platform components and the flow of media content around the system.

![SAP Commerce Cloudinary extension architecture](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1617880419/docs/SAP/sap_architecture.jpg "thumb: w_750,dpr_2, width: 750, popup: true")

### Store media in Cloudinary

Maintain a single source of truth for your media assets by syncing media from SAP Commerce to the Cloudinary Media Library and delivering all media from Cloudinary. Manage your assets using the [commonly used Media Library features](#commonly_used_media_library_features).

### Use upload presets

Select one of your Cloudinary [upload presets](upload_presets) from the SAP Backoffice to use when uploading media from within SAP to Cloudinary. Upload presets specify a set of upload options, so, for example you could apply the same tags or metadata to every asset that you upload, or run specific [add-ons](cloudinary_add_ons) on each upload.

### Apply transformations and optimizations

Using the extension you can apply Cloudinary transformations to your media to optimize size, format and quality, add overlays, apply visual enhancements and more. Different Cloudinary [image](image_transformations) and [video](video_manipulation_and_delivery) transformations can be applied to media based on whether it's contained in the product catalog or content catalog. 

### Set responsive breakpoints

The extension includes special functionality for adding [responsive behavior](responsive_images) to your images to make sure that the optimal image size is delivered to each user based on the available space on their viewing device. 

### Display the Product Gallery

Include images, videos and 360 spin sets on your product description pages using the [highly customizable](https://demo.cloudinary.com/product-gallery/?editor) Cloudinary [Product Gallery](product_gallery).

![Cloudinary Product Gallery](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1617882438/docs/SAP/product_gallery.png "thumb: w_550,dpr_2, width: 550, popup: true")

### Embed the Video Player

Enable Cloudinary's customizable HTML5-based [Video Player](cloudinary_video_player) to display videos on your storefront in the way you want. Use the [Video Player Studio](https://studio.cloudinary.com/?code=configjson) to customize the player and copy the JSON required for the configuration in the SAP Backoffice.

## Commonly used Media Library features

With the SAP Commerce Cloudinary extension installed, you can open your Cloudinary Media Library when selecting assets from Cloudinary. You can access almost all of the same functionality that is available in the full Media Library in your Cloudinary Console. 

![Select a media asset](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1617881873/docs/SAP/sap_select_asset.png "thumb: w_740,dpr_2, width: 740, popup: true")

> **NOTE**: :title=Browser compatibility notes:
{partialdoc}partial_platform_browsers{partialdoc} 

### Advanced Search
The **Advanced Search** feature lets you search by filters such as tags, metadata, format, orientation, resolution, or (if supported for your account), even by image analysis characteristics, such as prominent colors, presence of faces, or image location.

![Advanced Search](https://res.cloudinary.com/cloudinary/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1/docs/DAM/advanced_search_new_exp "thumb: w_850,dpr_2, width:850, with_code:false, with_url:false, popup:true")

> **NOTE**:
>
> If Visual Search isn't enabled for your account, the **Advanced** / **Visual** toggle won't be visible and you'll only see Advanced Search. Visual Search is available to Enterprise customers by request. [Learn more about Visual Search](dam_visual_search).

For more details, see [Advanced Search](dam_advanced_search) in the Assets user guide.
### Folders and collections

**Folders** and **collections** can be used for access control and collaboration. Organize assets into folders (fixed containers) and collections (virtual groupings), define user groups, and then share your folders and collections with user groups or individual users at different access permission levels. 
**Collections** are ad-hoc groupings of assets. Assets can be added to and from collections without affecting or moving the asset itself, and assets can be included in multiple collections. You can create your own collections (assuming you have the required permissions) or other Cloudinary users can share collections with you. You can also share collections with external stakeholders by sending a URL to a dedicated collection webpage, which is available to those with a link during an optionally specified date range.

Collections can often be a convenient way to group all assets that you might want to use on a particular project or campaign. 

![Collaborate with collections](https://res.cloudinary.com/cloudinary/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1/docs/DAM/collections_getting_started "thumb: w_550,dpr_2, width:550, popup:true")

For more details, see [Collection management](dam_folders_collections_sharing#collection_management) in the Assets user guide. 

### Tagging and metadata
Assets that have tags and other metadata enable all Media Library users to better organize and search for assets in the Media Library. 

In addition to the option to specify tags when you upload an image or video, you can also add or edit tags and other metadata after images and videos are uploaded via the embedded Media Library, and even set the same tags or metadata on multiple images and videos at once. 

You can view and set this data using the Asset toolbar or in the Asset management page.
#### Asset toolbar
You can set tags and metadata for several selected assets at once from the Media Library using the **Tag** or **Edit Structured Metadata** options in the asset toolbar. You can **Edit Contextual Metadata** via the (3-dot) options menu. The type of metadata available for editing (contextual or structured) depends on the setup for your organization's account.![Media Library asset toolbar](https://cloudinary-res.cloudinary.com/image/upload/f_auto/q_auto/bo_1px_solid_grey/docs/integrations/ml_toolbar_inser_upload_new_search_exp.png "thumb: w_750,dpr_2, with_code:false, with_url:false, width:750, popup:true")
#### Asset management page
You can view or edit tags and metadata as well as view embedded image metadata for a specific asset from the Summary and Metadata tabs of the **Asset management** page.

To open the **Asset management** page either double-click the asset or select **Open** from the asset's context (right-click) menu. ![Asset management](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_grey/f_auto/q_auto/v1725271953/docs/DAM/ml_widget_insert_templates.png "thumb: w_700,dpr_2, with_code:false, with_url:false, width:700, popup:true")> **TIP**: From the Asset management page, you can also select a pre-defined transformation of the original asset, view or activate a variety of image analysis options in the Analysis tab, and more. For details, see [Asset management drill-down](dam_manage_individual_assets#asset_management_drill_down) in the Assets user guide.
### Media Editor
The Media Editors are accessible from the [asset management drill-down](dam_manage_individual_assets#asset_management_drill_down) page. Click the **Edit** pull-down button and select **Edit Image** for images or **Trim Video** for videos.The Media Editors allow you to make basic edits to images (crop, resize, flip, rotate, sharpen) and trim videos. In the image editor shown below, you can crop and resize your image to suit your design. When you're finished, you can download the edited version without modifying the original, save it to overwrite the original asset (you can retrieve the original if you have backups enabled), or save the edited version as a new asset.

![Media library media editor](https://res.cloudinary.com/cloudinary/image/upload/f_auto/q_auto/bo_1px_solid_grey/v1/docs/integrations/ml_image_editor_new_search_exp?_a=BAMAAAfm0 "thumb: w_700,dpr_2, width: 700, popup: true")
### Transformation editor
The transformation editor is accessible from the [Asset management page](#asset_management_page). To open it, select **Edit Transformation** from the kebab menu next to the original asset or the transformation you want to edit further.

In the transformation editor you can apply and preview various transformations. Once you are satisfied with the adjustments, click **Insert** to use this transformed asset as your media item.  Unlike the Media Editor, your original asset remains unmodified.

> **NOTE**: Depending on your account settings and whether your administrator has opted into the feature, you may have access to the [Advanced Editor (Transformation Builder)](dam_editing_and_transformations#advanced_editor_transformation_builder_early_access) instead.

![Media library transformation editor](https://cloudinary-res.cloudinary.com/image/upload/bo_1px_solid_gray/f_auto/q_auto/v1645345773/docs/integrations/ml_transformation_editor.png "thumb: w_500,dpr_2, with_code:false, with_url:false, width:500, popup:true")

For more details, see [Asset and transformation editing](dam_manage_individual_assets#transformation_and_asset_details_editor) in the Assets user guide.
## Cloudinary Professional Services configuration support
The SAP Commerce Extension {variable:platformLabel} falls under Cloudinary's [**Premium**](integrations#premium_integrations) Professional Services integrations.  

If you need assistance setting up this integration, you can purchase configuration support for it at an additional cost.

**Learn more: [Cloudinary Professional Services packages](integrations#cloudinary_professional_services_packages)**