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 our UI Libraries, which means they should provide the same functionality as you can find in each UI library.

Installation

Install the app

In the Shopify App Store, install the Constructor Connect App.

Note: You'll need to accept the terms and give permissions to the API scopes the app uses.

Customizing your store

From your Shopify Store Admin, navigate to go to the Online Store in the side menu and select customize your current theme. Keep in mind that the liquid components should be compatible with any theme, but you might need to add in custom CSS to style the elements depending on your needs.

In the customize theme page, you'll be able to drag and drop the components to your store. Each liquid component offers different parameters to configure it, as described in the sections below.

Autocomplete UI

The Constructor Autocomplete liquid component can be used to render the Autocomplete UI element. It handles the search bar, covering Constructor's Autocomplete product.

This element can be rendered anywhere, but it also provides special support to be rendered in the header and override the native Shopify search button.

To use it, simply click Add Section in your theme editor and add the Constructor Autocomplete liquid component:

Upon adding this component, you can use the following configuration options:

Option	Description
Autocomplete UI Version	The Autocomplete UI library version, as seen on npm.
Constructor Index Key	The Constructor index key to use.
Search URL	The search URL to redirect to when clicking on a search suggestion.
Enable default CSS?	If enabled, it will apply default CSS styles to make the UI look nicer.
Override default search icon?	If enabled, it will hide the Shopify native search icon and position itself in the header where the search icon is normally found.
Options (JSON)	A JSON string allowing you to input any additional options available in the UI library.

PLP UI

The Constructor PLP liquid component can be used to render the PLP UI element. It handles the entire product list page, covering Constructor's Search and Browse products.

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

To use it, simply click Add Section in your theme editor and add the Constructor PLP liquid component: