Product line items using custom liquid boxes in Studio Theme 2.0

Technical Q&A
1

Hi,

I’ve been trying to add in required field line item boxes via the 2.0 theme “Custom Liquid” boxes but I’m not having much luck. Is this possible or do you have to hard code it into the page theme itself?

Code generated from the below suggested UI Elements Gen don’t work, they show up but even with required ticked and show in cart, it still lets you add to cart with blank fields and doesn’t show them in my cart:

https://ui-elements-generator.myshopify.com/

Suggested here: https://community.shopify.com/topic/616503

Any help with this would be massively appreciated as the custom liquid boxes seemed like a great idea, especially with how easy it is to add it into the product pages.

Shop link: https://reading-rabbits.myshopify.com/

The code I’m trying to use (which seems more up-to-date than the UI Gen stuff:

{% form 'product', product, class:productform_class %}
  

KR,
RSummers
2 Likes
2

@RSummers

sorry bt i can’t see any product that code can you please show me and share particular product url

3

Here’s a link:

https://readingrabbits.co.uk/products/bunny-hops-wednesday-9-45am-6-weeks

They’re used on the default product pages used with the lessons.

4

I have the same issue. Hopefully, someone could help resolve this for us. :slightly_smiling_face:

5

I found a solution here: How to set up custom and personalized products on Shopify (free) - YouTube.

Hope it helps you as well!

1 Like
6

@BadDogInc @RSummers

yes please try it

1 Like
7

The “fix” of deleting the “novalidate” from the buy button doesn’t seem to work, also adding in the code instead of using a custom_liquid box using required attributes also doesn’t work.

@KetanKumar can you see anything, from the page I linked, where I might be going wrong?

8

@BadDogInc I found another fix that worked for me in the end.

I used the below tutorial and then edited it to my needs. Basically using order notes on the product page instead of line items. At the very end I’ll paste the code I used in our site, but I used F12 in chrome (element viewer) to get it to look right for the page, slowly editing each part. Works perfectly in a custom liquid 2/0 editor box and you can repeat it if you’re needing to capture a few things. Natively shows up in the cart for me in Studio.

Tutorial: https://www.youtube.com/watch?v=XLawTkil9I4

His site: https://ed.codes/blogs/tutorials/add-a-gift-note-engraving-field-to-products-in-dawn-theme-shopify-2-0

My final Code: