> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/products/product-cards.md). # Product cards, quick add and quick view Design product cards, their badges and buttons, and how quick add and quick view work. A **product card** is the small product preview in every product grid: collection pages, search results, featured collections, recommendations and more. Cards are built from blocks, so you choose what each one shows. Store-wide card behavior lives in **Theme settings › Product cards**. ![Collection grid of product cards](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-fbd1e125dcb85a58036000fb74ed8abafb078545%2Fcollection-desktop.png?alt=media) ## Theme settings › Product cards Open **Online Store › Themes › Customize**, click the **gear icon (Theme settings)**, then **Product cards**. These settings apply to every card in the store. | Setting | Options | Default | What it does | | -------------------------------------- | ------------------------------------------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Image shape** | Square, Portrait, Landscape, Match first product image | Square | The frame shape. Portrait is 4:5, Landscape 4:3. **Match first product image** gives each card its own photo's shape, so rows can be uneven. | | **Image fit** | Fill frame, Show whole image | Fill frame | **Fill frame** crops to fill; **Show whole image** fits the whole photo inside the frame. Choose **Show whole image** for packshots on white. | | **Show second image on hover** | On / off | On | On computers, hovering a card fades in the product's second image. Needs at least two images. | | **Product tag for New badge** | Text | new | Products with this tag show a **New** badge. Leave empty to turn New badges off. | | **Add to bag / Choose options button** | Show on hover (large screens), Always show | Show on hover | On large screens with a mouse the button slides up when the card is hovered. **Always show** keeps it visible. Touch screens and small screens always show it. | | **Sale badge** | Sale, Percentage off, Amount saved | Sale | What the sale badge says: "Sale", "20% off" or "Save $15". Percentage and amount fall back to "Sale" when variants have different prices, so the badge never overstates the saving. | The same image settings also apply to the product tiles on the [All collections page](/collections-and-search/all-collections.md). ## Badges Badges sit in the top-left corner of the card image. Only one shows, in this order: 1. **Sold out** — every variant is sold out. 2. **Sale** — the product has a compare-at price above its price (styled by **Sale badge**). 3. **New** — the product has the tag set in **Product tag for New badge**. Turn badges off for one grid with **Show sale, sold out and new badges** in that card's **Product media** block. ## The card's button The button at the bottom of the card image depends on the product: | Product | Button | What happens | | --------------------- | ------------------ | ------------------------------------------------------------------------------------------------------- | | One variant, in stock | **Add to bag** | Adds it straight away (quick add). The cart opens as set in **Theme settings › Cart**. | | Several variants | **Choose options** | Opens **quick view** so the shopper can pick options. With quick view off, it goes to the product page. | | Sold out | No button | The card links to the product page. | **On phones and touch screens** the button becomes a round dark button with a cart icon in the bottom-right corner of the image, so it doesn't cover the photo. Screen readers still hear "Add to bag" or "Choose options" with the product name. **On computers** it is a full-width button that slides up on hover (or always shows, with **Always show**). Its round end shows a cart icon when hovered. ![Add to bag from a product page](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-1cb77bb08998e4287eda3d960c5f7b5fbee4a234%2Fadd-to-cart.gif?alt=media) {% file src="/files/2INh3qB0CTdt2RGhf6tD" %} Watch the video (MP4) {% endfile %} ## Quick view Quick view opens the product in a large panel over the page: gallery, title, price, variant picker, buy buttons and a **View full details** link. It opens with a tiled animation and closes the same way. ![Quick view](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-0edc15b82e5b5d1fe14df25a2bddbbb503246e1b%2Fquick-view.png?alt=media) ![Quick view in action](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-133d735b5de9bec8ce2af25843c470a897777634%2Fquick-view.gif?alt=media) {% file src="/files/IXiq1zoY2mvmhUb9f91l" %} Watch the video (MP4) {% endfile %} * In quick view the gallery shows only the selected variant's photos and fills the left half. * Choosing options updates the price, photos and button just like the product page. * Close with the close button, **Esc** or a click outside. ## The Product card block Sections that show products (for example **Featured collection**, **Product grid**, **Search results**, **Product recommendations**) contain one **Product card** block. Change it once and every card in that section follows. | Setting | Options | Default | What it does | | ------------------------- | ---------------------- | ------- | ------------------------------------------------------------- | | **Style** | Plain, Card background | Plain | **Card background** puts each card on a shaded rounded panel. | | **Text alignment** | Left, Center | Left | Alignment of the text under the image. | | **Space between details** | 0–16 px | 4 px | Gap between title, price and the other lines. | ### Blocks inside a card Add, remove and reorder these inside **Product card**: | Block | What it shows | | -------------------- | ---------------------------------------------------------------------------------------------------------- | | **Product media** | The image, badges and the button. Settings below. | | **Product title** | The name; **Link to product** makes the whole card clickable. | | **Price** | Lowest price, with "From" when variants differ. | | **Vendor** | The brand. | | **Rating** | Stars from the `reviews.rating` metafield. | | **Swatches** | Color swatches that preview and select variants. See [Variants and color swatches](/products/swatches.md). | | **Inventory status** | Stock line, for example "Only 3 left". | | **Compare** | A **Compare** checkbox (when compare is on). See [Product compare](/products/compare.md). | | **Text** | Any short text. | | App blocks | Blocks from your apps. | ### Product media block settings | Setting | Default | What it does | | --------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------- | | **Show sale, sold out and new badges** | On | Badges on the image. | | **Show add to bag / choose options button** | On | The card button. Turn off for a cleaner grid. | | **Open quick view for products with options** | On | **Choose options** opens quick view; off goes to the product page. | | **Corners** | Large | **Small** or **Large** rounded corners. | | **Image sizes attribute** | (preset) | Advanced. Tells the browser how wide the image displays; leave it as it is unless a developer changes the layout. | ## Loading and motion * While a card image loads, a small loading bar shows in the middle of the frame; the image then fades in. The frame keeps its size, so nothing jumps. * On computers, hovering the card zooms the image slightly (turn off with **Theme settings › Animations › Zoom media on hover**). * With **Theme settings › Animations › Reveal sections on scroll**, cards fade up row by row as they come into view. ## Tips * Use **Show whole image** in **Image fit** if your product photos have different shapes. * Keep the **New** tag up to date — remove it from products after a few weeks. * If grids feel busy on phones, turn off **Show second image on hover** (it only affects computers anyway) and **Vendor**. * For a quick-ordering grid with quantities, use the list view on collection pages (see [Collection pages and filters](/collections-and-search/collection-page.md)).