Seventh > Theme settings > Product card
This area controls the display of all product cards on your store. In order to achieve consistency and have a coherent design, all the product cards will share the same settings (style and functionality).
However, you can still adapt the style of individual product cards and also, each product card has it's own set of blocks.
Card style
Text alignment
- Changes the text alignment of the content in your product card
Inner blocks spacing
- Controls spacing between inner blocks
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.
Padding
- Sets the padding around the card
Add padding to media
- Adds padding around product featured thumbnail or makes the thumbnail extend to the edges of the card
Remove card background
- Removes the card background styling and disabled padding around the card
Corner radius
- Controls corner rounding (when there is a background)
Color scheme
- Selects the card's color scheme
Media thumbnail
Media aspect ratio
- Chooses an aspect ratio that all of your product thumbnails will share (only inside product cards). If you opt for the Natural option, thumbnails will have their original height, and not be resized to the same height.
Media focal point
- Only when you choose a fixed aspect ratio, you will get the option to change the focal point from which your product images are resized.
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.
Show secondary product media on mouse over
- If the product has multiple images, the second one will display when the user hovers their mouse over the product thumbnail. Only available for desktop.
Fallback image
- Products without a featured image will show by default a placeholder SVG. If you want to replace that with your own custom image, you can do it here.
Quick buy
Enable quick buy
- Will add the quick buy buttons to your product cards, inside the product thumbanils.
Desktop button type
- Allows you to switch between a minimal button always visible in the bottom right corner of the product thumbnails, or a default button with text on it, that displays on mouse over. On mobile devices, you will always get the minimal button in the bottom right corner.
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, a popup will appear instead, to allow your merchants to select the proper variants before adding the products to their cart.
How to edit the quick buy modal
The quick buy modal (popup) has it's own page template. You can edit it by selecting the proper template inside your Theme Customizer: Products > Quick view.
Feel free to change the design of the Quick view product card after your own needs. This card has all the settings that you can see in the Featured product card.
Do not add any other sections or cards to this template, as these will not work.
Because of the way things are handled in the backend of modal windows, you cannot use app blocks that require JavaScript initialization inside the quick view product card. This is not a theme limitation, it's a platform wide limitation.