Shopify Bundles: Finally Showing What's Inside on Your Product Pages!

Hey fellow store owners! I recently dove into a really common pain point on the Shopify Community forums that I know many of you are feeling: the struggle to clearly display what’s actually inside your Shopify Bundles right there on the product page (PDP). Our friend aubergine kicked off a thread, asking if it was 'just me?' feeling that Shopify Bundles should natively handle listing bundle contents. And spoiler alert: it’s definitely not just them!

It’s a head-scratcher, right? You create these awesome bundles to boost average order value, but then customers have to dig or guess what they’re truly getting. This lack of transparency can lead to confusion, abandoned carts, or worse, returns. As aubergine mentioned, many are resorting to adding bundle contents manually to the product description, which works but isn't scalable or dynamic.

Initial Workarounds & App Solutions

Early on in the discussion, WizioApp (who develops a bundle app) weighed in, agreeing this feels like a native feature miss. They shared a practical approach their users employ: leveraging the bundle product’s title and description to clearly communicate inclusions. Their app, Wizio Bundle, helps control how this info is presented, offering a cleaner workaround without deep theme edits. Take a look at how they visualize it:

Then Ellie-BOGOS from the BOGOS Free Gift Bundle Upsell app jumped in with an interesting alternative: a bundle widget. Instead of just a separate bundle product, this widget appears directly on the product pages of related items. It automatically shows product images and titles, even letting buyers pick variants, and applies discounts automatically. If you’re looking for a robust app solution beyond basic Shopify Bundles, this approach and apps like BOGOS (which has a free plan) could be a great fit. PaulNewton also echoed this sentiment, reminding us that native Shopify Bundles is an 'introductory feature' and sometimes a specialist app is needed for more advanced functionality.

The Game-Changing Native Code Solution

But here’s where the discussion got really interesting – and gave us a powerful, native workaround! A community member named askably_rod dropped a real gem, confirming that 'Not just you, this is a common complaint.' The good news? The data for your bundle components is actually there, tucked away in metafields on the bundle product itself. This means you can render it in your theme right now, without needing another app!

How to Display Bundle Contents with Liquid Code:

1. Identify Your Product Template: You’ll need to edit your product template file, often found at sections/main-product.liquid or something similar, depending on your theme.
2. Locate Where You Want the List: Decide where on your product page you want the 'What's Included' list to appear.
3. Insert the Liquid Code: Copy and paste the following Liquid code snippet into your chosen location. This code checks if the product is a bundle and then iterates through its component products and quantities.

   {% if product.metafields.shopify--bundle.component_reference.value != blank %}
     
   
       
   What's included
       {% assign comp %}
       {% assign quantities = product.metafields.shopify--bundle.component_quantities.value %}
       {% for component in components %}
         
   
           {% if component.featured_image %}
             
           {% endif %}
           
   {{ component.title }}{% if quantities[forloop.index0] %} x {{ quantities[forloop.index0] }}{% endif %}
       {% endfor %}
     
   {% endif %}
   

4. Understand the Metafields: The magic happens with two specific metafields created by the Shopify Bundles app:
   • shopify--bundle.component_reference: This is a list of references to the individual products included in your bundle.
   • shopify--bundle.component_quantities: This is a JSON array holding the quantities for each component product, corresponding to the component_reference list.
   Notice the double dash (--) in the namespace shopify--bundle; that’s intentional and how the app stores them.
5. Style with CSS: Once the code is in place, you’ll want to add some CSS to style the .bundle-contents and .bundle-item classes to seamlessly match your theme’s look and feel.

Why This Code Solution is Powerful

This method is fantastic because it leverages existing data created by Shopify Bundles, meaning no extra apps are needed just to display this crucial information. It gives you direct control over the presentation and ensures your customers get a clear, visual breakdown of their bundle purchase.

So, while aubergine’s original feature request for native rendering is absolutely valid and something we’d all love to see Shopify implement (and remember PaulNewton's advice: contact Shopify support directly for feature requests!), you’re not stuck waiting. Whether you opt for a dedicated bundling app like those mentioned by WizioApp or Ellie-BOGOS, or you take ownership with the direct Liquid code solution shared by askably_rod, you have solid options. Providing clear, upfront information about your bundles isn't just a nice-to-have; it’s essential for building trust, reducing friction, and ultimately, boosting those sales. Choose the solution that best fits your technical comfort level and business needs, and get those bundle contents shining on your PDPs!