# nimstrata.liquid Setup

`snippets/nimstrata.liquid` is the recommended place for storefront integration code that belongs to Retail Cloud Connect™ but is not managed directly by Shopify App Block settings.

Use this file for small theme-specific additions such as `window.Nimstrata` overrides, custom component includes, and event listeners that connect Retail Cloud Connect product cards to the active Shopify theme.

<br/>

## When to Use It

Create `snippets/nimstrata.liquid` when a store needs custom storefront behavior that should survive theme maintenance more cleanly than scattered edits in `layout/theme.liquid`, product templates, search templates, or collection templates.

Good examples include:

- Manual `window.Nimstrata` properties for custom filters, default filters, or filter visibility rules
- Liquid templates and `window.Nimstrata.search.gridContent` definitions for promotions or editorial content inside product grids
- Custom JavaScript assets used by Retail Cloud Connect custom components
- Search and collection App Block event listeners
- Theme-specific cart drawer behavior after a Retail Cloud Connect add-to-cart action

Do not place secrets, private API tokens, server-authenticated Shopify requests, or large unrelated theme customizations in this file.

<br/>

## Create the Snippet

In the Shopify theme code editor, create:

```txt
snippets/nimstrata.liquid
```

Start with a small file and add only the integrations required by the store:

```liquid
{% comment %}
  Custom Retail Cloud Connect storefront integrations.
  Keep this file small and render it once from layout/theme.liquid.
{% endcomment %}

<script>
  window.Nimstrata = window.Nimstrata || {};
</script>
```

<br/>

## Render the Snippet

Render the snippet once from `layout/theme.liquid`.

When the file defines `window.Nimstrata` values that App Blocks must read during startup, render it in the `<head>` before ``:

```liquid
<head>
  ...
  {% render 'nimstrata' %}
  
</head>
```

When the file contains only event listeners that do not need to run before App Blocks initialize, it can instead be rendered near the closing `</body>` tag. Do not render it in both places.

<br/>

## Scope Page-Specific Code

Most custom Retail Cloud Connect behavior should run only on the pages that need it.

```liquid
{%- if request.page_type == 'search' or request.page_type == 'collection' -%}
  <script>
    document.addEventListener('retail-connect:search-grid:ready', (event) => {
      console.log('Retail Cloud Connect search grid ready', event.detail);
    });
  </script>
{%- endif -%}
```

This keeps product pages, cart pages, and content pages from loading search or collection-specific behavior unnecessarily.

<br/>

## Related Guides

- [Window Nimstrata Properties](/shopify/theme-installation/window-nimstrata/) for supported `window.Nimstrata` configuration values
- [Content Inside Search and Collection Grids](/shopify/theme-installation/search-grid-content/) for Liquid templates and Web Components placed between product cards
- [App Block Events](/shopify/theme-installation/app-block-events/) for reacting to Search Results, Product Grid, product-card, and conversational storefront events
- [Custom No Results Page](/shopify/theme-installation/search-no-results-component/) for custom empty-state components
