Product card settings

Product cards do more selling than almost anything else in your store. They appear in collection grids, featured collection sections, search results, and recommendation rows, so one change here repeats across dozens of pages. You will find these controls in the theme editor under Theme settings → Product cards (the gear icon at the bottom of the editor sidebar). Settings in this group apply store-wide, while options that affect a single grid, such as how many products sit in a row, live on the section itself.

Set the title and price layout

• Card title and price layout decides how the two lines of text under the image are arranged. Inline (title and price on one row) puts the name and the price side by side, which keeps cards compact so more products fit on the first screen. Stacked (title above price) gives the title its own line with the price beneath it. Defaults to inline.

Choose based on your product names. Short names sit neatly inline. If most of your titles run to several words, stacked keeps them from crowding the price and stops the row from wrapping awkwardly on phones.

Choose the image frame

• Card image frame sets how the product photo sits inside the card:
  • Matte border adds an inset frame around the image, the way a mount sits inside a picture frame. This is the default.
  • Filled panel places the whole card on a surface, so each product reads as its own tile.
  • Thin line draws a fine line around the image and nothing more, a light touch that keeps a busy grid tidy.
  • Edge to edge fills the card with the image for the most visual impact.

Let your photography decide. Products shot on a plain studio background suit Matte border or Filled panel, because the frame gives the product an edge to sit against. Lifestyle photos that already carry their own background usually look strongest Edge to edge. Preview the change on a collection page with at least eight products, since what you are judging is the rhythm of the whole grid rather than a single card.

Style the product title

• Product title style sets the weight and slant of the name. Choose Regular, Italic, Medium, or Bold. Defaults to Regular. Medium and Bold pull the eye to the name first, which suits stores where the product name itself does the selling. Italic sits well under a serif heading font, and reads as quieter rather than louder.
• Product title size offers Small, Medium, or Large. Defaults to Medium. Small is useful for dense grids of four or more products per row; Large works when you show two or three large cards and want the name to carry weight alongside the image.

Set these two together with your Typography settings in mind, since the card title uses the fonts you chose there.

Turn on quick view

• Show quick view puts an eye button on product cards that opens a compact buy dialog, so a shopper can pick a variant and add to cart without leaving the grid. Turned off by default.

Turn it on when your products are easy to understand at a glance and shoppers often buy more than one, such as sizes, colors, or restocks of a familiar item. Leave it off when the product page does real persuading with description, specifications, or extra photos, because in that case the trip to the full page is the sale.

Tip

The image frame and the space around cards work as a pair. If you pick Edge to edge and want a bold, unbroken grid, lower Product grid gap under Theme settings → Spacing so the images nearly touch. If you pick Matte border or Filled panel, keep the gap generous so every card stays a separate object.

Note

These choices apply to product cards everywhere they appear, so you only make them once. Card corners, borders, and shadows follow Theme settings → Corners, borders, and depth, and card colors follow the scheme assigned to each section, which you can review under Colors.