Custom Liquid in Product and Cart

Topic summary

A developer is implementing custom embroidery options (no embroidery, name/surname, or logo with name/surname) on a Shopify product page, each with different pricing. They’ve added radio buttons and checkboxes using the properties attribute to capture selections.

Current Challenge:

  • Dynamically updating the product’s total price on the product page when customers select embroidery options
  • Ensuring the updated price carries through to the cart

Suggested Solution:
Another user recommends using line item properties combined with:

  • jQuery for real-time price updates on the product page
  • Cart Transform API to adjust pricing when items are added to cart and during checkout

The discussion remains open, awaiting confirmation on implementation approach or additional guidance.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.

Question: I’m working on a Shopify store where I need to add custom options for embroidery to the products. I have successfully added checkboxes and radio buttons for the customers to choose:

  1. No Embroidery (default option)
  2. Embroidery with Name and Surname
  3. Embroidery with Logo, Name, and Surname

Each option has an additional cost. The challenge I’m facing is how to dynamically update the total product price based on the selected embroidery option before adding the product to the cart.

Here’s what I’ve done so far:

  • I’ve added the radio buttons and checkboxes to the product page.
  • I’m using the properties attribute to capture the custom input.

What I need help with:

  • How to correctly update the product’s total price on the product page as the customer selects different embroidery options.
  • Ensuring the updated price reflects in the cart when the product is added.

Could someone guide me on how to implement this or provide any examples or best practices for handling such custom product options in Shopify?

1 Like

How did you create these additional fields? Are you using line item properties?

If you’re using line item properties, you can update the product price on the product page, cart, and checkout. On the product page, you can use jQuery to dynamically update the price based on the selected options. For the cart and checkout, you can use the Cart Transform API — this allows you to capture the user’s selected options and adjust the product price accordingly when the item is added to the cart.

Hi @mpinillad :raising_hands:

You can easily set up embroidery options with Easify Product Options — no coding required. The app allows you to add choices like “No Embroidery”, “Name Embroidery” (+$5), or “Logo, Name & Surname Embroidery” (+$8), and it automatically updates the product price as customers make their selections.

Here’s an example I’ve created so you can see how it works:

  • This is the result:

  • This is the app setting:

In the Price section (the add-on price), simply input the amount you’d like to charge for that option.

The app also includes conditional logic, allowing you to control which add-on options are displayed based on the customer’s selections.

For example, if a customer chooses “Embroidery with Name and Surname”, only the options related to that embroidery type will appear; similarly, selecting “No Embroidery” or “Embroidery with Logo, Name, and Surname” will automatically show the corresponding options.

If you’d like the total product price on the product page to update automatically as customers select different embroidery options, simply go to Advanced Settings and enable “Update product price based on selected options.”

This app is very easy to use and works perfectly for customizable products. If you ever need any help, the Easify team is always happy to assist you! :blush: