Show fee notices on product pages

Add a fee notice to show product fees before customers add an item to their cart. Choose a prominent notice or a simple line of text to match your product page.

Choose a notice

• Fee Notice shows the message in a styled box. You can change its heading, colors, border, and spacing.
• Fee Notice (text-only) adds a simple line of text that follows your theme’s styling.

Both notices remain visible in the theme editor so you can edit them.

Add a fee notice

1. From Shopify Admin, go to Online Store → Themes.
2. Find the theme you want to edit and select Customize.
3. Open the product template used by the relevant products.
4. Under Product information, select Add block.
5. Choose Fee Notice or Fee Notice (text-only).
6. Move the block near the product price or buy button, then select Save.

×

Add either FeeBee block under Product information and place it where customers will see it before purchasing.

Show the fee amount

Write a short message that explains the charge. Add :amount where you want the fee value to appear.

For example, Bottle deposit: :amount could appear as Bottle deposit: €0.25. If several product fees apply, :amount shows their combined amount for one unit of the selected variant. The amount updates when the customer selects another variant.

Match the notice to your theme

Select the Fee Notice block in the theme editor to adjust its appearance. The block settings let you change:

• The message and heading
• The border radius and spacing above or below the notice
• The text, heading, background, and border colors

Start with these settings. They cover the most common changes without editing your theme code.

.cdl-fee-notice-wrapper .cdl-fee-notice__title {
font-size: 1rem;
}

.cdl-fee-notice-wrapper .cdl-fee-notice__content {
padding: 1rem;
}

.cdl-fee-notice-wrapper .cdl-fee-notice__text {
line-height: 1.5;
}

.cdl-fee-text-wrapper {
display: block;
padding: 0.75rem 1rem;
border: 1px solid currentColor;
border-radius: 0.5rem;
}