Customisation Guide

In this guide we will update our store to expand bundle products in cart drawer and cart page.

In this guide:

• We will duplicate our stores theme.

• We will edit our themes cart drawer and cart page code to display the expanded products of our Biscuits Bundle (Shopify native bundle)

This is an advanced guide intended for developers

Before we begin

This guide involves editing theme code. If that is not your cup of tea feel free to reach out to the Biscuits Bundle team to help you out!

This feature was released with Shopify products bundles in 2023, however many Shopify themes have not updated to display bundles in cart correctly yet.

If your theme is missing this feature please consider contacting your themes developers and request the feature.

This guide only works for themes that use a liquid cart. Currently, (as of 2025), carts using Shopify's AJAX API do not have access to component data.

1. Create a development theme

First we will create a development theme so any changes we make DON'T appear on your live store until we have tested and are happy with them.

Open Online Store > Themes in Shopify admin and click the three dot menu next to customise on your published theme, then choose "duplicate".

Click the three dot menu on this copied theme and rename it i.e "Dawn | Biscuits Customisation"

2. Find the cart page file

Now we need to find the correct cart file to edit in your theme.

Because every theme can be different, the file you edit for this step may vary a lot.

We are using Dawn theme for the example today.

1. Click the three dots ... on your new development theme and click Edit code

2. Use the search bar in the top left to search "cart" and look inside the templates folder.

You should see a cart.json if you open this, we want to find the name of the section displayed on our cart page that outputs cart items. In Dawn theme is is main-cart-items.

Reset search and this time use the name of the section, i.e main-cart-items

The file you find should be in the sections folder.

3. Update your main cart line items

Now we have the correct file we need to update bundle line items in cart.

1. Search for cart.items

Here we have found a for loop that uses cart.items

Now we will inject some code to check if the items being looped over is a bundle product and if it is we will also output its component items.

2. Copy the following code and paste it directly under the line {%- for item in cart.items -%} in your themes cart file.

{% liquid
  assign is_bundle = false  
  if item.item_components.size > 0
    assign is_bundle = true
  endif
%}

Your code should look something like the above.

3. Hit save.

4. Copy the following code and paste it above this line of code in main-cart-items.liquid

if item.product.has_only_default_variant == false

{% render 'main-cart-line-item--bundle', item: item, is_bundle: is_bundle %}

Your code should look something like the above.

5. Hit save.

6. Copy the following code and paste it at the top of the main-cart-items.liquid file.

{% render 'cart-line-item--bundle-styles' %}

7. Hit save.

4. Find your cart drawer file

1. Use the search bar in the top left to search "cart" and look inside the snippets folder. You should see a file called cart-drawer.liquid

5. Update your cart drawer line items

1. Search for cart.items

2. Copy the following code and paste it directly under this line in your themes cart drawer file.

{%- for item in cart.items -%}

{% liquid
  assign is_bundle = false  
  if item.item_components.size > 0
    assign is_bundle = true
  endif
%}

Your code should look something like the above.

3. Hit save.

4. Copy the following code and paste it above this line in cart-drawer.liquid

assign has_qty_rules = false

{% render 'cart-drawer-line-item--bundle', item: item, is_bundle: is_bundle %}

Your code should look something like the above.

5. Hit save.

6. Copy the following code and paste it at the top of the cart-drawer.liquid file.

{% render 'cart-line-item--bundle-styles' %}

7. Hit save.

8. Copy the following code and paste it in the class property for cart-item

{% if is_bundle %}biscuits-bundle--is-bundle{% endif %}

9. Hit save.

6. Create 4 new snippets

Now clear your search in the top left hand corner and open the snippets folder. You should see a button for add a snippet

Snippet #1

1. Click + add a snippet, and create a new snippet called

main-cart-line-item--bundle

2. Copy and paste the following code into this new snippet and hit save.

