---
title: "GUIDE: How to hide bundle product quick add to cart"
url: https://help.biscuitsbundles.com/en/articles/9620096-guide-how-to-hide-bundle-product-quick-add-to-cart
collection: "Customisation Guides"
updated: 2026-03-31
language: en
---

# GUIDE: How to hide bundle product quick add to cart

![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_7833.jpg)

# Customisation Guide

In this guide we will update our store to output a link to the bundle page instead of an add to cart button for bundle product grid items.

**In this guide:**

-   We will duplicate and edit our stores theme code to replace bundle product add to cart buttons with a link to the product page.
    

Biscuits Bundles now has an App Embed to automatically detect and adjust Quick Add To Cart and Quick View Buttons.

[Learn more about the App Embed](https://help.biscuitsbundles.com/en/articles/9862993-app-embed-quick-add-quick-view-settings.md)

* * *

## Before we begin

Biscuits Bundle products require a form on a product page with component item selection to successfully add to cart. Quick add and quick view buttons on grid items don't allow for the display of this form and these selections. As a result your customer will try to click quick add to cart on a bundle grid item and be warned the product couldn't be added to cart.

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!

* * *

## 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**".

![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_4726.jpg)

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

Then using the three dot menu again, click "edit code" on our new development theme.

![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_4018.jpg)

* * *

## 2\. Replace quick add buttons in themes code

Now we need to find the correct snippet 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 but we will provide example files for other common themes below.

### 1\. Find the right snippet file

Use the filter bar in the top left to search "product" and look inside the snippets folder

![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_8327.png)

In Dawn the snippet we are looking for is card-product.liquid

You will know if you have the correct file by checking the top of the snippet for variables and a description explaining this file outputs the product card.

### 2\. Find the quick add logic in the code

Once you have the correct file we need to search for where the quick add button is output. In Dawn it's output based on the variable `quick_add` so we searched the file for that text and have found `{% if quick_add == 'standard' %}`

![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_2177.png)

### 3\. Wrap the quick add in our bundle product check

We are going to wrap this check in our own to ensure it outputs our code if the product is tagged "biscuits-bundle" and the regular add to cart if its a regular product.

Below is the code we will wrap the if statement in. There are a few things to note with this code

1.  Notice how we are using `card_product` this may be `product` in your themes snippet, you can normally confirm this by looking at the top variables of the file.
    
2.  We are wrapping our new button in a `div` called `quick-add`, this is the ensure the button sits in the same place as other grid items
    
3.  We have added `button button--full-width button--secondary` classes to our button to ensure it matches the styling of our theme
    

Your themes code for quick add may vary, and button classes may be different. Please compare the button classes inside the quick add logic to ensure they match your new button link visually.

```javascript
{% if card_product.tags contains 'biscuits-bundle' %}
 <div class="quick-add">
  <a href="#{{ card_product.url }}" class="biscuits-bundle-view-button button button--full-width button--secondary">View bundle</a>
 </div>
{% else %}
<!-- Themes quick add to cart logic outputs here -->
{% endif %}
```

It is a very big block of code to wrap in Dawn so our `{% if card_product.tags contains 'biscuits-bundle' %}` is output on line 292 and our `{% endif %}` is output around the line 548

![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005954_7491.png)

![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005953_1036.png)

Make sure you save the file once you have wrapped the quick add in our new tag check, then hit "preview store" in the top right corner.

#### Common themes product grid item snippet names

_As of June 2024_

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1" style="width: 124px;"><p><strong>Theme name</strong></p></td><td colspan="1" rowspan="1" style="width: 194px;"><p><strong>Snippet file name</strong></p></td><td colspan="1" rowspan="1" style="width: 288px;"><p><strong>What to search for in the file<br>and the product variable</strong></p></td></tr><tr><td colspan="1" rowspan="1" style="width: 124px;"><p>Dawn</p></td><td colspan="1" rowspan="1" style="width: 194px;"><p>card-product.liquid</p></td><td colspan="1" rowspan="1" style="width: 288px;"><pre><code class="language-javascript">{% if quick_add == 'standard' %} </code></pre><pre><code class="language-javascript">card_product.tags</code></pre></td></tr><tr><td colspan="1" rowspan="1" style="width: 124px;"><p>Prestige</p></td><td colspan="1" rowspan="1" style="width: 194px;"><p>product-card.liquid</p></td><td colspan="1" rowspan="1" style="width: 288px;"><pre><code class="language-javascript">{%- if show_quick_buy and product.available -%}</code></pre><pre><code class="language-javascript">product.tags</code></pre></td></tr><tr><td colspan="1" rowspan="1" style="width: 124px;"><p>Be Yours</p></td><td colspan="1" rowspan="1" style="width: 194px;"><p>card-product.liquid</p></td><td colspan="1" rowspan="1" style="width: 288px;"><pre><code class="language-javascript">{%- if show_quick_buy -%}</code></pre><pre><code class="language-javascript">card_product.tags</code></pre></td></tr><tr><td colspan="1" rowspan="1" style="width: 124px;"><p>Expanse</p></td><td colspan="1" rowspan="1" style="width: 194px;"><p>product-grid-item.liquid</p></td><td colspan="1" rowspan="1" style="width: 288px;"><pre><code class="language-javascript">{%- if settings.quick_add_enable or settings.quick_shop_enable -%}</code></pre><pre><code class="language-javascript">product.tags</code></pre></td></tr><tr><td colspan="1" rowspan="1" style="width: 124px;"><p>Pipeline</p></td><td colspan="1" rowspan="1" style="width: 194px;"><p>product-grid-item-variant.liquid</p></td><td colspan="1" rowspan="1" style="width: 288px;"><pre><code class="language-javascript">{%- if instant_add_button %}</code></pre><pre><code class="language-javascript">product.tags</code></pre></td></tr><tr><td colspan="1" rowspan="1" style="width: 124px;"><p>Impulse</p></td><td colspan="1" rowspan="1" style="width: 194px;"><p>product-grid-item.liquid</p></td><td colspan="1" rowspan="1" style="width: 288px;"><pre><code class="language-javascript">{%- if quick_shop_enable -%}</code></pre><pre><code class="language-javascript">product.tags</code></pre></td></tr></tbody></table>

Now we can check our storefront collection to see if our change worked.

![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005954_4968.png)

Congrats if the add to cart button on your bundle grid item changes to a view bundle button and links through to your bundle product. Don't worry if it didn't, you may have tried the wrong file or wrong code to wrap. Undo your changes and try from step 2 again.

* * *

## 3\. Publish development theme

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

![](https://staticfiles.gleap.io/helpcenter/65b350631ff56ccfb3879048/20260331005954_4160.png)

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 [hello@sundaelane.com](mailto:hello@sundaelane.com)

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