Biscuits Bundles frontend UI displaying related products as pack sizes
Customisation Guide
In this guide we will add a custom liquid block to a product template to act as a "pack size" step of the bundle.
To achieve pack sizes with Biscuits Bundles, we need to create a bundle for each "pack size" so Biscuits can validate each size validation correctly. Then we link between each size via a new section above the bundle form to give the effect of switching pack sizes.
This means when the user clicks between these products, they will be taken to the matching bundles url.
What this custom code will change:
Create a metafield on a product called Grouped Products
Select products in our new metafield to set grouped products
Add a custom liquid block to above the biscuits theme block on a product template.
Configure custom liquid to paste into a custom liquid block
1. Configure in Biscuits Bundle App
First we need to create a seperate Biscuits Bundle product for each pack size. Each bundle will have different selection minimums to match the pack size.
Here we have 3 bundles, one for each pack size
Each pack size can have its own price rule
And min and max rules
If you need more help setting up your first bundles in biscuits, check out our guide:
🌟 Getting Started Guide Step 2.1
2. Create a product metafield
Now we need to create a metafield that will relate our different sizes bundles to each other.
Open Settings in you Shopify store admin
Visit click Custom data in the left sidebar
Click Products
4. On the product metafield page click Add definition
5. Create a product metafield with the following details:
Name: Biscuits Grouped Products
Namespace and key: custom.biscuits_grouped_products
Type: Product
List of products
6. Hit save
3. Update the new metafield with products
Now we will populate this metafield on each of our bundles we want grouped together.
1. Find your bundle pack products in Shopify admin > products
2. For each size bundle product that we want grouped together, we need to scroll to the bottom of that products settings page and add the bundle parent to our new metafield.
*Don't forget to include the product you are currently setting the metafield for.
3. Hit save
4. 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"
3. Add a custom liquid block to product template
Now that we have a development theme, we can configure our new custom liquid block without affecting the live theme.
We are using Dawn theme for the example today, so all section names and block names will be from the Dawn theme and may not match your themes names exactly.
Click customise to open your new development theme in customiser
Navigate to the product template. (This doesn't have to be the default product template, it can be a template you are using for the regular product page)
Under product information section (or a similar name depending on your theme) add a block
Search for custom liquid block (or a similar name) and add it to your product section.
Because every theme can be different, it is possible your theme doesn't provide a custom liquid block in your product information section. If this is the case, feel free to reach out to the Biscuits Bundle team to help you out!
The custom liquid block will only output on products with a biscuits_grouped_products metafield value set.
5. Copy and paste the following code into your custom liquid block Liquid code field, feel free to update the variables at the top of the file. These are here to reduce the code knowledge needed to adjust and tweak the section to suit your theme.
{% if product.metafields.custom.biscuits_grouped_products.value != blank %}
<style>
.biscuits-related-products {
--biscuits-related-item-per-row: 3;
--biscuits-related-border-radius: 0px;
--biscuits-related-border-thickness: 1px;
--biscuits-related-color-background: rgba(0,0,0,0);
--biscuits-related-color-active-background: #fff;
--biscuits-related-color-border: #efefef;
--biscuits-related-color-active-border: #000;
--biscuits-related-card-padding: 0.5rem;
--biscuits-related-image-radius: 0px;
--biscuits-related-color-text: #000;
}
.biscuits-related-products {
color: var(--biscuits-related-color-text);
}
.biscuits-related-products__list {
display: flex;
align-items: center;
justify-content: flex-start;
}
.biscuits-related-products__list {
flex-wrap: wrap;
}
.biscuits-related-products .biscuits-related-product {
width: 50%;
padding: 0 0.25rem;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
text-decoration: none;
color: inherit;
}
.biscuits-related-products .biscuits-related-product:hover {
text-decoration: none;
}
.biscuits-related-product__inner {
display: flex;
width: auto;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding: 0.5rem;
border-radius: var(--biscuits-related-border-radius);
background: var(--biscuits-related-color-background);
border: var(--biscuits-related-border-thickness) solid var(--biscuits-related-color-border);
}
.biscuits-related-product__inner {
margin-bottom: 0.5rem;
}
@media screen and (min-width: 750px) {
.biscuits-related-products .biscuits-related-product {
width: calc(100% / var(--biscuits-related-item-per-row));
}
.biscuits-related-product__inner {
margin-bottom: 0;
}
}
.biscuits-related-products .biscuits-related-product:hover .biscuits-related-product__inner {
background: var(--biscuits-related-color-active-background);
border: var(--biscuits-related-border-thickness) solid var(--biscuits-related-color-active-border);
}
.biscuits-related-product.biscuits-related-product--active .biscuits-related-product__inner {
background: var(--biscuits-related-color-active-background);
border: var(--biscuits-related-border-thickness) solid var(--biscuits-related-color-active-border);
}
.biscuits-related-product__image {
max-width: 150px;
border-radius: var(--biscuits-related-image-radius);
}
.biscuits-related-product__image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--biscuits-related-image-radius);
}
.biscuits-related-product__details {
margin-bottom: 0.5rem;
margin-top: 0.5rem;
color: inherit;
}
.biscuits-related-products__header {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
margin-bottom: 1rem;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e1e1e1;
color: inherit;
}
.biscuits-related-products__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 0;
margin-bottom: 0;
margin-right: 1rem;
color: inherit;
}
.biscuits-related-products__required {
margin-left: auto;
}
</style>
<biscuits-related-products class="biscuits-related-products">
<div class="biscuits-related-products__header">
<h3 class="biscuits-related-products__number"></h3>
<h3 class="biscuits-related-products__title">Choose a pack size</h3>
<span class="biscuits-related-products__required">required</span>
</div>
<div class="biscuits-related-products__list">
{% for related_product in product.metafields.custom.biscuits_grouped_products.value %}
{% if related_product.id == product.id %}
<div class="biscuits-related-product biscuits-related-product--active">
{% else %}
<a href="{{ related_product.url }}" class="biscuits-related-product">
{% endif %}
<div class="biscuits-related-product__inner">
<div class="biscuits-related-product__image">
{% if related_product.featured_image %}
{{ related_product.featured_image | image_url: width: 400 | image_tag: loading: 'lazy' }}
{% endif %}
</div>
<div class="biscuits-related-product__details">
<span class="biscuits-related-product__title">{{ related_product.title }}</span>
</div>
</div>
{% if related_product.id == product.id %}
</div>
{% else %}
</a>
{% endif %}
{% endfor %}
</div>
</biscuits-related-products>
{% endif %}
4. Test and publish development theme
Once you have tested 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!