---
title: Adding profile viewer to commerce website
slug: docs/adding-profile-viewer-to-commerce-website
docTags: 
createdAt: 2024-12-17T17:01:18.387Z
---

### Prerequisites: Run Quick Setup Commerce Preset

1. Log in to Data Collection and find the property with the title you provided while running the quick setup 

::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/xWq9KGt1DSOw4a5U2NKw0_image.png" size="100" isUploading="false" width="2682" height="618" darkWidth="2682" darkHeight="618" showCaption="false" indent="3"}

2. Click on the name 
3. Go to environments

::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/fhmAS6ol4X2gVtXR9eoeJ_image.png" size="100" isUploading="false" width="3442" height="888" darkWidth="3442" darkHeight="888" showCaption="false" indent="3"}

4. Click the "box" icon next to Development - new popup will show up

::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/WlCZ3P8PHf28odx8XJsYm_image.png" size="100" isUploading="false" width="3014" height="1462" darkWidth="3014" darkHeight="1462" showCaption="false" indent="3"}

5. Copy the code you will need to add to your commerce website

::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/b66z0A2tt8rgTMi20-doW_image.png" size="100" isUploading="false" width="1302" height="244" darkWidth="1302" darkHeight="244" showCaption="false" indent="3"}

6. Log in to the Commerce Backoffice:



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

7\.  Navigate to Design Configuration:



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

8\. Edit the storeview that needs the script. In the case of CitSignal data, it’s the Citisignal Store View:



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/tqli-fsiQ-tEc6_t_aKop_image.png)

9\. Expand the HTML Head accordion and find the Scripts and Stylesheets field:



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

10\. Drag the text area to expand the Scripts and Stylesheets text area and paste in the script after the existing CSS content:



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

11\. Click Save and Continue:



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

12\. Navigate to System > Tools > Cache Management



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

13\. Select Configuration cache and Page cache and Click “Submit” to refresh the cache:



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