Showcase products in a grid to appeal customers.
How Product Grid Works
Product Grid element is perfect for displaying certain products in a responsive grid layout. Choose products to showcase in the grid based on flexible conditions. Specify which product information to show or hide with one single click.
NOTE: Here we use images to show you how product grid looks like instead of using Product Grid element in the backend because our website doesn't have such products to insert. For real demo of using Product Grid, please refer to: Frontend Demo | Backend Demo.
2 Grid Styles
Choose from 2 styles of grid to display on your Magento 2 website. You can show products in a basic grid in which all products are immediately visible to customers on page load. Or combine the grid with a slider to save space for your page with auto-play option.
Product Grid element allows defining which products to show in the grid with 10 default data sources: Latest, New Arrival, Best Sellers, On Sale, Most Viewed, Top Rated, Featured, Free, Random. You can also combine with Magento product conditions to display products based on various attributes.
In addition, it's all possible to decide the number of products to display and order products by: alphabet, price (low to high or high to low), random, newest first or oldest first.
Take full control over the responsiveness of product grid by defining the number of columns in the grid for each device (including desktop, tablet and mobile).
Show or hide product info (name, price, image, review, add to cart, short description, wishlist link, compare link and swatches) with on-off buttons. In the below product grid, we hide product review, short description, wishlist, compare link and swatches.