How to set up Product Variant Carousel?
What is the Product Variant Carousel?
The Product Variant Carousel displays related product variants in an elegant, interactive horizontal carousel. Perfect for showcasing color variations, sizes, or related products with smooth scrolling, touch support, and automatic highlighting of the current product. Features momentum physics and responsive design for optimal user experience across all devices.
Step 1: Create Metafield Definition
Creation Instructions
- Go to Shopify Admin → Settings → Metafields → Products
- Click "Add definition"
- Create each metafield with the specifications below
- Set Type to "Single line text"
- No validation required
Required Metafield (1 total)
Step 2: Set Metafield Values
How to Set Values
- Navigate to Products → Select Product → Metafields section
- Find "Jhango Variant Collection" field
- Enter the collection handle: "collection-handle-name"
- Important: Use only the handle, not the full collection name
- Save product
Finding Collection Handles
- Go to Products → Collections
- Click on your collection
- Look at the URL or "Collection handle" field
- Use this exact handle in your metafield
- Example: If URL is
/collections/mens-shirts, use "mens-shirts"
Key Features
Usage Notes
- Collection handle must exist and contain products
- Current product is automatically highlighted as selected
- Displays first word of product title as display name
- Smooth scrolling with momentum physics
- Touch/mouse drag support for mobile and desktop
- Responsive grid layout (desktop/tablet/mobile)
- Automatically handles product ordering (selected product in 2nd position)
- Elegant hover effects and transitions
- Mobile-optimized touch interactions
Visual Guide: Setting Up Metafields
Step-by-Step Screenshots
Here's exactly how the metafields look when you're setting them up in Shopify:
Product Metafields View: This shows how the metafield appears in your product's metafields section. You can see "mens-athletic-wear" entered as the collection handle.
Creating Text Metafield: This screenshot shows the metafield definition setup with the "Single line text" type and the namespace "custom.jhango_variant_collection".
Frequently Asked Questions
A product variant carousel is an interactive display that showcases related products or variants in a horizontal scrolling format. It helps customers discover similar products, color variations, or complementary items while providing smooth navigation and touch support for an enhanced shopping experience.
Basic implementation requires no coding experience. You'll create metafields through Shopify's admin interface and set collection handles for each product. However, adding the snippet to your theme templates may require basic HTML knowledge or developer assistance for integration.
Yes, absolutely! Each product can reference a different collection through its metafield. This allows you to create product-specific carousels - for example, a red shirt might show other colored shirts, while athletic shoes might show other athletic footwear.
For optimal performance and user experience, include 5-15 products in your variant collection. This provides enough variety without overwhelming customers or causing performance issues. The carousel handles any number of products, but 5-15 offers the best balance.
If no metafield value is set, the carousel will fall back to the default collection specified in the block settings. This ensures the carousel always displays content, even if product-specific collections aren't configured. You can set theme-wide defaults for consistency.
