Skip to content

Order & Product Fees

Shopify Order & Product Fees App

Help

This app comes with FREE installation by the MageWorx Shopify professionals. All you need to do to get the app on your store is to submit a request by hitting the button below. Please, bear in mind that usually, we install the app within 24 hours (on business days). Alternatively, you can install the extension on your own, following the instructions in this user guide.

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

Edit Templates files

Edit cart.liquid

Open the Templates folder, and click the cart.liquid (or cart-template.liquid) file. You will need to change 4 things. Let's go through them one by one.

I Locate the piece of code responsible for displaying products in the cart. In the default theme, the code will look like:

{% for item in cart.items %}
...
{% endfor %}

Order & Product Fees Installation

After the line:

{% for item in cart.items %}

enter:

{% if item.product.type  == 'mw_hidden_cart_fee' %}{% continue %}{% endif %}

II In the same file, locate subtotal cart block:

<span class="cart__subtotal-title">{{ 'cart.general.subtotal' | t }}</span>

and replace it with:

<span class="mw-hidden-fees"></span>
<span class="cart__subtotal-title">{{ 'cart.general.subtotal' | t }}</span>

Order & Product Fees Installation

III Anywhere in this file, enter:

{% if item.product.type != 'Product Fee' %} <span class="mw-product-fees" data-id="{{ item.id }}"></span> {% endif %}

IV In the same file, locate this block:

{% if settings.cart_notes_enable %}
  {% assign noteSize = cart.note | size %}
  <div class="grid__item large--five-twelfths">
    <button type="button" class="text-link cart__note-add{% if noteSize > 0 %} is-hidden{% endif %}">
      {{ 'cart.label.add_note' | t }}
    </button>
    <div class="cart__note{% if noteSize > 0 %} is-active{% endif %}">
      <label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
      <textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
    </div>
  </div>
{% endif %}

After it, enter the code:

<span class="mw-cart-fees"></span>

That's all the fixes that you should do to implement the app on your website.

Extra Edits

Please note that these edits are needed in case you choose the theme after the installation of the app, because if you've installed the theme and then added the app (the default use case), these files will be added automatically. If that is exactly your case, please go to the next section. Otherwise, please follow these instructions:

Add mw_fees_objects snippet

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

Fill it in with the code from below:

