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: 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:

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.