---
title: Step 3 - Modify the website
slug: docs/step-3-modify-the-website
docTags: 
createdAt: 2024-11-19T09:22:30.216Z
---

The website project templates can be a base for your demo. You can modify each page, add and remove other pages to make your demonstration as real as possible.

We will modify the retail home page for this exercise, but the same steps can be applied to any other website project.

### MODIFY WEBSITE CONTENT

1.  Go to [https://dsn.adobe.com/](https://dsn.adobe.com/) Workspace and open your website project.



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/PMn_ID5sT4QkB9iJdrOu8_image.png)

A different thumbnail represents each page. Click on some of them to see what they look like. As an example, we will first open the "Home" Page. Click on it and click "Edit content" from the panel on the right:



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/gFXu-RCJ5NTMQ4KGgJP1Y_image.png)

After clicking, you will be redirected to the Visual UI screen, where you can select and edit different components.

![](https://api.archbee.com/api/optimize/5DDrYpNrf6iEJahKpoKSv-ShQfwcU33BC_8mjctZpB1-20241122-070653.png)

Click on the "Banner" just like above.

Using the panel on the right, you can modify the image, text, buttons, alignment, links, etc. Let's change the picture and the title. New image URL: [https://s7d1.scene7.com/is/image/TitanProd/homepage.loggedin.EC.desktop.pod0.1440x650@2x?jpegSize=300\&wid=1920](https://s7d1.scene7.com/is/image/TitanProd/homepage.loggedin.EC.desktop.pod0.1440x650@2x?jpegSize=300\&wid=1920) 

New title: Find your Experience Cloud solutions, learning resources, and admin contact info.

Pretitle: Welcome Back



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/CdpsqlEFajbzFonw_X3vR_image.png)

Expand the button appearance section and remove the button label



::Image[]{src="https://docs.adobedemo.com/~gitbook/image?url=https%3A%2F%2F3295630118-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MMLrO7TweNFMn8PgeVh%252Fuploads%252FagTtFP5zaZBYWc5KGXfc%252Fimage.png%3Falt%3Dmedia%26token%3D72abaf56-d725-474c-bd94-3bc6d6593231&width=300&dpr=4&quality=100&sign=d066d973&sv=1" size="64" width="594" height="468" position="center" showCaption="false"}

Expand the Alignment section. Change the alignment from right to left.



::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/KKsyvvMlq36TPBMtZ7FO3_image.png" size="40" width="580" height="478" position="center" darkWidth="580" darkHeight="478" showCaption="false"}

All changes are saved automatically. There is no need to click any "Save" button. Everything you do will be visible in your project right after a refresh

Refresh your project in the browser. It should now look like this:



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/TNuc0Ig4zlWrnCGMZqLc9_image.png)

Similarly, you can modify the rest of the pages.

### MODIFY THE BRANDING

You can change the page branding, e.g., logo, header, footer colors, and fonts. Switch to the branding page of your project to make the changes.



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/ZWCf0zYf3d5iA-iOX0t75_image.png)

### MODIFY THE PRODUCTS

You can add or remove products by switching to the **Products** tab.



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/hVlYgBwepSPsIOgIDPBH__image.png)

Click on the **+Add** to add a new product.



::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/1kqnVXd2_CV_w1VkgTb3Y_image.png" size="68" width="3356" height="72" position="center" darkWidth="3356" darkHeight="72" showCaption="false"}

Click on the newly added row to make changes to the product.

::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/HhHAQw0_bEAdT7ianGioI_image.png" size="78" width="3350" height="180" position="center" darkWidth="3350" darkHeight="180" showCaption="false"}



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/j09LXM8Fr-Fv22aOvH7ft_image.png)

Provide product details as below:

**Name:**
 **Velocity DryFit Tee**

**Description:**
 The Velocity DryFit Tee is an ultra-light, breathable running top designed to wick sweat, keep you cool, and move with your body for peak performance.

**Category**: Men / Tops

**Price**:29

**Property**:

**sku**:MST07

**thumbnail**: [https://demo-system-next.s3.amazonaws.com/assets/luma/Velocity-DryFit-Tee.png](https://demo-system-next.s3.amazonaws.com/assets/luma/Velocity-DryFit-Tee.png)

**Image**: [https://demo-system-next.s3.amazonaws.com/assets/luma/Velocity-DryFit-Tee.png](https://demo-system-next.s3.amazonaws.com/assets/luma/Velocity-DryFit-Tee.png)

It will look like below:



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/mcZ4rOcxFirMB-q6vM-zo_image.png)

Go to the website and open the Men tab. Scroll down and click on All Men’s Products. The newly added product will be visible there.

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/N5B7rKIKgyMZepzu4D5dA_image.png)



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/cyEZi0bPhURMSElKjWm48_image.png)



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/OaDOqW9G1d1yfotAxlhqi_image.png)

You can use the **Export to File **option to download all products and reuse them in another project.



::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/VuR-QBpWENxE5wB1mvtWy_image.png" size="68" width="296" height="102" position="center" showCaption="false"}