> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://support.ushopaid.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # How to Customize Product Cards in the Mix & Match Bundle Editor Product cards are the building blocks of your Mix & Match Bundle experience. In the **Mix & Match Bundle Editor**, you can customize product cards by adding different elements to display product information, variant options, discounts, ratings, and additional actions. This allows you to create bundle experiences that match your store design and customer shopping behavior. || This guide applies to the **Mix & Match Bundle Editor** version. The available elements and settings may be different in the **Legacy** version. ## Open ProductCard settings To customize a product card, go to: **Products & Layout → ProductList → ProductCard** Click: **Add element** You can add different elements based on the information and actions you want to display. ![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_59mvie.png) *Add different elements to customize the product card layout.* # Product card elements overview ## Product image elements ## Product badge Displays badges on product images. Product badges can be used for: * Discount labels * Premium product labels * Promotional messages * Product highlights Examples: ``` -20% ``` ``` Premium +$3 ``` ``` Best Seller ``` You can use: ### `{{badge_discount}}` Displays the discount value when a discount exists. Common use case: * Buy More Save More * Quantity-based discounts Example: ``` -20% ``` `{{badge_discount}}` only displays a value when a discount is available. Product badge does not create discounts; it only displays calculated discount information. ### `{{adjustment_amount}}` Displays the additional product price adjustment amount. Common use case: * Fixed-price Single Box bundles * Fixed-price Multi Box bundles * Premium product upgrades Example: Badge text: ``` Premium + {{adjustment_amount}} ``` Result: ``` Premium +$3 ``` || `{{adjustment_amount}}` requires product price adjustments to be configured. It does not create additional charges by itself. Static badge text can also be used. Example: ``` Best Seller ``` A static badge applies to all products in the ProductList. Use static badges for: * Collection-wide messages * General promotions * Shared highlights # Product selection elements ## Variant picker Allows customers to select product variants directly on the product card. Use Variant picker when customers need to choose options such as: * Color * Size * Material * Other Shopify product options Example: ``` Color: Red Blue Black ``` Variant picker provides an interactive selection experience. ![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_1k4dyet.png) *Customers can select product variants directly from the bundle product card.* ## Product information elements ## Variant value Displays the current variant information on the product card. Recommended use case: * Products with one variant * Products where customers only need to see the variant information Example: ``` Color: Gold ``` Variant value displays information but does not provide a selection control. || Variant picker allows customers to choose variants. Variant value only displays variant information. ## Product metafield Displays custom information stored in Shopify product metafields. Use Product metafield when the information applies to the entire product. Examples: * Material * Ingredients * Specifications * Product features * Care instructions Example: ``` Material: Stainless Steel ``` Product metafield values are shared across all variants of the product. ## Category metafield Displays standardized product information associated with the product category assigned in Shopify. Recommended use case: * Products that have a Shopify product category assigned * Category-specific information such as material, color, size, age group, or dietary preferences Examples: * Color * Material * Size * Age group * Dietary preferences Example: ``` Material: Stainless Steel ``` Category metafields available for selection depend on the Shopify product category assigned to the product. || If a product does not have the selected category metafield or its value has not been filled in, no information will be displayed for that product. ## Variant metafield Displays custom information stored in Shopify variant metafields. Use Variant metafield when information changes depending on the selected variant. Examples: * Variant weight * Variant dimensions * Variant-specific specifications Example: ``` Weight: 500g ``` || Product metafield is for product-level information. Variant metafield is for information that belongs to a specific variant. ## Vendor Displays the Shopify product vendor on the product card. Example: ``` Nike ``` Use Vendor when you want customers to see the brand or supplier information. # Customer trust elements ## Product rating Displays product review information on the product card. Supported display styles: * Stars and text * Stars only Examples: ``` ★★★★★ 5 reviews ``` or: ``` ★★★★★ ``` Available settings include: * Star count * Display style * Behavior when no reviews exist * Review count text When no reviews exist, you can choose: * Hide rating when there are no reviews * Show rating when there are no reviews # Additional action elements ## View details Adds a product details action to the product card. Customers can use it to view additional product information. Supported actions: ### Open quick view Opens a quick view window without leaving the bundle page. Recommended for: * Faster product browsing * Keeping customers inside the bundle experience ### Go to product page Redirects customers to the Shopify product page. Recommended for: * Products with detailed descriptions * Products requiring more information before purchase # Recommended product card setups ## Fashion products Recommended elements: ``` Product image Product title Product badge Variant picker Price Add button ``` Use Variant picker for: * Color * Size ## Jewelry products Recommended elements: ``` Product image Product title Variant value Product metafield Price Add button ``` Use Product metafield for: * Material * Stone type * Product details ## High-value products Recommended elements: ``` Product image Product rating View details Price Add button ``` Help customers review more information before adding products. # Common questions ## Can I let customers select color and size on the product card? Yes. Add a **Variant picker** element to the ProductCard. ## Can I show the selected variant information? Yes. Use **Variant value** to display variant information on the product card. ## Can I display custom product information? Yes. Use: * **Product metafield** for product-level information * **Variant metafield** for variant-level information * **Category metafield** for standardized information defined by the product’s Shopify category ## How can I show discount percentages on product cards? Add a **Product badge** and use: ``` {{badge_discount}} ``` The discount value will only appear when a valid discount exists. ## How can I show premium product extra charges? Add a **Product badge** and use: ``` Premium + {{adjustment_amount}} ``` Make sure the product has a configured price adjustment. ## Why does my badge appear on every product? If you use static text such as: ``` Best Seller ``` the same badge will appear on all products in the ProductList. Use dynamic variables when you need product-specific values. ## Can I customize the appearance of these elements? Yes. Most ProductCard elements include styling options such as: * Typography * Spacing * Borders * Visibility * Advanced settings