The Checkout UI Extension is a Growth Plan feature for Shopify Plus stores. It shows fees natively inside Shopify's checkout — no theme hacks, no cart scripts. Fees appear in the order summary, work with Shop Pay, and support order total fees and location-based rules. This guide explains how it works, how to enable it, and how to fix common issues.
Requirements
- Magical Fees Growth Plan
- Shopify Plus (Checkout UI extensions are Plus-only)
If you're on the Starter Plan or standard Shopify, fees still work via the theme app embed, but you won't have the extension.
Quick Setup
- In Shopify admin, go to Settings > Checkout.
- Under Checkout customization, click Customize next to the checkout you want to edit.
- Open the Checkout page in the top menu.
- In the Order summary section, click Add block.
- Select Magical Product Fees.
- Click the Magical Product Fees block in the left panel.
- Under Checkout behavior, enable:
- Include app block in Shop Pay
- Allow app to block checkout
- Click Save.
For the full Growth Plan setup (including fee rules and app embed), see the Growth Plan setup guide.
Include App Block in Shop Pay
Shop Pay is Shopify's accelerated checkout. Customers who use it skip part of the standard checkout flow. If the Magical Fees block isn't included in Shop Pay, those customers may reach payment without fees being applied.
Enable this option so fees are calculated and shown when customers checkout with Shop Pay. Otherwise, Shop Pay orders can bypass your fee rules.
Allow App to Block Checkout
When enabled, the app can pause checkout until certain conditions are met. That includes:
- Consent for payment method fees — If you charge a credit card surcharge, the app needs to show disclosure and get consent before the customer pays. Blocking checkout ensures they see the fee and agree before completing the order.
- Fee validation — If a required fee is missing (e.g. the cart changed and a fee didn't apply correctly), the app can block checkout and show a message instead of letting the order go through without the fee.
You should enable this for credit card surcharges, PayPal fees, or any fee where consent or validation matters. If you only have simple product fees with no consent flow, it still doesn't hurt — and it protects you if something goes wrong.
Where to Place the Block
Shopify suggests placing the app block in the Order summary section. That's where customers see the cart breakdown, and it's where fees fit naturally. You can move the block, but keeping it in Order summary is recommended.
Troubleshooting
"Required fee is missing" at checkout
If a customer sees a message like "Required fee 'X' is missing. Please try again later", the app's checkout validation is blocking the order because a fee that should apply didn't.
Common causes:
- Dynamic checkout buttons — Shop Pay or Buy Now buttons on the product page can bypass the normal cart flow. Disable dynamic checkout buttons on product templates that have fees. See Hide Dynamic Checkout Buttons when Fees Apply.
- Shop Pay block not enabled — If "Include app block in Shop Pay" is off, Shop Pay orders may not get fees. Turn it on.
- Mismatched conditions — The fee's conditions (products, location, customer tags) might not match the cart. Check your fee rules.
If you're sure the validation is wrong (e.g. a fee shouldn't apply but the app thinks it does), you can turn off Validate fees at checkout in Magical Fees > Settings > Checkout. Use that only if you've verified the behavior — otherwise you risk orders going through without required fees.
Fees don't show in Shop Pay
Make sure Include app block in Shop Pay is enabled. If it's off, Shop Pay orders won't include the extension.
Extension not appearing
- Confirm you're on Shopify Plus.
- Confirm you're on the Magical Fees Growth Plan.
- In the checkout editor, confirm the Magical Product Fees block is added and not hidden by a condition.
- Clear cache and test in an incognito window.
Related Guides
- Growth Plan setup — Full setup including the extension
- How to disable dynamic checkout buttons — When fees don't apply
- Why do I get fees are missing at checkout? — Validation and how to turn it off
Always label deposits separately for compliance
Display bottle deposit fees as a clearly labeled, separate line item at checkout and on receipts. This meets regulatory transparency requirements, builds customer trust by showing exactly what they're paying, and makes it significantly easier to track deposits for reporting and audits. Use a clear label like "Bottle deposit" or "Container deposit (CRV)" so customers immediately understand the charge.
“Magical Fees is the only fee app that allows you to apply a fee based on a specific or individual state/province situation. All the other apps we tested only allow 'Location' (the entire country) which is a major limitation. The solution Magical Fees applies during the Cart to Checkout process is very smart and not a hassle. Very easy app to setup and the support was great.”