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
How do you get the new property to show in the Quick View? Customers are able to add the items to the cart without the required customization if they click on Quick View.
@LPippen wrote:How do you get the new property to show in the Quick View? Customers are able to add the items to the cart without the required customization if they click on Quick View.
You will need to probably make changes to a different file same as the changes you made to the relevant product templates.
In some themes they merely reuse the same product form file in the quickview file but may pass settings to it to skip some features in which case you will have to figure out that logic.
Contact [email protected] for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
I'm using Vantage Theme. I've searched for a template, section, or snippet that might be feeding the quick cart and the only thing I see is the product.quick.liquid. In the product.quick.liquid the only render that I see is the product-json.
@LPippen wrote:only thing I see is the product.quick.liquid. In the product.quick.liquid the only render that I see is the product-json.
Then the quickview may be a javascript template in which case it's in the assets, either in a standalone file or it's part of your theme.js... file.
Contact [email protected] for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
Very helpful tutorial
However, i'm looking for a way to show different options based on variant.
Ex i have 4 varient, 3 of them have multiple engraving customization box, but 1 variant only need one.
How can i achieve this?
Thank you
Somebody? Anybody?
I am so thankful I stumbled across this tutorial after setting up my Shopify! I have completed creating my custom field based on this tutorial and the product.customizable.liquid page and my one custom field for a certain type of product. I am wondering if in order to do different custom fields for different products, do I create a different "product.customizable.liquid" page for each field?
Thanks for any advice!
Hi, is it possible to have a customer send a photo with their order, so that I can do artistic customization and then complete the order to be shipped to them?
I tried this but it doesn't work. When asked to find the text type ="submit" to paste in generated code for customizable field the text doesn't exist on product-temple.liquid page.
@Ogmc What theme are you using? You may have to modify product.form under snippet and not product template.
Hi, I've followed this tutorial and got the customization option on my product page but can't get it to appear in the cart or at checkout. Wondering what can i be doing wrong on that part.
hope you can help!
Same problem here, item with single customisation are working but those with multiples no.
For example i have one where i cen enter name and a number but the number does not show up at checkoup
Here one where i can enter 20 customisation name and dates they do not show up
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p><p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p><p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
<p class="line-item-property__field">
<label for="Nom-a-inscrire">Nom à inscrire<for="Date">         Date</label>
<input required class="required" id="Nom-a-inscrire" type="text" name="properties[Nom à inscrire]">
<input type="number" id="Date" name="Date" min="1" max="31"><br><br>
</p>
{% if section.settings.product_quantity_enable %}
<div class="product-single__quantity">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1">
</div>
{% endif %}
<div class="product-single__cart-submit-wrapper{% if section.settings.enable_payment_button %} product-single__shopify-payment-btn{% endif %}{% if section.settings.add_to_cart_width == 'full_width' %} product-form--full{% endif %}">
<button type="submit" name="add" id="AddToCart" class="btn product-single__cart-submit{% if section.settings.add_to_cart_width == 'full_width' %} btn--full{% endif %}{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} shopify-payment-btn btn--secondary{% endif %}" data-cart-url="{{ routes.cart_url }}">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
Can anyone help please?
My code doesn't have type=submit. What have I done wrong?
That works great! Thank you.
When I use the coding, my product images are displayed under each other instead of next to each other. Is there a way to change that?
Hi there, i have completed all this for my personalisation but now i want to know how to get them side by side? so they look like Box Size and Box Colour
Thanks 🙂
Image below is what it currently looks like:
How do you show these custom fields in the Quick Cart?
Hi,
This was a very good tutorial. I was so releived that i found it and happy. It works amazing!!!
Is there a way for me to add two different templates that i can use for different products?
Sincerely,
Danielle
I can't seem to find where I should insert the line property item in the narrative theme. There is no "type = "submit"". What can I do ????
Do we have to loop through all properties? Is there a way to just get a specific one without a for loop
{% for p in item.properties %}
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
{{ p.first }}: {% if p.last contains '/uploads/' %}
<a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
Is there a way to have the customizable input available only for specific(s) variant? I have a product with generic variant and personalized variant. At the moment i'm force to have 2 different product, one for generic, one for personalized.
I was thinking adding something like this
if variant = x
customised input code
end
Otherwise is it possible to have a different liquid template for a specific variant?
where do I go to have access to the answers from the customers in these extra variations that I created? Usually, the normal variations' answers appear on the order page, but the variations created with the codes do not appear for me on the order page...
Hi there,
I am having real trouble trying to get my custom line options to show in cart. I have tried several attempts at this. I've put in the cart code for sections as mentioned in this article. I've refeshed pages, i've deleted cookies, i've tried on different devices but no matter what I'm doing, the custom options won't show in cart. They are working perfectly fine in the product page on the one product i'm trying this on. What am I doing wrong please?
Hi, I’m using the Editions Theme which seems to have a different code. Do you have instructions on how to get Product pages - Get customization information for products specific for Editions Theme?
This tutorial was very helpful just one thing that bugs me is...how can I add my application form(health questionnaire)into the checkout. The idea is that somebody that clicks the buy button of the product before(or even after) paying for it will need to fill up the questionnaire(as it's important for the service I provide and customer). Looking forward to your reply. Thanks!
Hi I am having some trouble. I have followed each of these steps and still cant seem to get my customization to show up in the cart for me or for my customers.
Here is link below to a product that I have made a custom template for.
https://hannahkateclothing.com/products/lee-sunsuit-ivory-gauze?_pos=1&_sid=89448c15a&_ss=r
The line item code generator was super easy. but I am having trouble with making it show up in my cart
EDIT: I was able to fix it. In the shipping confirmation emails, the variable line.properties no longer exists like it does in the order confirmation emails. For the shipping emails it is now line.line_item.properties
Hi, I was able to add the line properties to my emails, however I have come across a Shopify bug. If an order is fulfilled as one, then all works fine and the line property for the product shows in the email with code suggested. But if there are multiple items in an order, and you first partially fill it, when you later fulfill the entire order with the last product that has a line property, the variable doesnt exist at all. The line property variable only works if the order isnt firstly partially filled. How can this be overcome?
Hi, I am new to the Shopify. I want to buy spins for coin master game. If anyone do not know what is spins, please see here then tell me the process how I can buy this. or is it available on Shopify? I am a diehard fan of this game, that's it's important for me to buy it.
* Update *
Just after posting I figured out how to do it. If anyone else has this issue, you need to edit your theme and go to a product page with the customized template. On the left, click on "Product pages" and then select the box "Show quantity selector". I had no idea the settings needed to be changed for each new template you create. This will also allow you to do other things such as disable/enable your dynamic checkout button, which I saw a lot of people ask about.
* Original post *
I followed this tutorial and it worked for adding a text box to my product page. However, the Quantity selector disappears. I have tried creating a product-customizable-template.liquid that is an exact copy of product-template.liquid and the Quantity selector still doesn't show up. How does using this customizable product page Theme template automatically remove the Quantity selector with no changes? I'm using Minimal theme.
Here is a product page using the customizable template:
https://basketbub.ca/collections/gift-baskets/products/mini-sweet-delight
Here is a product page using the default template:
https://basketbub.ca/collections/gift-baskets/products/decorative-picks
Thanks!
Hello
I made the customization during this tutorial, where I just came to the box with all the wrong codes. But I figured it out. After that, I made first a template for product.customizable.liquid and then a template for product-item.customizable.liquid - And now I have to bundle them together....
How on Earth do I do that?
I think, that maybe I should do it in the directory file, but cannot find the right place?
Can anyone help a rookie?
Thanks in reward.
Hello, I followed the guidelines to apply this to a product and am getting mixed results. I have a listing for a jewelry ring, and would like the customer to be able to specify their ring size. When adding the customizable template, I get a page that has no quantity selector, and additionally has a new "buy it now" button AND the sitewide "add to cart button". I can't seem to find the "buy it now" in the code. What's going on?
{{ line.title }} does not appear in my Order Confirmation code. I'm using the default code. Can someone please help?
I can not find
{% section 'product-template' %}
Help me
I'm using this theme
https://themes.shopify.com/themes/broadcast/styles/clean?locale=ja
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>
Hi there!
I’m trying to follow the tutorial provided above for adding a personalized text box, however when I go into my theme to edit code, then create the product.customizable.liquid template, it generates no code to then edit. It’s just a new blank template page with no code. So I can’t proceed to the next steps. I’m not sure what I’m doing wrong?
Thank you for this doc, it's great. I've used it many times.
I have a question for a store I am building for a client of mine.
I need to add 2 custom fields to the product page that are number selector fields. (ex use: height, width - to allow users to increment by 1/4 inch...)
How would this look?
Design wise, I want it to look similar to the quantity selector in that there is a default number in the middle, with a plus icon on one side, and a minus icon on the other.
Function wise, I want it to work like an additional field. This isn't changing the price of the product, it's just more information for the store owner to receive along with the order.
Can you please help me with the liquid/html markup of what this field would look like?
Another point, I want another custom field on the product page that works with conditional logic. I have a radio button with 2 options. If the customer chooses option 1, then another custom field will display, and if the customer chooses option 2 then a different custom field will display.
Is this feature one that can be implemented?
And, how?
Hi, @dev22! Thanks for your question. Coding customizations are out of my knowledge base, and so I will leave this open to other merchants or developers who are experienced with this to comment and advise. All the best!
To learn more visit the Shopify Help Center or the Community Blog.
We are using the Dawn theme. Some of our products offerings include customized lettering (e.g., engraving), but not all of our products (we have some off-the-self products). All of the solutions I have identified so far for Dawn make the customization show up for all products. Any help would be most appreciated.
I have completed this and the product options and form field look great! However, it will not add the item to the cart. Any solutions?
I did this process several years ago and I cannot for the life of me get back to it to make an edit. What changed since 2020? I have a "personalization" field that I added and I cannot find it to make a change to the text. Any suggestions??
Hi, Are there instruction for newer Themes like 'Dawn'? i can only get this to work on older ones like Debut. Thanks in advance.
https://www.youtube.com/watch?v=XLawTkil9I4
Hello thank you so much for the tutorial I managed to place the customization options in my product pages. However I cannot see the the inputs from the customer in the admin Panel Orders page. Please help
I'm confused, the tutorial links to these apps: https://apps.shopify.com/categories/selling-products-product-variants
Does that mean I can use one of those apps and not have to make all of these code changes? Some of the apps seem to do what I want.
BTW, a very critical missing piece of this is if you want the fields to be required (i.e. have to have data) you have to do one more step not mentioned:
See here for details:
Hello Bro,
I successfully added the customized field in my product page, using the code below:
<p class="line-item-property__field">
<label for="optional-enter-childs-name">Enter Child's Name - 12 Chars Max</label><BR />
<input id="optional-enter-childs-name" type="text" placeholder="12 characters max" name="properties[(Optional) Enter Child's Name]">
</p>
After adding this code, i can collect the information from mu customers already, i can find the content in my order page.
But the problem is , when i export the orders , i can't find this field in my excel. I wanna know how i can add the customized field to my export excel ?
Did you solve this issue?
Thanks for providing this useful tutorial.
How can I query from GrpahQL for the added customized fields in the order?
Can someone post an updated tutorial? When I go to product.liquid in order to enter code from the "Shopify UI Elements Generator", there is no <form> or </form> tag. So, I don't know where to paste my copied code. What am I missing? Please help. I'm struggling so hard with getting my website up. Thanks.
I managed to add a text box on my product page.
Does anyone know how I can add smaller text preferably under the box?
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024