Step by step instructions on how to add product fees to your Shopify products with Magical Product Fees

This article will walk you through how to install and setup the Magical Product Fees app on your Shopify Store.

App Install Instructions

Installing the app in Shopify is easy.

Click Install on the Magical Product Fees app listing.

App Setup Instructions

After completing the app installation, read the setup instructions to learn how to activate or deactivate the app embed block, add additional app blocks, create, edit, or delete a fee, and apply custom conditions to fees.

Initial App Setup

Setup Instructions

For assistance with setup, contact the Magical Apps team once the app is installed.

The guided setup process within the app ensures the first fee will be active in minutes, not hours. Open the app in within the Shopify store to view the detailed instructions for each of the following steps:

Create fee
Activate app embed block
Activate fees total app block
Disable Dynamic checkout

App Setup Instruction Library

Activate the app embed block

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click the App embeds tab.
  5. Beside Magical Fees, click the toggle to activate it.

Create fee

  1. From your Shopify admin, go to Online Store > Apps.
  2. Select Magical Product Fees.
  3. Click Create fee.
  4. Enter a title and price for the fee.
  5. In the Applies to section, choose one of the following:
    • Select All products to apply this fee to all products.
    • Select Specific collections and check the appropriate collections to apply this fee to products in the selected collections.
    • Select Specific products and check the appropriate products and/or variants to apply this fee to the selected products/variants.
    • Select Custom conditions to and create a custom set of conditions to apply this fee to products matching those conditions.
  6. In the Rules section, choose one of the following:
    • Select Every product to add this fee for every quantity of each matching product in the cart.
    • Select Once per product to add this fee a maximum of one time for each matching product in the cart.
    • Select Once per cart to add this fee a maximum of one time in the cart.
  7. Click Save.

Activate Fees total app block

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Open the drop-down menu at the top of the page.
  4. Select Cart from the dropdown menu.
  5. Click the + Add block or + Add section button depending on where you want the fee total to appear.
  6. From the APPS section, click Fees total to add the block.
  7. Click Save to activate it.

Activate Associated fees app block

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Open the drop-down menu at the top of the page.
  4. Select Products, and then select the product template that you want to edit from the dropdown menu.
  5. Click the + Add block or + Add section button depending on where you want the fee total to appear.
  6. From the APPS section, click Associated fees to add the block.
  7. Click Save to activate it.

Enable Checkout UI extension (Growth Only)

  1. From your Shopify admin, go to Settings > Checkout and accounts.
  2. In the Checkout customization section, click Customize next to the checkout that you want to edit.
  3. Select the checkout page that you want to add an app to at the top menu bar.
  4. Click Add app.
  5. In the Apps available for this page section, click Magical Fees. The app is automatically placed in the recommended area of your checkout.
  6. Click the cog icon to access the Checkout profile settings.
  7. In the Checkout layout section, click the current layout to open the checkout layout options.
  8. Click Three-page checkout if not already selected to set the checkout layout.
  9. Click Save.

Edit fee

  1. From your Shopify admin, go to Online Store > Apps.
  2. Select Magical Product Fees.
  3. Click Edit fee on the fee you would like to edit.
  4. Make any changes to the fee.
  5. Click Save.

Apply custom conditions

  1. Select whether products need to match all conditions or any condition to include this fee.
  2. Click Add condition.
  3. Use the drop-down lists to set the collection conditions.
    • In the first drop-down list, select a condition type.
    • In the second drop-down list, select how a product needs to match the condition to include this fee.
    • Enter a condition value in the third field.
    • If you want to add more than one condition, then click Add condition and repeat the steps.
  4. Click Save.

Delete fee

  1. From your Shopify admin, go to Online Store > Apps.
  2. Select Magical Product Fees.
  3. Click edit fee on the fee you would like to delete.
  4. Click Delete.

Deactivate the app embed block

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click the App embeds tab.
  5. Beside Magical Product Fees, click the toggle to deactivate it.

Add Fees total to theme template

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Actions > Edit code.
  3. Under the Templates header, click into the cart.liquid file.
  4. Locate where you would like the Fees total to appear.
  5. Paste the following code block: <fees-total></fees-total>
  6. Click Save.

Add Associated fees to theme template

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Actions > Edit code.
  3. Under the Templates header, click into the product.liquid file.
  4. Locate where you would like the Assoicated fees to appear.
  5. Paste the following code block: <associated-fees></associated-fees>
  6. Click Save.

Translate or Customize Fee Message with the Theme Editor (Fees total or Associated fees app blocks)

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Open the drop-down menu at the top of the page.
  4. Depending on the message you’d like to customize, select Products (Associated fees app block) or Cart (Fees total app block), and then select the template that you want to edit from the dropdown menu.
  5. Click the name of block you want to edit.
  6. In the information field, input your translated or customized message. Use FEE_TITLE and FEE_PRICE to display the title and price of the fee. For example, on a product page: “This product requires FEE_TITLE. This FEE_PRICE fee will be added to your cart”. Or on the cart page “This cart includes products which require fees of FEES_TOTAL.”
  7. Click Save to publish the change.

