# Shopify Theme Installation


# User Events

Retail Cloud Connect uses two Shopify components to correctly capture visitor data from your online store, an App Embed and an App Pixel.

For best results, you must enable both components to collect Vertex AI model training data, segment visitors into the appropriate Shopify markets, capture conversion events, and suggest relevant products to end users.

Click both Enable buttons in the Shopify App to activate the components:

  • 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

  • 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:


# App Blocks

Each App Block requires a Google Cloud Catalog Project ID and Serving Configuration ID. Serving Configuration IDs are updated from Google Cloud every time the page loads:

You can click the blue Copy links on the Theme Installation page, click Install App Block, then paste the IDs in to the relevant App Block settings. Additional installation details for each App Block type are detailed below.


# Installation Steps

  1. Visit the Theme Installation page in the Retail Cloud Connect Shopify app
  2. Ensure there is an available Search and Browse Serving Configuration available
  3. Click the Install App Block button on the Category or Collection Pages card
  4. Hide the original Product grid under Template or you will see double results

  1. Copy a Google Cloud Catalog Project ID from the Theme Installation page, then paste it in the App Block settings
  2. Copy a Search and Browse Serving Configuration ID from the Theme Installation page, then paste it in the App Block settings

  1. Configure the additional App Block settings as needed
  2. Add custom CSS using the guidance in this Customizing App Blocks documentation
  1. Visit the Theme Installation page in the Retail Cloud Connect Shopify app
  2. Ensure there is an available Search and Browse Serving Configuration available
  3. Click the Install App Block button on the Category or Collection Pages card
  4. Hide the original Product grid under Template or you will see double results

  1. Copy a Google Cloud Catalog Project ID from the Theme Installation page, then paste it in the App Block settings
  2. Copy a Search and Browse Serving Configuration ID from the Theme Installation page, then paste it in the App Block settings. The default_search configuration is suitable for collection pages, as search and browse requests use the same Google Cloud API endpoint

  1. Configure the additional App Block settings as needed
  2. Add custom CSS using the guidance in this Customizing App Blocks documentation
  1. Visit the Theme Installation page in the Retail Cloud Connect Shopify app
  2. Ensure there is an available Recommendations AI Serving Configuration available
  3. Click the Install App Block button on the Product Pages card
  4. You can hide the original Related products Shopify block, or you may see duplicate results. You can also add multiple Recommendations AI App Blocks to each page. We recommend using a different Recommendations AI model for each app block.

  1. Copy a Google Cloud Catalog Project ID from the Theme Installation page, then paste it in the App Block settings
  2. Copy a Recommendations AI Serving Configuration ID from the Theme Installation page, then paste it in the App Block settings

  1. Configure the additional App Block settings as needed
  2. Add custom CSS using the guidance in this Customizing App Blocks documentation