Cards and grids
Product cards, collection tiles, carousels and quick buy, for every section that follows Theme settings for cards.
Online Store › Themes › Customize › Theme settings › Cards and grids
Per row on desktop
Product cards and collection tiles. Every grid of product cards runs edge to edge with this many per row, and phones show two. Sections can follow it or set their own.
Name size
Names under images in a grid: product cards, collection and editorial tiles, journal cards. Each choice is a step of Typography › Sizes.
Name size on phones
Card names and prices on phones, on every page and over a section's own Name size; Name size and Name size on product and bag pages hold from tablets up. Scales with Typography › Font scale.
Name size on product and bag pages
Product card names in the product page's and the bag's sections (recommendations, recently viewed, looks), and the names of the bag's items. Search and other panels keep Name size.
Products to show
In Product cards, Related products and Recently viewed. Related products show at most 10, Recently viewed at most 8.
Layout
View all link
In Product cards: the link to the collection, or your own link when the section has one.
Leave out products shown in a look on the same page
Related products skip what a look on the product page already shows.
Alignment
The name, price and swatches under product cards, and where a short row of cards, collection tiles or images sits: with Center, a single row that doesn't fill the grid sits in the middle. Sections can follow it or set their own.
Alignment on All products
Alignment on category pages
Tight spacing
Between product cards, collection tiles and pictures in a grid. At 0 they touch; their names keep a small inset.
Space between
Between product cards, collection tiles and image grid pictures. Tight is Tight spacing below; Gutter is the page grid's gutter.
Per row on phones
Product cards and collection tiles.
Collection tiles
Collection name
Product count
Carousels
Arrows
Show part of the next card
A sliver of the next card shows at the end of the row, so shoppers see there is more.
Moves on its own
Every few seconds, while on screen and not under the pointer; never with reduced motion.
Card image background
Behind images on product cards, collection tiles and navigation images: around images set to fit inside, and while they load.
Card image text
Placeholder drawings and the loading mark on Card image background. Keep a contrast ratio of at least 4.5:1 with it.
Show prices
On every product card. Sections can follow it or set their own.
Show every image
A card brings in the product's other pictures when the pointer reaches it, to browse with the arrows or a trackpad; on phones, swipe the picture. Carousels follow Show every image in carousels.
Protect against mis-clicks
Clicking a card's arrow past its last picture nudges the pictures instead of opening the product, and a click on the picture just after turning it (350ms) doesn't open it either. Shoppers browse the pictures without landing on a product they didn't choose.
Show every image in carousels
A swipe or a trackpad moves the carousel, so cards in it change pictures with their arrows. Phones means touch screens, tablets included; there the arrows always show. Elsewhere a card in a carousel shows its first image.
Show color swatches
In the price's place, or under the name when prices show. Choosing a color shows its pictures and links the card to it.
Enable quick buy
A round + on each card's picture, sized to the card. A product with one variant goes straight into the bag; any other opens its pictures, options, quantity and Add to bag.
Quick buy opens
On desktop. Phones show a sheet from the bottom either way.
Quick buy icon
Background under the image
The area with the name and price. The picture's own color takes the color along the foot of the card's first picture, so the card reads as one piece; on a dark color the text turns light.