Products Grid
Here you can set global style for products grid however grid style is also overwrite by individual section's grid settings.
Last updated
Here you can set global style for products grid however grid style is also overwrite by individual section's grid settings.
Last updated
Steps:
In the theme editor, click Theme settings
Locate Products Grid,
Make necessary change and click save.
Grid Style: Choose from 6 different style. Click here to see all grid style
Button stretched?: Enabling this option display button fullwidth in grid for grid style 4
Grid Spacing: Set space between two grid box for desktop view.
Grid Spacing(mobile): Set space between two grid box for mobile view.
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.
Enable to show color swatch on products grid. Choose swatch type to Color Swatch Or Variant Swatch.
For Color Swatch, make sure you have define all custom colors. Custom colors can be add from Sections -> Scroll down to Custom Color section. You can find Custom Color section next to footer section.
For Variant Swatch, Please make sure you have uploaded variant images From Shopify admin > Products > Select product to add variants > Scroll down to Variants.
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 swatch size to small, medium or large.
Border Radius: Set rounded corner for swatch.
Set Swatch border and active swatch border color.
Set font size, font weight, text case and title color for product title in grid.
Title reduced 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.
Set font size, font weight, price color and format for the price to be displayed products grid.
Enable Quick Shop : Enabling this option offer direct shop from products grid rather than to jump to product page.
Add to Cart, Wishlist, Quickview Icon : Set Icon color, background color and border radius for icons display in products grid
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.
Enable to highlight products or display sale or sold-out label on items. Click here to know how to add sale label.
Style: Select label style to rectangle, rounded or radius. Set font size and text color.
Sale Label? Enable to display sale label on products. Show when compare price is greater than regular price.
Style: Select how you want to display sale label. Text based or in percentage.
Soldout Label? Enabling this option display sold out label on product when product is out of stock.
Add text for label 1 to label 5 and set colors.
