--- title: Products Grid description: "The products grid is a key layout in Shopify themes that displays [products](https://revone-demo.myshopify.com/collections/fashion?_ab=0&_fd=0&_sc=1&preview_theme_id=138313072791)in a structured grid format. It helps customers browse collections easily by showing multiple products at once in rows and columns. Customizing the products grid improves [visual consistency](https://adornthemes.com/revone/),…" url: "https://www.adornthemes.com/knowledge-base/products-grid/" updated: "2026-04-30" category: Theme Settings --- # Products Grid The products grid is a key layout in Shopify themes that displays [products](https://revone-demo.myshopify.com/collections/fashion?_ab=0&_fd=0&_sc=1&preview_theme_id=138313072791)in a structured grid format. It helps customers browse collections easily by showing multiple products at once in rows and columns. Customizing the products grid improves [visual consistency](https://adornthemes.com/revone/), product discovery, and overall shopping experience. In the theme editor, click **Theme settings** -> **Products grid** **Grid Style :**You can choose grid style from four different option. **Remove collection name?** : Enable this option to eliminate the collection name from the product URL **Grid Spacing :**Set space between two grid box for desktop view. ![](https://adornthemes.gitbook.io/~gitbook/image?url=https%3A%2F%2F1708375644-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FrsFZ0qmgr873lDxCKvMZ%252Fuploads%252FZUp6StSEtE3gbSsvkSpq%252Fproducts-grid2.jpg%3Falt%3Dmedia%26token%3D4a7ddb05-0e51-42ed-babd-35900c879846&width=768&dpr=4&quality=100&sign=c0f776cb&sv=2) **Grid Spacing(mobile) :**Set space between two grid box for mobile view. **Grid Images **: **Ratio :**Set products grid images ratio to landscape, portrait or square based on your image dimension. **Border Radius :**Set product grid images corner to rounded. --- **Color Swatch **: Enable to show color swatch on products grid. Choose swatch type to ColorSwatch Or Variant Image. **For Color Swatch,** make sure you have define all colors. Please go through this **[article](https://adornthemes.com/knowledge-base/add-product-colors-using-category-metafields/)**to add colors for products. ![Products Grid Revone Shopify Theme](https://adornthemes.com/wp-content/uploads/2025/04/color-swatch.png) --- **For Variant Swatch,**Please make sure you have uploaded variant images From **Shopify admin** > **Products** > **Select**product to add variants > Scroll down to **Variants.** ![](https://adornthemes.gitbook.io/~gitbook/image?url=https%3A%2F%2F1708375644-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FrsFZ0qmgr873lDxCKvMZ%252Fuploads%252FHLptU2ky9y5qPrJTAuZI%252Fvariant-swatch.jpg%3Falt%3Dmedia%26token%3D90cd938c-9109-49c7-a031-ccb9b6a1601f&width=768&dpr=1&quality=100&sign=7ef3034&sv=2) --- **Variant Image Position :**Set variant image position.Set variant image position. Either you can set to display it from center or top. **Swatch Size :**Select swatches size in px. **Border Radius :**Set rounded corner for swatches. Set Swatch border and active swatch border color. **Max Colors to show** : Set the number of colors you wish to display on the grid. The remaining colors will become visible when the user clicks the plus button. --- **Products Title :** Set font size, font weight, text case and title color for product title in grid. **Shorten title to one line?** You can enable this option to display the product title in one line if the title occupies two or three lines. With this, title text will be truncated. **Products Price** : Set font size, font weight, price color and format for the price to be displayed products grid. **Grid Buttons** : Add to Cart, Wishlist, Quickview Icon : Set Icon color, background color and border radius for icons. Also, control the visibility of buttons for both desktop and mobile views. **Countdown Timer** : Enable this option to display countdown timer on products grid. You can enable count timer to promote items on sale. Set text and background colors. ![countdown](https://adornthemes.com/wp-content/uploads/2025/04/countdown.png) --- **Product Badge/Labels **: Enable to highlight products or display sale or sold-out label on items. **[Learn more](https://adornthemes.com/knowledge-base/how-to-set-custom-labels-for-products/)** **Sale Label** : Enable to display sale label on products. Show when compare price is greater than regular price. ![Products grid revone shopify theme](https://adornthemes.com/wp-content/uploads/2025/04/image-1.avif) --- **Show as :** Select how you want to display sale label. Text based or in percentage ![Products grid revone shopify theme](https://adornthemes.com/wp-content/uploads/2025/04/sale-labe-1.png) --- **Soldout Label?** : Enabling this option display sold out label on product when product is out of stock. ![soldout](https://adornthemes.com/wp-content/uploads/2025/04/soldout.png) **Custom Labels** : Please follow given **[article](https://adornthemes.com/knowledge-base/how-to-set-custom-labels-for-products/)**to set custom labels like Best Seller, Top Rated, Hot, New etc ![custom-labels](https://adornthemes.com/wp-content/uploads/2025/04/custom-labels.png) **Scrolling Text **: Scrolling text is a great way to showcase promotional messages or highlight special information about specific products that grab users' attention. ![scrolling-text](https://adornthemes.com/wp-content/uploads/2025/04/scrolling-text.png) **Other Options** : Additional product settings such as display reviews, subtitle, vendor information, border, and text alignment.