Provide a clear and intuitive presentation of bundle products in the cart drawer by:

  • Grouping bundled items under a unified visual label or container.
  • Displaying each individual item included in the bundle with clear naming.
  • Ensuring that users can distinguish between standalone products and those that are part of a bundle.

Why Is This Important?

Enhance Transparency:

Clearly show what’s included in each bundle so users know exactly what they’re getting.

Reduce Return Rates:

When bundle details are easy to understand, users are more likely to confirm their purchases and reduce the chances of returning items.

Build Trust:

Providing complete bundle information reassures users and strengthens your credibility.

Improve UX Consistency:

Using a uniform format for all bundle listings prevents confusion and aligns with your platform’s standards.

Implementation Plan

1. Add Metadata to Bundle Line Items

Use line_item.properties or metafields to tag bundled items and store their display names.

  • For example, add _bundle: true and _bundle_name: Starter Kit to identify and name the bundle.
  • Each included item can be listed with a key like _included_product_1, _included_product_2, etc.

Example properties object:

yaml
{ _bundle: true, _bundle_name: "Starter Kit", _included_product_1: "Face Wash", _included_product_2: "Moisturizer", _included_product_3: "Sunscreen"
}

2. Detect and Render Bundles in Cart Drawer

  • Check if a line item is marked as a bundle using Liquid conditionals (or equivalent in your stack).
  • Display a bundle label followed by the list of included products:
liquid
{% if item.properties._bundle %} <div class="bundle-label">Bundle: {{ item.properties._bundle_name }}</div> <ul class="bundle-items"> {% for key, value in item.properties %} {% if key contains '_included_product' %} <li>{{ value }}</li> {% endif %} {% endfor %} </ul>{% endif %}

3. Style and Group Bundles Visually

  • Use visual containers (e.g., card or box UI) to wrap each bundle for emphasis.
  • Apply bundle-specific styles to differentiate from individual products (e.g., background color, border, icon).

Example:

html
<div class="cart-item bundle"> <div class="bundle-header">Bundle: Starter Kit</div> <ul class="bundle-list"> <li>Face Wash</li> <li>Moisturizer</li> <li>Sunscreen</li> </ul></div>

4. Prevent Duplicate Display

Ensure that bundled items are not added as individual line items separately in the cart. Only the parent bundle line item should be visible to avoid redundancy.

5. Optional: Add Expand/Collapse Interaction

For large bundles, use toggle functionality to expand or collapse included product lists, keeping the drawer clean.

Example interaction:

  • [+] Show bundle items
  • [-] Hide bundle items

Use JavaScript to manage the toggle state.

Backend/API Considerations

  • Ensure bundle information is preserved and passed from the product page to the cart via line_item.properties.
  • Avoid splitting bundles into multiple cart lines and bundle integrity should be maintained.
  • If using metafields, ensure they are accessible to the frontend rendering logic at the time of cart display.