Product List Component

Adding a Product List Component

A Product List Component is an area you can add to you store to display your products. To add one to a page, go to the style editor by selecting the button by that name on the top of the page. Once in the style editor, click on the blue button with a plus sign.

Add Component Button example

That opens up a component menu on the right side of the page. You then scroll down in the menu until you reach the “FEATURED PRODUCTS” section. You have 4 layouts to choose from, showing from 1 to 4 products. If you want to show more than 4 products you can add more list components to the page.

Choosing a layout example

Managing Product List Components

Adding Products to the Product List Component

To add products to a list component first hover over it in the style editor. This causes several buttons to appear at the top of the component. Click on the Manage Products button to add or change the products shown in the component. The screen that follows shows the products available to be added to the component on the left and the products currently added on the right.

Adding products to the component example

To add available products to the component just click on the blue plus sign beside the product. To remove a product from the component select the gray ‘x’ to the right of the product. Products added to the component can be re-ordered by clicking and dragging the products to the desired position.

Moving, Managing, and Removing the Component

To move the component to another position on the page you first hover over the component while in the style editor. On the top left of the component appear arrow buttons you can use to move the component up or down a position on the page. If only one arrow button appears the component can only move in one direction.

To Manage the component’s options hover over the component in the style editor and select the ‘EDIT’ button that appears. This opens a menu on the left side of the page where you can edit the layout and many options for the component.

Component editing example

When you are done editing, save your work by clicking the save & publish button at the top right of the page.

To remove the component from the page you select the red trash can button that appears on the top right of the component when you hover it in the style editor.