Using Constructor with Reactiv

Copyright (c) 2023, Intercom, Inc. ([email protected]) with Reserved Font Name "Inter". This Font Software is licensed under the SIL Open Font License, Version 1.1.Copyright (c) 2023, Intercom, Inc. ([email protected]) with Reserved Font Name "Inter". This Font Software is licensed under the SIL Open Font License, Version 1.1. Table of contents Using Constructor with Reactiv

Learn how to connect Constructor with Reactiv so you can power your app’s search, personalization, and product recommendations using Constructor instead of Shopify.

Written by Reactiv App

Updated over 2 months agoReactiv App Table of contents

Prerequisites

Before enabling Constructor in Reactiv, make sure the following are complete:

Constructor Account
Your business must have an active Constructor account.
Install Constructor’s Shopify Connector
- Install the Constructor Connect app from the Shopify App Store.
- The Constructor team will configure the app so your Shopify products are ingested into your Constructor index and available to Reactiv.
Enable the __shopify_id Field
- In your Constructor dashboard, make sure the __shopify_id field is set to Displayable: true under Searchability and Displayability settings.
- See Constructor’s documentation for more guidance.

Constructor Account
Your business must have an active Constructor account.

Install Constructor’s Shopify Connector

Install the Constructor Connect app from the Shopify App Store.

The Constructor team will configure the app so your Shopify products are ingested into your Constructor index and available to Reactiv.

Enable the __shopify_id Field

In your Constructor dashboard, make sure the __shopify_id field is set to Displayable: true under Searchability and Displayability settings.

See Constructor’s documentation for more guidance.

Step 1: Enter Constructor Credentials

No matter which feature you plan to use, you’ll first need to enter your Constructor credentials:

In the Reactiv Dashboard, go to Integrations from the left-hand navigation.
Enter the values provided by Constructor:
- Index Key: Found in your Constructor dashboard under index listings (e.g., key_abc123).
- Security Token: Provided by the Constructor team and unique to your Reactiv integration.
- Service URL: Provided by the Constructor team.
Click Save.

In the Reactiv Dashboard, go to Integrations from the left-hand navigation.

Enter the values provided by Constructor:

Index Key: Found in your Constructor dashboard under index listings (e.g., key_abc123).

Security Token: Provided by the Constructor team and unique to your Reactiv integration.

Service URL: Provided by the Constructor team.

Click Save.

Product Recommendations

Constructor Product Recommendations allow you to add curated carousels into your app.

Step 2: Set Constructor as Provider

In the Reactiv Dashboard, click your store logo to open App Settings in the App Studio.
Navigate to Integrations.
Under Product Recommendations, select Constructor as your provider.
Click Save.

In the Reactiv Dashboard, click your store logo to open App Settings in the App Studio.

Navigate to Integrations.

Under Product Recommendations, select Constructor as your provider.

Click Save.

Step 3: Add and Configure Carousels

In the App Builder, drag a Product Recommendation carousel onto the screen you want (currently supported on Product Detail Page (PDP) and Cart screens).
Add a title to the carousel section, and select the maximum amount of products you would like to show.
Configure each carousel by entering the correct podId from your Constructor account.
- Supported pod types:
  - Alternative
  - Abandoned Cart
  - Best Sellers
  - Bundles
  - Complimentary
  - Recently Viewed
  - User Featured
- Not supported: Query Recommendations or Filtered pods.
Click Save before starting your next build.

In the App Builder, drag a Product Recommendation carousel onto the screen you want (currently supported on Product Detail Page (PDP) and Cart screens).

Add a title to the carousel section, and select the maximum amount of products you would like to show.

Configure each carousel by entering the correct podId from your Constructor account.

Supported pod types:

Alternative
Abandoned Cart
Best Sellers
Bundles
Complimentary
Recently Viewed
User Featured

Supported pod types:

Alternative

Abandoned Cart

Best Sellers

Bundles

Complimentary

Troubleshooting Product Recommendations

If your product recommendation carousels aren’t appearing or showing the wrong products:

Check Constructor Credentials: Make sure the Index Key, Security Token, and Service URL were entered correctly in Integrations.
Verify Pod Configuration: Confirm that each carousel is linked to the correct podId and uses a supported pod type.
Confirm Carousel Placement: Carousels only work on PDP and Cart screens.
Check for Product Data in Constructor: Ensure your pods have products available. For example, “Recently Viewed” won’t display until customers browse items.
Save and Rebuild: Make sure changes are saved before starting your next app build.

Check Constructor Credentials: Make sure the Index Key, Security Token, and Service URL were entered correctly in Integrations.

Verify Pod Configuration: Confirm that each carousel is linked to the correct podId and uses a supported pod type.

Confirm Carousel Placement: Carousels only work on PDP and Cart screens.

Check for Product Data in Constructor: Ensure your pods have products available. For example, “Recently Viewed” won’t display until customers browse items.

Save and Rebuild: Make sure changes are saved before starting your next app build.

Discovery, Search, and Personalization

This feature allows you to power your app’s search and personalization with Constructor instead of Shopify.

Step 2: Set Constructor as Provider

In the Reactiv Dashboard, click your store logo to open App Settings in the App Studio.
Navigate to Integrations.
Under Discovery, Search, and Personalization, select Constructor as your provider.
Click Save.

In the Reactiv Dashboard, click your store logo to open App Settings in the App Studio.

Navigate to Integrations.

Under Discovery, Search, and Personalization, select Constructor as your provider.

Click Save.

Once enabled, your app’s search and personalization will run through Constructor.

Troubleshooting Discovery, Search, and Personalization

If your search or personalization features aren’t working as expected:

Check Constructor Credentials: Go to Integrations in the left-hand navigation and confirm your Index Key, Security Token, and Service URL match Constructor’s values.
Confirm Shopify Connector is Active: Verify the Constructor Connect app is installed and configured correctly.
Verify the __shopify_id Field: Make sure it’s marked Displayable: true in your Constructor dashboard.
Fallback Behavior: If Constructor cannot be reached or is misconfigured, Reactiv will automatically fall back to Shopify’s default search.

Check Constructor Credentials: Go to Integrations in the left-hand navigation and confirm your Index Key, Security Token, and Service URL match Constructor’s values.

Confirm Shopify Connector is Active: Verify the Constructor Connect app is installed and configured correctly.

Verify the __shopify_id Field: Make sure it’s marked Displayable: true in your Constructor dashboard.

Fallback Behavior: If Constructor cannot be reached or is misconfigured, Reactiv will automatically fall back to Shopify’s default search.

Next Steps

Once setup is complete, you’re all set to:

Test your search and recommendations in the preview app.
Adjust carousel placement or pod type as needed in the App Builder.
Work with Constructor’s team if you need new pods or support.

Test your search and recommendations in the preview app.

Adjust carousel placement or pod type as needed in the App Builder.

Work with Constructor’s team if you need new pods or support.

Did this answer your question?😞😐😃