Skip to main content
All CollectionsCustomise Theme BlockCustomisation Guides
GUIDE: Related Bundles - Make Set Pack Bundles
GUIDE: Related Bundles - Make Set Pack Bundles
Updated over a month ago

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.

  1. Open Settings in you Shopify store admin

  2. Visit click Custom data in the left sidebar

  3. 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.

  1. Click customise to open your new development theme in customiser

  2. 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)

  3. Under product information section (or a similar name depending on your theme) add a block

  4. 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!

Did this answer your question?