What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Product pages - Get customization information for products

Product pages - Get customization information for products

TyW
Shopify Staff (Retired)
463 71 1240

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 279 (279)
PaulNewton
Shopify Partner
7450 657 1565

@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 paull.newton+shopifyforum@gmail.com 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


LPippen
New Member
6 0 0

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.

PaulNewton
Shopify Partner
7450 657 1565

@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 paull.newton+shopifyforum@gmail.com 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


Gariep
Excursionist
34 0 10

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

LPippen
New Member
6 0 0

Somebody? Anybody?

leannrz
Visitor
1 0 0

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! 

svree
Tourist
3 0 0

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?

 

ChristinOlivia1
Tourist
4 0 1
Use a variant app! 🙂
Ogmc
Visitor
1 0 0

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.

AG-Mens-Jewelry
Excursionist
12 1 21

@Ogmc  What theme are you using? You may have to modify product.form under snippet and not product template.

Lazygirl
Tourist
4 0 1

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! 

Gariep
Excursionist
34 0 10

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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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"> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;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? 

 

Kelsey5
Visitor
1 0 0

My code doesn't have type=submit. What have I done wrong?

Anke
Visitor
3 0 0

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?

JessicaWalton
Visitor
1 0 0

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:

JessicaWalton_0-1615004460880.png

 

LPippen
New Member
6 0 0

How do you show these custom fields in the Quick Cart?

DanielleYola
Visitor
3 0 0

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

 

barkandbloomco
New Member
7 0 0

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 ????

Tiber
Shopify Partner
31 4 6

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 %}

  

Gariep
Excursionist
34 0 10

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? 

 

danielavezzi
Visitor
1 0 1

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...

CherishedNZ
Tourist
3 0 1

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?

YHMAC
New Member
6 0 0

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?

 

ArturManka
Visitor
1 0 0

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!

hannahkate
Tourist
9 0 1

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

jtyler2702
Tourist
7 0 1

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?

djingmijing
Visitor
1 0 1

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.

Games Coinpro
basketbub-ca
Visitor
2 0 0

* 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!

AnnetteKolbeck
Visitor
2 0 1

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. 

 

brittaambauen
Visitor
1 0 1

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?

nianbynidhi
Tourist
4 0 1

{{ line.title }} does not appear in my Order Confirmation code. I'm using the default code. Can someone please help?

Pocomimi
Visitor
1 0 1

 

I can not find

{% section 'product-template' %}

 

Help me

 

I'm using this theme

https://themes.shopify.com/themes/broadcast/styles/clean?locale=ja

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>

FittingPieces
Visitor
2 0 0

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? 

dev22
Shopify Partner
34 1 10

@TyW @Helen 

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?

Helen
Shopify Staff (Retired)
1425 174 291

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.

saild3
Visitor
1 0 1

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.

dimplesandcurls
Visitor
3 0 0

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?

rhonnyk
Visitor
1 0 0

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??

BlakesCreates
Visitor
1 0 1

Hi, Are there instruction for newer Themes like 'Dawn'? i can only get this to work on older ones like Debut. Thanks in advance. 

aliaz-
Excursionist
24 2 9

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

The pessimist sees only the tunnel; the optimist sees the light at the end of the tunnel; the realist sees the tunnel and the light - and the next tunnel.
yogascrubs
Visitor
1 0 0

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 

yi2023
Shopify Partner
1 0 0

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.

suedonhym
Excursionist
10 0 12

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:

https://community.shopify.com/c/Shopify-Design/how-to-make-a-field-required-in-a-form/m-p/494785/hig...

 

leyadoll
Visitor
3 0 0

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 ?

shrishtib
Tourist
9 0 5

Did you solve this issue?

betim
Visitor
1 0 0

Thanks for providing this useful tutorial.

 

How can I query from GrpahQL for the added customized fields in the order?

JLSGLG
Tourist
8 0 4

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.

 

 

Hsandhu94
Tourist
6 0 2

I managed to add a text box on my product page. 

Does anyone know how I can add smaller text preferably under the box? 

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.