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.
For general guidance with adjusting a theme setting, refer to Settings.
Product grid tiles
To set how products appear within grid tiles:
Go to Theme settings > Products > Product grid tiles.
Select a setting described in the following table.
|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 previous theme settings apply to all products in a collection. For example, on the Home page, Collection page or Product pages under Related Products.
To turn on/ off color swatches on product and collection pages:
Go to Theme settings > Products > Color swatches.
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.
Refer to Set up color swatches.