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 to include a build step to be able to use 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 then 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

The following are separate React applications that load Reactify within the mount points.

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

const ReactifySearchFactory = new ReactifySearchLiquidFactory({
  mode: "instant-search",
});
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",
  });
  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",
  });
  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 7 months ago