In this guide we will enable line item properties pass-through in the Biscuits app and create a bundle product template to offer customers gift messaging input fields on our bundle products.
In this guide we will:
Enable line item properties pass-through in the Biscuits App
Create a bundle product template
Duplicate our stores theme
Add a custom liquid block to the product page
Assign this new product template to our bundle product
Publish our development theme
This guide involves copy and pasting code. If that is not your cup of tea feel free to reach out to the Biscuits Bundles team to help you out!
First we need to tell the Biscuits app we want line item properties to pass through on our bundles product.
Navigate to settings in the Biscuits app
Scroll to App settings and tick the "Enable line item properties pass-through"
For this example we will leave "first product added to bundle" selected as we only want to pass the gift messaging on to one product
💡 To learn more about line item properties visit our doc on enabling line item pass-through
Next we will create a new product template in our live theme. Creating this template wont effect our live site until we assign a product to this new template.
1. Open Online Store > Themes in Shopify admin click the "customise" button on your live theme.
2. Click "Home page" dropdown in the top middle, then click "Products" and click create template to create a new product template.
3. Name the template "bundle-product" (or whatever you would like to call it). Use default product as the "based on" field and click create template.
That concludes the changes we need to make to the live theme. And remember this template wont display on your live theme until a product is set to use this template.
Next 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.
eg:
"[Theme name] | Biscuits Customisation"
Now that we have a development theme, we can configure our new template.
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 bundle-product template we just made.
Make sure you have a Biscuits Bundle app block in your template, if not add it with the "add block"
Click "Add block" directly under the Biscuits Bundle Builder block, and search for custom liquid (your theme might call it something slightly different) and add it.
Some common names for this block are 'Custom liquid', 'Liquid', 'Custom Code', 'Custom HTML'*
*Most 'Custom HTML' blocks we've come across also allow Liquid code. If yours doesn't appear to be behaving when you paste the code in, please reach out to us for more help.
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!
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.
⚠️ This code is based on the Dawn theme, meaning the product form id used in this code may not be compatible with themes that aren't Dawn. The following themes this code will work with out of the box.
Dawn, Crave, Craft, Colorblock, Origin, Publisher, Ride, Rise, Studio,Trade
If this code doesn't appear to be adding the line item properties to cart with your bundle product - you may need to check what the value for your themes "product_form_id" is and replace it in line 9 of this code.
Figuring out your product form id is a bit technical, so it might be time to reach out to your developer, or reach out to the Biscuits Bundle team for help if you can't get it to work.
{% assign message_max_length = 250 %}
<style>
.biscuits-custom-form__field {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}
</style>
{%- assign product_form_id = 'product-form-' | append: section.id -%}
<div class="biscuits-custom-form contact">
<div class="biscuits-bundle-step__accordion-title">
<div class="biscuits-bundle-step__header">
<h3 class="biscuits-bundle-step__title">Add a gift message</h3>
<span class="biscuits-bundle-step__optional">optional</span>
</div>
</div>
<div class="biscuits-custom-form__field contact__fields">
<div class="field">
<input class="biscuits-custom-form__input field__input" id="biscuits-input-to" form="#{{ product_form_id }}" type="text" value="" name="properties[To]" placeholder="">
<label class="biscuits-custom-form__label field__label" for="biscuits-input-to">To:</label>
</div>
</div>
<div class="biscuits-custom-form__field contact__fields">
<div class="field">
<input class="biscuits-custom-form__input field__input" id="biscuits-input-from" form="#{{ product_form_id }}" type="text" class="" value="" name="properties[From]" placeholder="">
<label class="biscuits-custom-form__label field__label" for="biscuits-input-from">From:</label>
</div>
</div>
<div class="biscuits-custom-form__field contact__fields">
<div class="field">
<textarea class="biscuits-custom-form__textarea text-area field__input" id="biscuits-input-message" form="#{{ product_form_id }}" name="properties[Message]" rows="4" placeholder="Message" maxlength="#{{ message_max_length }}"></textarea>
<label class="biscuits-custom-form__label form__label field__label" for="biscuits-input-nessage">Message:</label>
</div>
</div>
</div>
7. The page should load and you should be able to see the gift messaging fields appear below the Biscuits Bundle app block.
8. Hit save
Now we have a template ready to display our gift messaging, we just need to assign it to our bundle product.
1. Navigate to the Biscuits Bundle product you wish to display gift messaging on. This can either be via the Biscuits app and clicking "view in shopify" or via search under products in the Shopify admin.
2. Scroll down to Theme template setting in the right hand sidebar. Select "bundle-product" and save the product.
3. Now you can preview your development theme to see the form on your bundle product.
There are two ways to check the line item properties are passing through to the bundle when an order is placed.
We always recommend placing a test order to ensure your bundles work how you expect them to.
Visit your bundle product on your development theme, add gift messaging to the inputs we added and add to cart
Proceed to checkout
You can check if the line item property pass through was successful by looking at the line item properties on the first product of the bundle. If this product is showing the gift messaging, the implementation worked
⚠️ If your checkout page doesn't show line item properties on the first bundle product, go back to step 1 and make sure you enabled line item properties pass-through in the Biscuits app. Then revisit your bundle product page and try again.
4. Complete checkout to place a test order
5. Check the order in Shopify admin to confirm the gift messaging came through on the first product of the bundle.
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.
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!