Product Grid

by Admin on Apr 04, 2024

1. What is a product grid?

The product grid  in Eurus theme showcases product listings in a structured layout with thumbnails or images arranged in rows and columns. It allows customers to efficiently browse through a collection, displaying essential details like product name and price. 

This layout serves as the main interface for exploring products, offering a visual overview and enabling quick scanning. Integrated features such as sorting options and filters enhance the browsing experience, helping users refine their search criteria effectively.

2. How to set up the number of items per page?

  • To set up the number of items per page in the product grid, you can adjust the "Product per page" configuration. By default, the number of products displayed will be the first value entered into the field.
  • Additionally, you can configure the pagination type (Circle/Underline)

Circle:

 

Underline:

 

  • Other setting options include enabling the display of sorting options, choosing between list or grid view, enabling the collection count number, and setting the number of products per row for desktop and mobile devices. 

These settings allow you to customize the layout and functionality of the product grid according to your preferences and needs.

3. How to customize the product cards in the product grid?

To customize the product cards on a collection page, you can typically show or hide various elements to tailor the display according to your preferences. Here's a brief overview:

  • You can choose to display or hide the product rating on the product cards. The rating typically represents the average score based on customer reviews.
  • You may have the option to include or exclude a quick view button on the product cards. This button allows customers to view product details in a popup without leaving the collection page.
  • You can opt to show or hide the vendor name on the product cards. The vendor name indicates the brand or manufacturer of the product.

By adjusting these settings, you can customize the appearance of the product cards to best suit your branding and user experience preferences.

4. How to add a banner in the middle of the Product grid?

To add a banner in the middle of the Product grid, you can use a Promotion block. Here's how to do it:

  • Navigate to the theme editor and add the Product grid section, then add Promotion block:
  • Arrange the position of the block using the "Position" setting
  • Upload an image for the banner and adjust the image overlay opacity if needed to enhance its visibility.
  • Configure the layout of the block for both desktop and mobile devices to ensure proper display across different screen sizes.
  • Customize the text accompanying the banner, such as subheading, heading size, text size, alignment, and content position, according to your preferences.
  • Preview the changes to ensure the banner is positioned correctly within the Product grid and adjust settings as necessary.

By following these steps, you can seamlessly integrate a banner into the middle of your Product grid to attract attention and promote specific products or offers effectively.