Skip to main content

​
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

1

Log in to Magento Admin

Open your Magento Admin panel in your browser.
2

Navigate to the Storefront Configuration

  • Go to Content → Configuration.
  • Select the Store and language as per your requirement.
3

Locate the Footer HTML

  • Expand Other Settings → Footer.
  • Scroll to Miscellaneous HTML.
4

Inject the Experro Theme Scripts

In the Miscellaneous HTML editor, paste the following block (replace all <…> placeholders as noted below):
<script>
  window["ExpBaseUrl"] = "<your_experro_base_url>"
</script>

<script>
  fetch(`https://${window["ExpBaseUrl"]}/apis/plug-and-play-service/public/v1/published-ui-version-detail?fields=*&locale=en-us`, {
    method: 'GET',
    headers: {
      'accept': '*/*',
      'content-type': 'application/json'
    }
  })
  .then(response => response.json())
  .then(previewResponse => {
    const { ui_version_settings, version_name, meta } = previewResponse.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, css_and_js });
  })
  .catch(error => console.error('Error:', error));

  window["ExpConfigs"]["ecommerce_variables"] = {     
    "currency_code": "<liquid_variable>",
    "conversion_rate": 1,
    "customer_email": "<liquid_variable>",      
    "page_type": "<liquid_variable>",
    "page_name": "<liquid_variable>",
    "default_currency_code": "USD",
    "default_currency_rate": 1
  };

  window["Experro"].BeforeInit(`
    window["Experro"].SetConfig({
      "is_live": true,
    })
  `);
</script>

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

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.
6

Replace Liquid Variables

  • For each "<liquid_variable>", substitute the appropriate Magento Liquid variable.
7

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.
8

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.
9

Category Listing Page

  • Configuration Script (e.g., in view.phtml before the product loop or via catalog_category_view.xml): 
    <script>
  window["ExpConfigs"]["ecommerce_variables"] = {
    "active_category": "<liquid_variable>",
    "category_name": "<liquid_variable>",
  };
</script>
  • Placeholder Container (place this in your category template where listings appear): 
    <div style="min-height: 100vh;">
  <div id="exp-cat-page-selector"></div>
</div>
10

Product Detail Page

  • Configuration Script (add at top of view.phtml or via catalog_product_view.xml): 
    <script>
    window["ExpConfigs"]["ecommerce_variables"] = {
  	  "product_sku": "<liquid_variable>",
  	  "product_id": "<liquid_variable>",
  	  "product_title": "<liquid_variable>",
  	  "product_price": "<liquid_variable>",
    };
</script>
11

Checkout Page

  • Configuration Script (add at the start of onepage.phtml or via checkout_index_index.xml): 
    <script>
    window["ExpConfigs"]["ecommerce_variables"] = {
  	  "cart_length": "<liquid_variable>",
  	  "order_id": "<liquid_variable>",
  	  "checkout_id": "<liquid_variable>",
    };
</script>
12

(Optional) Search Results Page

  • Placeholder Container (in search_result_index.xml or form.mini.phtml to wrap search results): 
    <div style="min-height: 100vh;">
  <div id="exp-search-page-selector"></div>
</div>