Skip to content

Advanced Bundle Products

Shopify Advanced Bundle Products App

Installation

Help

In most cases the app adds its code to the published theme automatically. If you have a customized theme you can either follow the installation instructions below and install it yourself, or you could contact us. Our professionals would be happy to install the app for you FREE of charge.

Free installation request

First, backup the copy of the current theme to discard the changes if needed.

From your Shopify admin, go to Online Store > Themes, find the current theme and click the Actions > Edit code.

Advanced Product Actions Installation

The code editor workspace shows the bunch of theme files logically sorted into several folders:

Advanced Product Actions Installation

Add Snippet file

Open the Snippets folder, and click the Add a new snippet option. The snippet name should be mw_GP_objects.

Fill it in with the code from below and save:

<style>
.mw-gp-container{margin-bottom:20px;-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%}.mw-gp-spinner{display:block;margin:10px auto;font-size:10px;position:relative;text-indent:-9999em;border-top:5px solid rgba(184,184,184,.2);border-right:5px solid rgba(184,184,184,.2);border-bottom:5px solid rgba(184,184,184,.2);border-left:5px solid rgba(105,105,105,.2);-webkit-animation:mwgpanimation 1.1s infinite linear;animation:mwgpanimation 1.1s infinite linear}.mw-gp-spinner,.mw-gp-spinner:after{border-radius:50%;width:50px;height:50px}@-webkit-keyframes mwgpanimation{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes mwgpanimation{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
</style>
<script>
window.mwGroupedProductsObjects = {
    product: {{ product | json }},
    cart: {{ cart | json }},
    template_name: {{ template.name | json }},
    shop: {
    domain: {{ shop.permanent_domain | json }},
    money_format : {{ shop.money_format  | json }},
    money_with_currency_format : {{ shop.money_with_currency_format  | json }}
    }   
};

if (document.getElementsByTagName('html')[0].innerHTML.indexOf('files-shopify.mageworx.com/groupedproducts/source.js') > -1) {
    var container = document.getElementsByClassName('mw-gp-container');

    if (container.length > 0) {
    container[0].innerHTML = '<div class="mw-gp-spinner"></div>';

    setTimeout(function(){ document.getElementsByClassName('mw-gp-spinner')[0] && document.getElementsByClassName('mw-gp-spinner')[0].remove(); }, 4000);
    }
}
</script>

Edit Layout files

Open the Layout folder, and click the theme.liquid file.

Find the code:

</body>

in most cases, it will be at the end of the document. Add:

{% include 'mw_GP_objects' %}

as depicted above and click the Save button.

Edit Section files

Edit product form

Our app requires the edits in the theme files.

Depending on the theme, these modifications may vary.

First, figure out the theme name and locate it in the document.

Theme Name Product Form Filename Form Code Product Price Selector Cart Quantity Selector Screenshot
Narrative product-form.liquid {% form 'product', product, class:'product-form' %} .product__current-price - Link
Minimal product-template.liquid {% form 'product', product, class:productform_class %} #ProductPrice .cart-count Link
Debut product-template.liquid {% form 'product', product, class:form_classes %} .price-item--regular .site-header__cart-count span:first Link
Supply product-template.liquid {% form 'product', product, class:form_class, id:form_id %} #productPrice-product-template .cart-count Link
Boundless product-template.liquid {% form 'product', product, id:form_id, class:form_class %} .product__price--reg - Link
Pop product-template.liquid {% form 'product', product, id:form_id %} .product-price #cartCount Link
Simple product-template.liquid {% form 'product', product, class:'product-form' %} #ProductPrice #CartCount Link
Venture product-template.liquid {% form 'product', product, class:form_class, id:form_id %} #ProductPrice-product-template - Link
Jumpstart product-template.liquid {% form 'product', product %} #ProductPrice-product-template .btn__cart .icon Link
Brooklyn product-template.liquid {% form 'product', product, class:'product-form' %} #ProductPrice - Link

If, for some reason, you can’t do it, do not hesitate to submit a request so we could help you with this (our support service is free of charge).

If you find the theme name here, follow these instructions. Note, in the instructions, we’ll use the Debut theme as an example.

Open the Sections folder and click the appropriate file. For this theme, it is

product-template.liquid

file.

Next, locate the code. It is wrapped in:

{% form ...

This block code differs depending on the theme - for the Debut theme it starts with:

{% form 'product', product, class:form_classes %}

and ends (for any other theme) with:

{% endform %}

Just add this snippet:

{% if product.tags contains 'mw_grouped_product' %}<div class="mw-gp-container"></div>{% endif %}

inside this block.

Next, find the Add to Cart button (you can search it by the name="add" attribute) and insert this line in there:

{% if product.tags contains 'mw_grouped_product' %}disabled="disabled"{% endif %}

See the Screenshot column of the table for the sample.

To learn more about the selectors, follow this link. Here, you’ll find the selectors for the most popular themes.

If you are using some other theme, submit a request and our support specialists will help you set it up (free of charge).

You may try to do it by yourself. For this, please check your browser Console.

Info

If you decide to publish a new theme after the app has been installed, you should reinstall the app or add the code to a new theme manually following the instructions above.

Bundle Product

Group Product

The Bundle product is made up of several items that are presented as a single unit (however, the quantity of each unit can be customized, and some can be excluded from the order). For instance, the customer might sell cutlery and provide every type of it like knives, forks, and spoons. Someone needs to purchase 2 forks, one spoon and no knives at all. Other customers might order just 1 fork and the fish knife. Customers can order as many of each item as they want.

What is more, the app does not create bundle product clones. With the app, you can display/add to cart/track bundle product items as individual products, which won’t affect your inventory tracking and shipping schemas.

To create the Bundle product or to edit some product to make it the bundle one, go to Products > All Products and either create a new product or click any to edit it. The tags block has the mw_grouped_product value.

Bundle Product

If this one is selected, this product can be managed as the Bundle one. This particular product will be the base one and any other associated product can be added to it.

To view or edit the Bundle product, please, go to Apps > Advanced Bundle Products.

Bundle Product

This grid shows the list of the Bundle products with the products images and the quantity of the associated products. The search box allows finding the desired product.

Also, from here, by clicking on the ‘View’ icon, you can preview the created bundle product on the frontend.

Click any product to edit items associated with it.

Bundle Product

The grid of the associated products allows the merchant to easily select multiple products. After that, they can be removed from the list. Please note that during the initial configuration this grid will be empty.

The Min QTY provides the possibility to manage the minimum product quantity to be added on the frontend. The client can see the default minimum value added when the frontend product page has been loaded. The View button shows the preview of the created Bundle product on the frontend.

Group Product

This screenshot shows the way how the product page is rendered for the client when the min qty for the first product (TYSSEDAL Bed) is set to 4 and 1 is set for the other products.

If the customer changes this value to any lower than the minimum, the product won't be added, and the note will be shown:

Bundle Product

The Max QTY limits the biggest value to be added when the frontend product page is loaded.

If the customer sets the quantity value bigger than the one specified in the app configuration, the product won't be added, and the note will be shown:

Bundle Product

Tip

The note text can be changed in the app's configuration

Bundle Product

The Quantity box for the whole Bundle product automatically changes the quantity of all the single units. Please bear in mind that if the minimum qty of some single unit is bigger than the one selected in the qty box for the whole box, it will be considered as the preferred one:

Bundle Product

In this example, the qty for the chair will remain equal to 3 if the qty of the whole Bundle price product will be 0, 1, 2 or 3 and will change automatically along with the other single units for the bigger values.

To be able to add more associated products, please click the Select Products link.

Bundle Product

The arrows let you flip the pages. The search box allows finding the desired product.

Configuration

The basic app configuration provides the big number of the configurations that can be changed according to your business needs. Go to Apps > Advanced Bundle Products and click the Configuration button.

This workspace consists of two tabs.

General Settings

Bundle Product

The Show subtotal setting shows the price block below the bundle products grid on the frontend. This allows the customer to easily observe the final prices once the qty of the associated products is changed:

Bundle Product

If you wish to send the customer directly to the cart after clicking the Add to Cart button, please enable the Redirect to cart page after adding to cart setting.

Additionally, under these settings, you can opt to display product images on small screens.

The Bundle product is actually the normal Shopify product, therefore it has the price attribute. This can be changed by clicking the Hide product price setting. Once you enable this setting, the Product price selector setting appears. To learn more about the selectors, follow this link. Selectors can be viewed in your browser Console. In most browsers, it is launched by this keyboard shortcut: ⌘ + SHIFT + I (for Mac) or CTRL + SHIFT + I (for Windows). To hide the product price correctly, you'll need to define the product price selector. For this, we open any product on the frontend and open the browser console.

Browser Console

The selector name here is #ProductPrice-product-template and we put this value in the appropriate configuration box.

Same can be done if you encounter the incorrect value for the mini cart count selector. If you observe the incorrect value in the mini cart, please define the CSS Cart count selector for this block.

If you wish, the price block can still be visible but provide the more specific information. The Starting At configuration provides the cheapest option for this bundle product.

  • If the min qty fields are not populated for all the associated products, the cheapest product price will be displayed:
    Bundle Product

  • If some product (or products) has the minimum quantity entered, the Starting at value will be based on the price of this product (the sum of the products prices):
    Group Product.
    In this example, the min qty for the second product (TYSSEDAL Nightstand) is 1 and its cost is $99.00 per one, the min qty for the fourth one (RANARP Lamp) is 2 and its cost is $49.99. Therefore, the Starting At price is 99.00 + 49.99 x 2 = 198.98.

The app allows inserting literally any CSS style customizations. For this, please, populate the Custom CSS styles according to your vision.

Translations

This tab allows changing the default texts. For the convenience sake, this image shows the backend configuration and the frontend view at the same time:

Bundle Product

The Product, Price and Quantity column title are the titles of the bundle product grid.

The Subtotal title changes the products subtotal text. The Starting At text handles the title of the starting at price.

When the product is added to the cart, the text in green is shown below the associate product name. If it is not possible to add the associate product due to the min or max qty restrictions the corresponding texts will be shown below this particular product name.

For the out of stock products the Sold out label will be shown.

Uninstallation

From your Shopify admin, go to Online Store > Themes, find the theme you want to remove Advanced Bundle Products App from and click Actions > Edit code.

Delete mw_GP_objects.liquid snippet

Open the Snippets folder, locate the snippet named mw_GP_objects.liquid and click Delete button.

Snippet

Remove code from theme files

Open the Layout folder, and click the theme.liquid file.

Find the code:

{% include 'mw_GP_objects' %}

Remove it and click Save button.

Then, you will need to remove additional code from the product form. Depending on the theme, you can find it's code in product-form.liquid or product-template.liquid file.

Open one of the mentioned files and remove pieces of code:

{% if product.tags contains 'mw_grouped_product' %}<div class="mw-gp-container"></div>{% endif %}
{% if product.tags contains 'mw_grouped_product' %}disabled="disabled"{% endif %}

Questions?

For any technical and pre-sale questions, feel free to contact us at apps@mageworx.com. We'll be happy to help.