> For the complete documentation index, see [llms.txt](https://search.docs.reactify.com.au/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://search.docs.reactify.com.au/getting-started.md).

# Getting Started

### 1. Read the User Guide

If it's your first time working with Reactify Search, it's worth reading the User Guide, which explains how Reactify Search and its features work, and how to configure them.

{% content-ref url="/spaces/ymizZPKhhUf5cFL9elfG" %}
[User Guide](https://search.guides.reactify.com.au/)
{% endcontent-ref %}

### 2. Implementing on a Shopify Liquid Theme?

This guide assumes you're using React components directly. If you're implementing Reactify Search on a Shopify Liquid theme, refer to the [Liquid Theme](/guides/liquid-theme.md) guide for specific setup steps.

### 3. Install

Install the dependencies.

```bash
npm install @usereactify/search
```

### 4. Context

Wrap your search area with the [ReactifySearchProvider](/components/provider.md) and set the required props to create a new Reactify Search context.

All of the search results, filters and sort options will be contained within the context; you can add more than one to a page, and their data will remain separate.

<pre class="language-tsx"><code class="lang-tsx"><strong>import React from "react";
</strong>import { ReactifySearchProvider } from "@usereactify/search";

export const SearchPage: React.FC = () => (
  &#x3C;ReactifySearchProvider
    mode="search"
    shopifyPermanentDomain="usereactify-demo.myshopify.com"
    market="12345" // optionally the ID of the Shopify market to use
  >
    ...
  &#x3C;/ReactifySearchProvider>
);
</code></pre>

### 4. Components

Use the built-in components, such as [Filters](/components/filters.md), [Sensors](/components/sensors.md) and [Results](/components/results.md) to begin; all visual components will render something functional by default.

```tsx
import React from "react";
import { ReactifySearchProvider, Sensors, Filters, Results } from "@usereactify/search";

export const SearchPage: React.FC = () => (
  <ReactifySearchProvider
    mode="search"
    shopifyPermanentDomain="usereactify-demo.myshopify.com"
    market="12345" // optionally the ID of the Shopify market to use
  >
    <Sensors />
    <Filters />
    <Results />
    ...
  </ReactifySearchProvider>
);
```