# Integrate product journey into Shopify

> Learn how to seamlessly integrate your Vestis Labs product journey directly into your Shopify theme.

Source: https://docs.vestislabs.com/integrations/integrate-product-journey-into-shopify/

Learn how to seamlessly integrate your Vestis Labs product journey directly into your Shopify theme. This guide walks you through copying the necessary liquid code and embedding it into your online store to enhance customer transparency.

1. **Go to Collection & Styles**

   From the Home dashboard, click Collection & Styles in the left sidebar.

   ![From the Home dashboard, click Collection & Styles in the left sidebar.](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/01-from-the-home-dashboard-click-collection.webp)

2. **Open the Styles list**

   Expand the Collection & Styles menu and select Styles.

   ![Expand the Collection & Styles menu and select Styles.](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/02-expand-the-collection-styles-menu-and.webp)

3. **Select the style**

   On the Styles list, click the style you want to embed (e.g., Blussy Jacket).

   ![On the Styles list, click the style you want to embed (e.g., Blussy Jacket).](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/03-on-the-styles-list-click-the.webp)

4. **Open the Product ID tab**

   Inside the style's edit page, click the Product ID tab in the top navigation.

   ![Inside the style's edit page, click the Product ID tab in the top navigation.](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/04-inside-the-style-s-edit-page.webp)

5. **Open Product Journey**

   In the Product ID sub-menu on the left, select Product Journey.

   ![In the Product ID sub-menu on the left, select Product Journey.](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/05-in-the-product-id-sub-menu.webp)

6. **Click "Embed to your website"**

   On the Product Journey page, under Actions, click Embed to your website.

   ![On the Product Journey page, under Actions, click Embed to your website.](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/06-on-the-product-journey-page-under.webp)

7. **Copy the \<head\> code**

   A modal appears with two code blocks. Click the copy icon next to the first block — the stylesheet link and CSS variables to add inside your website's \<head\> tag.

8. **Copy the \<body\> code**

   Click the copy icon next to the second block — the widget \<div\> and initialization script to add inside your website's \<body\> tag.

   ![Click the copy icon next to the second block — the widget div and initialization script to add inside your website's…](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/07-click-the-copy-icon-next-to.webp)

9. **Go to your Online Store**

   In your Shopify admin, go to Sales channels \> Online Store.

   ![In your Shopify admin, go to Sales channels Online Store.](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/08-in-your-shopify-admin-go-to.webp)

10. **Edit your theme**

   Click Edit theme on your active theme.

   ![Click Edit theme on your active theme.](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/09-click-edit-theme-on-your-active.webp)

11. **Open the product template**

   In the theme editor, navigate to the Template section for your product page (e.g., select a product like Blussy Jacket).

   ![In the theme editor, navigate to the Template section for your product page (e.g., select a product like Blussy Jacket).](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/10-in-the-theme-editor-navigate-to.webp)

12. **Add a new section**

   Under Template, click Add section.

   ![Under Template, click Add section.](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/11-under-template-click-add-section.webp)

13. **Choose Custom Liquid**

   In the sections panel, scroll to Layout and select Custom Liquid.

   ![In the sections panel, scroll to Layout and select Custom Liquid.](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/12-in-the-sections-panel-scroll-to.webp)

14. **Open the Liquid code box**

   With the Custom Liquid section selected, click into the empty Liquid code box.

   ![With the Custom Liquid section selected, click into the empty Liquid code box.](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/13-with-the-custom-liquid-section-selected.webp)

15. **Paste the embed code**

   Paste the body code you copied from Vestis in Step 8 (the widget \<div\> and script block).

   ![Paste the body code you copied from Vestis in Step 8 (the widget div and script block).](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/14-paste-the-body-code-you-copied.webp)

   *Tip: The code (stylesheet + CSS variables) should be added separately via y**our theme's* *theme.liquid* *f**ile or a head custom-code section, since the Custom Liquid section only covers the body.*

16. **Review the pasted code**

   Scroll the Liquid code box to confirm the full script, including the vestis Product Journey Initialization, was pasted correctly.

   ![Scroll the Liquid code box to confirm the full script, including the vestis Product Journey Initialization, was pasted…](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/15-scroll-the-liquid-code-box-to.webp)

   **Preview and adjust layout**

   The Product Journey widget ("Your Product Storyline" : material composition, tier suppliers, and origins) now renders on the product page. Adjust Padding (Top/Bottom) and other layout options in the right panel as needed.

   ![The Product Journey widget ("Your Product Storyline" : material composition, tier suppliers, and origins) now renders on the…](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/16-the-product-journey-widget-your-product.webp)

17. **Save**

   Click Save in the top-right corner to publish the changes to your live storefront.

   ![Click Save in the top-right corner to publish the changes to your live storefront.](https://docs.vestislabs.com/assets/integrations/assets/integrate-product-journey-into-shopify/17-click-save-in-the-top-right.webp)

   Your product page now displays the full Product Journey widget material composition, supplier tiers, and origin details sourced live from Vestis.