Skip to main content

Product Siblings (Color Variant Product Cards)

Label One features a unique "product siblings" system that allows you to group related products (like different colors of the same item) and display them as interactive color swatches on product cards.

How It Works​

When customers browse your collections, they can see all available colors of a product directly on the product card, without having to visit the individual product page.

Key Benefits
  • Improved customer experience with instant color preview
  • Reduced bounce rate as customers see more options immediately
  • Better mobile experience with compact color selection
  • Increased conversion through easier product discovery

Setting Up Product Siblings​

Step 1: Create Your Product Variants​

  1. Create separate products for each color variation
  2. Use consistent naming (e.g., "Cotton T-Shirt - Blue", "Cotton T-Shirt - Red")
  3. Add the same featured image dimensions for consistency

Step 2: Configure Sibling Relationships​

  1. Navigate to Theme Settings > Product Cards
  2. Enable "Show product siblings"
  3. Set your sibling matching method:
    • By product type: Groups products with the same type
    • By vendor: Groups products from the same vendor
    • By tag: Groups products sharing a specific tag

Step 3: Organize Your Products​

Choose one of these organizational methods:

Method A: Using Product Types​

  • Product Type: "Cotton T-Shirt"
  • Cotton T-Shirt - Blue
  • Cotton T-Shirt - Red
  • Cotton T-Shirt - Green

Method B: Using Tags​

  • Shared Tag: "tshirt-collection-spring"
  • Blue Spring Tee
  • Red Spring Tee
  • Green Spring Tee

Method C: Using Vendors​

  • Vendor: "BasicWear"
  • All products from this vendor will be grouped

Best Practices​

Image Guidelines​

  • Consistent dimensions: Use the same aspect ratio for all sibling products
  • Similar angles: Keep product photography consistent across variants
  • Good contrast: Ensure color differences are clearly visible

Naming Conventions​

  • Use descriptive, consistent product titles
  • Include color information in the title or product type
  • Keep titles concise for better display on mobile

Collection Organization​

  • Group siblings logically within collections
  • Consider creating "All Colors" collections for popular items
  • Use collection filters to help customers find specific variants

Troubleshooting​

Siblings Not Appearing?​

  1. Check your matching method - Ensure products share the correct type/tag/vendor
  2. Verify product visibility - All siblings must be published and available
  3. Review image sizes - Large file sizes can slow loading

Colors Not Displaying Correctly?​

  1. Image quality - Ensure product images clearly show the color
  2. Consistent lighting - Use similar photo conditions for all variants
  3. Mobile testing - Check how colors appear on smaller screens

Advanced Configuration​

Custom Color Swatches​

For even more control, you can add custom color metadata:

  1. Add color tags like color-blue, color-red
  2. Use metafields to store hex color codes
  3. Create custom CSS for exact brand color matching
Pro Tip

Limit siblings to 6-8 colors per product group for the best mobile experience. Too many options can overwhelm customers and slow page loading.

Examples​

Fashion Store​

  • Product Type: "Hoodie"
  • Siblings: Different colors of the same hoodie style
  • Result: Customers see all color options on collection pages

Home Goods​

  • Tag: "ceramic-mug-classic"
  • Siblings: Same mug design in different colors
  • Result: Easy comparison of color options

Need help setting up product siblings? Contact our support team for personalized assistance.