Getting Started

Ready to move ahead with Reactify Search? Start here!

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.

User Guide

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 guide for specific setup steps.

3. Install

Install the dependencies.

npm install @usereactify/search

4. Context

Wrap your search area with the ReactifySearchProvider 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.

import React from "react";
import { ReactifySearchProvider } 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
  >
    ...
  </ReactifySearchProvider>
);

4. Components

Use the built-in components, such as Filters, Sensors and Results to begin; all visual components will render something functional by default.

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>
);