Versions 1.0.0-1.7.3
How to find these settings...
- Online Store
- Customize (Theme Editor)
- Theme settings
- Product grids & rows
The Product Grid options contain features that are similar to Product Pages & the home page Featured Product. This will allow you to customize your product selection on the home 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:
Add to Cart shows if there is only 1 variant option Quick Buy shows if there is more then 1 variant option Sold Out shows if you are tracking inventory and there are zero available: https://help.shopify.com/en/manual/products/inventory/track_inventory
- Homepage product grids like Featured Collection or Tabbed Products
- Product page Recommended or Related products
- Collection product layout
Recommended reading
- Products
- Product media
- Setting sale prices for products
- Uploading files to your website
- Product Review App Installation
- Download a Demo Product
In this section...
Grid 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
- 'Details' shows if there is more than 1 variant option and you disable quick view or you choose 'Enable product button hover'
- 'Sold Out' displays if you are tracking inventory and there are zero available: Track Inventory
Product Swatches and Blocks
Color variant title
Associates the title of your color variants to the swatches & blocks used in product pages, quick view and product grids & rows. By default, this will be 'Color' unless you have a region specific spelling like 'Colour' or unique names like 'Ink Color'
Size variant title
Associates the title of your size variants to the blocks used in product pages & quick view. By default, this will be 'Size' unless you have a unique name like 'Diameter'
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 product title alignment
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 reviews
This is a 2 step process, and involves installing the free Shopify Product Reviews app first. Once installed, check this box and the reviews will display below the product image & details
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 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 and not check 'Continue selling when out of stock'
Color swatches
Enable color swatches to be displayed in the products grids & rows:
- None: Disable this option
- Colors: Show colors based on the name of the color. If a color cannot be associated with an 'HTML Color Name', the swatch will default to white.
- 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
- Custom image: Create your own image to associate with the variant:
- Images MUST be a PNG, not a JPEG
- The file name MUST match the variant title. Example, a variant color of 'None Black' would require a file to be title and formatted like 'none-black.png'
- Recommended image size is 140 x 140px
- Upload the file to Settings > Files
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 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 checked, 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
Quick View
Enable quick view
Provides a link that triggers a pop up that features that products image, details & purchasing options
Product media includes images, 3D models, and videos. For more information, review the Product media documentation
Enable image zoom
Turn on the ability to zoom into the featured product image. To provide a good zoom but keep file sizes low, it is recommended to use 1024 x 1024px images.
Enable zoom to be used on mobile devices
The zoom feature can be disabled on mobile devices, but remain available on desktop
Enable video looping
Allow media videos to loop
Show product SKU
If a product or variant has an associated SKU, it will display under the price
Show product vendor
The vendor title will display under the product price. The title will be linked to the default collection page or to a collection created using the vendor name.
Show product reviews
This is a 2 step process, and involves installing the free Shopify Product Reviews app first. Once installed, check this box and the reviews will display below the product image & details
Show product availability
Display the number of remaining items in stock to create a sense of urgency in your customers shopping. This requires you to track the stock of the product or variant. Available default messaging:
- Only X left!
- Available Now!
- Sold Out
Inventory transfers can also be automatically display underneath the product availability. Learn more about transfers from suppliers
Minimum number of products remaining to display remaining stock
Sets the minimum number of products needed before the 'Only X left! message appears. Example, if there are 10 products in stock, setting this to 15 would display 'Only 10 left!', but setting it to 5 would display 'Available Now!'
Show single option variant
By default, if there is only 1 option to a variant, the dropdown will not display. Since there is no choice for the customer to make, this option is removed. Check the box to display the single option dropdown.
Variant options
Choose how to display various variants:
- All buttons: EVERY variant will be displayed as block buttons
- Color buttons: Only COLOR variants will be displayed as block buttons
- Size buttons: Only SIZE variants will be displayed as block buttons
- Color and SIZE buttons: Only COLOR and SIZE variants will be displayed as block buttons
- 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
- All Dropdowns: EVERY variant will be displayed in a dropdown
Color buttons
Choose how the color will be displayed:
- Colors: Show colors based on the name of the color. If a color cannot be associated with an 'HTML Color Name', the swatch will default to white.
- 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
- Custom image: Create your own image to associate with the variant:
- Images MUST be a PNG, not a JPEG
- The file name MUST match the variant title. Example, a variant color of 'None Black' would require a file to be title and formatted like 'none-black.png'
- Recommended image size is 140 x 140px
- Upload the file to Settings > Files
Show product quantity
Make the quantity field available to allow the customer to add more than 1 item to the cart at a time
Product add to cart redirection
If checked, 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
Show dynamic checkout button
Dynamic checkout buttons allow customers to skip the cart and go directly to the checkout using a variety of payment options