Problem Statement
One of our clients, operating in the premium fragrance segment, required a highly customised product selection experience on their Shopify store. The product included five different perfume variants grouped under a single product, and customers needed the flexibility to select only a specific number of variants (2 or 3) based on predefined business rules.
In addition, the client wanted the selected variant names to be clearly visible in the cart, ensuring complete transparency before checkout.
Business Requirement
- Offer multiple perfume variants under a single product listing
- Allow customers to choose a fixed number of variants (2 or 3 only)
- Prevent incorrect selections using real-time validation
- Display the exact variant names selected by the customer in the cart
- Enable the store admin to manage variants and rules without code changes
Challenges
- Shopify’s native variant and bundle system does not support conditional multi-variant selection within a single product.
- Default cart behaviour does not display custom-selected variant combinations.
- The solution needed to be scalable, reusable, and performance-optimised.
- Cart and checkout data had to remain clean and compatible with Shopify’s order system.
Solution Approach
1. Metafield-Based Configuration
We implemented custom Shopify metafields to store:
- Available perfume variants (names, IDs, and display order)
- Selection conditions (minimum and maximum selectable quantities)
- Custom labels and UI instructions
This allowed the store admin to update variant data or conditions directly from the Shopify admin panel without developer involvement.
2. Custom Product Page Experience
- Built a dynamic variant selection interface using Liquid and JavaScript.
- Variants were displayed as selectable options with real-time feedback.
- Enforced selection rules that allowed customers to proceed only after selecting the required number of variants (2 or 3).
- Disabled the “Add to Cart” button until the condition was satisfied.
3. Cart Integration & Variant Name Display
- The selected variant data was passed to the cart using Shopify line item properties.
- Customised the cart template to:
-
- Read the selected metafield and line item property data.
-
- Display the chosen perfume variant names clearly under the product title
- This ensured customers could easily review and confirm their selections before checkout.
4. Seamless Checkout Compatibility
- Maintained full compatibility with Shopify’s checkout process.
- Ensured selected variants were accurately recorded in the order details.
- No impact on payment, shipping, or tax calculations.
Technology Stack
- JavaScript (custom validation and UI logic)
- Shopify Line Item Properties
Results & Outcomes
- Delivered a smooth, intuitive, and flexible variant selection experience.
- Improved cart clarity by displaying exact selected variant names.
- Reduced order errors and customer support queries.
- Enabled easy scalability for future combo, bundle, or mix-and-match products.
Business Impact
- Enhanced user confidence during purchase
- Increased average order value (AOV)
- Improved conversion rate on complex product pages
- Reduced dependency on third-party bundle apps
Conclusion
By leveraging Shopify metafields and custom development, we delivered a fully tailored product selection and cart experience that aligned perfectly with the client’s business goals. This solution not only addressed the immediate requirement but also established a scalable framework for future product customisation.
Ready to build advanced Shopify experiences like custom variant selection and cart-level transparency?
Amwhiz delivers Shopify customisation, product page optimisation, and checkout solutions that boost AOV and conversions. Connect with us for a free consultation and transform your store with smart, scalable features. Visit amwhiz.com today.