Product bundles
Important!
It is only necessary to add the code below to your theme if you are using a Version 2 or Version 1 theme. Users of Version 3, Version 4 and Version 5 themes do not need to install any code to use these features.
To display bundle advertisements on individual products you will need to install some code in your live theme's files.
For each bundle that the product is a part of you can display:
i) A title/headline (different from the actual product title for the bundle product)
ii) An image (different from the bundle product image)
iii) The price
You can also allow the user to add the product bundle to their basket by clicking a link or button.
Bundle advertisements are only displayed on products that are part of a bundle (as a way to advertise that the product is part of a bundle and there is a saving if bought). The advertisement is not shown on the page that displays the information about the bundle product.
• Installation instructions (for version 2 themes or earlier)
• Installation instructions (for version 3 themes or later)
Installation instructions (for version 2 themes or earlier)
Once you've installed the app, you'll need to change the relevant code in your live theme's files. Adding the code will enable the display of bundle advertisements. To add the code you'll need to use the page editor for your live theme. Alternatively, if you don't want to add the code yourself, you can select request installation on the app installation page, and we will install the code for you for a small charge which is shown on the installation page.
Please note: The code to display the information for each bundle does not come with any styling. If performing self-installation then you'll also need to add styling for the different elements in your website's stylesheet(s).
1. Locate the product.twig file by selecting from the menu of the page editor.
2. Add the following code shown where you'd like the bundle(s) to be shown on the product page. We'd usually recommend this is placed beneath the 'add to basket' button:
{% for bundle in product.bundles %}
{{ bundle.title }}
<img src="{{ bundle.photo_url }}">
{{ currency_value(bundle.price) }}
<a href="{{ bundle.url }}">Find out more</a>
{% endfor %}
For example:
{{ bundle.title }} - this is the title/headline for the bundle
{{ bundle.photo_url }} - this is the image for the bundle
{{ bundle.price }} - the price set for the bundle
{{ bundle.url }} - the URL set for the bundle
You may also like to review our guide on how to add products to a basket with a text link.
3. Save your changes to the file.
Installation instructions (for version 3 themes or later)
Once you've installed the app, you'll need to change the relevant code in your live theme's files. Adding the code will enable the display of bundle advertisements. To add the code you'll need to use the page editor for your live theme. Alternatively, if you don't want to add the code yourself, you can select request installation on the app installation page, and we will install the code for you for a small charge which is shown on the installation page.
Please note: The code to display the information for each bundle does not come with any styling. If performing self-installation then you'll also need to add styling for the different elements in your website's stylesheet(s).
1. Locate the product_form.twig file by selecting from the menu of the page editor.
2. Add the following code where you'd like the bundle(s) to be shown on the product page. We'd usually recommend this is placed beneath the 'add to basket' button:
{% for bundle in product.bundles %}
{{ bundle.title }}
<img src="{{ bundle.photo_url }}">
{{ currency_value(bundle.price) }}
<a href="{{ bundle.url }}">Find out more</a>
{% endfor %}
For example:
{{ bundle.title }} - this is the title/headline for the bundle
{{ bundle.photo_url }} - this is the image for the bundle
{{ bundle.price }} - the price set for the bundle
{{ bundle.url }} - the URL set for the bundle
You may also like to review our guide on how to add products to a basket with a text link.
3. Save your changes to the file.