With your product, pricing and merchandising now configured, the next step is to bring these elements to life within the storefront.

In this section, you will focus on how Adobe Commerce enables you to deliver engaging, content-driven shopping experiences by surfacing products in meaningful and visually compelling ways.

You will work through key storefront capabilities, including adding product teasers to the homepage, displaying product recommendations and enhancing category presentation. You will also explore how content variations and A/B testing can be used to optimise experiences and drive better outcomes.

By connecting backend configuration with frontend presentation, you will see how changes made within Adobe Commerce directly influence the customer journey.

By the end of this section, you will have a fully realised storefront experience that showcases your product, promotions and recommendations in a cohesive and engaging way.

In this exercise, you will use the Universal Editor to update storefront content and add a product teaser to the homepage. This demonstrates how content and commerce can be combined to create engaging, shoppable experiences.

You will begin in the storefront, use the Sidekick Editor to access editing capabilities, and transition into the Universal Editor to make real-time updates.

This will open the page in DA.live.

DA.live is the authoring environment used to manage and structure content for Edge Delivery Services. It provides a simple, collaborative interface where structure can be created, edited and organised before being published to the storefront. In this lab, DA.live acts as the bridge between the Sidekick Editor and the Universal Editor, enabling you to access and manage page content efficiently before making visual updates.

This will open the page in a wysiwig editor for easy management of content

A content block is a reusable component used to structure and display content within a page. It can include elements such as text, images, links or product references, and is designed to be easily added, edited and rearranged within the storefront.

In the context of this lab, content blocks are used within the Universal Editor to build and customise pages, enabling you to combine content and commerce elements—such as product teasers and banners—into cohesive, engaging customer experiences.

You can do this by navigating and then clicking on the area you want to add a block to or opening the Content Tree on the right hand side.

Generate Variations is an AI-powered capability in Edge Delivery Services that enables you to quickly create versions of content based on a single input. Using generative AI, it can suggest alternative headlines, descriptions or messaging variations that align with your content goals.

In this lab, Generate Variations allows you to rapidly experiment with different content approaches, making it easier to personalise experiences, test messaging and optimise how content is presented to customers without manually creating each variation.

This will open the generative engine for creating variations where you will see the text for the section you have engaged.

At the bottom of the Generate Variations window you will see popular prompts or you can add your own.

The prompt will take a minute or so to run and offer variations

Before making content live, it is important to preview and validate your updates to ensure they appear and function as expected. Adobe Commerce and Edge Delivery Services provide a streamlined workflow that allows you to review changes in real time before publishing them to the storefront.

In this exercise, you will preview your updates and then publish them, making your changes visible to customers.

There are scheduling tools in Universal Editor enabling content creators to set a time and date for approved content to go live. For this exercise we will be manually pushing it live.

Content will be ready to attach preview link to approvals workflow. Once you're happy you can publish the content to send it live.

In this exercise, you will update the hero banner on a category page using the Universal Editor. This demonstrates how Universal Editor can be used to easily modified to enhance visual storytelling and improve the browsing experience on any page.

You will access DA.live, navigate to the Phones category page and launch the Universal Editor to make real-time updates to the hero banner.

You can see above how the category ID is mapped to a category page.

First lets see how this page renders on different devices

This will enable you to see what the page will look like in different aspect ratios before you go to change anything.

You will see that a Hero Banner has been added but it is in the wrong position

You can now edit the Hero Block

This will open your assets repository where you can search for and use a pre approved asset. You will see all assets available for your brands so content can be used across different brands.