# Digital ID customization in product journey

> Users can manage Product Journey Information, which will be displayed on the Digital ID.

Source: https://docs.vestislabs.com/digital-id/digital-id-customization-in-product-journey/

**Requires:** permission `PRE_SALE_CONTENT, PRODUCT_JOURNEY_MAPPING`

**Where to find it:** Settings → Digital ID → Product Journey

1. **To access the Digital ID Customization Page, go…**
   To access the **Digital ID Customization Page**, go to **Settings \> Digital ID** on the left bar menu **.** Select **Product Journey.**

   ![To access the Digital ID Customization Page, go to Settings Digital ID on the left bar menu .](https://docs.vestislabs.com/assets/digital-id/assets/digital-id-customization-in-product-journey/01-to-access-the-digital-id-customization.webp)

   Users can customize it using the **"Switch Icon"** to show or hide the customized Product Journey.

2. **Show Composition: Users can show or hide the…**
   **Show Composition:** Users can show or hide the composition of the Style/Product in the product journey. The **Composition** will shown on the product journey preview on your Digital ID.

   ![Show Composition: Users can show or hide the composition of the Style/Product in the product journey.](https://docs.vestislabs.com/assets/digital-id/assets/digital-id-customization-in-product-journey/02-show-composition-users-can-show-or.webp)

3. **Title: Enter the Title of the product journey page for the Digital ID.**
   The **Title** will show on the product journey preview on your Digital ID.

   ![Title: Enter the Title of the product journey page for the Digital ID.](https://docs.vestislabs.com/assets/digital-id/assets/digital-id-customization-in-product-journey/03-title-enter-the-title-of-the.webp)

   **Nb:** The **"Title"** must be filled in to use the **Collapsible features.**

4. **Collapsible: Users can show or hide the tier…**
   **Collapsible:** Users can show or hide the tier supply chain of the style of the product journey on Digital ID. Click the **"Dropdown"** icon to show or hide the tier supply chain of the style on your Digital ID.

   ![Collapsible: Users can show or hide the tier supply chain of the style of the product journey on Digital ID.](https://docs.vestislabs.com/assets/digital-id/assets/digital-id-customization-in-product-journey/04-collapsible-users-can-show-or-hide.webp)

5. **Show Material Code: The material code will be…**
   **Show Material Code:** The material code will be displayed in the product journey next to the product name. The **Material Code** will show on the product journey next to the Style/Product Name preview on your Digital ID.

   ![Show Material Code: The material code will be displayed in the product journey next to the product name.](https://docs.vestislabs.com/assets/digital-id/assets/digital-id-customization-in-product-journey/05-show-material-code-the-material-code.webp)

6. **Show Supplier: The supplier name will be displayed in the product journey.**
   The **Supplier Name** will show on the product journey preview on your Digital ID.

   ![Show Supplier: The supplier name will be displayed in the product journey.](https://docs.vestislabs.com/assets/digital-id/assets/digital-id-customization-in-product-journey/06-show-supplier-the-supplier-name-will.webp)

7. **Show Supplier city: The supplier city will be displayed in the product journey.**
   The **Supplier City** will show on the product journey in the Origin Section of the preview your Digital ID.

   ![Show Supplier city: The supplier city will be displayed in the product journey.](https://docs.vestislabs.com/assets/digital-id/assets/digital-id-customization-in-product-journey/07-show-supplier-city-the-supplier-city.webp)

8. **Users can edit the body text color, secondary…**
   Users can edit **the body text color, secondary text color,** **disabled text color,** and the **Popup Background Color** in light mode or dark mode.

   ![Users can edit the body text color, secondary text color, disabled text color, and the Popup Background Color in light mode…](https://docs.vestislabs.com/assets/digital-id/assets/digital-id-customization-in-product-journey/08-users-can-edit-the-body-text.webp)

9. **The corner radius and Popup Z-Index are mandatory.…**
   **The corner radius and Popup Z-Index are mandatory.** Enter the **Corner Radius** as a size such as 0.5rem, and enter a number in **Popup Z-Index**. The colour fields cannot be left empty either.

   ![The corner radius and Popup Z-Index are mandatory.](https://docs.vestislabs.com/assets/digital-id/assets/digital-id-customization-in-product-journey/09-the-corner-radius-and-popup-z.webp)

10. **Users can embed your product journey to the…**
   The **Embed to your website** button is not on this settings page. Open a style, go to **Product ID**, then **Product Journey**. In the **Actions** card, click **Embed to your website**. The **Customize** button in the same card brings you back to these settings.

   ![Users can embed your product journey to the website using Embed to your website next to the save button.](https://docs.vestislabs.com/assets/digital-id/assets/digital-id-customization-in-product-journey/10-users-can-embed-your-product-journey.webp)

11. **Select save on the lower right side every time you make the changes.**

   ![Select save on the lower right side every time you make the changes.](https://docs.vestislabs.com/assets/digital-id/assets/digital-id-customization-in-product-journey/11-select-save-on-the-lower-right.webp)

   When you update the customize section and the changes haven't been saved, there will be a display the message **You have unsaved Changes** under the save button.

   ![When you update the customize section and the changes haven't been saved, there will be a display the message You have…](https://docs.vestislabs.com/assets/digital-id/assets/digital-id-customization-in-product-journey/12-when-you-update-the-customize-section.webp)

## Global map

Use **Global Map** to show a world map with the supplier locations connected by their journey. Select **Hidden**, **Top of journey** or **Bottom of journey** to choose where it appears.

> [!NOTE]
> **Embed to your website** is only available if you have the permission to use the Shopify product journey widget.