Translate or Customize Fee “Associated fees” app block message in theme template

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Actions > Edit code.
  3. Under the Templates header, click into the product.liquid file.
  4. Locate where you would like the Assoicated fees to appear.
  5. Paste the following code block: <associated-fees data-information="This product requires FEE_TITLE. This FEE_PRICE fee will be added to your cart."></associated-fees>
  6. Customize or translate the text in between the ” marks. Do not customize “FEE_TITLE” or “FEE_PRICE”. These are variables that will display the title and price of the fee.
  7. Click Save.

Translate or Customize Fee “Fees total” app block message in theme template

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Actions > Edit code.
  3. Under the Templates header, click into the product.liquid file.
  4. Locate where you would like the Assoicated fees to appear.
  5. Paste the following code block: <fees-total data-information="This cart includes products which require fees of FEES_TOTAL."></fees-total>
  6. Customize or translate the text in between the ” marks. Do not customize “FEES_TOTAL”. This is a variable that will display the total fee amount.
  7. Click Save.

Apply fees in Shopify POS

To apply fees to an order you must add the Apply fee App link to your home screen. Once all items are added to the order, tap the Apply fees tile to add the applicable fees. If an order is updated, tap the Apply fees tile again.

  1. On the home screen of the Shopify POS app, tap Add tile within the grid.
  2. Tap App.
  3. Tap Magical Fees.
  4. Tap Add beside Apply fees.
  5. Tap Save.

Troubleshooting

Read possible solutions to common issues merchants encounter when using the Magical Product Fees app.

I am not seeing the expected fees when I add a product to the cart

  1. Check to ensure that there are fees listed on the Fees page of the app.
  2. Check to ensure that the app embed block is enabled.
  3. If the fee applies to custom conditions, check to ensure that the Products must match option on the fee is not set to all conditions when you meant to match any condition.
  4. If the fee applies to custom conditions, double check that the product matches the conditions set on the fee. Please note that all values are case sensitive. Some common discrepancies may be:
    1. The Product Type condition on the fee does not match the product type set on the product.
    2. The Option Name condition on the fee does not exist on the product.
    3. The Option Value condition on the fee is not the option chosen when adding the product to the cart.
  5. Try uninstalling any unnecessary additional apps installed on your store. Magical Product Fees has known conflicts with other Shopify apps, particularly apps which interact with the cart or checkout. This includes, but is not limited to bundle apps, other fee apps, and upsell apps.

I am not seeing a preview of the fee in the theme editor

The only place where a fee will be visible on your online store is in the cart after you have added a matching product to the cart. You can view a fee in the cart before saving and publishing changes in the theme editor by navigating to a matching product using the search bar and adding that product to your cart. If you are still not seeing a fee in the cart, check the following:

  1. Enable the app embed block before adding the product to the cart.
  2. Refer to the “I am not seeing the expected fees when I add a product to the cart” troubleshooting item to ensure that the fee is matching your product correctly.

I see fees as products on the front-end of the online store

The fees created with Magical Product Fees are created as Shopify products. This is why they may appear on the front-end of your online store.

Fee products are designed to not appear in search results, but may appear in product listing pages. One possible solution to hide it from product listing pages is to create a new collection that includes all products except for products with the “product type” of “fee”. Then, link to that instead of an “all products” collection.

  1. From your Shopify admin, go to Products > Collections.
  2. Click Create Collection.
  3. Name the Collection.
  4. Under Collection type, ensure Automated is selected.
  5. Under Conditions, click the dropdown on the left and select “Product type”
  6. In the second dropdown, select “is not equal to”.
  7. In the third input field, type and select Fee.
  8. Click Save.
  9. Add the link to the Collection anywhere you previously linked to a Collection that showed the fee products on your online store.

Fees are normally charged on my online store, but a small percentage are not charged on orders that they should have been

Under any normal circumstances fees are always attached to the appropriate products if the app was previously configured and tested successfully on your online store.

However, there are outlier instances that may cause fees to not be applied to a small percentage of your orders.

For instance, customers who may have some web development skills may be able to find ways to ‘hack’ the site and force their way to the cart and checkout without the fees attached.

Because of instances like this, it’s impossible to ensure that 100% of fees get added in all circumstances. And there is no way to tell with certainty whether an order without fees that should have them is due to malicious intent from an individual similar to the one described above, or a legitimate glitch from an honest customer.

If the fee normally is charged on your site under normal circumstances, and you are using the Associated fees and/or Fees total app blocks to display the fees on the product and/or cart pages, all customers would see the fees, and know the rules prior to getting to checkout.

Anyone who attempts to circumvent this would then be in violation of your store’s requirements and policies. We would recommend in these cases to cancel the customer’s order and ask them to order again.

If the issue persists, try inquiring with the customer about what they see while checking out. If you cannot resolve the issue directly with the customer, please feel free to reach out to our team and we would be happy to investigate what the cause may be.

Frequently Asked Questions

Discover answers to common questions about the Magical Product Fees app for Shopify.

Read FAQs


Magical Product Fees

The Magical Product Fees app is a fast and easy way to build, customize, and attach fees to products or entire orders.