{% if is_bundle %}
    {% capture bundle_children %}
      {% if item.item_components.size > 0 %}
        {% for item in item.item_components %}
          {% render 'cart-line-item--bundle-child', item: item %}
        {% endfor %}
      {% endif %}
    {% endcapture %}

    <div
      class="cart-item__bundle-items"
    >
      <div class="accordion-container">
        <div class="accordion-title" onclick="this.parentElement.classList.toggle('active');">
          <span class="accordion-text--show">
            Show #{{ item.item_components.size }} #{{ item.item_components.size | pluralize: 'item', 'items' }}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" focusable="false" aria-hidden="true" ><path stroke-linecap="round" stroke-linejoin="round" d="m11.9 5.6-4.653 4.653a.35.35 0 0 1-.495 0L2.1 5.6"></path></svg>
          </span>
          <span class="accordion-text--hide">
            Hide #{{ item.item_components.size }} #{{ item.item_components.size | pluralize: 'item', 'items' }}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" focusable="false" aria-hidden="true" style="transform: rotate(180deg);"><path stroke-linecap="round" stroke-linejoin="round" d="m11.9 5.6-4.653 4.653a.35.35 0 0 1-.495 0L2.1 5.6"></path></svg>
          </span> 

        </div>
        <ul class="accordion-content">
          #{{ bundle_children }}
        </ul>
      </div>
      
    </div>
                    
  {% endif %}

Snippet #2

1. Click + add a snippet, and create a new snippet called

cart-drawer-line-item--bundle

2. Copy and paste the following code into this new snippet and hit save.

{% if is_bundle %}
    {% capture bundle_children %}
      {% if item.item_components.size > 0 %}
        {% for item in item.item_components %}
          {% render 'cart-line-item--bundle-child', item: item %}
        {% endfor %}
      {% endif %}
    {% endcapture %}
    <td
      class="cart-item__bundle-items"
      role="cell"
      headers="CartDrawer-ColumnQuantity"
    >
      <div class="accordion-container">
        <div class="accordion-title" onclick="this.parentElement.classList.toggle('active');">
          <span class="accordion-text--show">
            Show #{{ item.item_components.size }} #{{ item.item_components.size | pluralize: 'item', 'items' }}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" focusable="false" aria-hidden="true" ><path stroke-linecap="round" stroke-linejoin="round" d="m11.9 5.6-4.653 4.653a.35.35 0 0 1-.495 0L2.1 5.6"></path></svg>
          </span>
          <span class="accordion-text--hide">
            Hide #{{ item.item_components.size }} #{{ item.item_components.size | pluralize: 'item', 'items' }}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" focusable="false" aria-hidden="true" style="transform: rotate(180deg);"><path stroke-linecap="round" stroke-linejoin="round" d="m11.9 5.6-4.653 4.653a.35.35 0 0 1-.495 0L2.1 5.6"></path></svg>
          </span> 

        </div>
        <ul class="accordion-content">
          #{{ bundle_children }}
        </ul>
      </div>
      
    </td>
  {% endif %}

Snippet #3

1. Click + add a snippet, and create a new snippet called

cart-line-item--bundle-child

2. Copy and paste the following code into this new snippet and hit save.

<li class="biscuit-bundle-cart-item">
  <div class="biscuit-bundle-cart-item__media">
    {% if item.image %}
    <img
      class="biscuit-bundle-cart-item__image"
      src="#{{ item.image | image_url: width: 300 }}"
      alt="#{{ item.image.alt | escape }}"
      loading="lazy"
      width="150"
      height="#{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
    />
    {% endif %}
  </div>
  <div class="biscuit-bundle-cart-item__details">
    <span class="item__title biscuit-bundle-cart-item__name">
      #{{ item.quantity }} x #{{ item.product.title | escape -}}
    </span>
    {% unless item.product.has_only_default_variant %}
    <span class="biscuit-bundle-cart-item__subtitle">
      #{{ item.variant.title | escape -}}
    </span>
    {% endunless %}
  </div>
</li>

