Product Bundles

If a product is part of a Product Bundle then you can display, on the product page on your website, details of the bundle (or bundles) that the product is a part of. As shown in the example below.

You can see the details of the bundle highlighted in the red circle above.

For each bundle the product is 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 the link, for example in the above we have the link as 'get both for £39.95'.

Important!

The bundle advertisement shown in the example above is 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.


Installing the extension

Select 'apps and extensions' from the left menu and then 'available extensions'. Find the 'product bundles' extension and click to activate it on your account.

Once the extension is activated you'll then need to add the relevant code to your website's files (described below). Adding the code will place the code on your website to display this information for each bundle. To add the relevant code you'll need to use the page editor, alternatively you can click the 'request installation' button and we'll install the code for you (a small charge will be made for the installation, which is listed on the extension page).

Please Note: The code to display the information for each bundle does not come with any styling, so won't look like the example above (out of the box). If performing self-installation then you'll also need to add styling for the different elements in your website's stylesheet(s).

For self-installation

1. Locate the product.twig file (located in /views/product pages/product.twig)

2. Add the code shown below 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 %}

As shown in the example below.

{{ 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 like to review our article on how to add products to a basket with a text link.

3. Click to save your changes to the file.


Adding bundle titles and images

Once the Product Bundles extension is activated in your account, when editing a product that is a bundle product, you'll be able to add a separate title/headline and image for the bundle product.

It's this information that will be used for display on constituent product pages.

When adding/editing a product, scroll to the 'bundle/package product' section.

For the image you upload, we'd recommend you upload an image that properly represents the package, as shown in the example below.

This is just one image with a + icon in the middle (but all part of the same image).