Adobe Tech Blog
Published in

Adobe Tech Blog

Building Rich Content and Commerce Experiences with CIF

Co-Author: Martin Buergi

Your ability to create compelling commerce experiences will lead to more page views and higher conversion rates. Learn how you can build these experiences at scale using Adobe Experience Manager and Commerce Integration Framework (CIF) tools.

When we first introduced Adobe’s Commerce Integration Framework (CIF), we showed you some of the many possibilities that this powerful extension opens up to AEM practitioners interested in building great customer experiences at scale. In the next two blogs in this series, we took a deeper dive into CIF to show the developers in our audience how easy it is to integrate third party tools. Now, in this blog, we’ll focus on the role of the practitioner and authors to illustrate how to use the robust set of tools and storefront accelerators in CIF to build rich content and commerce experiences in an efficient and scalable way. To do this, we’ll use CIF with Adobe Experience Manager (AEM) Venia Storefront for our examples.

Accurate product catalogs offer better customer experiences

The product catalog is probably the most business-critical experience for online retailers because this is where shoppers add products to their shopping cart. Given its importance to ecommerce success, optimizing content and the user experience is an ongoing effort and focus for most ecommerce companies.

In our previous blogs, we showed you how CIF is able to request real-time commerce data from a commerce system when needed. The same concept applies for catalog pages: AEM renders catalog pages on demand using real-time commerce data and a CIF catalog template, which ensures that product catalog pages are always up to date. Changes in the product catalog are instantly and automatically reflected on the page so customers always see the most current information about their products of interest.

With the CIF add-on installed for AEM, a product catalog can be embedded into any new or existing AEM page structure:

Storefront page structure with catalog page folder that contains the templates
Storefront page structure with catalog page folder that contains the templates

The Catalog Page folder represents the whole product catalog experience in AEM. The root folder is also the optional landing page of the catalog. One level lower are the default CIF catalog templates to render category and product pages. CIF catalog templates are regular AEM pages and can be edited like any other AEM page.

Authors want and need maximum flexibility so they can build personalized and optimized experiences. However, creating these experiences is often resource intensive and may involve IT for bigger changes. As a result, authors are limited in how much they can optimize compared to what they would like to.

CIF solves this problem. One of CIF’s core features is that it gives practitioners the tools they need to be more creative and productive while reducing their dependency on IT teams. Out of the box, CIF provides a number of default catalog templates that offer a fast and easy way to build standardized product catalog pages. However, CIF also allows authors to go beyond the default templates to create compelling ecommerce experiences at scale. The following use cases will show you how.

Individual product or category content

Individual content can be anything, from editorial content delivered on pages rich with visual assets to friction-free and delightful online experiences. Everything that helps brands and retailers deliver great product experiences leads to higher conversion rates and better business results.

CIF catalog templates can be enriched with placeholders, which are predefined areas in the template that can be replaced with product- or category-specific Content Fragments or Experience Fragments. The example below shows a template that was extended with an Experience Fragment placeholder at the top and a Content Fragment placeholder at the bottom:

Example of a web page created with a CIF template and using the template’s placeholder for Content Fragments and Experience Fragments.
Example of a web page created with a CIF template and using the template’s placeholder for Content Fragments and Experience Fragments.

When the page is rendered, AEM looks for matching content for every placeholder. In the example below shows a product page for which there is no matching content available for the product:

Example of the product page rendered without matching content.
Example of the product page rendered without matching content.

For products that have matching content, the product pages get an individual touch even though they are using the same template. This is very useful for products that benefit from editorial content as shown below:

Example of the product page rendered with additional content, without the need for a new template.
Example of the product page rendered with additional content, without the need for a new template.

As seen in this example, placeholders are ideal to individually enrich pages based on predefined areas. With the content loosely coupled to a placeholder, you get a number of benefits, including:

  • The ability to use your content across multiple touchpoints and other areas of your website
  • Efficiency in building your Content Fragments and Experience Fragments with editors that leverage the full power of AEM.
  • The ability to further extend placeholders with personalization logic, which due to the loosely-coupled approach that CIF offers, allows the placeholder to pick the best matching content.

Multiple catalog templates

In addition to placeholders, CIF also supports multiple catalog templates. This allows authors to create product- and category-specific templates with different structures, content, and components. The result could be totally different looking experiences as shown in the following two examples:

Example of one page in the catalog using a category template that shows a product grouping, which with CIF could extended for to provide personalization if desired.
Example of one page in the catalog using a category template that shows a product grouping, which with CIF could extended for to provide personalization if desired.
Example of another page in the same catalog but using a template designed to focus on two products of a similar type (e.g. dresses) with inspirational assets. With CIF, this template could also be extended to include personalized content if desired.
Example of another page in the same catalog but using a template designed to focus on two products of a similar type (e.g. dresses) with inspirational assets. With CIF, this template could also be extended to include personalized content if desired.

Multiple templates and placeholders are a powerful duo that empowers authors to fully manage the product catalog experience in a fast and scalable way with out-of-the-box tools.

Shoppable experiences

CIF also enables shoppable experiences outside of a typical product catalog. Typical examples are product teasers or carousels on landing pages. You can give your shoppers a seamless shopping experience by showing them other products they might like and giving them a direct way to easily add them to their shopping cart without having to go to the product page first. This approach is commonly referred to as “making every moment shoppable” and offers brands a lot of opportunities to turn any customer experience, such as a fashion blog or product review, into a sale.

