---
title: Storefront Configuration
slug: accs/storefront-configuration
docTags: 
createdAt: 2026-03-30T10:05:55.924Z
---

# Overview

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. 

# Update Homepage

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.

## Open the Storefront 

1. Open your storefront in a new window or tab: `{{STOREFRONT_URL}}`
2. Click the **Sidekick icon** in your browser 
3. Ensure the Sidekick toolbar appears on the page 

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/rmLWqQgcZltYnw-1GQutl_.blob)

:::hint{type="info"}
Note: If your SideKick editor isn’t signed in – sign in with your `{{LOGIN_EMAIL}}` and password `accs@2026`
:::

4. Click **Edit** 

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.

## Launch Universal Editor

1. Click the **Universal Editor** **icon** in da.live 

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

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/C-OylPxER_RkeF0yx14dG_.blob)

## Add a Block 

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. 

1. Select the section of the page where you want to add content 

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. 

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/ers5sZec8bmqQ5tj9gA16_.blob)

2. Click the + icon to **Add **a block

::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/J_SUJuRUrdkH8a7CgY5hK_.blob" size="26" width="294" height="849" position="center" showCaption="false"}

3. Choose a **Teaser / Product Teaser block**

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/W0ySIuvJzwSnME6Vai48z_.blob)

4. Click on the Teaser Block just created and you will see in the right hand side that block will be highlighted 

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/TrAzJqTMFfM2QyCEbCVSA_.blob)

5. Change the action to **Properties** in right hand panel to edit the content 

::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/OpFuRAuKmQiMDc3fbJyy1_.blob" size="68" width="901" height="1369" position="center" showCaption="false"}

6. Add the `{{PRODUCT_SKU}}` you created in commerce 
7. Enable **Show Details **
8. Enable **Add to Cart **

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/UjGX0rjAE_HArvQvUgBUE_.blob)

## Content Variations

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. 

1. Click on some text within one of the blocks that you want to update
2. Then click on the **Generate Variations** button in the right hand navigation 

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

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/QKODj3yc14s8CmBX8Wacy_.blob)

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

3. In the prompt field enter a prompt for how you want the text to change, you can use ‘I want to optimise this text for better SEO and I want it to be in casual language aimed at a millennial audience’ 
4. Click on the Generate button 

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

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/3U1nxUtFG_kmA4rthA6Xz_.blob)

5. Click to engage the text you want 

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/M10DZJ0CuB1n1YTaa4wV0_.blob)

## Product Recommendations

1. Find the embedded Youtube Video block and select it. 
2. You can see a product recommendations block below it in the content tree.   

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/JftgwaGzghhe4GPDh5x8V_image.png)

3. Select the recommendations block and change to Properties 
4. Copy your recommendations unit id: `{{REC_UNIT_ID}}` into the configuration 

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/jtkvtWR4CuDGASzYKqIWC_image.png)

## Preview and Publish

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. 

1. In the Universal Editor, click **Publish** 
2. Choose the destination as **Preview** 
3. Click** Publish** 

::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/m6u2kjSqUJMjQ4e6o505P_.blob" size="72" width="822" height="762" position="center" showCaption="false"}

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

1. Return to the Universal Editor 
2. Click **Publish** 
3. Set destination as **Live**
4. Confirm the publish action if prompted 

::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/q7j-JV5NV-w6-y1jInMGa_.blob" size="72" width="829" height="771" position="center" showCaption="false"}

:::hint{type="success"}
Your content updates are successfully published and visible on the storefront URL. The product teaser is live and accessible to customers, demonstrating how content changes can be quickly deployed to enhance the shopping experience.

**NOTE - **If changes are not visible immediately, refresh the page or allow a few moments for the publish process to complete.
:::

# Update Category Page

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. 

## Access DA.live 

1. Open your storefront in `{{CONTENT_URL}}`
2. If not already, Sign in using `{{LOGIN_EMAIL}}` and password `accs@2026`

## Navigate to the Phones Category Page 

1. Navigate to the **Phones category page** 
2. Open the page 

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/BFxQXxp6eGCTqnivT9oOB_.blob)

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

First lets see how this page renders on different devices 

3. Click on the **Rendition** button to the right of the page content 

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/G2q2IN0QPKhkCr8XHshAM_.blob)

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

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/mf-hCOBPqP5i_QR4Rt7vc_.blob)

4. Close this by clicking on the **X** at the bottom of the device list on the right hand side. 
5. Open Universal Editor 

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/_n7l-I8fk8Nx2ULne6dhh_.blob)

## Select the Product Teaser

1. Locate the **Product Teaser** at the top of the category page 
2. Click to select the Product Teaser component to activate the section 

## Add a Hero Banner

1. Click the **Add Section** button 

::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/bNYIYPp4Bh3Y_dRfZNXOh_.blob" size="66" width="901" height="900" position="center" showCaption="false"}

2. Choose **Hero V2** 

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

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/2_7JFDeNDBf3sAzbPwMU-_.blob)

3. You will see the Content Tree in the right hand panel with the order of the blocks 

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/t6JOuJ0Mgit0rvjEDtK8l_.blob)

4. Drag the Hero block to the correct position above the product teaser

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/GCfhtKQ_76hcybqMT7Srx_.blob)

You can now edit the Hero Block

## Edit Hero Banner Content

1. Double Click on the Hero Banner label in the right hand navigation 

::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/K5sn-kJ28ZpFOD6ldlk8O_.blob" size="76" width="901" height="1273" position="center" showCaption="false"}

2. Add an image to the Hero Banner by clicking on the + Add button in the Image Section of the 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. 

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/OBmIamyeRAZKtjKZEUrte_.blob)

3. You can use the filters to find an appropriate image or search 
4. Search for AdobeStock\_214052690 
5. Click **Select **to add that image to the Hero Banner 

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/Il-l9IeiqLxPbtxCD-AsM_.blob)

6. Go to the Properties section for that Image (If it doesn’t show, click on the image in the page content) 
7. Add a hero description in the text field *‘Great Summer Deals on Phones and Tablets’* 

## Preview and Publish 

1. Click **Preview** to review your changes 
2. Click **Publish** to make the updates live 



:::hint{type="success"}
The Phones category page now displays an updated hero banner, enhancing the visual presentation and providing a more engaging browsing experience for customers.
:::