Product cards

Ask AI

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

Want to customize how product cards look across your store? Follow these steps:

STEP 1: Go to Theme Settings > Product card.

STEP 2: Customize the general settings

In the first setting group:

• Select a Product image ratio and Container color for both light and dark modes.
• Drag to adjust the side padding (0–20px) for desktop and mobile.
• Turn on "Show border" to add a border for the card.
• Choose an Effect on mouse hover and Content alignment.
• Choose how inventory statuses are displayed on the card.

STEP 3: Customize how the "Add to cart" & "Choose option" buttons look

Scroll down to the Overlay setting group:

• Choose the layout of the "Add to cart" button on desktop and mobile:
  • None
  • On product image
  • Bottom of product card
  • Bottom of product card with quantity selector
• Change the Button label of both buttons if you don't like the default "Add to cart" and "Choose option" names.
• (Optional) Select the Button style to be Primary button or Secondary button.
• (Optional) Toggle on "Sticky buttons" to make the "Add to cart" and "Choose option" buttons align with the bottom of the product card.

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.

STEP 1: Go to Theme Settings > Product card.

STEP 2: Set up sale labels

In the Sale labels setting group:

• Enable Show sale label to display a badge on discounted products.
• Fill in the Sale label content (the text shown on the badge).
• Customize the Sale label background and Sale label text color for both light and dark modes.

STEP 3: Set up Estimated Delivery Date (EDT)

In the Estimated delivery date group:

• Enable Show estimated delivery date.
• Fill in the Message field with the delivery estimate text shown to customers.
• To hide the EDT for pre-order products, enable Hide when Pre-order is enabled.

STEP 4: Click "Save" when done.

The Highlight attributes setting lets you display up to 3 product feature highlights on each product card - each with an optional icon and a text label sourced from product metafields.

a) Method 1: Using icons from Maximize's icon library

Use this method if you want to display one of Maximize's built-in icons next to each product feature.

Step 1: Create a product metafield for the icon name.

• Go to Settings > Metafields and metaobjects > Products > Add definition.
• Name the metafield (e.g., "Feature icon 1").
• Set the Type as Single line text – One value.
• Save the metafield.

Step 2: Assign the icon name to each product.

• Go to Products > open a product > scroll to Metafields.
• Click the metafield you just created and enter the name of the icon from Maximize's icon library.

Step 3: Connect the metafield in Theme Settings.

• Go to Theme Settings > Product card > Highlight attributes.
• In the Icon metafield 1 field, enter the metafield's Namespace and key (e.g., custom.feature_icon_1).

Step 4: Click Save.

Repeat Steps 1–4 for up to 3 icons using Icon metafield 2 and Icon metafield 3.

b) Method 2: Using custom images as icons

Use this method if you want to upload your own image files as product card icons.

Step 1: Create a product metafield of type (Image) File.

• Go to Settings > Custom data > Products > Add definition.
• Name the metafield (e.g., "Feature image icon 1").
• Set the Type as (Image) File.
• Save the metafield.

Step 2: Upload an image to each product.

• Go to Products > open a product > scroll to Metafields.
• Click your metafield and upload the custom icon image.

Step 3: Connect the metafield in Theme Settings.

• Go to Theme Settings > Product card > Highlight attributes.
• Enter the metafield's Namespace and key into the corresponding Icon metafield field (e.g., custom.feature_image_1).

Step 4: Click Save.

c) Adding tooltips (label metafield)

💡 By default, your configured label metafield inside the Highlight attribute setting group will be shown as a tooltip - a small pop-up that appears when customers hover over the icon. This keeps the card clean while still providing information on demand.

Step 1: Create a product metafield for the label text.

• Go to Settings > Metafields and metaobjects > Products > Add definition.
• Name it (e.g., "Feature label 1").
• Set the Type as Single line text.
• Save the metafield.

Step 2: Assign the tooltip text to each product.

• Go to Products > open a product > scroll to Metafields.
• Click the label metafield and enter the tooltip text customers will see when hovering over the icon.

Step 3: Connect the metafield in Theme Settings.

• Go to Theme Settings > Product card > Highlight attributes.
• Enter the metafield's Namespace and key into the corresponding Label metafield field (e.g., custom.feature_label_1).

Step 4: Click Save.

d) Where do highlight attributes appear?

By default, highlight attributes appear on all product cards in the following sections:

• Featured collections
• Product bundle
• Promotion grid
• Promotional collections
• Recently viewed products
• Collection page > Product grid
• Search page
• Product recommendations
• Cart page (Cart upsell)

✍️ If you want to hide highlight attributes in a specific section, go to that section in the Theme Editor and turn off the "Show highlight attributes" toggle.

By default, all configured highlight attributes are displayed simultaneously- each on its own line below the product card. The auto-rotate feature changes this: instead of showing all attributes at once, it displays one attribute at a time and automatically cycles through the rest, keeping the card compact and visually engaging.

STEP 1: Go to Theme Settings > Product card > Highlight attributes.

STEP 2: Make sure you have already set up your Icon and/or Label metafields (see the previous use case above).

STEP 3: Toggle Enable auto-rotate ON.

STEP 4: Choose your Animation style:

• Fade (default)- The current attribute fades out and the next fades in.
• Slide- Attributes slide in from right to left.
• Rise- Attributes rise upward as they transition.

STEP 5: Set the Auto-rotate every interval (1–10 seconds, default: 3s)- this controls how long each attribute is shown before rotating to the next.

STEP 6: (Optional) Toggle Show background ON to add a subtle background fill behind the rotating attribute.

STEP 7: (Optional) Set custom Text color (light) and Text color (dark) for the attribute text. Leaving these as Transparent inherits the theme's default text color.

STEP 8: Click "Save" when done.

Please follow this guide: Product labels and badges