How to add custom message with a price?

[blueskies]

Hi my client wants to add a custom message box for specific products which will also show in the cart. She wants to charge $5 for the message as it will be printed onto a card. I am comfortable with creating a separate product template for these products and editing the code but I can’t figure out how to charge for it and how to ensure it appears on the cart too. Or we can use an app? Can anyone help please? We are using Dawn theme.

[Sweet_Savior_3]

Hello

Welcome to Shopify Community.

You can add an additional of $5 product with the main product. This can be custom coded but you will need a dev.

Thanks

[BSSCommerce-HDL]

Hi @blueskies ,

You can try our app: BSS Variant Options, feature Price add-on

It’s quite easy to set up, create a new option set → add price add-on config

The result will be like

Hope this will help

[Easify-Jennifer]

Hi @blueskies

If your goal is to add a custom message box to specific products, charge an extra fee for it, and have the message appear in the cart, then Easify Product Options can handle this quite smoothly.

I’ve created a similar demo to help you better visualize how it works:

• This is the result:

• This is the app setting:

You can simply create a text area option to let customers enter their message directly on the product page. This option can be applied only to selected products, so there’s no need to create separate templates or modify theme code.

To add the $5 fee, just go to Advanced Settings, enable Add price, and enter the corresponding amount. Once set up, the product price will automatically increase whenever the customer uses this option, and the updated price will be clearly reflected on the page.

The message entered by the customer will be saved as a line item property and displayed in the cart along with the product, so you can easily access it later (for example, to print it on a card).

Overall, the setup is straightforward, and the app is designed with a user-friendly interface, making it quick to configure and easy to manage without any coding.

[Parselab_Melissa]

@blueskies

custom message box for specific products

Hi @blueskies,

I hope you are doing well! If you are open to trying a third-party app to add custom message box options for specific products to your product pages, you can try the InkyBay Product Personalizer App.

With Inkybay’s product option feature, you can create a custom message box with a text input field for both short and long text directly on the product pages, allowing customers to type in their personalization details. You can add extra pricing for full text or per character price. All customer inputs are automatically included in the order file generated by Inkybay. Also in the cart, you will get the option details with pricing.

Inkybay also lets you create different product options like swatch image, custom free size option, and display them as drop-down options, radio buttons, swatches, checkboxes, etc. You can even set dynamic pricing for options.

The best part is that no coding is required, and a simple setup. It offers a free 21-day trial so you can explore it and see how it works for your product.

[diego_ezfy]

You don’t need an app.

1. Find the file sections/main-product.liquid
2. Inside this file, find the product tag and add this before the submit button:

 {% if product.tags contains 'custom-message' %}
      <div class="custom-message-field">
        <label for="custom-message">Add a custom message (+$5.00)</label>
        <textarea
          id="custom-message"
          name="properties[Custom Message]"
          rows="3"
          placeholder="Write your message here..."
        ></textarea>
      </div>
    {% endif %}

3. Add the tag "“custom-message” to the products you want this
4. In Shopify admin:

• Create a product called “Custom Message Fee”
• Set the price to $5.00
• Copy its variant ID (found in the URL when editing the variant)
• Set it as “Draft” so customers cannot find it directly

5. Create this file in your theme: assets/custom-message.js and paste this code:

 const messageInput = document.getElementById('custom-message');
    const FEE_VARIANT_ID = 12345678901234; // replace with your actual variant ID

    document.querySelector('form[action="/cart/add"]')?.addEventListener('submit', async function(e) {
      const message = messageInput?.value?.trim();
      if (!message) return;

      e.preventDefault();

      const formData = new FormData(this);
      const items = [
        {
          id: parseInt(formData.get('id')),
          quantity: 1,
          properties: { 'Custom Message': message }
        },
        {
          id: FEE_VARIANT_ID,
          quantity: 1,
          properties: { '_label': 'Custom message fee' } // underscore hides it from cart UI
        }
      ];

      await fetch('/cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ items })
      });

      window.location.href = '/cart';
    });

6. Go to the file theme.liquid

7. Search for and this code ABOVE the line found:

   {{ ‘custom-message.js’ | asset_url | script_tag }}

This should work. If it doesn’t, you may need to add this code to the snippets/cart-line-item.liquid, inside the cart looop:

  {% for property in line_item.properties %}
      {% unless property.first == blank or property.first contains '_' %}
        <p class="cart-item__property">
          <strong>{{ property.first }}:</strong> {{ property.last }}
        </p>
      {% endunless %}
    {% endfor %}

Best,
Diego