PLEASE HELP - How do I add 'render' liquid to add to cart button in Dawn 10.0 ???

[johnlfitz01]

Hi,
I'm scratching my head here.

On www.giftsfinder.co.uk, we sell personalised products. I want to move to Dawn theme given it's speed.

In my current (live) theme, I inject the following liquid into the "product-form.liquid" in order to capture the customer's photo uploads and / or personalisation text for that given product:

{% render 'personalisation' %}

I can't work out where the equivalent place to enter the same code in the Dawn Theme 10.0.
Whenever I attempt to use the above render code nothing happens???

Some examples of how this renders in live can be seen at:
https://www.giftsfinder.co.uk/products/personalised-grey-pawprint-name-14cm-medium-pet-bowl
https://www.giftsfinder.co.uk/products/2024-personalised-photo-calendar
https://www.giftsfinder.co.uk/products/personalised-best-ever-photo-upload-mug

I'm stumped.

Any ideas? Much appreciated.

The 'personalisation.liquid' code is attached.

personalisation.txt

[johnlfitz01]

Nobody ?

[PaulNewton]

@johnlfitz01 you'd put this either in the buy-buttons, or more sanely create this a block for the main-product section.
And in that block pass in a reference the form id as the value for your personalization's inputs form attribute.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#form

i.e. every input would need it

<input
  form="FORMID"
  id="Name"
  type="text"
  name="properties[Name]"
>

product_form_id variable https://github.com/Shopify/dawn/blob/main/sections/main-product.liquid#L77
The buy-buttons rendered with prodoct_form_id https://github.com/Shopify/dawn/blob/main/sections/main-product.liquid#L426
https://github.com/Shopify/dawn/blob/main/snippets/buy-buttons.liquid#L47

[rsusano]

Hi! In Dawn 10+, the key is that your personalization inputs must be rendered inside the same Shopify

that Dawn uses for the product purchase, so the inputs submit with the Add to Cart.

The practical approach is:

1. Put {% render 'personalisation' %} inside Dawn’s buy-buttons/form area (typically via snippets/buy-buttons.liquid), where product_form_id is available.
2. Pass the form id into your snippet, and then ensure your snippet’s inputs use the form="{{ form_id }}" attribute.

Example idea:

• In snippets/buy-buttons.liquid:
  {% render 'personalisation', form_id: product_form_id %}
• In snippets/personalisation.liquid:
  <input ... form="{{ form_id }}" name="properties[YourField]" ...>

Also ensure the input names are properties[...] so Shopify saves them as line item properties.