> ## Documentation Index
> Fetch the complete documentation index at: https://help.experro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Integration

## Shopify

Once your Experro Discovery store connection is live and you’ve finalized all UI customizations in the Experro Admin Panel, the last step is to publish those changes to your Shopify storefront. These instructions apply when you are using the **Experro Default Theme**. If you’ve integrated a custom theme or any other inbuilt theme, please follow your theme’s specific instructions or reach out to support.

### Prerequisites

Before you begin, ensure that:

* Your Shopify store is successfully connected in Experro.
* All desired UI Customization tabs (Theme, Layout, Search Results, Autocomplete, CSS & JS, Translations) have been configured and saved.
* You have access to your Shopify Admin with permission to edit Themes and Theme Code.
* You are working on the **Experro Default Theme** (otherwise steps may vary).

### Steps to Integrate

<Steps>
  <Step title="Open the Shopify Theme Editor">
    * In your Shopify Admin, navigate to **Online Store → Themes**.

    * Click **Edit Themes**.

          <img src="https://mintcdn.com/experro/hT4c11DxPL1gRWmf/images/plug_and_play/shopify_integration/shopify_integration_1.png?fit=max&auto=format&n=hT4c11DxPL1gRWmf&q=85&s=d7a126cccb6d745170f2c7ba88608451" alt="" width="1920" height="893" data-path="images/plug_and_play/shopify_integration/shopify_integration_1.png" />

    * Navigate to the listing page. Select default collection from the page selection dropdown.

          <img src="https://mintcdn.com/experro/hT4c11DxPL1gRWmf/images/plug_and_play/shopify_integration/shopify_integration_2.png?fit=max&auto=format&n=hT4c11DxPL1gRWmf&q=85&s=9c1542418ee492674e6dbd83a85c194a" alt="" width="1906" height="891" data-path="images/plug_and_play/shopify_integration/shopify_integration_2.png" />
  </Step>

  <Step title="Add the Experro Container to Your Collection/Listing Pages">
    * Click **Add section**, then choose **Exp Category Result**, drag and place it where you want on your page.
          <img src="https://mintcdn.com/experro/hT4c11DxPL1gRWmf/images/plug_and_play/shopify_integration/shopify_integration_3.png?fit=max&auto=format&n=hT4c11DxPL1gRWmf&q=85&s=d42fca50bf4dd7d01fb40acba4f5adbd" alt="" width="1922" height="888" data-path="images/plug_and_play/shopify_integration/shopify_integration_3.png" />
  </Step>

  <Step title="Hide the Native Product Grid">
    * Still within that template, locate the default **Product Grid** section.
    * Click the eye icon to **hide** it (so it doesn’t conflict with Experro’s rendering).

          <img src="https://mintcdn.com/experro/hT4c11DxPL1gRWmf/images/plug_and_play/shopify_integration/shopify_integration_4.png?fit=max&auto=format&n=hT4c11DxPL1gRWmf&q=85&s=7e9cf815a6584cc1de7afd8048519c54" alt="" width="1920" height="892" data-path="images/plug_and_play/shopify_integration/shopify_integration_4.png" />
  </Step>

  <Step title="Add the Experro Container to Your Search Results Pages">
    <Info>
      This step is not compulsory. However, if you want to include the Experro search results UI, follow the steps below:
    </Info>

    * Navigate to the page using the search bar.
    * Click **Add section**, then choose **Experro AI Search Result**.
    * Click **Save**.

          <img src="https://mintcdn.com/experro/hT4c11DxPL1gRWmf/images/plug_and_play/shopify_integration/shopify_integration_5.png?fit=max&auto=format&n=hT4c11DxPL1gRWmf&q=85&s=8cd0aa6b7f80bc2559f36e977cfdc9a5" alt="" width="1920" height="887" data-path="images/plug_and_play/shopify_integration/shopify_integration_5.png" />
  </Step>

  <Step title="Optional: Personal Branding for Experro Default Theme">
    * If you’re using **Experro Default Theme**, you can override its CSS variables to match your brand.
    * In the same **CSS & JS** tab (under the **CSS** editor), paste the following:

      ```css theme={null}
      :root { 
        --exp-container-width: 1400px; 
        --exp-card-image-aspect-ratio: 3 / 4;
        --exp-color-gray-dark: #333; 
        --exp-color-gray-light: #757575; 
        --exp-color-light: #fff; 
        --exp-border-color: #e8e8e8; 
        --exp-sale-badge-color: #fff; 
        --exp-sale-badge-background-color: #be5048; 
        --exp-custom-badge-color: #fff; 
        --exp-custom-badge-background-color: #8b5cf6; 
      }  

      ```
    * Adjust **any** of these `--exp-…` variables to suit your fonts, colors, and layouts.
  </Step>

  <Step title="Inject the Experro is Live Script">
    * Before injecting the Experro is live script, please ensure that you use the preview mode from Experro Admin panel to verify that Experro is rendering your custom UI.
    * After previewing your custom UI and search experience, you can make it live by injecting the Experro Live Script into your site.
    * In the Experro Admin Panel, go to **Discovery → UI Customization → CSS & JS**.
    * In the **JavaScript (JS) Editor** section, enter:

      ```js theme={null}
      window["Experro"].BeforeInit(`
         window["Experro"].SetConfig({
           "is_live": true
         })
      `); 
      ```
  </Step>

  <Step title="Save Your Theme Settings">
    * Click **Save** at the top right to persist your changes in Shopify.
  </Step>

  <Step title="Publish Your Theme">
    * Navigate to **Themes**, find **Experro Default Theme** if not already selected , and click **Publish**.
    * Confirm when prompted. Your updated theme, complete with Experro Discovery UI, is now live.
  </Step>
</Steps>

By following these steps, you’ll have a fully integrated, plug‑and‑play connection between your Shopify storefront and Experro Discovery—empowering you to deliver a world‑class discovery experience from day one.