Shopify

With Relewise's app for Shopify, you can get access to Relewise's powerful search, recommendation and personalization features with a few simple clicks - all fully integrated and adapted to your Shopify shop.

App vs. Manual Install

This page is for the Relewise app for Shopify.

To install Relewise manually on your Shopify theme, click here.

To set up the Shopify App, you must have the following:

• A customer relation with Relewise (if you are not yet a customer, please reach out to our sales department)
• Access to your My Relewise account and dataset

Shopify App: Installation Guide

To install the Shopify app, find it in the Shopify App Store and click the Install button.

The App requests permission to access data in your Shopify shop; if you wish to read more about what Relewise does with this data, follow the explanatory link on the page, or read our Privacy Policy.

Once you have accepted the permissions request, the App will be installed and ready for configuration. Click the Get started button to connect the App to your Relewise dataset.

The App prompts you to log into your My Relewise account. This login will have been provided to you upon your signing up for Relewise. If you have issues with your login, try resetting your password with the Forgot Your Password feature, or reach out to us if it still does not work.

Shopify App: Configuration

Now comes the time to set up the app. From the dropdown menu, select the dataset you wish to connect to.

Product ID Handler

The App provides you with two distinct options for handling the Product ID that Relewise will use.

The Recommended Approach: Metafield

This is the recommended option for live production stores where you need robust and stable product tracking.

• Metafield: This allows you to specify a custom field on your Shopify products to act as the productId for Relewise purposes.
  • Benefit: You can maintain the exact same Relewise productId for a product even if it is temporarily removed from Shopify and then added back later. This ensures that all behavioral tracking and history saved by Relewise for that product remains intact, providing the most accurate recommendations.

To set up a custom metafield, navigate to your Shopify settings, click Custom Data and further on Products. From here, you may set up the custom metafield that your App will reference. When you have a created the custom Metafield, you will need to assign a unique ID to all the products in your store, if you don't already have such a Metafield setup.

The Default Approach: Shopify's Native ID

This option is simple to set up and is typically sufficient for development, Proof-of-Concept (PoC), or free-trial environments.

• Default: This uses the Shopify native productId. Shopify IDs are unique across a Shopify Store and are safe to use with Relewise.
  • Important Caveat: Be aware that a Shopify ID can change if a product is removed from the shop and re-added later. If this happens, any behavioral tracking saved by Relewise for that product will be associated with the old, non-existent ID and will be effectively lost when the product is re-added with the new ID.

If you wish to use a Metafield as Product ID handler, make sure you copy the namespace and name of the metafield exactly.

Upon confirming your choices, you will see an overview of your selections. At this point, the app has begun integrating your product data to Relewise, and you will be able to view them under the entities section of My Relewise within a few minutes.

Sync Metafields

After confirming your choices and setting up the app, you can configure which metafields to sync with Relewise. Simply specify the namespace and key name of the metafields you want to sync.

Shopify App: Activating UI Components

Now that the integration has been set up to pull product data from your shop, it is time to activate the components that allow you to perform personalized search and recommendations. Doing so requires you to activate the UI Components.

Shopify App: API Key

As part of setting up the UI Components, you will need to create an API Key that grants permissions for certain functions. The permissions will vary depending on what you wish to do with the app:

Service	Permission Required
Behavioral Tracking	Cart Product View Product Category View Content View	[Settings Preview]
Search	Product Search Search Term Prediction Search Collection	[Settings Preview]
Recommendations	Purchased with Product Product Viewed After Viewing Product Popular Products Purchased with Multiple Products Personal Products Recently Viewed Products	[Settings Preview]

Once you have your API Key, activate the UI Components by navigating to Online Store -> Themes, and click the Customize button.

Navigate to the App Embeds setting, and activate the Relewise UI Components. Then, open the App to configure it.

You will need to supply the Dataset ID and the API Key that the app should use. This information can be found in My Relewise.

Be sure not to use the Master Key from the API Keys page.

Shopify App: Native Product and Content Cards

Relewise supports rendering native Shopify product and content cards, allowing you to seamlessly integrate personalized search and recommendations while maintaining the visual consistency of your Shopify theme. This feature ensures that your product and card design aligns with your store's design, leveraging Relewise's powerful product discovery and personalization capabilities.

• For product cards, follow Shopify: Use Native Product Cards.
• For content cards, follow Shopify: Use Native Content Cards.

Shopify App: Behavioral Tracking

Activating the UI Components will automatically activate Behavioral Tracking for your website. Tracking is the heart and soul of Relewise personalization, and ensures that your users experience the best and most relevant search and recommendation results while using your website.

Shopify App: GDPR Compliance

To ensure that you are GDPR compliant while using Relewise, we have integrated fully with the following cookie consent providers:

• Cookiebot
• CookieInformation
• Cookie Script
• Usercentrics

Under App Embeds -> Relewise UI Components, select the cookie consent provider you are using, and hit Save in the top right corner of the screen.

Shopify App: Search

