# Shopify Theme Installation
## User Events
Retail Cloud Connect™ uses two Shopify components to capture storefront user events correctly: an **App Embed** and an **App Pixel**. Enable both to collect model training data, segment visitors into Shopify markets, and capture conversions.
Click both **Enable** buttons in the Shopify app to activate the components:
==- :book: App Embed Details
- When you click **Enable App Embed** you will be taken to the Theme Editor for your current theme
- Confirm that the **User Events** App Embed is activated, then click **Save** to exit the Theme Editor
# 
==- :book: App Pixel Details
- Shopify uses App Pixels to create strict, isolated environments on your online store. Retail Cloud Connect™ uses Shopify-controlled APIs to ensure performance, security, and privacy for you and your customers.
- You can see all pixels, including the Retail Cloud Connect™ App Pixel, in the **Customer events** page of your Shopify settings.
# 
### Train on Existing Shopify Traffic
The **User Events** app block also supports optional training on your existing Shopify storefront traffic before you fully switch to Nimstrata search and browse results.
Current options include:
- **Track Shopify Search Results**
- **Track Shopify Collection Pages**
This can be helpful when you want to:
- Prepare for an A/B test
- Let Vertex AI learn from existing shopper behavior
- Gather training data before launching a new search experience
### Cookies
Enabling the Retail Cloud Connect™ App Embed and App Pixel places up to three cookies on your Shopify storefront:
- **rcc-identity** - The prefix of your **myshopify.com** domain, used to identify your Shopify store
- **rcc-market-id** - The ID of the market users are shopping from, used to provide location-specific search results
- **rcc-visitor-id** - An anonymized UUID for each Shopify store visitor, used to provide personalized search results
These cookies support personalized product discovery on your first-party Shopify storefront, so merchants typically classify them as **functional cookies**. Without **rcc-visitor-id**, personalized results do not work.
!!!
Shopify merchants are responsible for accurately classifying cookies within their designated cookie management tools.
!!!
Vertex AI Search for Commerce personalization is limited to your Shopify storefront. It is not used for external ad targeting. For more details, review the Google Cloud terms also referenced in our [Privacy Policy](https://nimstrata.com/privacy-policy) and [Terms & Conditions](https://nimstrata.com/tos):
[!ref text="Vertex AI Search for Industry terms for data use" target="blank"](https://cloud.google.com/retail/data-use-terms)
## App Blocks
Each App Block requires a **Serving Configuration ID** which can be found in Google Cloud.
!!!info Published Theme Status
The Shopify app dashboard checks installation status on your **published theme**. If you configure an unpublished theme first, the dashboard may still show a component as incomplete until the published theme matches your changes.
!!!
### Search Results and Collection Pages
Retail Cloud Connect™ ships dedicated App Blocks for the Shopify **Search** and **Collection** templates.
Both blocks support:
- Serving Configuration ID
- Style
- Show Search Bar
- Content Position
- Results per page
- Results per row
- CSS Wrapper Class
- Pagination Style
=== Search Results
The **Search Results** App Block installs on Shopify's default search template.
# 
=== Collection Pages
The **Product Grid** App Block installs on Shopify's default collection template and additionally supports **Show Collection Description**.
# 
### Recommendations AI
The **Recommendations AI** App Block can be installed on more than just product pages. The current extension supports:
- Product pages
- Collection pages
- Cart pages
- Home page
- Blog posts
- Articles
- Standard pages
The default serving configuration is **recently_viewed_default**.
Common settings include:
- Serving Configuration ID
- Header Text
- Sub-Header Text
- Show Sub-Header Text
- Number of Recommendations
- Results per row
- Style
### Autocomplete
Autocomplete is enabled separately from the main search results App Block and is designed to enhance your primary search box.
The Shopify extension includes an **Enable Shopify Autocomplete** setting that can use your existing Shopify search traffic to help train the model.
!!!info
Autocomplete can take a few days to start learning from existing search traffic and typically one to two weeks to mature on active stores.
!!!
### Product Card Builder and Styling
Use the following pages to customize how App Blocks look and behave:
- [Product Card Builder](/shopify/product-card-builder/) to design the storefront product card
- [Styling App Blocks](/shopify/theme-installation/customizing-app-blocks/) to apply custom CSS
- [Custom Components](/shopify/product-card-builder/custom-components/) for advanced product card behavior
- [Custom No Results Page](/shopify/theme-installation/search-no-results-component/) for branded search empty states
### Theme Compatibility
Retail Cloud Connect™ works best with **Shopify Online Store 2.0** themes that support App Blocks.
If your current theme does not support App Blocks, please [contact us](https://www.nimstrata.com/contact) for assistance with deploying Retail Cloud Connect™ on that theme.
## Online Store 1.0 Theme Assets
Nimstrata hosts static assets on Cloudflare's CDN for Shopify merchants using Online Store 1.0 themes that leverage our Shopify App Blocks.
| Asset | URL {.compact} |
| ------------------------ | ------------------------------------------------------------------------ |
| Search & Collections JS | https://assets.retailconnect.app/shopify/latest/search-react.js |
| Search & Collections CSS | https://assets.retailconnect.app/shopify/latest/search-react.css |
| Autocomplete JS | https://assets.retailconnect.app/shopify/latest/autocomplete.js |
| Autocomplete CSS | https://assets.retailconnect.app/shopify/latest/autocomplete.css |
| Recommendations JS | https://assets.retailconnect.app/shopify/latest/recommendation-react.js |
| Recommendations CSS | https://assets.retailconnect.app/shopify/latest/recommendation-react.css |
### Additional Guidance
For best performance, only include assets when they are required to render App Blocks, for example:
:::code source="/static/code-snippets/theme-installation.liquid" :::