GUIDE: Grouped Bundles - Make Set Pack Bundles

Biscuits Bundles frontend UI displaying linked bundles 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.

View an example bundle here

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:

Could not display content

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"

5. 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 %}
  {%liquid
    assign title = 'Choose a pack size'
    assign required_message = 'required'
  %}
  <style>
    .biscuits-grouped-products {
      --biscuits-grouped-item-per-row: 4;
      --biscuits-grouped-item-per-row-mobile: 3;
      --biscuits-grouped-grid-gap: 5px;
      --biscuits-grouped-image-max-width: 250px;
      --biscuits-grouped-border-radius: 0px;
      --biscuits-grouped-border-thickness: 1px;
      --biscuits-grouped-color-background: #FFF;
      --biscuits-grouped-color-active-background: #FFF;
      --biscuits-grouped-color-border: #FFF;
      --biscuits-grouped-color-active-border: #121212;
      --biscuits-grouped-card-padding: 0.5rem;
      --biscuits-grouped-image-radius: 0px;
      --biscuits-grouped-color-text: #000;
      --biscuits-grouped-image-aspect-ratio: 1;
      --biscuits-grouped-image-object-fit: cover;
      --biscuits-grouped-vertical-spacing: 1rem;
      --biscuits-grouped-text-align: left;
      --biscuits-grouped-divider-color-border: #E1E1E1;
    } 

    .biscuits-grouped-products {
      color: var(--biscuits-grouped-color-text);
      margin-block-start: var(--biscuits-grouped-vertical-spacing);
      display: block;
    }

    .biscuits-grouped-products__list {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-inline-start: calc(var(--biscuits-grouped-grid-gap) * -1);
      margin-inline-end: calc(var(--biscuits-grouped-grid-gap) * -1);
      flex-wrap: wrap;
    }

    .biscuits-grouped-products .biscuits-grouped-product {
      width: calc(100% / var(--biscuits-grouped-item-per-row-mobile));
      padding: 0 var(--biscuits-grouped-grid-gap);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      text-decoration: none;
      color: inherit;
    }

    .biscuits-grouped-products .biscuits-grouped-product:hover {
      text-decoration: none;
    }

    .biscuits-grouped-product__inner {
      display: flex;
      width: auto;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: var(--biscuits-grouped-card-padding);
      padding: var(--biscuits-grouped-card-padding);
      border-radius: var(--biscuits-grouped-border-radius);
      background: var(--biscuits-grouped-color-background);
      border: var(--biscuits-grouped-border-thickness) solid var(--biscuits-grouped-color-border);
      margin-block-end: var(--biscuits-grouped-vertical-spacing);
    }

    .biscuits-grouped-product__title {
      width: 100%;
      text-align: var(--biscuits-grouped-text-align);
    }

    @media screen and (min-width: 750px) {
      .biscuits-grouped-products .biscuits-grouped-product {
        width: calc(100% / var(--biscuits-grouped-item-per-row));
      }
      .biscuits-grouped-product__inner {
        margin-block-end: 0;
      }
    }

    .biscuits-grouped-products .biscuits-grouped-product:hover .biscuits-grouped-product__inner {
      background: var(--biscuits-grouped-color-active-background);
      border: var(--biscuits-grouped-border-thickness) solid var(--biscuits-grouped-color-active-border);
    }

    .biscuits-grouped-product.biscuits-grouped-product--active .biscuits-grouped-product__inner {
      background: var(--biscuits-grouped-color-active-background);
      border: var(--biscuits-grouped-border-thickness) solid var(--biscuits-grouped-color-active-border);
    }

    .biscuits-grouped-product__image {
      max-width: var(--biscuits-grouped-image-max-width);
      border-radius: var(--biscuits-grouped-image-radius);
    }

    .biscuits-grouped-product__image img {
      width: 100%;
      height: 100%;
      aspect-ratio: var(--biscuits-grouped-image-aspect-ratio);
      object-fit: var(--biscuits-grouped-image-object-fit);
      border-radius: var(--biscuits-grouped-image-radius);
    }

    .biscuits-grouped-product__details {
      color: inherit;
    }

    .biscuits-grouped-products__header {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: nowrap;
      padding-block-end: calc(var(--biscuits-grouped-vertical-spacing) * 0.5);
      margin-block-end: var(--biscuits-grouped-vertical-spacing);
      border-bottom: var(--biscuits-grouped-border-thickness) solid var(--biscuits-grouped-divider-color-border);
      color: inherit;
    }

    .biscuits-grouped-products__title {
      display: flex;
      align-items: center;
      margin-block-start: 0;
      margin-block-end: 0;
      margin-inline-end: var(--biscuits-grouped-vertical-spacing);
      color: inherit;
    }

    .biscuits-grouped-products__required {
      margin-inline-start: auto;
    }
  </style>

  <biscuits-grouped-products class="biscuits-grouped-products">
    <div class="biscuits-grouped-products__header">
      <h3 class="biscuits-grouped-products__number"></h3>
      <h3 class="biscuits-grouped-products__title">#{{ title }}</h3>
      <span class="biscuits-grouped-products__required">#{{ required_message }}</span>
    </div>
    
    <div class="biscuits-grouped-products__list">
      {% for grouped_product in product.metafields.custom.biscuits_grouped_products.value %}
        {% if grouped_product.id == product.id %}
          <div class="biscuits-grouped-product biscuits-grouped-product--active">
        {% else %}
          <a href="#{{ grouped_product.url }}" class="biscuits-grouped-product">
        {% endif %}

        <div class="biscuits-grouped-product__inner">
          <div class="biscuits-grouped-product__image">
            {% if grouped_product.featured_image %}
              #{{ grouped_product.featured_image | image_url: width: 400 | image_tag: loading: 'lazy' }}
            {% endif %}
          </div>
          <div class="biscuits-grouped-product__details">
            <span class="biscuits-grouped-product__title">#{{ grouped_product.title }}</span>
          </div>
        </div>

        {% if grouped_product.id == product.id %}
          </div>
        {% else %}
          </a>
        {% endif %}
      {% endfor %}
    </div>
  </biscuits-grouped-products>
{% endif %}

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

Could not display content