Product grid
How to customize your collection product & filtering section
Section settings
Page width
Boxed: With boxed width, page content can be displayed within the maximum width. The page width can be changed in Theme Settings > Layout.
Full width: With the "Full width" option, page content can be displayed in its entirety full-width. When you show content at full width, you can add padding to the left and right sides.
Products per page
You can change the "Products per page" limit from 8 to 100 maximum on the collection page
Number of columns on desktop
You can change the number of columns on desktop
Display one column on mobile
You can display one column on mobile. By default, 2 columns will be displayed
Enable layout switcher
You can enable/disable the product column switcher -
Filtering & sorting
Enable filtering
How to customize the filtering
Go to this page and follow the instructions -
Desktop filter layout
Enable sorting
Price filter layout
Product card
Product card settings
Image ratio
Adapt to image: Uses the aspect ratio of the collection images is cropped.
Portrait: uses a 2:3 cropping ratio to the images.
Square: uses a 1:1 cropping ratio to the images.
Landscape: uses a 3:2 cropping ratio to the images.
Show second image on hover
Shows the second product image when a customer moves their mouse over the first image.
Show badges
For particular sections, you can show or hide product badges.
Show title
For particular sections, you can show or hide the title.
Show price
For particular sections, you can show or hide the wishlist price.
Show vendor
For particular sections, you can show or hide the wishlist vendor.
Show product rating
You can display show/hide product ratings for specific sections.
Enable quick add button
For particular sections, you can show or hide the cart button.
Quick add button display
Static
Hover
Always static on mobile
Quick add button style
Icon button
Text button
Text with icon button
Except for the "Icon button", all buttons are always displayed below the product card on mobile See more of the display
Make button full width
You can display the "Cart button" in full width.
Show "quick add button" below product card
Enabling this option will make the "quick add button" always static and occupy full width.
"Quick add button" position on desktop
You can change the "Quick add button" position on the "Product card" -
Top left
Top center
Top right
Middle left
Middle center
Middle right
Bottom left
Bottom center
Bottom right
It works, unless you enable the option "Show quick add button below product card"
Show pre-order button
You may want to allow customers to purchase out-of-stock items. Learn more
Show countdown
To display the countdown timer, you need to enable it. Learn more
Enable color swatches
To display color swatches, you need to enable it. Learn more
Show marquee
To display the marquee, you need to enable it. Learn more
Marquee display
Always static
Hide on hover
Always static on mobile You must follow the instructions to display the marquee on the product card. Learn more
Round corner
You can enable/disable the round corner of the product card
Card spacing
You can add padding inside of the product card by enabling this setting.
Product card color scheme
You can add a color scheme to the product card.
Inventory status
You can enable or disable it. 
Low inventory threshold
You can show a " low inventory stock" message for your customer. Just add a low inventory threshold 
Show inventory count
You can show/hide inventory stock count numbers.
Show always status
You can always show the inventory status for all the product cards.
If you disable the option, the inventory status will be displayed based on the quantity of the specific product inventory.
Minimum number of quantity
You can set "Minimum number of quantity" to show inventory status.
It works until you enable "Show always "
Color settings
You can add color to different statuses of inventory stock.
In stock
Out of stock
Low stock
Continue selling (You may want to allow customers to purchase out-of-stock items. Learn more )
Quick add button style on the product card
Section padding
Desktop: Padding top
The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the desktop.
Desktop: Padding bottom
The section’s bottom inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the desktop.
Mobile: Padding top
The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the mobile.
Mobile: Padding bottom
The section’s top inner space height is determined. From 0 to 150 px, will be incremented by 5px. It will affect the mobile.
Last updated