Shopify themes, liquid, logos, and UX
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.
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
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.
- From your Shopify admin, go to Settings > Notifications.
- Click the name of the notification template that you want to add line item properties to.
- 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 %}
- Click Save.
- Repeat these steps for any other email notifications that you want to include line item properties.
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.
- From your Shopify admin, go to Settings > Notifications.
- Click the name of the notification template that you want to add line item properties to.
- 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 %}
- Click Save.
- Repeat these steps for any other email notifications that you want to include line item properties.
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/>
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.
I have the same problem, did you find a solution?
Hello,
can you maybe help me with this one?
https://community.shopify.com/c/COVID-19-Discussions/Product-Options-Specialist/m-p/711124#M676
Thanks,
Rotem
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$
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.
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
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?
Hi shrishtib
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
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.
Any examples of how to go about doing that? Would you be able to help with the code?
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
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?
Okay I followed the directions but when I go to add the custom form fields I don't have type="submit" in my code...?
@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!
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
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
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?
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?
@Liam_Elder This is due to a previous advancement https://changelog.shopify.com/posts/online-stores-automatically-serve-webp-images
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
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.
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
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.
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
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.
Thanks, but any idea why shopify deleted this tutorial on their help page?
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?
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?
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?
Hey, thanks for all the help.
How can i charge a customer for the engraving?
@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
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 £).
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?
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
is there a step by step on how to do this?
this still does not show how to do a line item variant.
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
\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
@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
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
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
@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
I have multiple properties on the product page but only the last loop is showing on the cart...
What would be the problem?
Thanks
Nope but I ended up using an app which helped me accomplish what I wanted.
@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.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024