Advanced Bundle Products

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.

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

Add Snippet files

1. 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>
   

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

   Fill it in with the code from below and save:

   {% capture helpers %}
   {% comment %} Exclude hidden properties from the output {% endcomment %}
   {% if mw_GP_helpers == 'properties' %}
       {% if first contains '_mw_grouped_product_' %}
       {% continue %}
       {% endif %}
   {% endif %}
   {% comment %} Replace price with discounted price {% endcomment %}
   {% if mw_GP_helpers == 'price' %}
       {% if item.properties._mw_grouped_product_discounted_price %}
       {% assign discountedPrice = item.properties._mw_grouped_product_discounted_price | replace: '.', '' %}
       {{ discountedPrice | money }}
       {% else %}
       {{ item.price | money }}
       {% endif %}
   {% endif %}
   {% comment %} Replace line price with discounted price multiplied by quantity {% endcomment %}
   {% if mw_GP_helpers == 'line-price' %}
       {% if item.properties._mw_grouped_product_discounted_price %}
       {% assign discountedLinePrice = item.properties._mw_grouped_product_discounted_price | replace: '.', '' | times: item.quantity %}
       {{ discountedLinePrice | money }}
       {% else %}
       {{ item.line_price | money }}
       {% endif %}
   {% endif %}
   {% comment %} Add styling to disabled element {% endcomment %}
   {% if mw_GP_helpers == 'class-disabled' %}
       {% if item.properties._mw_grouped_product_discounted_price %}
       mw-gp-helper--disabled
       {% endif %}
   {% endif %}
   {% comment %} Disable element {% endcomment %}
   {% if mw_GP_helpers == 'attr-disabled' %}
       {% if item.properties._mw_grouped_product_discounted_price %}
       disabled="disabled" tabindex="-1"
       {% endif %}
   {% endif %}
   {% comment %} Recalculate cart subtotal {% endcomment %}
   {% if mw_GP_helpers == 'subtotal' %}
       {% assign subtotal = 0 %}
       {% for item in cart.items %}
       {% if item.properties._mw_grouped_product_discounted_price %}
           {% assign discountedPrice = item.properties._mw_grouped_product_discounted_price | replace: '.', '' %}
           {% assign discountedPrice = item.price | minus: discountedPrice %}
           {% assign discountedPrice = discountedPrice | times: item.quantity %}
           {% assign subtotal = subtotal | plus: discountedPrice %}
       {% endif %}
       {% endfor %}
       {{ cart.total_price | minus: subtotal | money }}
   {% endif %}
   {% endcapture %}
   {{ helpers | strip }}
   

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.

Edit cart template

You need to modify the cart template. Open the Sections folder. This can be either in the cart.liquid or cart-template.liquid files. Find the lines:

{%- assign property_size = item.properties | size -%}
{% if property_size > 0 %}
    <div class="cart__meta-text">
    {% for p in item.properties %}
        {% unless p.last == blank %}
        {{ p.first }}:

        {% comment %}
            Check if there was an uploaded file associated
        {% endcomment %}
        {% if p.last contains '/uploads/' %}
            <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
        {% else %}
            {{ p.last }}
        {% endif %}
        {% endunless %}
    {% endfor %}
    </div>
{% endif %}

1. After the line {% for p in item.properties %}, add

{% include 'mw_GP_helpers' with 'properties', first: p.first %}.

1. Find the {{ item.price | money }} and change it to

{% include 'mw_GP_helpers' with 'price', item: item %}

1. Find the {{ item.line_price | money }} and change it to

{% include 'mw_GP_helpers' with 'line-price', item: item %}

1. Find the {{ cart.total_price | money }} and change it to

{% include 'mw_GP_helpers' with 'subtotal' %}

Bundle 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.

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.

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.

The grid of the associated products allows the merchant to select multiple products easily. After that, they can be Removed from the list. Please note that during the initial configuration this grid will be empty. The View button shows the preview of the created Bundle product on the frontend.

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

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

The Reorder products link opens the popup with the possibility to change the sort order of the products.

To perform this operation, click the product and drag to the appropriate position. When the edits are made, click the Save button.

Let's check the grid configurations.

Bundle Quantity

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.

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:

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

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

Tip

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

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:

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 more significant values.

Bundle Discounts

The app allows adding the discount to the child products. For this, set the desired discount percentage in the Discount box. The discounted price will be recalculated automatically for every product in the grid. This discount is applied on the cart page when all the child products are added to cart.

When the discount is set, on the fronted the customer observes the crossed out old price and the new one with the discount. Below the subtotal, the discount is shown in the website's currency. The You save text can be changed in the app configuration.

You can also enable the Add to cart button. This option allows the customer choosing the products to be added directly on the Bundle Product page. When the quantity of the product is 0, the Add to cart button is grayed out.

Bundle Offer

For every child product that is included in the bundle product, you can show the bundle offer that motivates the user to purchase it along with other ones.

Depending on the business case, this block can be shown as the HTML block or as a popup.

Bundle Popup

This screenshot shows the way how the product page is rendered for the clients if they open any child product individually.

Note that due to the fact that the min value for the NORRNÄS Chair is 3, this number will be shown on its' image inside this popup.

Clicking the Configure link here, sends the customer to the bundle product page. The popup allows selecting the products directly to the cart.

The customer may close this popup and in this case small button will be shown:

To enable this feature, open the bundle product, check the Show bundle popup on associated product's pages checkbox and select the Popup dropdown in the Offer display type configuration:

You can edit the Popup Title and the Popup Button Text (shown if the popup is closed). The popup design configuration can be modified in the app's configuration

Bundle HTML Block

This screenshot shows the way how the product page is rendered for the clients if they open any child product individually.

Note that due to the fact that the min value for the TYSSEDAL Nightstand is 3, this number will be shown on its' image inside this block.

Clicking the Configure link here, sends the customer to the bundle product page. The popup allows selecting the products directly to the cart.

To enable this feature, open the bundle product, check the Show bundle popup on associated product's pages checkbox and select the Static Block dropdown in the Offer display type configuration:

From here, you can edit the Block Title.

You can also show this block anywhere throughout your website. For instance, we'll show you how to display this block on the blog page.

First you need to copy the bundle HTML block code by clicking the ⧉ symbol.

Open the page where you wish to show this bundle, click the Show editor button and paste the code inside the document:

Click the Save button and check the fronend view:

Configuration

The basic app configuration provides a significant number of settings 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

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:

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 typical 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.

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 wrong amount 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 offers the lowest 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:
  

• 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):
  .
  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 Display 'Add to cart' button for each associated product setting allows the customer choosing the products to be added directly on the Bundle Product page. When the quantity of the product is 0, the Add to cart button is grayed out:

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

Below, you can edit the popup design:

First of all, you can decide whether you wish the popup to be shown as opened (expanded) or closed (collapsed) by default. Then you can choose the Position of the popup to be displayed and the Accent Color (the color of the buttons and qty swatches).

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:

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.

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.