Choosing the Product Item Elements

Once you choose the title and layout for your template, you can add the rows, columns and product elements.

The row will fill 100% of the Product Item Template. One row can contain a number from 1 to 12 columns. The min-width of the column can be (1/12 * 100)% of row width. The max number of column and the max number of columns sum can be (12/12 * 100)% of row width. So for example, if you have 2 columns, the first one of 5/12 width, the second one max-width can be 7/12, but it also can be 1/12.

Now that you’ve added the columns, you can choose the elements that will be displayed. Click on the “Add Element” button and a popup with all elements will be displayed;

Below you’ll find a list of available product elements:

1. Title: the product’s title which is actually a link to product’s single page
2. Image: the product’s featured image
3. Image: a carousel of product’s gallery images
4. Price: the currency and price of the product
5. Short description:: the product’s short description
6. Rating:: the product’s average rating displayed as stars
7. Button – Add to cart:: a button that will add to cart 1 product
8. Button – View product:: a button that link to product’s single page
9. Label – On Sale:: a label that will be displayed if product is on sale
10. Label – Is Featured:: a label that will be displayed if product is featured
11. + more to come in future updates!

As an example, we’ve created a basic grid demo, that has 3 rows, each row has a full width column and have the following elements:

1. Row 1:
   1. Element 1: Image
2. Row 2:
   1. Element 1: Title (links to product)
   2. Element 2: Price
   3. Element 3: Rating
3. Row 3:
   1. Element 1: Add to cart button