What are product cards?
Product cards display key information about a product on collection pages, search results or in sections such as Get the look, or featured collection. Settings can be used to control the layout of these product cards.
In the Beautify theme, product cards include:
- Product images - the main product image, a second image on hover, the image linked to a selected swatch color, an image with a color blended background or a cutout image where the image protrudes from the top of the card.
- Product title - the product name in full or truncated and, for combined products, the product title can be split onto two lines to separate the color and the name.
- Price - original price, sale price and unit price displayed next to the product title or on a separate line.
- Vendor* - can be displayed with the product title or on a separate line. (The vendor is held in the product record in the Shopify admin.)
- Quick shop* - allows users to add the item directly to their cart and includes a one click add option for single variant products.
- Swatches* - to show alternative colors, clicking a swatch changes the main image, clicking the plus icon opens the quick shop or product page. (Refer to the Swatches and shade picker guide for more.)
- Product labels* - shown on over the image to highlight product status - sale, new, sold out, preorder, low inventory or custom text (Refer to the Product labels guide for more information.)
- Product subtitle* - additional information about the product. (This is added using the descriptors.subtitle metafield.)
- Product rating*- app star ratings or review counts can be displayed for all products or those with reviews.
(* optional)
How to setup product cards
The Beautify theme includes flexible options for handling product cards. Customize product card design, content and layout using the Theme settings for Product cards and Colors.
How to set the product card color scheme
Steps
- Open the Theme editor, select Theme settings and open the dropdown Colors.
- Choose a Product card color scheme.
- Decide whether to use a Cart item color scheme to have a distinct color scheme for cart items.
- Use the Opacity of muted text slider in the Color theme settings to ensure that text with reduced emphasis is legible and meets accessibility requirements. This affects some text on the product card such as the product subtitle, unit price and compare at price.
- Within the settings for each individual Color scheme, there are further controls for the product card Border and Shadow color.
How to set the product card shape
Steps
- Open the Theme editor, select Theme settings and open the dropdown Design.
- Set the Card radius to Large or Small for curved corners or None for cards with square corners.
How to configure the product card layout and content
Steps
- Open the Theme editor, select Theme settings and open the dropdown Product cards.
- Manage the Image by setting the main Image aspect ratio.
- Set the Image fit and Image alignment for the main image.
- Choose whether to Show second image on hover and then set the Hover image fit and Hover image alignment.
- Manage the card Content, choosing whether to Show rating, Show vendor or Show subtitle.
- Choose whether to Truncate title or Truncate subtitle. This can be used to ensure to create a neater layout on the card.
- Use the setting Display inline price to show the price next to the title. This only applies on larger cards where space is available.
- Choose whether to Enable Quick Shop.
Tip
Cutout cards and standard cards
Some sections in Beautify support cutout cards to create a more interesting user experience and bring the product image to prominence by breaking out of the card. There is a toggle to enable or disable cutout cards in the following sections: Collection page, Featured collection, Product list, Get the look, Quiz, Collage hero, and Popular products in the header.
In a standard card, the product image always sits within the confines of the card.
In a cutout card, the product image overlaps the top edge of the card. Cutout cards are designed to be used with images that have a transparent background.
Tip
Beautify combined products
The Beautify theme allows you to link together products into groups and display them as a single product on the product page. Instead of creating variants for different colors, a separate product is created for each color. This approach has the advantage that all the product colors can be displayed in the store collection pages, search pages and other sections. Refer to our combined products guide for more information as to how to set this up.
Product labels
In the Beautify theme, labels can be shown over the image to communicate additional information such as sale, pre-order, new in, sold out, low inventory or custom text such as "best-selling". Refer to the product labels guide for more.
Swatches
The Beautify theme supports Shopify's metafield method to create swatches. Swatches can be shown on the product card under the main image. Refer to the Swatches and shade picker guide for more information.
Color blending
The Beautify theme supports color blending to add a background color to product images. Refer to the color blending guide for more.
How to set up the quick shop
Steps
- Open the Theme editor, select Theme settings and open the dropdown Product cards.
- Choose whether to Enable Quick Shop. This will show a quick buy button on product cards. The button is shown on hover (desktop) or on the card for tablet and mobile. Preorder products will show a preorder button. The quick buy will open in a quick buy drawer.
- Select Enable single-click add to use a one-click add method for single variant products which don't require the customer to view more details prior to purchase.
- Select Fix the Quick Shop footer to the bottom of the drawer when it scrolls to manage the quick buy drawer. For stores which support a lot of additional payment buttons, it can be desirable to switch this off to make more space to see products in the quick buy.
What are product mini cards?
Mini cards are used in the Beautify theme when a small product card is required, for example after clicking on a hotspot on the shoppable image, in the complementary products on the product page or suggested products in the cart. Cart items are also shown in mini cards and can use a distinct color scheme.
In the Beautify theme, mini product cards include:
- Product image - the main product image with a color blended background (if used).
- Product title - the product name in full or truncated and, for combined products, the product title can be split onto two lines to separate the color and the name.
- Price - original price, sale price and unit price.
- Vendor* - vendor or brand when displayed as part of the product title (The vendor is held in the product record in the Shopify admin.)
- Quick shop* - allows users to add the item directly to their cart and includes a one click add option for single variant products.
(* optional)
FAQs
How can I show a currency code next to the price?
To show the currency code next to the price, select Show currency code on product prices in Theme settings > Currency.
What is the product subtitle?
The product subtitle is a standard product metafield definition by Shopify. Standard metafield definitions exist in Shopify for some common use cases. The namespace and key for the product subtitle is descriptors.subtitle. To show this product level metafield on the product card, go to Theme settings > Product cards > Show subtitle.
How do I add a product subtitle?
A product subtitle can be shown on the product card under the product title.
Note
Steps
- In the Shopify admin area, add the Shopify Product subtitle metafield using the standard Shopify product subtitle definition. The namespace and key for the product subtitle metafield is descriptors.subtitle.
- In the Shopify admin area, edit products to add a subtitle.
- Open the Theme editor and navigate to Theme settings > Product cards
- Select Show product subtitle to show the subtitle on the product card.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us