Shopify

Once your Experro Discovery store connection is live and you’ve finalized all UI customizations in the Experro Admin Panel, the last step is to publish those changes to your Shopify storefront. These instructions apply when you are using the Experro Default Theme. If you’ve integrated a custom theme or any other inbuilt theme, please follow your theme’s specific instructions or reach out to support.

Prerequisites

Before you begin, ensure that:
  • Your Shopify store is successfully connected in Experro.
  • All desired UI Customization tabs (Theme, Layout, Search Results, Autocomplete, CSS & JS, Translations) have been configured and saved.
  • You have access to your Shopify Admin with permission to edit Themes and Theme Code.
  • You are working on the Experro Default Theme (otherwise steps may vary).

Steps to Integrate

1

Open the Shopify Theme Editor

  • In your Shopify Admin, navigate to Online Store → Themes.
  • Click Customize.
  • Navigate to the listing page.
2

Add the Experro Container to Your Collection/Listing Pages

  • Click Add section, then choose Custom Liquid.
  • In the Custom Liquid block, paste:
    <div style="min-height: 100vh;">
      <div id="exp-cat-page-selector"></div>
    </div>
    
  • Click Done.
3

Hide the Native Product Grid

  • Still within that template, locate the default Product Grid section.
  • Click the eye icon to hide it (so it doesn’t conflict with Experro’s rendering).
4

Add the Experro Container to Your Search Results Pages

This step is not compulsory but it helps to reduce the redundancy on the search results page by hiding the default search results UI and including the search results UI rendered by Experro.
  • Navigate to the ‘Search Results’ page from the search bar.
  • Click Add section, then choose Custom Liquid.
  • In the Custom Liquid block, paste:
    <div style="min-height: 100vh;">
      <div id="exp-search-page-selector"></div>
    </div>
    
  • Still within that template, locate the Page section.
  • Click the eye icon to hide it (so it doesn’t conflict with Experro’s rendering).
  • Click Done.
5

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

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
       })
    `); 
    
7

Save Your Theme Settings

  • Click Save at the top right to persist your changes in Shopify.
8

Publish Your Theme

  • Navigate to Themes, find Experro Default Theme if not already selected , and click Publish.
  • Confirm when prompted. Your updated theme, complete with Experro Discovery UI, is now live.
By following these steps, you’ll have a fully integrated, plug‑and‑play connection between your Shopify storefront and Experro Discovery—empowering you to deliver a world‑class discovery experience from day one.