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 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>
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>
Experro.SetEcommerceConfig({
  "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>
Experro.SetEcommerceConfig({
  	  "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>
Experro.SetEcommerceConfig({
  	  "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>