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

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.
  3. Locate the Category Template
    • In the file tree, open templates/pages/category.html.
  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:
    <div style="min-height: 100vh;">
   <div id="exp-cat-page-selector"></div>
</div>
  5. Save & Apply
    Click Save to commit your changes. BigCommerce will re‐apply the updated template immediately.
2

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:     
    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.
3

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: 
    :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.
4

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: 
    window["Experro"].BeforeInit(`
   window["Experro"].SetConfig({
     "is_live": true
   })
`);
5

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