Appearance
Product tiles
This guide describes the Theme settings > Product tiles menu options.
Use the settings to specify how product tiles are displayed throughout your store.
The previous image shows a store's "Chocolate" collection page, with product tiles. In the upper left, part of Theme editor's Theme settings > Product tiles menu is displayed. The menu's Scatter product tiles checkbox option is set to on ("checked"). With this option, every second product tile is displayed at an offset height.
For general guidance with adjusting a theme setting, refer to Settings overview and Shopify help: Theme settings.
Set up product tiles
To set up product tiles:
Go to Theme settings > Product 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 inside the product tiles. |
| 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 and videos with shapes. |
| Show second image on hover | Select the checkbox Show second image on hover to show/hide a second image of a product when the cursor's placed over a product tile ("mouse over"). |
| Hover effects > Enlarge shape | Select the Enlarge shape checkbox to turn on/off the "Enlarge shape" effect. With this setting enabled, the product tile image is enlarged when the cursor is placed over a product tile ("mouse over"). |
| Hover effects > Rotate shape | Select the Rotate shape checkbox, to turn on/off the "Rotate shape" effect. With this setting enabled, the product tile image is rotated when the cursor is placed over a product tile ("mouse over"). |
| Hover effects > Lift shape | Select the Lift shape checkbox, to turn on/off the "Lift shape" effect. With this setting enabled, the product tile image is raised when the cursor is placed over a product tile ("mouse over"). |
| Hover effects > Rotate level | Adjust the Rotate level slider to specify the amount of rotation applied to the "Rotate shape" effect. The slider ranges from -90 to 90. To use this option, set the Rotate shape checkbox to on. |
| Hover effects > Lift level | Adjust the Lift level slider to specify the amount of "lift"" applied to the "Lift shape" effect. The slider ranges from 0.2 to 3. To use this option, set the Lift shape checkbox to on. |
| Badges > Show on sale badge | Select the checkbox Show on sale badge to show/hide "on sale" badges. The badges are displayed on product tile images for store products listed as "on sale". |
| 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 > Show sold out badge | Select the checkbox Show sold out badge to show/hide "sold out" badges. The badges are displayed on product tile images for store products listed as "sold out". |
| 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. |