The Shopify Connector allows you to connect your Shopify company to Constructor. It provides Liquid UI components out of the box that can speed up your integration by dragging and dropping these components to your store.

Under the hood, the liquid components leverage Constructor's UI Libraries, which means they should provide the same functionality found in each UI library.

Step 1: Install the Constructor Connect app

1. Navigate to the Shopify App Store.
2. Search Constructor Connect in the search field at the top of the page. Alternatively, visit the Constructor Connect app page.
3. On the Constructor Connect app page, select Install.
4. You will be redirected to your store. On the pop-up, review permissions, then select Install in the bottom-right corner.

Step 2: Load the beacon

The easiest way to load our beacon using Shopify is through our App Embed theme extension.

After installing the app, follow these steps:

1. Select Online Store in the side menu of your Shopify Store Admin.
2. Locate your current theme and select Customize on the left side of the page.
3. Click on App Embeds, and enable the Constructor Beacon.
4. Fill your Bundle Name to ensure your beacon is loading correctly.

Step 3: Customize your store

1. Select Online Store in the side menu of your Shopify Store Admin.
2. Locate your current theme and select Customize on the left side of the page.
   • Note: Liquid components should be compatible with any theme; however, you may need to add custom CSS to style the elements based on your needs.
3. On the left side of the theme editor, select + Add section in the part of the theme where you wish to add a component.
4. On the pop-up, select Apps beneath the search field, then select your desired Constructor component.
5. Expand the new Apps section in the theme editor to view the component. You can now drag and drop the component to the ideal location on the page.

Autocomplete UI

The Constructor Autocomplete liquid component renders the Autocomplete UI element. It provides the search bar, incorporating Constructor's Autocomplete product.

This element can be rendered anywhere; however, adding it to the Header section allows you to override the native Shopify search field.

Once added, select the Constructor Autocomplete component in the theme editor to access the following configuration options:

PLP UI

The Constructor PLP liquid component renders the PLP UI element. It handles the entire product list page, covering Constructor's Search and Browse products.

While this element can be rendered anywhere, we recommend that it be rendered inside the Template section as this is the main page body where users would expect to see the list of products.

Once added, select the Constructor PLP component in the theme editor to access the following configuration options:

Recommendations UI

The Constructor Recommendations liquid component renders the Recommendations UI element. It handles the recommendations carousel, covering Constructor's Recommendations product.

Once added, select the Constructor Recs component in the theme editor to access the following configuration options:

AI Shopping Agent (ASA) UI

The Constructor ASA liquid component renders the AI Shopping Agent UI element. It brings a conversational shopping agent directly to your storefront, allowing shoppers to describe what they’re looking for, ask questions and explore relevant product recommendations through natural conversation. Shoppers can view product cards, navigate to product pages and, when enabled, add product variants to their cart, helping them move from discovery to purchase with greater confidence.

Please reach out to your Customer Success Manager to enable the Constructor ASA app. Once done, you can select the Constructor ASA component in the theme editor to access the following configuration options:

Product Insights Agent (PIA) UI

The Constructor PIA liquid component renders the Product Insights Agent UI element. It ships an agent directly in the product details page (PDP), capable of understanding the specific item a shopper is viewing and can instantly respond to questions with answers informed by product data, reviews, company-produced content and Constructor’s model's world knowledge, helping customers make faster, more confident buying decisions.

Note: To support PIA answers, you will need to upload relevant product information (e.g., reviews, guides, blogs, etc.) to Constructor. Learn more here.

Please reach out to your Customer Success Manager to enable the Constructor PIA app. Once done, you can select the Constructor PIA component in the theme editor to access the following configuration options:

Updating UI library versions

Once you've added a liquid component and want to update the UI library version, simply go to the component options and change the {Name} UI Version configuration to set the desired version, always according to the npm page for that specific UI library.