Liquid Theme

Get Reactify Search installed onto your Shopify theme.

1. Prepare your theme

First, you will need to add support to your theme code for a build step that uses the React packages we provide. Most custom themes will already have this in place and generally use webpack or esbuild to compile the TypeScript files into a bundle suitable for use in the theme.

Once you have this structure in place, you are ready to start the implementation.

2. Add script and data tags

The script tags provide liquid-rendered data in JSON format, which can be used within child components.

<html>
<head>
    <script src="{{ 'reactify.js' | asset_url }}" defer></script>
</head>
<body>
    {%- render "reactify" -%}
    ...
</body>

{%- if template.name contains 'search' -%}
    <script id="reactify-data" type="application/json">{{ page | json }}</script>
{%- endif -%}

{%- if template.name contains 'collection' -%}
    <script id="reactify-data" type="application/json">{{ collection | json }}</script>
{%- endif -%}

3. Add mount points

The mount points are used to load in the React application to specific areas like instant search within the header and the collection and search templates.

Instant Search

<div id="reactify-mount-instant-search"></div>

Collection

<div id="reactify-mount-collection"></div>

Search

<div id="reactify-mount-search"></div>

4. Implement scripts for the different areas

See ReactifySearchLiquidFactory for details on how the factory configures the provider.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ReactifySearchLiquidFactory, Search } from "@usereactify/search";

const ReactifySearchFactory = new ReactifySearchLiquidFactory({
  mode: "instant-search",
  market="12345" // optionally the ID of the Shopify market to use
});
const ReactifySearchProvider = ReactifySearchFactory.getProvider();
const ReactifySearchMountNode = ReactifySearchFactory.getMountNode();

ReactDOM.render(
  <React.StrictMode>
    <ReactifySearchProvider>
      <Search />
    </ReactifySearchProvider>
  </React.StrictMode>,
  ReactifySearchMountNode
);

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ReactifySearchLiquidFactory, Sensors, SortBy, Filters, Results } from "@usereactify/search";

if (window.location.pathname.startsWith("/search")) {
  const ReactifySearchFactory = new ReactifySearchLiquidFactory({
    mode: "search",
    market="12345" // optionally the ID of the Shopify market to use
  });
  const ReactifySearchProvider = ReactifySearchFactory.getProvider();
  const ReactifySearchMountNode = ReactifySearchFactory.getMountNode();

  ReactDOM.render(
    <React.StrictMode>
      <ReactifySearchProvider>
        <Sensors />
        <SortBy />
        <Filters />
        <Results />
      </ReactifySearchProvider>
    </React.StrictMode>,
    ReactifySearchMountNode
  );
}

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ReactifySearchLiquidFactory, Sensors, SortBy, Filters, Results } from "@usereactify/search";

if (window.location.pathname.startsWith("/collection")) {
  const ReactifySearchFactory = new ReactifySearchLiquidFactory({
    mode: "collection",
    market="12345" // optionally the ID of the Shopify market to use
  });
  const ReactifySearchProvider = ReactifySearchFactory.getProvider();
  const ReactifySearchMountNode = ReactifySearchFactory.getMountNode();
  const ReactifySearchData = ReactifySearchFactory.getData();

  ReactDOM.render(
    <React.StrictMode>
      <ReactifySearchProvider>
        <h1>{ReactifySearchData?.title}</h1>
        <div
          dangerouslySetInnerHTML={{ __html: ReactifySearchData?.body_html }}
        />
        <Sensors />
        <SortBy />
        <Filters />
        <Results />
      </ReactifySearchProvider>
    </React.StrictMode>,
    ReactifySearchMountNode
  );
}

PreviousUpgrade v4 to v5 NextSSR

Last updated 6 days ago

Was this helpful?

hashtag1. Prepare your theme

hashtag2. Add script and data tags

hashtag3. Add mount points

hashtag4. Implement scripts for the different areas

1. Prepare your theme

2. Add script and data tags

3. Add mount points

4. Implement scripts for the different areas