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. Please note that the app costs $10 to install.

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 Cards

Relewise supports rendering native Shopify product 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 display aligns with your store's design leveraging Relewise's powerful product discovery and personalization capabilities.

For a detailed guide on setting up native product cards, see Shopify: Use Native Product 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. You will find the button to do so immediately below the Cookie Consent selection.

When activated, the Relewise Search Overlay replaces your theme's existing search overlay. For this to work correctly, your theme's search element must have the tag name predictive-search or search-form. Most standard Shopify themes already use one of these tag names for their search functionality. If your theme uses a different structure, you may need to modify your theme's code or contact your theme developer for assistance.

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 three recommendation types out of the box:

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

To implement them, navigate to the Theme Customization and choose the page where you want the recommendation to go. From there, add the desired recommendation 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, the recommendation slider can be configured by clicking on it in the menu. These settings include two things, Displayed At Location and Number of recommendations

• Displayed At Location is used by Relewise to tell where your recommendation was displayed, which we use for purposes of tracking revenue statistics, troubleshooting, merchandising rules, and more. We highly recommend that you include your Display Locations for the recommendations you set up in this way, to ensure that you get the most out of your Relewise integration. If you are unsure about this process, please reach out to us for support and clarification.
• Number of recommendations denotes the amount of recommendations you wish to display in this particular slider. Default value is 4.

From here, customize your page as you see fit, and your shop will be ready to utilize the power of Relewise's 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();