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

## Overview

In this section, you’ll inject the Experro theme scripts into your Magento storefront via the Admin panel. These scripts will load your custom UI templates, CSS/JS, and wire up all e‑commerce variables and selectors.

## Steps

<Steps>
  <Step title="Log in to Magento Admin">
    Open your Magento Admin panel in your browser.
  </Step>

  <Step title="Navigate to the Storefront Configuration">
    * Go to **Content → Configuration**.
    * Select the Store and language as per your requirement.
  </Step>

  <Step title="Locate the Footer HTML">
    * Expand **Other Settings → Footer**.
    * Scroll to **Miscellaneous HTML**.
  </Step>

  <Step title="Inject the Experro Theme Scripts">
    In the **Miscellaneous HTML** editor, paste the following block **(replace all `<…>` placeholders as noted below)**:

    ```
     <script id="exp-custom-script">
       window["ExpBaseUrl"] = "<your_experro_base_url>"
       fetch(`https://${window["ExpBaseUrl"]}/apis/ui-customization/public/v1/versions/published?fields=*&locale=en-us`, {
         method: "GET",
       }).then(response => {
         return response.json();
       }).then(customResponse => {
         window["ExpConfigs"] = { ecommerce_variables: { conversion_rate: 1, page_type: "page", currency_code: "USD" } };
         window["ExpTemplates"] = { templates: {}, css_and_js: {} };

         const { ui_version_settings } = customResponse.Data?.item;
         const templates = { ...ui_version_settings.templates };
         const css_and_js = { ...ui_version_settings.css_and_js };

         delete ui_version_settings.ecommerce_variables;
         delete ui_version_settings.templates;
         delete ui_version_settings.css_and_js;

         Object.assign(window["ExpConfigs"], ui_version_settings);
         Object.assign(window["ExpTemplates"].templates, templates);
         Object.assign(window["ExpTemplates"].css_and_js, css_and_js);
       }).catch(error => console.error("Fetch error:", error));
     </script>

     <script src="https://${window["ExpBaseUrl"]}/exp-themes/core/v1/main.min.js"></script>
    ```
  </Step>

  <Step title="Determine Your <your_experro_base_url> and replace it in the above script">
    1. In **Experro Admin**, go to **Workspace Settings → Channels**.
    2. Open **Channel Settings**.
    3. Switch to the **Languages** tab.
    4. Copy the **Language URL** corresponding to your store’s locale.
    5. Replace `<your_experro_base_url>` in the script with this URL.
  </Step>

  <Step title="Replace Liquid Variables">
    * For each `"<liquid_variable>"`, substitute the appropriate Magento Liquid variable.
  </Step>

  <Step title="Save Configuration">
    * Click **Save Configuration**.

    Your Experro theme is now integrated into your Magento storefront. Visitors will see your custom UI components and e‑commerce data wired up automatically.
  </Step>

  <Step title="Page‑Specific Script & Selector Injection">
    To enable Experro features on specific page types, you must insert **two separate pieces** into your theme templates:

    * **Configuration Script** – Add the `<script>` block to configure `ecommerce_variables` in the relevant PHTML or layout file.
    * **Placeholder Container** – Add the `<div id="exp-*-page-selector">` container in the HTML where Experro should render its widgets.
  </Step>

  <Step title="Category Listing Page">
    * **Configuration Script** (e.g., in `view.phtml` before the product loop or via `catalog_category_view.xml`):

      ```
      <script>
      Experro.SetEcommerceConfig({
        "active_category": "<liquid_variable>",
        "category_name": "<liquid_variable>",
      });
      </script>
      ```

    * **Placeholder Container** (place this in your category template where listings appear):

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

  <Step title="Product Detail Page">
    * **Configuration Script** (add at top of `view.phtml` or via `catalog_product_view.xml`):

      ```html theme={null}
      <script>
      Experro.SetEcommerceConfig({
        	  "product_sku": "<liquid_variable>",
        	  "product_id": "<liquid_variable>",
        	  "product_title": "<liquid_variable>",
        	  "product_price": "<liquid_variable>",
      });
      </script>
      ```
  </Step>

  <Step title="Checkout Page">
    * **Configuration Script** (add at the start of `onepage.phtml` or via `checkout_index_index.xml`):

      ```html theme={null}
      <script>
      Experro.SetEcommerceConfig({
        	  "cart_length": "<liquid_variable>",
        	  "order_id": "<liquid_variable>",
        	  "checkout_id": "<liquid_variable>",
      });
      </script>
      ```
  </Step>

  <Step title="(Optional) Search Results Page">
    * **Placeholder Container** (in `search_result_index.xml` or `form.mini.phtml` to wrap search results):

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