Appearance
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.
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.
| 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. |
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:
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.