Customisation Guide
In this guide we will update our store to hide and disable the purchase of our bundles component product items.
Our example for this guide is hiding the component products associated with a Bento Box. 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 create and set a SEO Hidden metafield on products we want hidden
We will create a new template for "not-purchasable" products and hide the add to cart button
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 its in a bundle.
1. Hide the product
From showing in search results to hidden
1. Create a definition for SEO hidden metafield
Open your Shopify Admin Settings page and go to "Custom Data" then click "Products".
Click "add definition"
Then copy the following settings into the form. (Make sure to update the default "custom.seo_hidden" to be "seo.hidden" instead.)
This will create a metafield with the namespace "seo" and the key "hidden" which is a standard shopify metafield for hiding products from search on your storefront and from google.
We recommend providing yourself with a description explaining the integer field, Shopify treats this metafield as boolean (true/false). With 1 equaling true and 0 equaling false.
Hit save, then navigation to the product you wish to hide.
2. Update your product to be hidden
Open your product to be hidden in Shopify admin. Scroll down the page to product metafields. You should now see a field for SEO Hidden.
Update this field to equal 1 (true) meaning we would like this product to be hidden from our sites search and search engines.
Confirm it worked by opening your stores theme. (Wait 3 mins or so for Shopify to update with this change) Then refresh and try to search for your product.
You should see no results for the product you have just hidden.
2. Remove add to cart on product template
From being able to add to cart to showing the product "isn't available for individual sale"
1. Create a new product template
Now we will create a template with the add to cart button removed and assign this template to our component product.
Open your theme editor by clicking "customise" on themes page of your shopify admin.
Then open the dropdown in the middle of the header and select products, then click "Create template"
Name the new template something like "not-purchasable" so it is clear when we assign it to hidden products and hit create.
Now we can remove the block in our theme called "buy buttons". If you can't see one by this name it may be called "add to cart button" or something similar.
(You may also notice your copied template includes Biscuits Bundle theme block, we can remove that too as these "not-purchasable" products wont ever be bundles.)
For extra measure we can add a text block to mention "This product is not for individual sale".
Make sure you save your new "not-purchasable" template.
2. Assign product to new product template
Navigate to the product you want to hide in shopify admin. Scroll down to the "Theme template" setting in the sidebar of the edit product page.
Change Default product to not-purchasable and hit save.
Confirm it worked by opening your stores theme, and navigating to the product. If you just completed the SEO Hidden step then you will need to copy the products url from search engine listing as your product is hidden from your themes search now.
Carrot product page with no add to cart button
Further work
We have just covered 90% of the possible ways for customers to find and add a component product to cart.
However there is one more way... product grid items.
If you know your component product will appear in automated collections and your theme has quick add to cart buttons on its grid items, then you will need to complete one more customisation to prevent that component from being added to cart on its own.
We cover this in a second guide that involves tagging your not-purchasable products and editing your themes code. Check it out below:
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!