CIF supports shoppable experiences by extending AEM’s editor with commerce capabilities to provide access to real-time product data in AEM. This data can be dragged and dropped onto pages or components. The products themselves behave like assets and can be dropped onto pages or components within a page (e.g. product carousel). And if there is additional content or real-time product data available for the associated products on a given page, authors can find and access it easily via the separate tab “Associated Commerce Content”.

Mixing inspirational assets with a product teaser to make a content page transactional
Mixing inspirational assets with a product teaser to make a content page transactional

Managing content and commerce with CIF

Managing the product experience well for your customers is critical for success in any e-commerce business. And, CIF was built with customer experience in mind to help you easily, seamlessly deliver the best possible product experience at the right time.

In many cases, a product experience is not just product data and image nicely rendered, it is the result of a workflow where marketers and others within the e-commerce business are able to enrich their product data with additional content that appeals to their customers.

CIF makes it easy to enrich product catalog data in several different ways to create great customer experiences.
CIF makes it easy to enrich product catalog data in several different ways
to create great customer experiences.

We have seen a wide variety of these enrichment use-cases, but the most common ways in which e-commerce businesses are enriching their customer experiences today include:

  • Inspirational or marketing-driven assets and content to show a product in action or provide additional information
  • Useful resources such as documentation, instructions, how-to, etc.
  • Promotional content to highlight products or categories
  • Additional (role-based) attributes that are related to products, for example, marketing wants to override or extend description or legal needs to provide a product disclaimer.
  • Business-driven configuration to optimize an experience, such as additional SEO data or controlling search facets. Search facets are the different filters that visitors can use to narrow their search. CIF extends this feature by allowing marketers to influence the order in which they appear on the page or or hide certain filters.

CIF deeply integrates the concept of associated content in AEM, turning AEM into a central hub for efficient content and commerce management in a delivery- and touchpoint-agnostic way. Assets, Experience Fragments, and Content Fragments are all taggable with products or categories, either via workflow or manually by practitioners.

Once content and commerce data is linked, it becomes easily findable and usable. Every full-text search in AEM’s backend UI is executed in the commerce backend and AEM, returning product data and related content. The best entry point, however, is the Product Cockpit. Its UI provides a unified view of content and commerce: Real-time product properties and variations are available in the first two tabs, followed by associated AEM content in the next three:

Product Cockpit UI, offering a unified view in which you can find real time product properties and variations.
Product Cockpit UI, offering a unified view in which you can find real time product properties and variations.
Product Cockpit UI, where you can also find all AEM content associated with the product.
Product Cockpit UI, where you can also find all AEM content associated with the product.

Every associated piece of content is deep-linked to enable quick access. This unified view is one of the most efficient ways in AEM to keep track of content and commerce.

Staged commerce data

CIF supports the use of staged catalog data in AEM if the required authorization token is configured. Staged data helpful if practitioners want to prepare a future product launch or preview an experience with a future version of the product catalog.

Previewing a future version of the product catalog is possible in the Product Cockpit by setting the preview date filter or as part of the Sites preview by switching to Timewarp mode.

Example preview of a future product catalog.
Example preview of a future product catalog.

Timewarp mode lets authors browse and preview AEM pages with product catalog for the selected date. Staged products are flagged with visual indicators to help authors differentiate between live and staged products.

Sometimes, showing an experience with staged commerce data is not enough. Authors also have to prepare content for an upcoming date. AEM supports the management of future content with the AEM Launches. CIF extends AEM Launches with the ability to stage commerce data. Working with an AEM Launch will automatically use the product catalog for the configured Launch release date, enabling authors to prepare and preview upcoming experiences. On the release date, AEM will automatically publish the Launch, and the commerce solution will automatically update the product catalog.

Summary

Building compelling experiences is key for online retailers and brands. Some of the best customer experiences are created when product data is enriched with additional content. The CIF add-on extends AEM with tools and functionality to build richer e-commerce experiences efficiently and at scale. Staged and live products are integrated in AEM and available in-context when needed. While AEM practitioners can build basic product catalog pages based on multiple templates and dynamic placeholders, CIF empowers authors to make every content transactional by adding products and add-to-cart actions. With CIF, the ability to build great customer experiences is now only limited by the creativity of the AEM practitioner.

Follow the Adobe Tech Blog for more developer stories and resources, and check out Adobe Developers on Twitter for the latest news and developer products.

Resources

  1. Taking a Deep Dive into Adobe Experience Manager’s Commerce Integration Framework
  2. Architecting a Better Ecommerce Experience with Adobe Experience Manager’s Commerce Integration Framework
  3. How CIF Integrates with Adobe Commerce and Third-Party Commerce Solutions
  4. CIF Venia Reference Site AEM Packages on GitHub
  5. Adobe Experience Manager Documentation: Experience Fragments
  6. Adobe Experience Manager Documentation: Working with Content Fragments
  7. Getting started with AEM Commerce as a Cloud Service
  8. Adobe Experience Manager Launches

--

--

--

News, updates, and thoughts related to Adobe, developers, and technology.

Recommended from Medium

Accessibility Over-Correcting

Small white dog sitting on a bed in the sun

A guide to UX competitive analysis

Cover image

Thinking in public as a digital product designer

poorly drawn thinking face close up

Zephyr- Auction house UX Case Study

W3 — My Brief

Case study: Designing a blood donation app

User Experience Enhancement

What I Learned from My Week with an Adobe Design Researcher

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Markus Haack

Markus Haack

I'm a software engineer, passionate about Home Assistant and automating our house. In my professional life I’m working on commerce and content topics at Adobe.

More from Medium

Discover the PandaDoc API with Postman

Product Comparison: TeamCode Pylon VS Docker Dev Environment

Modernise — IBM Power Systems

Remote Monitoring and Management Audit and Optimization