Skip to content

Volume & Tiered Discounts Kit

Shopify Volume & Tiered Discounts Kit App

Tiered Prices (aka volume/quantity discounts) is a great way to encourage customers to purchase more.

The Volume & Tiered Discounts Kit app lets you set special prices on each order item purchased in bulk. Setting up Volume & Tiered Discounts Kit encourages customers to purchase more.

The app provides the comprehensive mechanism to tune these discounts: fixed, percentage, or the product price deduction. The Volume & Tiered Discounts Kit can be provided to all the products available or may be more refined based on the conditional logic. The geo-targeting allows picking the appropriate countries to display your promoted products for.

The app has the styling configuration: you can design the Volume & Tiered Discounts Kit grid so that it will fit your website look'n'feel.

Volume & Tiered Discounts Kit Shopify MageWorx

This screenshot shows the demo of the Volume & Tiered Discounts Kit on our store.

Volume & Tiered Discounts Kit Shopify MageWorx

As you may see, the values in the grid will be changed automatically depending on the initial product price.

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

Add Snippet file

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

<script>
  window.mwProductTierpricesObjects = {
    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 }}
      }
  };
</script>

Edit theme.liquid layout

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

Before the line:

</body>

enter:

{% include 'mw_TP_objects' %}

Edit product form

Our app requires the edits in the theme files.

Depending on the theme, these modifications may vary.

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:

<div class="mw-tierprices"></div>

inside this block.

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.

  1. Find the line:

    {% for item in cart.items %}
    

    Into the tag after it add the following attribute:

    data-mw-tp-variant-id="{{ item.variant.id }}"
    

    For example:

    <div class="cart__row">
    

    becomes

    <div class="cart__row" data-mw-tp-variant-id="{{ item.variant.id }}">
    
  2. Find price tags:

    {{ item.price | money }}
    

    and wrap them with <span class="mw-tp-price"></span> tag:

    <span class="mw-tp-price">{{ item.price | money }}</span>
    
  3. Find line price tags:

    {{ item.line_price | money }}
    

    and wrap them with <span class="mw-tp-line-price"></span> tag:

    <span class="mw-tp-line-price">{{ item.line_price | money }}</span>
    
  4. Find cart subtotal tag:

    {{ cart.total_price | money }}
    

    and wrap it with <span class="mw-tp-cart-subtotal"></span> tag:

    <span class="mw-tp-cart-subtotal">{{ cart.total_price | money }}</span>
    

Add the Tier Price

To create, view, edit or delete the offers, please, go to Apps > Volume & Tiered Discounts Kit.

Volume & Tiered Discounts Kit Shopify MageWorx

Please note that during the initial setup this grid will be empty.

You can easily filter all the offers to find the one that you need if the list is very long. It is possible to deactivate and delete the tier price rule directly from this grid.

To create a new tier price rule, click the Create Offer button.

Volume & Tiered Discounts Kit Shopify MageWorx

When the offer is added, it is set as disabled (hidden) by default. To show it on the frontend, click the Activate button.

The Internal Name is the title of the offer. This name will be visible on the backend and will help to detect the correct one on the tier price grid.

The Targeted Products has the radio button selection and allows adding this offer to all products, by condition or manually selected.

The condition section shown on the picture above has the ALL logic (so that if several conditions are selected, all of them should be met) or ANY (the product that meets any condition provided will meet the requirements).

To select the products manually, click the Manually Selected radio button and then press Select. You can add as many products (including their variants) as you wish:

Volume & Tiered Discounts Kit Shopify MageWorx

The Tier Pricing tab makes possible to add as many tiers as required according to the quantity of purchased products. The row shows the minimum quantity of the products added in Volume & Tiered Discounts Kit for the rule to be executed and the discount to be added. The new price can be either written down manually (Fixed), the discount can be provided by Percent from the original value or as the deduction value (for instance, minus X dollars).

Please check this preview screen for better understanding:

Volume & Tiered Discounts Kit Shopify MageWorx

Let's say that te original product price is $100.

1) The price for the 5-7 products (first row) is $95 fixed.

2) The price of the second one is calculated based on the percent of the original price: 15% from $100 is $15, so the price per item for the 5 products is $100 - $15 = $85

3) The price of the third row (10 products and more) is calculated as the simple subtraction from the value that you've added here: $100 - $30 = $70.

The grid in the preview box is shown on the frontend. From here, you can rename the title of the tier price offer, show or hide the max quantity and the discount percent.

Please note that the technical names of the columns can be renamed in the extension's configuration. This can be important for the stores where the English language is not used.

According to the design of your website, this grid can be modified. We provide the granular approach to any element so that the grid should fit any theme. The color can be selected using the color and transparency pickers:

Volume & Tiered Discounts Kit Shopify MageWorx

To the right of this workspace, you can find the Display Settings tab that consists of several configurations:

Volume & Tiered Discounts Kit Shopify MageWorx

The Visitor's location is the list of the countries where these Volume & Tiered Discounts Kit should be shown.

To set the validity period of this tier price, click the first and the last date for the tier price offer to be active. Please note that if the event starts in one month and ends in another, you shouldn't click the last day of the month when the event has started. Use the arrow keys instead and select the date to finish in another month.

The Priority configuration defines which offer should be applied if several tier price offers match one product.

Configuration

The basic app configuration provides the big number of the settings that can be changed according to your business needs. Go to Apps > Volume & Tiered Discounts Kit and click the Configuration button.

Volume & Tiered Discounts Kit Shopify MageWorx

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

The Translations section allows changing the default columns names.

Checkout process

When the customer purchases the products using the Volume & Tiered Discounts Kit, the price of the products becomes different. Shopify doesn't allow any changes of the initial products in the order so purchasing a product with the tier price, creates a discount which applies automatically at checkout.

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_TP_objects.liquid snippet

Open the Snippets folder, locate the snippet named mw_TP_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_TP_objects' %}

Remove it and click Save button.

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

Open one of the mentioned files and remove following tags:

data-mw-tp-variant-id="{{ item.variant.id }}"
<span class="mw-tp-price">{{ item.price | money }}</span>
<span class="mw-tp-line-price">{{ item.line_price | money }}</span>
<span class="mw-tp-cart-subtotal">{{ cart.total_price | money }}</span>

leaving inner content untouched.

For example:

<span class="mw-tp-price">{{ item.price | money }}</span>

becomes

{{ item.price | money }}

Then, remove

<div class="mw-tierprices"></div>

code from the product form. Depending on the theme, you can find it's code in product-form.liquid or product-template.liquid file.

Questions?

For any technical and pre-sale questions, feel free to contact us at apps@mageworx.com.