Product card theme settings
The Product card theme settings control how product cards look in every grid in Seventh: card style, media, quick buy and the Quick view popup.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 1.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
The Product card theme settings set the style, media and quick buy button of every product card in the store, for a consistent design. A change here applies at once to collection pages, Featured collection sections, product recommendations and search results.
Where to find it: Theme settings → Product card
Card style
The Card style settings set the text alignment, inner spacing, padding, background, corner radius and color scheme of the cards.
If you are using content groups inside the product card, the text alignment and inner blocks spacing of these will not be affected by the card settings.
Each Product card block also has its own Card style setting:
- Default uses the Card style values from this page.
- Custom lets that one section or block use its own Card style values.
The Media thumbnail and Quick buy settings always come from this page. See Product card.
Media thumbnail
- Media aspect ratio sets one media shape for all product cards. Uncropped: Natural keeps each image's original height, so cards are not resized to the same height.
- Media focal point (cropped ratios only) sets which part of the image stays visible.
- Show second product media on mouse over shows the second image when the pointer is over the card, on desktop.
- Fallback image replaces the placeholder illustration for products without media.
- Show product video plays the product's first Shopify-hosted video in the card.
Example: If you sell clothing and have tall product images, but want to display them as squares in product thumbnail, you can select the square aspect ratio and put the media focal point to the "top", in order to always see the head of the models.
Quick buy
Enable quick buy adds a quick buy button to the media of each product card.
The quick buy button adds products instantly in the cart, if these products don't have any options (product variants). If they do have options, the Quick view popup opens instead, to allow your merchants to select the proper variants before adding the products to their cart.
- After a direct add, the cart drawer or the cart page opens, depending on Cart type in Theme settings → Cart.
- A sold out product shows no quick buy button.
- On desktop (1024 px and wider), Desktop button style Minimal shows an icon in the bottom corner of the media. Button shows a full-width labeled bar that slides in when the pointer is over the media.
- Below 1024 px, Seventh always shows the minimal icon.
Editing the Quick view popup
The Quick view popup has its own template in the theme editor. It has no settings of its own besides its product card.
Open the Quick view template
In the theme editor, open the template picker at the top and select Products → quick-view.
Select the Quick view product card
Select the Quick view product card in the theme editor. The card has the same settings and blocks as the product card of the Featured products list section.
Change the blocks and save
Add, remove or reorder the product blocks (title, price, variants, buy buttons and others), then select Save.
Do not add any other sections or cards to this template, as these will not work.
Video guide
The Seventh video guide "Product cards & collection grids" shows how these settings control layout, spacing, media, badges, swatches and quick buy in every collection grid.
Can I use app blocks in the Quick view popup?
Only app blocks that do not need JavaScript to start. App blocks that need JavaScript initialization do not work inside the Quick view product card. This is a Shopify platform limit for content loaded into a modal, not a theme limit. Place those app blocks on the product page instead.
Why does a section ignore my Card style changes?
The Product card block in that section has Card style set to Custom. A Custom card uses its own Card style values and ignores Theme settings → Product card → Card style.
- To fix it, select the Product card inside the section and set Card style to Default.
- A new Product card block starts with Custom. Some sections in the theme's default templates use Default.
Why do my product cards have different heights?
Media aspect ratio is set to Uncropped: Natural, which keeps each image's own shape. Select a cropped ratio (Short, Square, Tall or Taller) to give every card the same media height, then use Media focal point to choose which part stays visible.
Why does the second image not show on hover?
Check these in order:
- Show second product media on mouse over is on.
- The product has at least two media files.
- Show product video is off, or the product has no Shopify-hosted video. When the card plays a video, it does not swap to the second media.
- You are on a desktop screen. Touch screens have no hover.
All Product card settings
Every setting in this group, with its type and default.
Product card theme settings: Card style
Where to find it: Theme settings → Product card → Card style
Text alignment (alignment, default: Center).
Inner blocks spacing (dropdown, default: XSmall): Sets the space between the blocks inside the card. Content group blocks inside the card keep their own spacing and alignment. Options: XXSmall, XSmall, Small, Regular, Large, XLarge.
Padding (dropdown, default: Small): Sets the space between the card edge and its content. Options: XSmall, Small, Regular, Large, XLarge, XXLarge. Shown only when Remove card background is off.
Add padding to media elements (checkbox, default: on): Applies the card padding around the product media too. Turn it off to make the media reach the edges of the card. Shown only when Remove card background is off.
Remove card background (checkbox, default: off): Removes the card background, so the content sits directly on the section. Padding and corner radius are then not used.
Corner radius (dropdown, default: None): Sets the corner rounding of the card background. Options: None, Slighty rounded, Rounded, Fully rounded. Shown only when Remove card background is off.
Color scheme (color scheme, default: Scheme 2).
Product card theme settings: Media thumbnail
Where to find it: Theme settings → Product card → Media thumbnail
Media aspect ratio (dropdown, default: Uncropped: Natural): Sets one media shape for all product cards. Uncropped: Natural keeps each image's own shape, so cards can have different heights; the cropped options give every card the same media height. Options: Uncropped: Natural, Cropped: Short (4:3), Cropped: Square (1:1), Cropped: Tall (5:6), Cropped: Taller (2:3).
Media focal point (dropdown, default: Center): Sets which part of the media stays visible when it is cropped to the aspect ratio. Top keeps the upper part, for example the faces in model photos. Options: Top, Center, Bottom. Shown only when Media aspect ratio is not Uncropped: Natural.
Show second product media on mouse over (checkbox, default: off): Shows the product's second media when the pointer is over the card, on desktop. Needs at least two media files, and is not used when the card plays a product video.
Fallback image (image): Sets the image shown for products with no media, instead of the placeholder illustration.
Show product video (checkbox, default: on): Plays the first Shopify-hosted video of the product in a loop instead of the featured image. YouTube and Vimeo videos are not used.
Product card theme settings: Quick buy
Where to find it: Theme settings → Product card → Quick buy
Adds an instant "add to cart" button. If the product has multiple variants, a popup will appear to select the variant.
Enable quick buy (checkbox, default: on): Adds a quick buy button to the media of each product card. Products with one variant are added to the cart directly; products with several variants open the Quick view popup. Sold out products show no button.
Desktop button style (dropdown, default: Minimal): Sets the quick buy button on desktop (1024 px and wider): Minimal is an icon in the bottom corner of the media, Button is a full-width labeled bar that appears on hover. Smaller screens always show the minimal icon. Options: Minimal, Button. Shown only when Enable quick buy is on.
Show only on hover (checkbox, default: off): Hides the minimal quick buy icon until the pointer is over the card, on screens 768 px and wider. Shown only when Enable quick buy is on and Desktop button style is Minimal.
Show on mobile (checkbox, default: on): Shows the quick buy icon on screens narrower than 768 px. Shown only when Enable quick buy is on.
Related pages
- Product card: the Product card block, its Card style override and its inner blocks.
- Product badges theme settings: the sale, sold out and custom badges on product media.
- Color swatches & size options theme settings: swatches and size options in product cards.
- Cart theme settings: Cart type, which decides what happens after quick buy.
- Seventh video guides: all four video walkthroughs.