User Guide

Search limit to:






Product cards
Copy
Open in ChatGPT
Ask ChatGPT about this page
Open in Claude
Ask Claude about this page

1. What setup can you do in Product card?

  • Use case 1: Allows the customers to directly purchase products from the product cards, without visiting the cart page or product detail page.
  • Use case 2: Presents an adequate amount of product information and highlights for customers to make immediate purchase decisions.
  • Use case 3: Serves as a visual indication of what the collection and promotion campaign (that the cards belong to) are about.

2. Location & Setup

  1. Go to “Online Store” > “Themes” > ”Customize”.
  2. Click the Theme Settings tab.
  3. Go to Product card.

3. Setting group overview

Take a look to see what you have within the Product card setting:

Group name Purpose
General (the first group) Customize the overall visual appearance of the product card across the entire store interface.
Sale labels Display sale labels in the product card and customize the label’s visual appearance, ensuring clear visibility and user attention.
Highlight attributes Display metafields as product highlighted features on product cards.
Estimated delivery date Display when the product may arrive based on the shipping details.
Overlay Customize the appearance of buttons on the product card.
Style Customize the color of highlight, heading, text, price, sale price and rating for both light and dark mode.

4. Common Use Cases

🤔 How to set up the overall product card appearance?

Want to customize how the product card looks? Follow these steps:

STEP 1: 

Go to Theme Settings >  Product cards.

STEP 2: Customize the general settings

In the first setting group:

  • Select a Product image ratio and Container color for both light and dark mode.
  • Drag to adjust the side padding (0-20px) for both mobile and desktop.
  • Select an Effect on mouse hover and Content alignment for both light and dark mode.
  • Choose how inventory statuses are shown.

STEP 3: Customize how the buttons look like

Scroll down to the Overlay setting group:

  • Choose the layout of "Add to cart" button on desktop and mobile devices.
    • None
    • On product image
    • Bottom of product card
    • Bottom of product card with quantity selector
  • Select the Button style to be Primary button or Secondary button.
  • (Optional) Show border of the button.

STEP 4: Customize the colors of product cards

Scroll down to the Style setting group:

  • Customize the color of Highlight, Heading, Text, Price and Sale price for both light and dark modes.
  • If a product rating app is used, also customize the Rating color.

STEP 5: 

Click “Save” when done.

 

🤔 How to display sale labels, highlight attributes and EDT on product cards?

These 3 elements are important in highlighting the product advantages, thus encouraging purchase decisions. Here's how to set them up:

STEP 1: Go to Theme Settings >  Product cards.

STEP 2: Display and customize the sale label appearances

In the Sale labels setting group:

  • Enable Show sale label to display sale label on product cards.
  • Once enabled, fill the Sale label content.
  • Customize the color of Sale label and Sale label text in both light and dark modes.

STEP 3: Display and customize highlight attributes

  • Create a metafields of single line text type (Follow this Shopify guide on how to set up metafields)
  • To show the first highlight attribute: 
    • Fill the created icon metafield key into Icon metafield 1 field.
    • Fill the created text metafield key into Label metafield 1 field.
  • For the second and third highlight attributes, repeat the above steps.

STEP 4: Display and customize the Estimated Delivery Date (EDT)

  • Enable Show estimated delivery date to display EDT on product cards
  • Fill the Message field the EDT notification content shown to customers
  • To hide EDT for pre-order products, enable Hide when Pre-order is enabled

STEP 5:

Click “Save” when done.

 

🤔 How to add and customize different types of labels and badges on product cards?

Please follow this guide: Product labels and badges

Need help? Contact our support team at Omni Themes Support.