Snippet #4

1. Click + add a snippet, and create a new snippet called

cart-line-item--bundle-styles

2. Copy and paste the following code into this new snippet and hit save.

<style>
.biscuits-bundle--is-bundle .product-option {
  display: none;
}

.cart-item--mini .cart-item__media {
  width: 5rem;
  height: 5rem;
  flex: none;
}

.cart-item--mini .cart-item__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-item.cart-item--mini .cart-item__details {
  font-size: 13px;
}

.cart-item.cart-item--mini {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}

.cart-item.cart-item--mini .cart-item__name:hover {
  text-decoration: none;
}

.accordion-title {
  padding: 1rem 0;
  cursor: pointer;
  width: 100%;
  height: 48px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}

.drawer__inner .accordion-title {
  padding: 1rem;
}

.accordion-container.active .accordion-content {
  display: block;
  max-height: 1000px;
  transition: max-height .5s ease;
}

.accordion-text--hide {
  display: none;
  font-size: 13px;
}

.accordion-text--show {
  font-size: 13px;
}

.accordion-container.active .accordion-title .accordion-text--show {
  display: none;
}

.accordion-container.active .accordion-title .accordion-text--hide {
  display: block;
}

.accordion-container svg {
  width: 10px;
  height: 10px;
  stroke: black;
  fill: none;
}

.accordion-content {
  height: auto;
  max-height: 0;
  transition: max-height .5s ease;
  overflow: hidden;
  width: 100%;
  padding-left: 1rem;
  margin: 0 !important;
}

.cart-item__bundle-items {
  padding-left: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 0 !important;
  grid-column: 2 / 5;
}

.cart-item__subtitle {
  color: gray;
}

.biscuit-bundle-cart-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}

.biscuit-bundle-cart-item__media {
  width: 5rem;
  height: 5rem;
  flex: none;
}

.biscuit-bundle-cart-item__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.biscuit-bundle-cart-item__details {
  font-size: 13px;
}

.biscuit-bundle-cart-item__name:hover {
  text-decoration: none;
}

.biscuit-bundle-cart-item__subtitle {
  color: gray;
}

.biscuit-bundle-cart-item__name {
  display: block;
}

.biscuits-cart-item-accordion-title {
  padding: 1rem 0;
  cursor: pointer;
  width: 100%;
  height: 48px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}

.biscuits-bundles-accordion-container.active .biscuits-bundles-accordion-content {
  display: block;
  max-height: 1000px;
  transition: max-height .5s ease;
}

.biscuits-bundles-accordion-text--hide {
  display: none;
  font-size: 13px;
}

.biscuits-bundles-accordion-text--show {
  font-size: 13px;
}

.biscuits-bundles-accordion-container.active .biscuits-bundles-accordion-title .biscuits-bundles-accordion-text--show {
  display: none;
}

.biscuits-bundles-accordion-container.active .biscuits-bundles-accordion-title .biscuits-bundles-accordion-text--hide {
  display: block;
}

.biscuits-bundles-accordion-container svg {
  width: 10px;
  height: 10px;
  stroke: black;
  fill: none;
}

.biscuits-bundles-accordion-content {
  height: auto;
  max-height: 0;
  transition: max-height .5s ease;
  overflow: hidden;
  width: 100%;
  padding-left: 1rem;
  margin: 0 !important;
}

.cart-item__bundle-items+dl .product-option:not(:last-of-type) {
  display: none;
}

</style>

Make sure you save the file once you have finished, then hit "preview store" in the top right corner.

6. Publish development theme

Once you have tested your code changes on your development theme thoroughly, you can publish this theme to be live!

This will make your changes published and visible to your customers.

Conclusion

Thats it! If you made it to the end successfully well done! If not, don't be afraid to reach out to the Biscuits Bundle team for help.

Stuck or got questions?

Use the chat widget below, or reach out to us at [email protected]

Happy coding, and thanks for teaming up with Biscuits Bundles!