# Liquid 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](https://webpack.js.org/) or [esbuild](https://esbuild.github.io/) 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.

{% tabs %}
{% tab title="layout/theme.liquid" %}

<pre class="language-liquid"><code class="lang-liquid"><strong>&#x3C;html>
</strong><strong>&#x3C;head>
</strong><strong>    &#x3C;script src="{{ 'reactify.js' | asset_url }}" defer>&#x3C;/script>
</strong><strong>&#x3C;/head>
</strong>&#x3C;body>
    {%- render "reactify" -%}
    ...
&#x3C;/body>
</code></pre>

{% endtab %}

{% tab title="snippet/reactify.liquid" %}

```liquid
{%- 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 -%}
```

{% endtab %}
{% endtabs %}

### 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**

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

**Collection**&#x20;

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

**Search**&#x20;

<pre class="language-html"><code class="lang-html"><strong>&#x3C;div id="reactify-mount-search">&#x3C;/div>
</strong></code></pre>

### 4. Implement scripts for the different areas

See [ReactifySearchLiquidFactory](https://search.docs.reactify.com.au/classes/liquid-factory) for details on how the factory configures the provider.

{% tabs %}
{% tab title="instant-search.tsx" %}

<pre class="language-tsx"><code class="lang-tsx">import * as React from "react";
import * as ReactDOM from "react-dom";
<strong>import { ReactifySearchLiquidFactory, Search } from "@usereactify/search";
</strong>
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(
  &#x3C;React.StrictMode>
    &#x3C;ReactifySearchProvider>
      &#x3C;Search />
    &#x3C;/ReactifySearchProvider>
  &#x3C;/React.StrictMode>,
  ReactifySearchMountNode
);

</code></pre>

{% endtab %}

{% tab title="search.tsx" %}

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

```

{% endtab %}

{% tab title="collection.tsx" %}

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

```

{% endtab %}
{% endtabs %}