How to find these settings...
- Online Store
- Customize (Theme Editor)
- Theme settings
- Product grids & rows
The Product Grids & Rows options contain features that are similar to Product Pages & the Featured Product section. This will allow you to customize your product selection in the sections and product pages, plus whenever the product grid is used. When adjusting these settings, it is suggested to use one of these product grid examples:
- Collection product layout
- Section product grids like Featured Collection or Tabbed Products
- Product page Complementary or Related products
Recommended reading
- Products
- Product media
- Creating custom metafield definitions
- Adding values to metafields
- Setting sale prices for products
- Uploading files to your website
- Download a Demo Product
In this section...
Grid & Row Buttons
The call to action buttons will vary depending on the settings and availability of your product:
- 'Add to Cart' displays if there is only 1 variant option
- 'Quick View' displays if there is more than 1 variant option
- 'View' shows if there is more than 1 variant option and you disable quick view or 'add to cart for single variant products'
- 'Sold Out' displays if you are tracking inventory and there are zero available: Track Inventory
Sale Badges
Show badges
Display the sale savings when a product has a manually set sale price
Show percentages
Use a saving percentage instead of the currency
Badge font color
Set the color of the text & the outline
Badge background color
Set the color of the background
Options
Enable borders
Add a simple 1px border to each product listed when using the Grid Product Layout
Show rollover image
If enabled and there is more than 1 product image, on rollover the second image will be displayed
Grid text alignment
Product text can be aligned to the left, right or centered to the container
Enable square image (1:1) formatting
Not all product image are sized the same, and if yours cause the product titles to misalign, this will help add a consistent size to the images
Show product vendor
Displays the manufacturer, wholesaler, or other vendor for the product
Show product SKU
If a product or variant has an associated SKU, it will display under the price
Show product rating
Display the product rating based on reviews collected from review apps
Note: Requires a product review app, and metafield definitions for 'reviews.rating_count' and 'reviews.rating'
Color swatches
Color swatches are dependent on the Product Taxonomy set up in the product admin. Choose how the color will be displayed:
- None: Disable this option
- Swatches: 'Swatches' can be customized with Category Metafields and the Search & Discovery app
- Variant image: Display the variant image associated with the variant. If an image is not available, it will default to the color
- Magnified variant image: Display the zoomed in variant image associated with the variant. If an image is not available, it will default to the color
Enable rounded swatch
Buttons can be sharp edged squares or rectangles, or rounded circles or ovals
Show single color swatch
Unless enabled, products with only a single color variant will not display the swatches
Show product meta data
Requires a metafield. Copy the 'Namespace and key' and separate each with a comma.
Show product availability
Display inventory messaging based on the layout:
- Grids & Rows: Inventory transfers can also be displayed if set up in the admin. Learn more about transfers from suppliers
- Order Form: Display transfers & variant stock levels. This requires you to track the stock of the product or variant
Show product grid/row button
Enable or remove the grid/row call to action
Enable product button hover
When using the Grid Product Layout, you have the option to have the call to action button display on hover only
Enable quick view
Provides a link that triggers a pop up that features the Quick View products image, details & purchasing options.
Enable add to cart for single variant products
When enabled, products with a single variant will feature a button to add the item to the cart right from the grid or row
Product add to cart redirection
If enabled, when the customer clicks add to cart, they will stay on the same page. This promotes further shopping within the store. If you would prefer that they go directly to the cart, uncheck this option
Compare products
Enable product comparisons
Add a checkbox to product listings to compare up to 5 products
Show product vendor
The vendor title will display under the product title. The title will be linked to the default collection page or to a collection created using the vendor name.
Show product rating
Add the product rating metafield
Show price
Add the product price range
Show variants
Add a list of the products variants
Metafields 1-20
Add up to 20 custom metafields. Once the metafield is created and a value has been added to the product, add the value using this format:
Title:Namespace and keyTitle: This is the title that will display in the first column of the pop up, to the left of the value
Namespace and key: This can be found in the admin, within the metafield you created. Copy and paste the following:
For this example, in the input add:
Material:my_fields.material
* NOTE: May not be available on all sections, blocks or templates