Product Grid

The Product Grid element is used to show products in a grid view. You can use it on a Landing, Homepage, Collection or any page that you want. It helps your customers see more products for more choices. The special thing about EComposer is that you can select products from a Collection, Vendor, or Type or even you can select specific products.

To add this element to your page, please go to Elements -> Shopify -> Product Grid.

1. Content

1.1 General

The most general settings for the element will be in this tab

• Product source: EComposer has 4 sources for you to choose.
  + From Collection: You can create the collection in Shopify first, then select the app.
  + Specific products: You can select specific products to show. But it limits 20 unique products to show per page.
  + Product vendor: It is the vendor of products in Shopify. You can select the vendor to show all of the products to that vendor.
  + Product type: You can select a product type to show.
• Sort by: This option allows you to choose the sort order for products.
• Layout: We have 3 layout types are Grid, List and Slider.
• Style: If you select the Grid or Slider layout, this option will show allow you to choose the style. We have three available styles.
• Image ratio: You can change the ratio for product images.
• Maximum products to show: You can adjust the number of product will show on the element.
• Items per row: Select the items per row.
• Column/Row gap: Set the space between column and row.
• Placeholder image: This option allows you to select an image to show up as a featured image with the products that don’t have the image in Shopify media.

1.2. Product Card

In addition to the product image, there are other important parts that you may want to display on your page:

• Checkbox options: We have options available and you just need to tick the checkboxes to show the product title, vendor, description, price, SKU, sale label…
• Third-party apps: There are rating, quick view and wishlist apps that you may want to use on your page. To use these apps, please click on the “setting” link to open the setting popup. You must select an app from our app list and install that app to your store to use.
• Show when product contains tags: This is a very nice feature, it helps you to display custom labels on product items through product tags. Eg you want to show the “Hot” label on your product items, please add the “Hot” tag to your product and fill the tag name to this option to show. Watch the below video for more detail.

1.3. Product Variant

1.3. Product Variant

If your products have variants, you can configure for them to show here.

• Show variant picker: Choose “Yes” to show them on product items.
• Layout: You can select a layout for your variants. Dropdown, swatch image, swatch color or radio. The variant images will be taken from Shopify to show. If you choose the “Swatch color“, you must install an extension to custom color options.
• Other options as: For example, your products have three variants. So you can select the first variant is swatch image and the other ones as dropdown or radio layout.
• Show option name: If you choose “Yes”, it will show the variant name as a label.
• Product option to show as swatch: Enter the variant name that you want to show as a swatch option here. It is the name of the variant that you created in Shopify.
• Add to cart/Quick shop text: You can change the name for the Add to cart or Quick shop buttons. Also, you can add the icon to those buttons if you want.

1.4. Countdown Promo

In here you can enable/disable the Countdown/Progress bar and change the Layout/Title, you can also change the time labels that you want to show.

But first, to setup the Countdown we need to go to Products in Shopify and choose a product that you want to display the countdown, after that you will need to go down to the bottom of the page and click on Show all next to the Metafields.

In here there will be 2 metafields: Product Countdown Start and Product Countdown End for you to choose the countdown time.

1.5. Change text

There are some text like product title, description, vendor, type… will be taken from Shopify. The rest of the text on the element like the badge, and countdown label you can edit here.

1.6. Product cart items ordering

The product carts will be sorted in default order. If you want to change the order for them, you can do so here, just drag the progress bars to change the position.

2. Design

In this design tab, there are many options to help you design the product element as you want. For example, if you want to add a border around the product item, you can go to the “Product item” tab. Or if you want to change the product title color, you can go to the “Title” tab. All options are very easy to use and flexible.

All of the settings in this tab are covered in detail here.

3. Advanced

This tabs have been very well documented here.