Shopify

Shopify

Adding LookIA to a Shopify store lets your customers find products, collections, and content using natural language queries. The widget loads as a floating UI layer on top of your theme without requiring any app installation.

Method 1: Theme Customizer — Custom Liquid (Recommended)

Shopify's Online Store 2.0 themes support Custom Liquid blocks that you can add to any section without editing code. This is the safest approach as it does not permanently modify your theme files.

1. Go to Online Store > Themes in your Shopify admin.
2. Click Customize on your active theme.
3. In the theme editor, navigate to a global section shown on every page (e.g., Header or Footer).
4. Click Add block and select Custom Liquid.
5. Paste the following code:

<script
  src="https://cdn.lookia.io/lookia-widget.min.js"
  data-site-id="YOUR-UNIQUE-SITE-ID"
  defer
></script>

6. Click Save.

Important: The Custom Liquid block must be inside a section that is present on all pages (like the Footer or Header section). Blocks added to the homepage template only appear on the homepage.

Method 2: Editing theme.liquid Directly

For more control, you can add the script directly to your theme's base template.

1. Go to Online Store > Themes > Actions > Edit Code.
2. Under Layout, open theme.liquid.
3. Locate the closing </body> tag and paste the script just before it:

{%- comment -%} LookIA Search Widget {%- endcomment -%}
<script defer
  src="https://cdn.lookia.io/lookia-widget.min.js"
  data-site-id="YOUR-UNIQUE-SITE-ID"
></script>

</body>
</html>

4. Click Save.

Tip: We recommend creating a duplicate theme before editing theme.liquid directly, so you have a rollback option.

Passing Shopify Context to the Widget

You can pass dynamic Liquid data as data attributes to send the current customer or page context to LookIA (useful for future personalization features or debugging):

<script defer
  src="https://cdn.lookia.io/lookia-widget.min.js"
  data-site-id="YOUR-UNIQUE-SITE-ID"
></script>

Hiding the Widget on Specific Pages

To hide the widget on certain page types (e.g., during checkout), use Liquid conditionals before loading the script:

{%- unless request.page_type == 'cart' or request.page_type == 'password' -%}
  <script defer
    src="https://cdn.lookia.io/lookia-widget.min.js"
    data-site-id="YOUR-UNIQUE-SITE-ID"
  ></script>
{%- endunless -%}

Note: The Shopify checkout page is a hosted environment and does not execute custom theme scripts. The widget will not appear there regardless of your configuration.

Verifying the Integration

1. Visit your Shopify storefront (not the admin panel).
2. The LookIA floating button should appear in the bottom-right corner.
3. Try searching for a product using natural language (e.g., "red running shoes under $80").
4. Results should surface relevant products from your indexed store catalog.

Make sure your Shopify store URL is registered as a site in your LookIA dashboard and that the content indexing has completed before testing.