Customisation Guide
In this guide we will update our store to display an upsell card for bundle products on a regular product page.
In this guide:
We will create a metafield for relating a bundle parent to its component children
We will duplicate our stores theme.
We will add a custom liquid block to the product page
Before we begin
This guide involves copy and pasting code. If that is not your cup of tea feel free to reach out to the Biscuits Bundle team to help you out!
1. Create product metafield
First we need to create a metafield that will relate a bundle to its children components.
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 Upsell
Namespace and key: custom.biscuits_upsell
Type: Product
List of products
6. Hit save
7. Find your bundle component products in products
8. For each component product that we want a bundle upsell to appear on we need to scroll to the bottom of that products settings page and add the bundle parent to our new metafield.
9. Hit save
2. 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 bundle_parent metafield value set.
5. 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.
{% liquid
assign section_title = 'Bundle & Save'
assign button_text = 'View bundle'
%}
<style>
.biscuits-bundle-upsells-block {
--biscuits-upsells-border-radius: 10px;
--biscuits-upsells-border-thickness: 0px;
--biscuits-upsells-color-background: rgba(0, 0, 0, 0);
--biscuits-upsells-color-active-background: #f1ebe7;
--biscuits-upsells-color-border: #efefef;
--biscuits-upsells-border-width: 1px;
--biscuits-upsells-card-padding: 10px;
--biscuits-upsells-card-gap: 10px;
--biscuits-upsells-image-radius: 10px;
--biscuits-upsells-color-text: #000;
--biscuits-upsells-button-background: #000;
--biscuits-upsells-button-color-text: #fff;
--biscuits-upsells-button-padding: 5px 10px;
--biscuits-upsells-button-border-radius: 5px;
--biscuits-upsells-button-margin: 5px 0;
}
.biscuits-bundle-upsells {
display: flex;
padding: 0;
margin: 0;
width: 100%;
overflow: auto;
gap: var(--biscuits-upsells-card-gap); /* Hide scrollbar for IE, Edge, and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: thin; /* Firefox */
scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Firefox */
}
.biscuits-bundle-upsells::-webkit-scrollbar {
height: 6px;
}
.biscuits-bundle-upsells::-webkit-scrollbar-track {
background: transparent;
}
.biscuits-bundle-upsells::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 3px;
}
.biscuits-bundle-upsells:hover::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.4);
}
.biscuits-bundle-upsell-item {
list-style: none;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
flex: none;
border-radius: var(--biscuits-upsells-border-radius);
background: var(--biscuits-upsells-color-background);
border: var(--biscuits-upsells-border-width) solid var(--biscuits-upsells-color-border);
padding: var(--biscuits-upsells-card-padding);
color: var(--biscuits-upsells-color-text);
}
.biscuits-bundle-upsell-item img {
object-fit: contain;
border-radius: var(--biscuits-upsells-image-radius);
}
.biscuits-bundle-upsell-item__content {
display: flex;
flex-direction: column;
height: auto;
width: 100%;
align-items: flex-start;
justify-content: flex-start;
line-height: 1.2;
}
.biscuits-bundle-upsell-item__title {
flex: auto;
margin-bottom: 5px;
}
.biscuits-bundle-price__compare {
text-decoration: line-through;
opacity: 0.5;
}
.biscuits-bundle-upsell-item__link {
text-decoration: none;
color: inherit;
display: flex;
align-items: stretch;
justify-content: flex-start;
width: 100%;
}
.biscuits-bundle-upsell-item__image {
display: block;
width: 100px;
height: 100px;
margin-right: 10px;
align-self: center;
}
.biscuits-bundle-upsells[data-slides] .biscuits-bundle-upsell-item {
max-width: 80%;
}
.biscuits-bundle-upsell-item__button {
display: inline;
background: var(--biscuits-upsells-button-background);
color: var(--biscuits-upsells-button-color-text);
padding: var(--biscuits-upsells-button-padding);
border-radius: var(--biscuits-upsells-button-border-radius);
}
.biscuits-bundle-price__compare:not(:empty) {
margin-right: 5px;
}
.biscuits-bundle-upsell-item__price {
margin-bottom: 2px;
}
</style>
{% liquid
assign bundle_parents = product.metafields.custom.biscuits_upsell.value
assign multiple_items = false
if bundle_parents.count > 1
assign multiple_items = true
endif
-%}
{%- if bundle_parents != blank %}
<div class="biscuits-bundle-upsells-block">
<h3 class="biscuits-bundle-upsells__title">{{ section_title }}</h3>
<ul
class="biscuits-bundle-upsells"
{% if multiple_items %}
data-slides
{% endif %}
>
{% for bundle_product in bundle_parents %}
<li class="biscuits-bundle-upsell-item">
<a href="{{ bundle_product.url }}" class="biscuits-bundle-upsell-item__link">
<span class="biscuits-bundle-upsell-item__image">
{{
bundle_product.featured_image
| image_url: width: 100
| image_tag: loading: 'lazy', class: 'biscuits-bundle-upsell-image'
}}
</span>
<span class="biscuits-bundle-upsell-item__content">
<span class="biscuits-bundle-upsell-item__price">
<span
class="biscuits-bundle-price__compare"
data-biscuits-compare-price="{{ bundle_product.compare_at_price }}"
>
{%- if bundle_product.compare_at_price != 0 -%}
{{- bundle_product.compare_at_price | money -}}
{%- endif -%}
</span>
<span class="biscuits-bundle-price__current" data-biscuits-current-price="{{ bundle_product.price }}">
{{- bundle_product.price | money -}}
</span>
</span>
<span class="biscuits-bundle-upsell-item__title">{{ bundle_product.title }}</span>
<span class="biscuits-bundle-upsell-item__button">{{ button_text }}</span>
</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
6. Hit save
7. Click the three dots in the top left hand corner and select preview to view your development theme. Visit a bundle component product and check if the bundle parent selected in the metafield we created appears.
Congrats if the bundle upsell block is outputting. Don't worry if it isn't, you may be viewing a component product you didn't save the metafield for. Go back to the product in Shopify admin and make sure the custom.bundle_parents metafield isn't blank.
3. 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!