# Products

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

The following image shows an example store’s product page with a grid layout.

An example collection using Baseline's product grid

For general guidance with adjusting a theme setting, refer to Settings.

# Product grid tiles

To set how products appear within grid tiles:

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

  2. Select a setting described in the following table.

Setting name Description
Show vendor Use the Show vendor checkbox to hide/ show the names of product vendors in the product tiles.
Show on sale badge Use the Show on sale badge checkbox to hide/ show on sale badges, on the top right of product items.
Grid image size Use the Grid image size dropdown to set the size and shape of the images inside the product grid tiles. The dropdown options are: Natural (default), Square (1:1), Landscape (4:3), and Portrait (2:3).
Product title and price display Use the dropdown Product title and price display to position the product Title and Price inside the product grid tiles. The dropdown options are: Under image, Over image, aligned bottom, Over image, aligned top and Over image, on hover.
Title and price text alignment Use the dropdown Title and price text alignment to align product Title text and Price text inside the product grid tiles. The dropdown options are: Title left, price right, Title left, price underneath and Title center, price underneath. This setting does not apply when the product title and price are set to display over images.
Show second image on hover Use the checkbox Show second image on hover to hide/ show a second image of a product on mouse rollover.
The product grid tiles setting controls in theme settings

Note

The previous theme settings apply to all products in a collection. For example, on the Home page, Collection page or Product pages under Related Products.

# 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 settings.

    • Enable color swatches on product pages. Use the checkbox Enable color swatches on product pages to hide/ show color swatches on product pages.

    • Enable color swatches on collection pages. Use the checkbox Enable color swatches on collection pages to hide/ show color swatches on collection pages. Then, in Theme settings > Products > Product grid tiles > Product title and price display, set the dropdown to Under image. Refer to Product grid tiles.

      The product color swatches setting controls in theme settings

Refer to Set up color swatches.