Products Grid Element

You are here:
Estimated reading time: 1 min

This element is designed to display products in various styles.

Available skins:

Default Skin

Displays a basic list of products.

You can choose how many products per row to show and how many products to load (limit).

Default skin in London demo .

Displays a basic list of products in the form of a carousel. You can choose how many products (slides) to show and how many to scroll at once.

Accessing Carousel Settings section, you will notice a lot of options that can customize the functionality of the carousel.

Adding custom navigation:

You can add a custom navigation (either arrows or bullets) using the Slider Navigation element.

First you’ll need to access the Products Grid element, access the Carousel settings section and copy the Carousel Unique ID code.

Paste this unique ID into the Slider Navigation element’s “Slider Unique ID” field. This will basically tell one another to be connected and in sync.

I chose this method because there’s a much bigger design freedom to have separate elements, as i can position them anywhere.

The Slider Navigation element also supports bullets eg: Beijing demo .

Carousel skin in Milano Demo, with navigation arrows element connected.

This awesome skin is meant to display products, but with their images embedded into the parent’s section background, as a slideshow.

As seen in the example below, the product’s information (title, price and buttons) on the left, while on the right, there are completely different elements, that are added in this section, into another column.

Here’s a quick demo how to add this element with this skin https://d.pr/v/xBMfGY .

Carousel Section skin in Valencia demo .

Additional settings

Image size:

You can force a different image size for the products thumbnails. This is highly useful for Carousel Products skin to load a full image (or at least large enough).

You can force a different image size for the products thumbnails. This is highly useful for Carousel Products skin to load a full image (or at least large enough).

Products query

In this options section you can customize the query to show only the products that you want, sorted differently, even only including or excluding some products.

Components

Enable or disable any component of the product you want.

Was this article helpful?
Dislike 0
Views: 17

Join the conversation