This guide describes the Theme settings > Product tiles menu options. Use the settings to specify how product tiles are displayed throughout your store.
A store's products page, with product tiles, is displayed in the previous image. The Theme settings > Product tiles menu, on the left side of the image, has the following settings applied:
- To display every second product tile at an offset height, the checkbox option is enabled to Scatter product tiles.
- The Image shape dropdown is set to Star 1, to set a shape for the images inside the tiles.
- To display On sale and Sold out badges on the product tile images, the checkbox option to Show on sale and sold out badges is set to
on. Examples of these badges are displayed over the product tiles in the Merch area.
- The shape of the On sale and Sold out badges are set to Ticket stub.
Set up product tiles
To set up product tiles:
Go to Theme settings > Product tiles.
Select a setting described in the following table.
|Show vendor||Use the Show vendor checkbox to hide/show the names of product vendors inside the product tiles.|
|Show second image on hover||Select the checkbox Show second image on hover to show/hide a second image of a product whenever the cursor's placed over a product tile ("mouse over").|
|Scatter product tiles||Select the checkbox Scatter product tiles to turn on/off displaying every second product tile at an offset height.|
|Image aspect ratio||Use the dropdown Image aspect ratio to set the width-to-height ratio for images inside the product tiles. The dropdown options are Natural, Landscape, Square, and Portrait.|
|Image shape||Use the Image shape dropdown to set a shape for images inside the product tiles. Shapes theme provides more than 40 different shapes for images. Some shapes will crop the image. Refer to Style images with shapes.|
|Badges > Show on sale and sold out badges||Select the checkbox Show on sale and sold out badges to show/hide badges. The badges are displayed on product tile images, for store products listed as "on sale" and/or "sold out".|
|Badges > On sale badge shape||Use the dropdown On sale badge shape to set a shape for "on sale" badges. Shapes theme provides more than 30 different shapes for badges. Refer to Shopify help: Badges.|
|Badges > Sold out badge shape||Use the dropdown Sold out badge shape to set a shape for "sold out" badges. Shapes theme provides more than 30 different shapes for badges. Refer to Shopify help: Badges.|
|Metafield badge > Metafield key||In the Metafield key box, enter the name of a metafield to display as a badge inside the product tiles. Metafields can hold additional product information that's not saved in Shopify admin, like product numbers and dimensions. Refer to Shopify help: Metafields, and Show custom sticker badges on product tiles.|
|Metafield badge > Metafield badge shape||Use the dropdown Metafield badge shape to set a shape for metafield badges. Shapes theme provides more than 30 different shapes for badges. Refer to Shopify help: Metafields|