Re: Product pages - Get customization information for products

Product pages - Get customization information for products

TyW
Community Manager
458 68 1220

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 280 (280)

B_R-25
Shopify Partner
65 1 6

Hello @TyW and thanks for your tutorial!

I have a problem finding the {{ line.title }}, i can only find on my template  {% assign line_title = line.title %} or

 <span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>

I never modified email template so it's standard format.

Anyone can help?

Thanks

 

how customizations in email templates

 

 

You can optionally also display line item properties in email notifications. This will let customers see their product customizations when they receive an email about their order.

 

  1. From your Shopify admin, go to Settings > Notifications.
  2. Click the name of the notification template that you want to add line item properties to.
  3. Find the following code:

    {{ line.title }}

    Replace it with:

    {{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}

     

  4. Click Save.
  5. Repeat these steps for any other email notifications that you want to include line item properties.

 

 

B_R-25
Shopify Partner
65 1 6

SOLVED 😉 

I customized the template replacing here {{ line_title }}

 

<span class="order-list__item-title">{{ line_title }} × {{ line_display }}<

 


@B_R-25 wrote:

Hello @TyW and thanks for your tutorial!

I have a problem finding the {{ line.title }}, i can only find on my template  {% assign line_title = line.title %} or

 <span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>

I never modified email template so it's standard format.

Anyone can help?

Thanks

 

how customizations in email templates

 

 

You can optionally also display line item properties in email notifications. This will let customers see their product customizations when they receive an email about their order.

 

  1. From your Shopify admin, go to Settings > Notifications.
  2. Click the name of the notification template that you want to add line item properties to.
  3. Find the following code:

    {{ line.title }}

    Replace it with:

    {{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }}: {{ p.last }}{% endunless %}{% endfor %}

     

  4. Click Save.
  5. Repeat these steps for any other email notifications that you want to include line item properties.

 

 


 

shrishtib
Tourist
9 0 4

What did you replace {{ line_title }} with?  I have similar code in my Order Confirmation Notification. 

 

Did you updated code look like below?


<span class="order-list__item-title">{{ line.title }}{% for p in line.properties %}{% unless p.last == blank %} - {{ p.first }} × {{ line_display }}</span><br/>

wavey
Visitor
1 0 1

Hi,

 

I was able to successfully add the custom form in the cart.

 

But when the order is placed, on the admin side, I not able to see what the customer has inputted. 

Thanks for you help.

LobnaHegazy
Tourist
3 0 1

I have the same problem, did you find a solution?

Rotem84
Visitor
2 0 0

karbogllc
Tourist
3 0 1

i have a question. if i want it to calculate amount of each latter in the text box, how to do that ?

like 1 inital 10$

2 initial 20$

jonas9495
Tourist
7 0 0

Hi,

I am also looking for a way to adjust the price, based on the measurement-input of the customer.

For example:

100cm x 100cm = 100€

200cm x 100cm = 200€

200cm x 200cm = 400€

 

Can anyone help with that, please?

Thanks in advance.

shrishtib
Tourist
9 0 4

I think variants are your best bet if there are a limited number of options with different pricing.  Checkout  https://help.shopify.com/en/manual/products/variants/add-variants

 

If you still want to use custom form fields with differential pricing you can use a paid app like Infinite Product Options from the app store

shrishtib
Tourist
9 0 4

The code works well in collecting information on Product page and even works to have customization info mandatory i.e. it will not add to cart if it the info is not given.  But when someone clicks But it Now (dynamic checkout) the custom info is not required.  How do I make it mandatory for Buy It Now also?

LuckyNigam
Pathfinder
142 8 14

Hi 

 

As per your query, buy now button comes from the shopify and there is no handle to prevent on this so we can create an other buy it now button which will work same as dynamic checkout button. 

 

Thanks and regards

LuckyNigam

 

Robinson79
Visitor
1 0 0

I'm using booster theme and i can not see the note in cart page. I did right step by step in tuts. How i can turn off ajax cart on booster theme 2.0. Or add a cart type to choose drawer option. help me. Thank you so much.

shrishtib
Tourist
9 0 4

Any examples of how to go about doing that? Would you be able to help with the code?

LuckyNigam
Pathfinder
142 8 14

Hi @shrishtib 

 

I'm creating an other button on my demo store ( please see : https://easycrashstore.myshopify.com/products/new-product-title) that works same like buy it now button. you can check on this demo store if the input box is empty then showing an alert otherwise go on checkout directly.

for further help you can contact with me on skype.

 

Thanks and regards

LuckyNigam

shrishtib
Tourist
9 0 4

Thanks. I saw the button on demo store. It works well. Can you share the code for that so I can add it to my store's product pages as well? How do I contact you via skype?

KayleighsCC
Visitor
1 0 0

Okay I followed the directions but when I go to add the custom form fields I don't have type="submit" in my code...?

 

 

DIZZYBEATSS
Excursionist
28 3 5

@KayleighsCC wrote:

Okay I followed the directions but when I go to add the custom form fields I don't have type="submit" in my code...?

 

 


You can find that one in your product-template.liquid!

Tricia88
Visitor
1 0 0
I’m trying to a product line on 3 of my items where customer can type in a business name. We are doing a tshirt fundraiser and $10 from each shirt sale will go directly back to business of their choice. Way I have it set up now is that they put notes in shopping cart but it would be much nicer if they could just put in on product page

Chetankm
Visitor
3 0 0

Hi,

Thank you for the tips.  I was able to add the Short Text Field.  But after a customer writes fill the special instructions and completes the order.  The special instructions does not come in the email confirmation we receive.  How can this be resolved.

Will appreciate your help.

Thanks

Chetan

PaulNewton
Shopify Partner
6452 587 1369

Make sure your notification templates refe

{{ attributes.NEWFIELDNAME }}

rence that new field you added and how.

Cart attributes 

When in an order context with liquid just use {{ note }} not order.note

 

Or if you used LIP's https://shopify.dev/docs/themes/liquid/reference/objects/line_item#line_item-properties

remember the difference between line_items and line_item a common typo

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


stickerboutique
Visitor
1 0 0

So it's the year 2020, and I have a sectioned shopify account set up. I need to add custom fields, which I had no issue doing.  My only issue was when I said this is a required field. It still let me bypass and put it into cart without a pop up coming up?

 

Any ideas why?

Liam_Elder
Excursionist
15 0 40

I have implemented this and its all working. Still need to tweak a little to make them mandatory etc.

The issue I am having is with the upload file function. It works, however, when a customer uploads an image and we get it in the order. Its a webp file and is majorly compressed beyond usability. Is there any way to stop the compression etc so we can get a usable image from the customer?

 

PaulNewton
Shopify Partner
6452 587 1369

@Liam_Elder This is due to a previous advancement https://changelog.shopify.com/posts/online-stores-automatically-serve-webp-images

  1. Do a test order and verify it's not something the customer is doing unknowingly for the image size.
  2. Normally when you click the thumb, in the orders page, for a file upload image it should then automatically download a normal sized version in WebP format.
  3. If it seems corrupted you may have download the small thumb, outdated software, or just need to use a utility to convert it to png.
  4. If you are clicking the small thumbnail and choosing 'Save Image as' what you want to do instead is right click and choose 'Save link as' that will let save it as a jpeg if that's what was uploaded.
    1. Some browsers will also let you change the image type in the save dialog.
  5. Copy the link and append the url with ?format=jpeg
  6. Alternatively use a browser that doesn't support WebP , such as safari for macOS, and it will just download as a jpeg.

If none of the above work and WebP is compression images too badly then contact shopify support and let them know about this limitation.

Beyond that for the future you will want to make losslessly converting WebP into the desired format part of your image processing pipeline

 

 

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Liam_Elder
Excursionist
15 0 40

@PaulNewton

Thanks for this. I may have been a Mac problem. Circumnavigated by your 'Save link as' Method. It works just fine on Windows both ways.

 

 

TheUnusualPear
Visitor
1 0 0

Hey! 

I tried to do this but I couldn't find type="submit" in my code. I have a paid app currently to give me this custom text box. Do I need to remove the app and try again? 

Thanks

Rainie 

BluePearlStone
Tourist
14 0 4

Thanks for the reply, but I am trying to put the information in on the seller's end. We are using multivendor marketplace, and we have multiple sellers. I want to make sure they all include the correct information about their listed products, but I don't know how to add more fields for sellers to fill out.

Andree1111
Visitor
2 0 0

Hello,

 

I made it work on my product page and I can see the "Engraving" Section on my product page however, after receiving the order, I cant see it in my order details so I dont know where does this section locate to when customers fill it in. 

Can anyone help me with that as well ? 

 

P.s. I have done everything with the Carts and updated the necessary codes.

 

Please i need help, i don’t know where else to serch to look up 

Zavi
Visitor
1 0 0

Hi, I followed your steps and I was able to create the personalized option for customers. However, when I test an order, the personalized text didn't show at the checkout. I wouldn't know what customers want to engrave then as I didn't see any info. What should I do to fix it? Thanks.

 

harsh28
New Member
7 0 0

Thanks, but any idea why shopify deleted this tutorial on their help page?

 

Andree1111
Visitor
2 0 0
Yes, because it doesn't work at all.

dwebster0521
Visitor
1 0 0

I am attempting to use this code in the Minimal them, but I am unable to get the field to display. I also do not have the /form tags on the product.liquid. Can you please help me locate where I need to add this code if I want it directly above the add to cart button? 

ShannonNCS
Visitor
1 0 0

The instructions you provided work great when the Shopify interface is used for the shopping experience.  We have embedded the products directly into our website.  How do we get the new product fields to show up for the embedded products?

FionaV
Visitor
1 0 0

Hi all,

New to Shopify but understand JavaScript and HTML coding. A potentially really useful post unfortunately I have gotten as far as the 'Add Custom Form fields' and can't get any further. I am using the Debut Theme and I can't find any related code to  type="submit" anywhere in any of the Template or Snippet files.  In fact very little recognizable HTML at all in any of the .liquid files. I have played around with placing the generated code in various places in the Product.liguid and the Product-Template.liquid (and all related snippet files) but can only get it to appear at the top or the bottom of the page. Not anywhere near the product information. 

Does anyone have any suggestions?

 

KCJJ
Tourist
3 0 1

Hey, thanks for all the help.

 

How can i charge a customer for the engraving?

Tracy14
Tourist
5 0 0
If providing an additional service I would add variants to the product i.e.
standard & personalised and add the additional cost on the personalised
variant.
PaulNewton
Shopify Partner
6452 587 1369

@KCJJ wrote:

How can I charge a customer for the engraving?


Line item properties do not change a products price or create|add new products to the cart.

For that you'd want to combine this with the gift wrapping customization https://shopify.dev/tutorials/customize-theme-add-gift-wrap-option

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


CadeauJewels
Visitor
3 0 0

Hello,

I have a lot of questions.

I use Impulse theme and I need help UI element generator Shopify.

 

I need to create a Text -Short for the engraving: so, when customer insert the phrase, there is 25€ added to the total amount (I also use two different currency and I need this customitation works with € and £).

 Immagine.png

 

Also, I need to re-create a particular menù (see the arrow). Every image is linked with the urls of a specific product (and the link is different for every product). 

I don't know how to do it.

Can anyone help me?

 

DianaGreenwood
Visitor
1 0 0

Can anyone recommend a shopify expert who can do this for me?

I pretty much need exactly what the example was about!

Engraving on a product

Who's also has reasonable prices....thanks

Neddymtz
Visitor
2 0 0

is there a step by step on how to do this?

 

cfletcher
Visitor
1 0 0

this still does not show how to do a line item variant. 

dani-ella-aroma
Visitor
2 0 0

Hi All 

I have just added a customizable area for customers to add the personalisation details but there is no border around the area where they are to write the details. How do i add a colour border around that section 😞 

Daniella 

idwithin
Excursionist
23 0 5

\hi there great tutorial.

Is there no way to easily export all this data when the orders are created? What if you have 1000 orders of a product with customisations like this. What would be the easiest way to export the data and manage it?

Thanks

PaulNewton
Shopify Partner
6452 587 1369

@idwithin wrote:

Is there no way to easily export all this data when the orders are created? What if you have 1000 orders of a product with customisations like this. What would be the easiest way to export the data and manage it?


To get the data you want in the format you want, you'd want to use an ETL app for CSV and excel such a ez-export,matrifixy , or scriptable automation apps like usemechanic.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


idwithin
Excursionist
23 0 5

Hey that's great thank you so much for the recommendation I'll look into these apps. The EZ one looks like it might do the exact job.

I have another question. So I understand how the loop works to show all the line properties and with the nature of my product I am doing I want to make sure that the correct line properties show for that product. One thing I have noticed is (and this is in my code) I show an input depending on quantity of the product. So if you choose quantity of x4, you get 4 inputs to add your name in for customisation.

Yet one thing I've noticed is when a person is in the cart after adding in the custom line item properties, if they decide to limit the quantity in the cart to say x2, then I am still left with 4 custom names.

Is there any way to take this loop and make it only show the first 2 custom inputs if the quantity matches to only x2?

I hope I've explained this well enough, thanks
ID

Ishah
Excursionist
24 1 8

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
6452 587 1369

@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 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Anthony_David_
Shopify Partner
417 46 106

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

What would be the problem? 

Thanks

Theme customization | Design | Shopify App Consultant
Have Any Questions? Whatsapp +1 (341) 241-4263
Based in United States
alarconatelier
Excursionist
16 0 5

@Ishah 

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

 

Ishah
Excursionist
24 1 8

Nope but I ended up using an app which helped me accomplish what I wanted. 

Jonathan-HA
Shopify Partner
327 25 101

@idwithin wrote:

\hi there great tutorial.

Is there no way to easily export all this data when the orders are created? What if you have 1000 orders of a product with customisations like this. What would be the easiest way to export the data and manage it?

Thanks


@PaulNewton Thanks for mentioning our app!

@idwithin If you're open to using an app, our EZ Exporter app might be able to help out with this.  You can export the line item properties in separate columns or combined together in one column along with other order fields.

We have a guide on how you can export the line item properties in separate columns with our app here: https://www.highviewapps.com/kb/how-can-i-put-each-line-item-property-into-its-own-column/

We're of course available to provide support as well if you need help with the app as it's a pretty advanced feature.

Co-Founder / Developer at Highview Apps
Our Shopify Apps: EZ Exporter | EZ Inventory | EZ Importer | EZ Notify | EZ Fulfill