Appearance

Products ​

This guide describes the Theme settings > Products menu options to set how products are displayed throughout your store.

In the following 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.

Split title with hyphen (-) character ​

To show/ hide a hyphen - character inside title text:

  1. Go to Theme settings > Products.

  2. Select/ deselect the checkbox Split title with hyphen (-) character.

    The Split title with hyphen options in Theme setting's Products menu.

Product grid tiles ​

To configure how product grid tiles are displayed on product pages:

  1. Go to Theme settings > Products > Product grid tiles.

  2. Select the following options:

    • Hover action. Use 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.

    • Show first product video on hover. Select 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.

    • Show audio preview. Select the checkbox Show audio preview to show/ hide audio previews on product pages. Refer to Add audio previews.

      The Product grid tiles upper options in Theme setting's Products menu.

    • Grid image size. Use 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).

    • Star ratings. Use 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.

    • Star ratings color. Use the dropdown Star ratings color 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.

      The Product grid tiles lower options in Theme setting's Products menu.

Additional metafield ​

To set how metafields are displayed on product pages:

  1. Go to Theme settings > Products > Additional Metafields.

  2. Select the following options:

    • Metafield key. In 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.

    • Show on collection grid. Select the checkbox Show on collection grid to show/ hide metafields in the collection grid. Refer to Shopify help: Metafields and Collection grid.

    • Show on product page. Select the checkbox Show on product page to to show/ hide metafields on product pages. Refer to Shopify help: Metafields and Product pages.

      The Additional metafield options in Theme setting's Products menu.

Color swatches ​

To turn on/ off color swatches on product and collection pages:

  1. Go to Theme settings > Products > Color swatches.

  2. Select the following options:

    • Enable color swatches on product pages. Select the checkbox Enable color swatches on product pages to show/ hide color swatches on product pages. Refer to Baseline: Color swatches guide.

    • Enable color swatches on collection pages. Select the checkbox Enable color swatches on collection pages to show/ hide color swatches on collection pages. Refer to Baseline: Color swatches guide.

      The Color swatches options in Theme setting's Products menu.