# 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](/classes/liquid-factory.md) 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://search.docs.reactify.com.au/guides/liquid-theme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.