The Shopify App allows you to activate Relewise Search with a few simple clicks. Within the app, search is divided into two parts: The Search Overlay, which offers results as you type, and the Search Results Component, which serves up your search results as a Block in your Shopify Sections.

Ideally, you will want to activate both parts of the Search functionality, to ensure the best user experience.

Shopify App: Search Overlay

To activate the Search Overlay, ensure that the API Key has the correct permissions, and then activate the Search Overlay on the same page where you set up the UI Components above.

When activated, the Relewise Search Overlay replaces your theme's existing search interface.

By default it targets elements with the <predictive-search> or <search-form> HTML tags that most Shopify themes use.

If your theme uses something else, enter a CSS selector in the Custom Search Overlay Selector setting to point directly at your search element.

If you're unsure which selector to use, refer to guidance such as the CSS selector reference on W3Schools.

For example, the selector .header-search, #search-mobile targets both a desktop input with the class header-search and a mobile element with the ID search-mobile.

Use a selector that matches only the element(s) you want replaced; the overlay swaps out every element that matches the selector you provide.

Here, you will also find two options for customization: Color and Accent Color. These settings define the color of both the Search Overlay and the Search Component described below. Use them to match your search components to the rest of your store theme. We also provide several CSS hooks for additional customization. Read more here.

Shopify App: Search Results Component

The second part of setting up Search is to navigate to your Theme Customization, and select the Search results page defined in your Shopify Theme.

Here, add the Product Search block to your page, by selecting Add Section -> Apps -> Product Search (Relewise):

Customize the page with your newly added Search Results Component, and you are ready for your users to utilize Relewise's fast and accurate search of your products.

Shopify App: Recommendations

The Shopify app supports the following Recommendation types out of the box:

Products

• Popular Products
• Purchased with Product
• Purchased with Multiple Products
• Recently Viewed Products
• Personal Products
• Products Viewed After Viewing Product
• Products Viewed After Viewing Content

Content

• Popular Content
• Personal Content
• Content Viewed After Viewing Product
• Content Viewed After Viewing Content
• Content Viewed After Viewing Multiple Products

To implement them, navigate to the Theme Customization and choose the page where you want the Recommendations to go. From there, add the desired Recommendations to the page in the same way you would add any other Shopify Block to the section of your page:

Once added to your page, configure the Recommendations by selecting it in the theme editor. The available settings are:

• Displayed At Location: Identifies where the Recommendations are displayed so Relewise can report on revenue, troubleshoot, and apply merchandising rules. Supplying clear locations is strongly recommended—reach out to our team if you need help defining them.
• Content Type: Choose whether the Recommendations should recommend Blog posts or Pages when using content-based Recommendations. See the Shopify native content card guide for more information about blog posts and pages.
• Since Minutes Ago: For Popular Products and Popular Content, set how many minutes of engagement history to use when calculating popularity (default is 20,160 minutes, i.e., 14 days).
• Number of Recommendations: Controls how many items appear in the Recommendations (default is 4).

After saving those settings, continue customizing your page as desired – your shop will be ready to take advantage of Relewise’s content and product Recommendations.

Shopify App: Extending with Custom Functionality

While the Relewise Shopify app offers many features out of the box, you can extend its functionality with custom implementations. To facilitate this, Relewise exposes a global object called ShopifyRelewise that provides access to core functionality.

Accessing the User Object

The ShopifyRelewise object includes a getUser function that returns the user object needed to search, track or recommend using Relewise.

const user = ShopifyRelewise.getUser();

Shopify Webhooks

Webhooks we listen to for product changes:

• products/create
• products/update
• products/delete

The app also does a full product sync every hour, where we refresh all product information, including collections, translations and metafields.

products/create & products/update

When a product is created or updated in a Shopify store we refresh and add the following product attributes for that store:

• Product title (localized per store languages; translations used when available)
• Product Images (all image URLs)
• Product Handle
• Timestamps: created, updated and published times
• Vendor
• Product Type
• Tags
• Availability indicators:
  • In-stock flag (if any variant has stock)
  • Availability for sale
  • Per-store sellable quantity totals
• Variants (per SKU):
  • Variant title (localized)
  • Variant specifications (Option1/Option2/Option3)
  • Variant prices (sales and list prices, per currency when available)
  • Variant inventory and availability
• Aggregated product prices:
  • Product-level list and sales prices derived from variant prices

products/delete

When a product is deleted (removed) from a Shopify store:

• We remove the association between that shop and the product so the product will no longer be considered available in that shop. We remove the Shopify Store Domain from the Data Key "ShopifyDomains". Using this filter on requests to Relewise will ensure that the product is not shown on the Shopify Store after the webhook has been processed.
• The product is not removed from your catalog entirely; data for other shops is preserved.

Store Specific Values

When connected with a multi store setup, where products can live across multiple stores, it's important to rely on the store specific values for availability and other store specific properties, like Handle and IDs. The store-specific values are prefixed on a Product and Variant level using the Shopify store's name like my-test-store.myshopify.com_ProductId.