Product cards
Every product grid, carousel and related list in your store draws one card. Pick a design, then change, add, hide and drag every part of it in the theme editor, for the whole store or for one list.
Every product grid, carousel, search result and related list in your store shows products with one product card. You change it once and every list follows. Every template draws its cards this way, so whatever template and design you use, each part of the card is yours to change.
Open it in Storefront → Themes → Customize, then Theme → Product card, or click any part of a card on the page.
Designs
A design is a starting point: it sets the card’s layout and its parts. Pick one and the card changes at once, with Undo. If you changed the card yourself, the editor asks before a design replaces your changes.
| Design | What it shows |
|---|---|
| The template’s card (Halo card, Ledger row, Atlas card…) | The card the template was made with. New stores start here. |
| Tile | Image, live status and type, title, the from price with the price per day, then rating, delivery and stock. |
| Compact | Small cards, five or six to a row: status on the image, a one-line title, price and per day. |
| Side by side | The image beside a small price table. Each option adds itself to the cart. |
| Image first | The image fills the card; the details rise over it on hover and always show on touch screens. |
| Detailed | Status and its note, three features, every term, the price per day and a full-width button. |
| List row | One line per product: name and type, status, facts, price and per day. |
| Quick buy and Minimal | An Add to cart button under each card; or just the image, the title and the price. |
You can also pick the design in Theme settings → Product cards → Product card design.
Parts
The card is a list of parts, top to bottom. Add parts with Add part, hide one with the eye, remove it from its menu. Every part has its own settings, and most share a Style group: size, weight, colour (from your theme’s colours), font, capitals, alignment, lines before cutting off, which screens show it (phones, computers or both) and the space above it (“Push down” keeps it at the bottom of cards that are taller than their content).
| Part | Shows |
|---|---|
| Image | The first image, or the generated cover. A second image on hover with the card’s Swap hover. |
| Title | The product’s name, the card’s one link. |
| Price | The lowest price (“From $4.99”) or the cheapest option in stock, the old price on sale, how often memberships renew, and how it is paid. Sold out and paused products say so instead. |
| Savings | −17%, Save 17%, Save $5.00 or the old price, on products on sale. As text or a pill. |
| Badges | On sale, sold out, paused, low stock, featured, free, most popular. |
| Live status | Working, Updating, Not working… from your status page: as a pill, a dot and label, a dot, a coloured label or the status note, with when it was checked. |
| Category or type | The game, the product type or the main category. |
| Description | The short description, what buyers get, or the start of the description. |
| Features | The product’s key features (with delivery, platforms and bundle size when it has none). |
| Rating | Five stars, one star and the number, or a chip, with the number of reviews. |
| Price per day | The best price per day among the options in stock; otherwise the from price, instant delivery, low stock or a dash. |
| Delivery | Instant delivery (or what buyers get). |
| Stock | “3 left”, sold out, paused. |
| Options | The product’s options as names, short terms, dots, keys or pills that add the option to the cart, a price table that adds, or a table to pick from with Add to cart. |
| Term | The cheapest option in stock (“1 Day”), or “+3 more terms”. |
| Facts | Type, delivery, platforms, bundle size, stock and region, as a small table or one line. |
| Platforms | Platforms and region. |
| Sold count | “120 sold this month”, from a minimum you set. |
| Add to cart | A button, a button that shows on hover, a round icon or a square arrow. Products with options add the cheapest option or open the product. A quantity box for keys. |
| Buy button | “Choose a plan” (opens the product) or Buy now (straight to checkout, one-price products). As a button, an arrow or a link. |
| List number | 01, 02, 03… in lists that number their products. |
| Custom text | Your text, with product facts filled in: {title}, {price}, {per_day}, {type}, {category}, {rating}, {reviews}, {sold}, {stock}. |
| Divider and Spacer | A line between parts, or space (Fill pushes the parts after it to the bottom). |
| Row | Puts the parts after it side by side, like the title and the price, or stacked. Rows can sit in rows. |
Badges, Live status, Category or type, Savings, Rating and Add to cart can sit on the image, in any corner.
Some theme settings still hide parts on every card: star ratings, status badges, the game or type, the old price, “Only N left” notes, prices per day and sold counts. When one is off, the part’s settings say so, with a button to turn it on.
Card settings
Select Card layout and look (or the card itself) for the settings of the whole card:
- Layout: image on top, image beside the text (left or right, and how wide), text over the image (always shown, or details that rise on hover), or one line per product.
- Image: its shape, fill or show the whole image, and the hover: the theme’s, nothing, zoom, or the product’s second image. Sold out and paused products can be dimmed.
- Look: background (the theme’s, the card colour, none), border, corners, space inside and between parts, text alignment, and whether the whole card opens the product or only the title and image.
- Products per row: on computers (the theme setting, 2 to 6, or 5 or 6 for small cards) and on phones (1 or 2). A list with its own Columns setting keeps it. Cards in a row line up their heights.
Drag to reorder
- On the page: click a part, then drag it. A line shows where it lands; it can go between parts, into a row (the row grows) or out of one (the row shrinks). Drag a part that can sit on the image onto one of its corners. Every card in the store moves the same way.
- In the layers list (Sections, Product card): drag a line by its grip. How far left or right you hold it picks whether it goes into the row above or stays outside it.
- With the keyboard: press Space on a part’s grip, move it with the arrow keys (into, along and out of rows), and press Space to drop it or Escape to put it back. Alt+↑ and Alt+↓ move the selected part one step.
Every change is one step of Undo (⌘Z).
One list with its own card
The card note at the top of a part’s settings says which lists a change reaches: the store card shows in every list except lists with a card of their own. To give one list (a “Best sellers” grid, say) a different card, select the list and choose Give it its own card, or Change only this list from a card part. It starts as a copy of the store card. Use the store card again takes it back.
Template updates
A template update never changes your store on its own. When you choose to take one, your cards look as they did before: the design you had picked becomes that design’s parts, and a card you had built stays yours.