Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

[AEM GEMs] Integrate AEM & CIF framework to build a rich and immersive e-commerce experience





Session Details

Understand how Adobe’s CIF framework can be used to build a consistent and content-rich and immersive commerce experience. The Experience Manager and Adobe Commerce are seamlessly integrated using the Commerce Integration Framework (CIF). CIF enables AEM to directly access and communicate with the commerce instance using Adobe Commerce’s GraphQL APIs.

High-level agenda:

- What is CIF and Why to use CIF?

- CIF integration types and how to use CIF with AEM

- CIF component library

       - AEM CIF Core components

       - PWA studio library react components

- Considerations for multi-brand and multi-store setup

       - Cloud service configuration in AEM

       - FE code organization and deployment

       - Context-aware configurations

       - Multisite management

- Best practices and learnings

- Demo

Housekeeping details:

  1. Duration: 60 minutes including 10 minutes of Q&A
  2. Audience: Customers, Partners, and Adobe Employees
  3. Recording & Slides will be made available to the public after the session
  4. The session is free of charge, registration will be required

Session Recording

Session Schedule

Wednesday, April 27, 2022, | 8 am PDT OR 5 pm CET OR 8.30 pm IST 


Kunal Gaba, Technical Architect, Adobe & Vinay Kumar, Technical Architect, Adobe


Sambasivaraja Ramasubramanian & Ketan Purohit 


Adobe Experience Manager & CIF e-commerce Framework


Please use this thread to ask the question related to this Session.

Don't forget to register yourself for this session using the registration link shared above. 

1 Reply


Community Advisor

H @kautuk_sahni 


Thanks for the gems session; very informative and helpful.

I have a quick question on adopting the react commerce frontend components while integrating AEM with the SAP Commerce Cloud (Hybris).

In my understanding, the Front end commerce components are built based on Magento-specific libraries. Is the recommendation to adopt the same components to be used, but the GraphL calls are translated to rest API through Adobe IO runtime?


Also, is the reference/diconium reference extension layer support multiple stores with external commerce systems, e.g., Hybris?







We leave it up to the project whether they want to re-use the components and translate the GraphQL calls via I/O Runtime vs building custom components that talk directly to the 3rd party endpoint. The decision depends on the amount of customization needed, latency, etc. Both approaches are fine.


Regarding 3rd party connector and multi store: Our reference implementation does not support multi store OOTB, but you can easily extend it to support it. As we don't own the hybris connector, I suggest you ask the question in the respective GitHub.






Level 1

Hi @Albin_Issac ,


Just adding on top of @Martin_Buergi_Adobe reply.


"Also, is the reference/diconium reference extension layer support multiple stores with external commerce systems, e.g., Hybris?"


You can write an easy extension by combining OOTB functionality.


  1. Just setup the multi store configuration in AEM as per
  2. Apply Configuration on language root of content to pick up specific store data.

  3. AEM will send the store (Site in hybris) and locale information as part of Store attribute in header.

  4. AIO will parse store and locale value to make hybris call

  5. if these values are not available in request header, it can point to default.




Level 1

Hi Kautuk,


I like to attend the future sessions related to Commerce and others too. How can we get notifications on this.






 @Albin_Issac @RajTSC We are coming up with a Live In-person Meetup in New York on Content & Commerce Optimization. See:  | Join and Invite your Peers.