# Theme Extension

## What is a Theme Extension?

A **theme extension** is a modular add-on for Shopify themes that allows merchants to integrate app functionality directly into their store’s theme without custom code. Unlike standalone app embeds, theme extensions provide a seamless way to add app-powered features that are managed through the theme editor. This approach ensures that the functionality is consistent with the store’s design, is easy to update, and doesn’t disrupt the store’s existing performance or structure.

## What Does This Mean for Reactify Search?

For **Reactify Search**, the introduction of a theme extension simplifies how merchants integrate and manage its search and merchandising features within their Shopify store.

* **Ease of Installation:** Merchants can now enable Reactify Search's features, such as filters, collection boosting rules, search curation results or advanced filtering, directly through the theme editor without needing a developer.
* **Customisation:** The extension integrates with the theme editor, allowing merchants to customise the placement and appearance of search features to match their store’s branding.
* **Future-Proof Updates:** Since theme extensions are built into Shopify’s Online Store 2.0 architecture, updates to Reactify Search’s features are automatically applied without requiring manual changes to the store’s theme code.
* **Performance-Optimised:** By leveraging Shopify's best practices for theme extensions, Reactify Search ensures its features work efficiently without negatively impacting page load times.

This enhancement reinforces Reactify Search’s mission to provide robust and user-friendly search and merchandising solutions for Shopify merchants. With the theme extension, merchants can now implement powerful search experiences faster and more easily than ever before.

## Key Sections to Apply the Theme Extension

The Reactify Search theme extension can be applied to the following sections of your Shopify store:

* **Search**
* **Collections**

<figure><img src="https://929194677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FymizZPKhhUf5cFL9elfG%2Fuploads%2Ftv0fjnsMiW6KwqlLcxWX%2Fimage.png?alt=media&#x26;token=11cf6df9-5dc2-4aaa-9eff-0617837fa3bc" alt=""><figcaption></figcaption></figure>

## How to Apply Reactify Search Theme Extensions

Follow these steps to enable and customise Reactify Search’s theme extension for **Collections** and **Search**:

#### **For Collections**

1. Go to the Shopify Admin.
2. Navigate to **Online Store** > **Themes** and click **Customize**.\
   ![](https://929194677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FymizZPKhhUf5cFL9elfG%2Fuploads%2FRy4D7YhlQ0LshLghP2hw%2Fimage.png?alt=media\&token=ff07d1dd-3eb0-463f-988c-0e6e5d9d4013)
3. In the top dropdown, select **Collections**.\
   ![](https://929194677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FymizZPKhhUf5cFL9elfG%2Fuploads%2FhjpCtQhz6EWhjxlGKpYg%2Fimage.png?alt=media\&token=14d29a5d-9095-4f3d-a3a8-903af61cfb9e)
4. Click on **Default collection**.

   **Note:** If you have more than one collection template, repeat these steps for each desired template.\
   ![](https://929194677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FymizZPKhhUf5cFL9elfG%2Fuploads%2FupvmlUsMINodpRYpyczO%2Fimage.png?alt=media\&token=b56952f4-1f9f-4a69-a0a5-c3dd2b36f746)
5. Hide the default **Product grid** block.

   **Note:** This will be replaced with the Reactify Search **Product grid - theme extension**.
6. Click **Add block**, go to the **Apps** tab, and select **Product grid**.\
   ![](https://929194677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FymizZPKhhUf5cFL9elfG%2Fuploads%2FiH9m5gRNWp5wedygwlsv%2Fimage.png?alt=media\&token=b5179b4c-ea41-49d5-8b57-b6fb8f40511d)

#### **For Search**

1. In the top dropdown, select **Search**.\
   ![](https://929194677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FymizZPKhhUf5cFL9elfG%2Fuploads%2FN6b3sQ6Eay6774VfQj6t%2Fimage.png?alt=media\&token=cc529a81-f242-4c8e-8581-851ddc83bf23)
2. Hide the default **Search results** block.

   **Note:** This will be replaced with the Reactify Search **Product grid - theme extension**.\
   ![](https://929194677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FymizZPKhhUf5cFL9elfG%2Fuploads%2FNlvGaUnzTz4q1xQwVnCU%2Fimage.png?alt=media\&token=d5b7a005-dff1-47a9-9efa-c68e1dc5a6c3)
3. Click **Add block**, go to the **Apps** tab, and select **Product grid**.\
   ![](https://929194677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FymizZPKhhUf5cFL9elfG%2Fuploads%2FMGBQjdBeyGYAfzDXYnF9%2Fimage.png?alt=media\&token=9256cf16-1a84-46e6-a65c-ff47256d5205)

#### **Final Steps**

1. Click **Save**.
2. Preview your store’s front-end to verify that **Search** and **Collections** are now powered by Reactify Search’s **Product grid** theme extension.\
   ![](https://929194677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FymizZPKhhUf5cFL9elfG%2Fuploads%2FT3WRsLIwQPSnbiQ3c79s%2Fimage.png?alt=media\&token=b16d04b5-4077-4b97-83a2-0befd73938c1)

## Can I Style the Theme Extensions?

Yes, you can modify basic styling, such as fonts, directly in the theme editor. For more advanced customisations, a front-end developer can implement further changes as needed.