{% capture itemProducts %}{% for item in cart.items %}{{ item.product | json}}{% if forloop.last == false %}^|^MW^|^{% endif %}{% endfor %}{% endcapture %}
{% assign itemProducts = itemProducts | split: "^|^MW^|^" %}
<script type="text/javascript">
  window.mwProductFeesObjects = {
  product: {{ product | json }},
  cartItemsProduct: {{ itemProducts | json }},
  cart: {{ cart | json }},
  customerTags: {{ customer.tags | 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>

When done, click Save.

Edit theme.liquid layout

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

Before the line:

</body>

enter:

{% include 'mw_fees_objects' %}

Product & Order Fees

The app lets you create an unlimited number of the additional fees or charges and add them to any product in your store. You can include anything your customers may need to order such as:

  • personalized options (e.g. installation, upgrade, premium version)
  • rush delivery
  • gift wrap
  • some personalized print-out (images,photos,text) and others.

You can add the fees to some product or to the whole cart. The app lets you define a price of any product option. Product fee price can be set either as fixed ( so that you define the exact value) or percentage (the amount is calculated on the product price basis).

On the frontend, the fees can be shown in almost any design principle that is available in Shopify: checkboxes, dropdowns, radio buttons etc. The fee can be hidden so that the customer wouldn't be able to uncheck it.

Order & Product Fees

This screenshot shows the demo cart page with several fees: the checkbox and the radio button. The product fees can be applied per product. The cart fee (Add Insurance dropbox) handles the full cart. The hidden fee (Processing fee) cannot be unchecked.

Order & Product Fees

When the customer adds several fees, they are shown as the separate products. Adding these fees to the cart automatically creates the temporary products in the backend. They are available within 30 days. These temporary products have the special product type and vendor:

Order & Product Fees

You can display/hide product fees on the front-end only when certain conditions are met. Product fee conditions can be based on product attributes such as product type, price, SKU, weight etc.

Adding a New Fee

To create, view, edit or delete the fees, please, go to Apps > Order & Product Fees.

Order & Product Fees

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

You can easily filter all the fees to find the one that you need if the list is very long.

To create a new fee, click the Create New Fee button. The fee configuration consists of three tabs: General Information, Fee Options, and Conditions.

General Information

Order & Product Fees

Fee name is the title of the fee. It will be visible on the frontend and after the fee is added, it will be populated as the product name.

For the Fee type, you can select whether the fee will be applied to a separate product in the cart, or to the full cart subtotal.

Condition type provides the possibility to choose whether the fee should be applied if ANY of the created conditions are met (OR condition); or if ALL the created conditions are true (AND condition).

Is Onetime. If this setting is enabled, the fee will be applied to ALL product quantities in the cart; if it is disabled, the fee will be applied to EVERY product quantity that is added to cart. For instance, this setting is disabled, the fee is the Gift Wrap for the iPhone X. If the customer added 3 iPhones to the cart, there would be 3 separate gift wrap products; if the setting is enabled - it will be only one Gift Wrap.

For the Is not taxable setting you can define whether to make the fee subject to tax or not.

Input type manages the way how to display the fee options:

Order & Product Fees

This screenshot shows all the possible input types available in our extension.

iPhone X Fees

The Add Gift Wrap fee is the checkbox.

The Extra Features is the radio button.

Cart Fees

The Add Insurance fee is the dropdown.

The Text to Be Engraved is the text input type. This type allows adding some personalization, like a personal message on a gift wrap or some engravement.

The Select the desired date for the rush delivery setting is the date input type. This can be used to define the time frames when implementing rush delivery.

The Processing Fee is the hidden fee. This can be useful for some mandatory regulator's fees like the recycle fee, local or state fees etc. The customer doesn't have the possibility to remove such fee.

Order & Product Fees

Is Required if set to Yes, selecting the fee becomes mandatory for proceeding to the checkout.

The Status configuration allows you to activate/deactivate the fee.

Due to Shopify limitations, each new fee is created as a separate product item. The Requires Shipping featurs lets you make these items shippable.

This is necessary to correctly process orders that require shipping.

The Country setting shows this particular fee for some specific country.

Fee Options

Order & Product Fees

First of all, you need to click the Add Option button.

Next, add the fee option’s Name and Price. Note that the price can be set either to fixed or percent. In the former case, you specify a flat amount, e.g., $10, while in the latter one, you set a percent fee, e.g., 3% from the cart subtotal.

Also, under these settings, you need to specify the fee option’s SKU, add its Image (it will be actually visible in the cart after the fee is added), set some option fee as the Default and define the fee’s Sorting order.

Conditions

Order & Product Fees

By creating conditions for your fees, you can:

  • display fees depending on the product characteristics (product’s type, vendor, weight, price, SKU, title etc.)
  • show fees depending on the cart subtotal or the total quantity of items added to cart
  • customize your offers according to the segmented lists of customers (customers with tags).

These conditions will work on the AND/OR principle.

Configuration

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

This workspace consists of 3 tabs.

General Settings

Order & Product Fees

This setting allows to choose whether fees will affect the cart total or not.

Translations

Order & Product Fees

These settings provide the possibility to change the translations. The app supports variables. {{FEE_OPTION_NAME}} is the name of the option that is provided in the fee configuration. {{PRODUCT_NAME}} is the name of the product.

Advanced Settings

Order & Product Fees

These settings allow to tweak the values for some selectors. This information is set mainly for our debug so please handle these settings with care as the incorrect configuration may lead to the problems with the website.

Depending on the theme, these modifications may vary.

Theme Name Product Form Filename Form Code Add To Cart Button Selector Cart Count Selector
Narrative product-form.liquid {% form 'product', product, class:'product-form' %} .product__add-to-cart-button -
Minimal product-template.liquid {% form 'product', product, class:productform_class %} #AddToCart .cart-count
Debut product-template.liquid {% form 'product', product, class:form_classes %} #AddToCart-product-template .site-header__cart-count span:first
Supply product-template.liquid {% form 'product', product, class:form_class, id:form_id %} #addToCart-product-template .cart-count
Boundless product-template.liquid {% form 'product', product, id:form_id, class:form_class %} #AddToCart-product-template -
Pop product-template.liquid {% form 'product', product, id:form_id %} #addToCart-product-template #cartCount
Simple product-template.liquid {% form 'product', product, class:'product-form' %} #AddToCart #CartCount
Venture product-template.liquid {% form 'product', product, class:form_class, id:form_id %} #AddToCart-product-template -
Jumpstart product-template.liquid {% form 'product', product %} #AddToCart-product-template .btn__cart .icon
Brooklyn product-template.liquid {% form 'product', product, class:'product-form' %} #AddToCart--product-template -

Questions?

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