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.
3. How to set up the pagination?
a) How to choose type of pagination:
In the section Product grid, find the Pagination setting. You have 3 options to choose from:
- Pagination (Default): This is the normal way to see products. Customers can click on numbers to go to different pages.
- Infinite scroll: This is like a never-ending page. When you scroll to the bottom, more products will appear automatically, stopping only when there are no more products to show.
- Click to load: You'll see a button that says "Load more." Click it to see more products.
Which one should you choose?
- Infinite scroll is good if you want to show lots of products quickly, without requiring your customers to do any more actions.
- Click to load is good if you want to control how many products your customers see at a time. And let them control.
- Pagination (Default) is always a good choice if you're not sure.
b) How to change the pagination indicator style:
In the section Product grid, find the Pagination type setting, you can choose between 2 options:
1️⃣ Circle:
2️⃣Underline:
4. 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.
- You can also choose to show the description in the list view. If you tick this checkbox, this allows customers to see a brief description of the product directly on the product listing page.
By adjusting these settings, you can customize the appearance of the product cards to best suit your branding and user experience preferences.
5. How to add a banner in the middle of the Product grid?
Inside your Product grid, you can add some banners by adding some Promotion blocks. With this, you can attract attention and promote specific products or offers effectively.
✍️ Here's how to add a promotion block to the product grid:
In Theme Editor, under the Product grid section, click “+” or “Add Promotion block”.
✍️ Here's how to customize the promotion block:
Inside Theme Editor, tap on the Promotion block to open the setting panel, from here you can adjust:
- Position: Arrange the position of the block.
- Desktop background image: Upload an image for the banner
- Video: Select a video from the library or paste the URL to use it as background.
- Overlay opacity: Adjust the image overlay opacity if needed to enhance its visibility.
- Desktop layout: Adjust the width and height of each promotion banner on the desktop.
- Mobile layout: Adjust the width and height of each promotion banner on the mobile.
- Some other settings: 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.
