Product pages - Get customization information for products

TyW
Community Manager
556 38 997

You can collect customization information for products using line item properties. Line item properties are custom form fields that you can add to the product page, allowing customers to make choices or add information about a product. For example, if you offer product engraving, then you can use line item properties to let customers enter the text that they want engraved on the product.

 

custom01.jpg

 

Tip: Line item properties are different from order notes and cart attributes. Order notes, which are available in every free Shopify theme, let you capture special instructions on how to prepare and deliver an order. Cart attributes are specified by customers on the cart page, and are used to record additional information about an entire order.

TyW | Online Community Manager @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Replies 237 (237)
Ishah
Excursionist
19 1 5

Hi Shopify experts/partners

 

Is there an updated tutorial for this for the 2.0 themes ie DAWN. There is no product.customisable.liquid theme to work with. 

Has anybody been able to implement this on DAWN with success pls?

Thank you

 

PaulNewton
Shopify Partner
3385 219 646

@Ishah wrote:

Is there an updated tutorial for this for the 2.0 themes ie DAWN. There is no product.customisable.liquid theme to work with. 


Dawn has a completely different structure.

This is untested but for the product pages with Dawn version2.2.0 try using the custom liquid block to insert the code in the tutorial meant for product pages.

And adding the attribute  form="product-form-{{ section.id }}"  to any form inputs to associate them with the product form

Though be aware that attribute doesn't have universal support work in IE11 https://caniuse.com/form-attribute 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
Anthony_David_
Trailblazer
229 29 89

I have multiple properties on the product page but only the last loop is showing on the cart...

What would be the problem? 

Thanks

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
alarconatelier
Excursionist
13 0 4

@Ishah 

Hello! Were you able to apply the tutorial to Dawn Theme?

 

TealDreams
Tourist
8 0 3

I have spent an entire day trying to figure this out. I have the Dawn theme. There is NO product.liquid page. I have tried everything but I need a custom form on my page and a custom radio button option. The way I have choices for my crochet, means there are a large variety of color combinations, but there aren't actually ANY variants available. When I put the color options, say for something with two colors, they have to pick each one, this would make many variants. But I do not want any variants, just the ability for them to pick a color, two colors, or other information depending on the product.

however on the Dawn theme nothing I have tried works.

sjg22500
New Member
4 0 0

Hello! I followed this step by step and was able to get the text box I was looking for however within the text box I am getting the following text directly under the custom field. This is showing on the website. There is also no longer a "Add to cart button" Can you please help. This is how the code looks

<div class="quick-actions clearfix">
{% if section.settings.show_qty %}
<p class="qty-field">
<label for="product-quantity-{{product.id}}">{{'products.product.quantity' | t}}</label>
<input type="number" id="product-quantity-{{product.id}}" name="quantity" value="1" min="1" />
</p>
{% endif %}
<button type="submit"
class="purchase button{% unless section.settings.show_payment_button %} pulse animated{% endunless %}"
name="add"
<p class="line-item-property__field">
<label for="custom-text">Custom Text</label>
<textarea required class="required" id="custom-text" name="properties[Custom Text]"></textarea>
</p>

id="addToCart-{{ section.id }}"
{% unless current_variant.available %}disabled="disabled"{% endunless %}>
<span id="addToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>

Wilksie81
New Member
2 0 1

In the create custom form fields section.. I set my form field, but when it says copy the generated code and past in the product.liquid file, I’m between the <form> and </form> Tags, I can’t find that section.

is that in the template are  of the new one we added before?? Or in the section area?? 
either way I can’t find it to paste?? 

alarconatelier
Excursionist
13 0 4

Hi guys!

I figured it out how to add that to Dawn Theme.

 

First you create a new Section called "product-customizable-template". Just erase all the code, and copy and paste all the content from "main-product.liquid".

 

Then, if you need the content of the form to show on the product cart page, use this tutorial to add the proper code to the product-customizable-template, instead of the one in the first page of the forum.

 

Then you should create a new Template based on "product" , select JSON option and call it "customizable". Then find the code "main-product" and change it to "product-customizable-template".

 

Then you can select this on "Product Model" on each product page that you want the custom field.

 

I hope it works for you all.

 

Tutorial link> https://github.com/Shopify/dawn/pull/509