Skip to content

Products

This guide describes the Theme settings > Products menu options.

Use the menu options to set how products are displayed throughout your store.

In the previous video, a recommended products section is displayed on a store's product page. To display a second product image when the cursor is placed over a product tile, in Theme settings > Products, the Hover action dropdown is changed from None to Show second image.

For general guidance with adjusting a theme setting, refer to Settings overview and Shopify help: Theme settings.

Configure products

To configure products:

  1. Go to Theme settings > Products.

    The Theme setting's Products menu in Theme editor

  2. Select a setting described in the following table.

Setting nameDescription
Split title with hyphen (-) characterSelect the checkbox Split title with hyphen (-) character to show/hide a hyphen - character inside the title text for product tiles.
Product grid tiles > Hover actionUse the dropdown Hover action to specify a behavior. The behavior applies when a cursor is placed over a product grid tile. The options are None, Show second image, and Show image gallery.
Product grid tiles > Show first product video on hoverSelect the checkbox Show first product video on hover to show/ hide the first product video when a cursor is placed over the product's grid tile.
Product grid tiles > Show audio previewSelect the checkbox Show audio preview to show/ hide audio previews on product pages. Refer to Add audio previews.
Product grid tiles > Grid image sizeUse the dropdown Grid image size to set a size for product images inside the product grid. The options are Natural, Square (1:1), Landscape (4:3), and Portrait (2:3).
Product grid tiles > Star ratingsUse the dropdown Star ratings to set the type of ratings to display inside the product grid. The options are Theme or Shopify product reviews. Refer to Product reviews.
Product grid tiles > Star ratings colorUse the Star ratings color options to set a color for the star (rating) icons inside the product grid to Text color or Accent color. Refer to Product reviews and Colors.
Product grid tiles > Show vendorSelect the Show vendor checkbox to show/hide the name of a product's vendor inside product tiles.
Additional metafield > Metafield keyIn the Metafield key box, enter the name of a metafield key with the namespace label_theme. You can reuse the metafield on your store's pages. Refer to Shopify help: Metafields.
Additional metafield > Show on collection gridSelect the checkbox Show on collection grid to show/ hide metafields in the collection grid. Refer to Shopify help: Metafields and Collection grid.
Additional metafield > Show on product pageSelect the checkbox Show on product page to to show/ hide metafields on product pages. Refer to Shopify help: Metafields and Product pages.
Color swatches > Enable color swatches on product pagesSelect the checkbox Enable color swatches on product pages to show/ hide color swatches on product pages. Refer to Baseline: Color swatches guide.
Color swatches > Enable color swatches on collection pagesSelect the checkbox Enable color swatches on collection pages to show/ hide color swatches on collection pages. Refer to Baseline: Color swatches guide.