> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/collections-and-products-pages/collection-page/product-grid.md). # Product grid The Product Grid section displays all products from a collection in an organized grid layout. This is the main section that shows your products on collection pages, allowing customers to browse, filter, and sort products to find what they're looking for. The section includes powerful filtering and sorting options, customizable product card displays, and flexible layout controls to create the perfect shopping experience for your customers. You can control how many products appear per page, how they're arranged, and what information is shown on each product card.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. In the **page/template** selector, choose a **collection page** (e.g., Default collection) 3. Open **Sections** > **Product grid**. 4. Make your changes, preview live, then click **Save**. {% endhint %} *** ### Settings #### Layout * **Products per page**: Control how many products are displayed on each page before pagination. Options range from 8 to 36 products in increments of 4. More products per page reduce pagination but may make pages load slower, while fewer products create faster-loading pages with more navigation. * **Columns**: Control how many products appear side by side on desktop screens. Options range from 1 to 6 columns. More columns create a more compact layout showing more products at once, while fewer columns make each product more prominent and easier to see. * **Mobile columns**: Control how many products appear side by side on mobile devices. Options include 1 column (products stacked vertically) or 2 columns (products side by side). Two columns show more products at once but make each product smaller. * **Colors**: Choose a color scheme for the product grid section background. This affects the overall appearance of the collection page. * **Full width**: When enabled, the product grid spans the full width of the browser window instead of being contained within the page width. This gives the grid a more immersive look and shows more products side by side. #### Product card * **Image ratio**: Control the shape of product images on product cards. Options include Landscape (wide images), Portrait (tall images), Square (equal width and height), or Tall (extra tall images). Choose the ratio that best showcases your products and matches your design aesthetic. * **Vendor**: When enabled, displays the product vendor name on each product card. This is useful if you sell products from multiple brands or manufacturers and want to highlight brand information. * **Show swatches**: When enabled, displays color swatches on product cards for products with color variants. This gives customers a quick visual way to see available colors without clicking through to the product page. * **Quick add**: When enabled, adds a quick add button to each product card that allows customers to add products to their cart without visiting the product page. This speeds up the shopping process and can significantly increase conversions. * **Quick view**: When enabled, adds a quick view button to each product card that opens a popup with product details. This lets customers see more information without leaving the collection page, helping them make faster purchasing decisions. * **Product rating**: When enabled, displays customer ratings and reviews on product cards if you have a reviews app installed. Ratings help build trust and provide social proof that can encourage purchases. An app is required for product ratings to work. * **Show availability**: When enabled, displays stock status information on each product card. This shows customers whether products are in stock, low stock, or out of stock, helping them make informed purchasing decisions. * **Show variants**: When enabled, displays product variant options (like size or color) directly on the product cards. This shows all available variants of the product. If you want to show only specific variants, use the Custom product variants setting below. * **Custom product variants**: Enter the names of specific variant options you want to display on product cards. Separate each variant name with a comma (e.g., "Color, Shoe size"). This is useful when you want to show only certain variants instead of all available options, keeping product cards cleaner and more focused. * **Metafields to show**: Enter the metafields you want to display on product cards. Separate each metafield with a comma using the format "metafield\_namespace.metafield\_key" (e.g., "custom.badge, custom.material"). This allows you to show custom product information like badges, materials, certifications, or other custom data that helps customers make purchasing decisions. #### Filtering and sorting * **Filters**: When enabled, allows customers to filter products by various attributes like price, availability, product options, and more. This helps customers quickly find products that match their preferences. Filters can be customized with the Search & Discovery app in your Shopify admin. * **Filter layout**: Choose how filters are displayed on the page. Options include Horizontal (filters appear as a horizontal bar above products), Vertical (filters appear in a sidebar on the left), or Drawer (filters appear in a slide-out drawer that opens from the side). Each layout works well for different screen sizes and design preferences. * **Sorting**: When enabled, allows customers to sort products by various criteria like price (low to high or high to low), newest, best selling, and more. This gives customers control over how products are organized, making it easier to find what they want. #### Padding * **Padding top**: Add space above the section. Options range from 0px (no space) to 400px in 10px increments. On mobile devices, this is automatically reduced to half the value for better mobile display. * **Padding bottom**: Add space below the section. Options range from 0px (no space) to 400px in 10px increments. On mobile devices, this is automatically reduced to half the value for better mobile display. *** ### Tips * Enable quick add and quick view buttons to make it easier for customers to purchase products without navigating away from the collection page. This can significantly increase your conversion rate and reduce cart abandonment. * Use the filter layout that works best for your product catalog size. Vertical filters work well for collections with many filter options, while horizontal filters are great for simpler collections. Drawer filters are ideal for mobile-focused experiences. * Show product ratings and availability to build trust and help customers make informed decisions. These details can be the deciding factor for customers who are comparing multiple products. * Adjust the products per page based on your product catalog size and page load speed. Larger collections may benefit from more products per page, but be mindful of page load times, especially on mobile devices. * Test different column layouts to find what works best for your products. Products with detailed images may look better with fewer columns, while simple products can work well with more columns. * Use custom product variants and metafields to highlight specific product information that's important to your customers, such as special features, materials, certifications, or badges that help products stand out. * Enable filters and sorting to help customers find products quickly. Well-organized filtering can significantly improve the shopping experience and increase sales. * Match the image ratio to your product photography style. Portrait ratios work well for fashion and apparel, while square ratios are great for accessories and home goods.