> ## 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

Here’s how to publish your Experro UI customizations to your BigCommerce storefront once you’ve finished connecting the store and configuring your UI:

## Prerequisites

* **Store Connection:** You’ve already connected your BigCommerce store in Experro (see [Store Integration](/plug_and_play/bigcommerce_integration/connect_your_store) for details).
* **UI Customization Complete:** All desired changes under **UI Customization → Search Results**, **Layout**, **CSS & JS**, etc., have been configured and saved in the Experro Admin Panel.
* **Experro Default Theme:** These steps apply when you’re using the Experro Default Theme on your store.

<Steps>
  <Step title="Modify Your BigCommerce Theme">
    1. **Open BigCommerce Admin**\
       Log in to your BigCommerce control panel.

    2. **Edit Theme Files**
       * In case of multiple storefronts, Navigate to **Channels** → Select your desired storefront.
       * In case of single store, Navigate to **Storefront** → **Themes**.
       * Select **Edit Theme Files**.\\
             <img src="https://mintcdn.com/experro/jT9kDcQDGoTnsB0Y/images/plug_and_play/bigcommerce_integration/bc_publish_step1.png?fit=max&auto=format&n=jT9kDcQDGoTnsB0Y&q=85&s=5aea2e85959a8d148a1c8243f5c8b6de" alt="" width="1919" height="1079" data-path="images/plug_and_play/bigcommerce_integration/bc_publish_step1.png" />

    3. **Locate the Category Template**
       * In the file tree, open `templates/pages/category.html`.\\
             <img src="https://mintcdn.com/experro/jT9kDcQDGoTnsB0Y/images/plug_and_play/bigcommerce_integration/bc_publish_step2.png?fit=max&auto=format&n=jT9kDcQDGoTnsB0Y&q=85&s=d1d766f64b7bc4d4846890ebff8a67ed" alt="" width="1919" height="1079" data-path="images/plug_and_play/bigcommerce_integration/bc_publish_step2.png" />

    4. **Insert the Experro Container**

       * Identify and comment out (or remove) the existing product‐grid wrapper where you want Experro to render.
       * Replace it with:

       ```html theme={null}
       <div style="min-height: 100vh;">
          <div id="exp-cat-page-selector"></div>
       </div>
       ```

           <img src="https://mintcdn.com/experro/jT9kDcQDGoTnsB0Y/images/plug_and_play/bigcommerce_integration/bc_publish_step3.png?fit=max&auto=format&n=jT9kDcQDGoTnsB0Y&q=85&s=923d51ef879cff5a1282d9c5ff463fe7" alt="" width="1919" height="1079" data-path="images/plug_and_play/bigcommerce_integration/bc_publish_step3.png" />

    5. **Save & Apply**\
       Click **Save** to commit your changes. BigCommerce will re‐apply the updated template immediately.
  </Step>

  <Step title="Inject the Experro Initialization Script">
    1. **Open Experro Admin Panel**\
       Go to **Discovery → UI Customization → CSS & JS**.

    2. **Paste the Initialization Snippet**\
       In the **JavaScript (JS) Editor** section, enter:
       ```js theme={null}
       window["Experro"].BeforeInit(`
       window["Experro"].SetConfig({
          "desktop_view": {
             "autocomplete_replace_with": "input",
             "autocomplete_block_selector": "<your_search_selector>",         
          },
          "mobile_view": {
             "autocomplete_replace_with": "icon",
             "autocomplete_block_selector": "<your_search_selector>",       
          }
       });
       `);
       ```

    3. **Save Changes**\
       Click **Save** in the CSS & JS tab.
  </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">
    * 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="Preview and Publish">
    1. **Preview Locally**\
       Use your storefront’s preview mode to verify that:
       * The Experro container is rendering your custom UI.
       * Search and facet components behave as expected on both desktop and mobile.

    2. **Publish to Production**
       * When you’re satisfied, click **Publish** in the Experro Admin Panel.
       * Your Experro Discovery UI and behavior changes will go live on your BigCommerce store.
  </Step>
</Steps>

By following these steps—updating your theme template, injecting the Experro initialization script, and then publishing—you’ll ensure that your Experro Discovery enhancements appear seamlessly on your BigCommerce storefront.