Customisation Guide
In this guide we will update our store to hide add to cart buttons on bundle component product grid items.
Our example for this guide is hiding the ability to add component products associated with a Bento Box to cart. These products are $0 and we don't want to sell them to customers without being included in our bento box bundle.
In this guide:
We will tag our component products to flag them as not-purchasable
We will duplicate and edit our stores theme code to hide not-purchasable products add to cart buttons on grid items.
Before we begin
The products included in a bundle need to be published and available to the Online Store sales channel, so they can appear on the bundle page and be added to cart. This guide will work with that requirement to ensure your customers can't add the product to cart unless it's in a bundle.
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. Tag your product
Navigate to the product you want the quick add hidden for in Shopify admin. Scroll down to the "Tags" setting in the sidebar of the edit product page.
Add a tag for "not-purchasable" to the product and hit save.
2. Hide quick add buttons based on tag
Now 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.
1. Create a development theme
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"
Then using the three dot menu again, click "edit code" on our new development theme.
2. Hide 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.
Use the filter bar in the top left to search "product" and look inside the snippets folder
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.
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' %}
We are going to wrap this check in our own check to ensure it only continues if the product isn't tagged "not-purchasable"
Below is the code we will wrap the if statement in
(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.
{% unless card_product.tags contains 'not-purchasable' %}
{% endunless %}It is a very big block of code to wrap in Dawn so our {% unless card_product.tags contains 'not-purchasable' %} is output on line 292 and our {% endunless %} is output around the line 548
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
Theme name | Snippet file name | What to search for in the file |
Dawn | card-product.liquid | {% if quick_add == 'standard' %} card_product.tags |
Prestige | product-card.liquid | {%- if show_quick_buy and product.available -%}product.tags |
Be Yours | card-product.liquid | {%- if show_quick_buy -%}card_product.tags |
Expanse | product-grid-item.liquid | {%- if settings.quick_add_enable or settings.quick_shop_enable -%}product.tags |
Pipeline | product-grid-item-variant.liquid | {%- if instant_add_button %}product.tags |
Impulse | product-grid-item.liquid | {%- if quick_shop_enable -%}product.tags |
Now we can check our storefront collection to see if our change worked.
Congrats if the add to cart button on your "not-purchasable" disappears. Don't worry if it didn't, you may have tried the wrong file or wrong code to wrap.
3. 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!