Skip to main content

Custom Option Add-on Fees

This feature allows you to automatically add fee products to the cart when customers select certain product customization options.

How It Works​

When a customer adds a product to cart with custom options that have fees enabled, the system automatically adds the associated fee products to the cart with hidden properties linking them to the parent product.

Setup Steps​

1. Create Fee Products​

First, create products in Shopify to represent your fees:

  1. Go to Products → Add product
  2. Create a product for each type of fee (e.g., "Custom Text Fee - $3", "Premium Fabric Fee - $5")
  3. Set the price to the fee amount
  4. Mark as Draft or use a tag like addon-fee to hide from main catalog
  5. Note the product handle (found in the URL: /products/your-handle)
    • Example: If URL is /products/custom-text-fee, the handle is custom-text-fee
    • This is the URL-friendly version of the product title

2. Configure Block Fees​

For each custom option block that should have a fee:

For Text Fields & Checkboxes (product-custom-property)​

  1. Add the block to your product template
  2. In the block settings, scroll to Add-on Fee section
  3. Enable "Enable add-on fee"
  4. Enter the fee product handle (e.g., custom-text-fee)
  5. Result: Fee added when text is entered or checkbox is checked

For Dropdowns (product-custom-select)​

  1. Add the block to your product template
  2. In block settings, enable "Enable option-specific fees"
  3. In the "Option fees configuration" textarea, add one line per option that has a fee: 
    Option A|fee-product-handle
    Option B|another-fee-handle
  4. Result: Fee added when specific option is selected

For Checkbox Groups (product-custom-multiselect)​

  1. Add the block to your product template
  2. Enable "Enable option-specific fees"
  3. Configure option fees (same format as dropdowns): 
    Option A|fee-product-handle
    Option B|another-fee-handle
  4. Result: Separate fee added for each checked option that has a fee

For Swatches (product-swatch-group)​

  1. Add the block to your product template
  2. Enable "Enable option-specific fees"
  3. Configure option fees using the exact swatch names: 
    Demo 1|fee-product-handle
    Navy Blue|premium-color-fee
  4. Result: Fee added when swatch is selected (radio) or for each checked swatch (checkbox mode)

For File Uploads (product-file-upload)​

  1. Add the block to your product template
  2. Enable "Enable add-on fee"
  3. Enter the fee product handle (e.g., file-upload-fee)
  4. Result: Fee added when file is uploaded

Configuration Format​

Finding Product Handles​

To find a product's handle:

  1. Go to Products in Shopify admin
  2. Click on the fee product
  3. Look at the URL in your browser: https://admin.shopify.com/store/YOUR-STORE/products/THE-HANDLE
  4. The handle is the last part after /products/
  5. Or check the product's "Search engine listing preview" section in the admin

Example handles:

  • custom-text-fee
  • premium-fabric-addon
  • file-upload-processing-fee

Option-Specific Fees (Dropdowns, Checkboxes, Swatches)​

Format: Option Name|product-handle

Important Notes:

  • One option per line
  • Option names are case-insensitive
  • Option names are trimmed of whitespace
  • Use the exact option text as shown to customers
  • Product handle is the URL-friendly version (lowercase, hyphens instead of spaces)

Example:

Red|color-addon-fee
Blue|color-addon-fee
Navy Blue|premium-color-fee
Custom Color|custom-color-fee

Fee Product Behavior​

Properties Added to Fee Products​

Fee products are automatically tagged with hidden properties that link them to the parent product:

  • _fee_for_product - The product ID that triggered the fee
  • _fee_for_option - The option that has the fee (e.g., "Custom Color")
  • _fee_for_value - The specific value selected (e.g., "Navy Blue")
  • _is_addon_fee - Marks this as a fee product (always "true")

These properties help you identify and manage fee products in your cart and orders.

Cart Display​

Fee products will appear as separate line items in the cart. They can be:

  1. Styled differently to visually distinguish them from regular products
  2. Grouped with the parent product for better organization
  3. Hidden entirely (though showing transparency is recommended for customer trust)

Removing Fees​

Fee products are independent line items. If customers:

  • Remove the parent product → fees remain (merchant should handle this in cart)
  • Change options → old fees remain, new fees are added

Recommendation: Add cart validation or customer messaging about fees.

Important Notes​

Fee Display​

The fee amount automatically displays next to options when you configure fees. The block will fetch the fee product's price and show it inline with the option (e.g., "Premium Color (+$5.00)").

Testing Checklist​

  • Fee product created and handle noted
  • Block configured with correct fee settings
  • Add product with option to cart
  • Verify fee product appears in cart
  • Check cart properties show correct linking
  • Test with multiple options
  • Test conditional display (if enabled)
  • Verify fee is NOT added when option not selected

Troubleshooting​

Fee Not Added​

  1. Check browser console for errors
  2. Verify fee product handle is correct
  3. Ensure option name matches exactly (case-insensitive)
  4. Check that fee product has variants available

Wrong Fee Added​

  1. Verify option name spelling
  2. Check for duplicate option names
  3. Review fee configuration format

Fee Added Multiple Times​

  1. This is expected behavior for checkbox groups
  2. Each selected option with a fee gets its own fee product

See also: