Product pages - Get customization information for products

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---

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.

• Sectioned themes
• Non-sectioned themes

[HL2021]

Hi there,

I tried to follow the tutorial but stumbled at the first hurdle. My theme (Prestige 2.0) doesn't have a product.customizable.liquid.

Is there an updated tutorial for the latest themes or am I missing something? I only require the engraving option for 2 products on my site and as a new start up brand was hoping to find a free solution.

Thanks!

[littlebundles]

what's the best way to do this with Shopify 2.0 and Dawn? (without an app)

[egt1]

I am trying to do this same process by adding the code to product.liquid. However, I do not have product.liquid I have product.json. How do I do this?

[alarconatelier]

@egt1 Take a look at my response just above yours

[egt1]

I still cannot make it work... 😞 

[egt1]

I still cannot make it work...

[egt1]

@alarconatelier  I still cannot make it work...

[Gariep]

Is there a way to have the text box enable only for a specific variant? 

I have non customizable variant and customizable ones... 

[Justpost]

Hi there,

The custom input fields are working fine also with showing the data in de cart etc. But the only problem im facing is with the file input fields. I can select an image but it only shows as a text. This is what it is showing: 

Profielfoto: C:\fakepath\pexels-edwin-josé-vega-ramos-2100018.jpg

The code is:

<p class="line-item-property__field">
<label for="profielfoto">profielfoto</label>
<input required class="ProductForm__Item_Cursor_Auto" id="profielfoto" type="file" name="properties[Profielfoto]">
</p>

Theme is: prestige

I hope someone can help me.

Thanks

[UyleesBoutique]

Thank you for this!

[Danan]

To anyone using the DAWN theme.  Besides doing what others have suggested in the comments you have to do one more thing to get the properties to show up in the cart and in the order.  For some reason custom properties are not sent by default when adding a product to the cart.

1. Open up product-form.js

2.  Paste in the following code above the line "config.body = formData;"

      var inputs = document.getElementsByTagName("input");
      for(var i = 0; i < inputs.length; i++) {
          if(inputs[i].name.indexOf('properties') == 0) {
              formData.append(inputs[i].name, inputs[i].value)
          }
      }

This will grab all the properties[] inputs and include them in the product form that is sent to the server and then all your custom properties will appear throughout the order process.
 

[meganatmetro]

@TyW My theme has only a quantity adjustment in the drawer cart (no remove button). When placing the quantity to 0 (to remove a product with a custom text line property), it then removes all of the same base products, even those with different custom line properties. Is there a way to prevent this from happening?

[Bad_Street]

Hi there! This is great and worked perfectly for me when using an older theme but I have since upgraded to the "Dawn" theme and this no longer works. 

Any chance you could provide updates that show how to do this on Dawn? I've tried a few third party apps but so far nothing actually works with Dawn & its imperative for our business to have custom notes on the product page. 

Thanks in advance!

[brookesmi]

This was such a wonderful tutorial thanks!  I am designing a new site using the Studio theme now for a client and this doesn't work for the new themes it seems.  Any help getting it to work on the Studio theme would be greatly appreciated!

[celia23]

Seems like there has been an upgrade to the templates. I'm using Dawn and like a few recently, we are unable to use the instructions set here. There is no Liquid template for Product... only product.json. Can someone please help? is there another tutorial? Thanks in advance

[designrepo]

Hello, 

How can I add this system in my store?? please see first attached...

When checked the checkbox and click the add to cart button automatically added a extra product in cart page, just like 2nd attached...

Please send me any raw code if you have? I'll customize it.

Thanks!

[aliaz-]

Great guide. But i think for some people this youtube guide will help alot

(162) Add a Note Field To Products in Shopify 2.0 - Gifts, Engravings, Customizable Products... - Yo...

[Monkproducts]

Sorry if I am not seeing it, but are there instructions that I can follow to be able to add line item properties to my products?

[BabyTodz]

Thank you so much for the tutorial. I finally managed to input the custom field text into my debutify theme after following your tutorial and doing some trial and error research.

[AjitGoel]

I added the custom liquid control to the product page and added the following code to the product_form.js file but the form tag does not render. I am using the Refresh theme and the same form tag is used in the next quantity control in main_product.liquid file(please see screenshot below). Would you have an input why? My website url is here

product_form.js:

var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].name.indexOf('properties') == 0) {
formData.append(inputs[i].name, inputs[i].value)
}
}
config.body = formData;

product page's custom liquid control:

<label for="personalization">Personalization:</label>
<div class="field">
<textarea rows="10" class="text-area field__input" id="personalization" placeholder="Personalization" type="text" name="properties[Personalization]" form="{{ product_form_id }}"></textarea>
</div>

[Newbie10]

Stuck on step 1... what do I do if my product page is .json instead of .liquid? I'm using the basic Dawn theme.

[meganatmetro]

Try looking under 'Sections' for "main-product.liquid". I believe that is the section you are looking for.

[brittany-999]

Hi there,

I'm having issues with adding a personalization box to a product page.  I am using the Minimal theme.

I am at the step to "Apply your new template to a product".
It says "In the Theme templates section, choose 'product.customizable' from the Product template menu."

Hopefully I'm looking at the right spot, I am on the product page, on the right side under Online Store, there is a dropdown for Theme Template. However it is greyed out and won't let me select anything. (see below).

Firstly, am I looking at the right spot? If it is, why isn't it working? My site is live, but currently password protected (I did briefly take the password protection off to see if that would do anything, but it did not.).  I am also integrated with a Print on Demand site (Printful) if that makes a difference.

Thanks for any advice!

[wannacanhaveit]

I can't seem to get this to work for my theme. My template isn't in liquid, it's in json. Is there a compatible solution for json formats?

[Gariep]

I just updated my website to dawn version.  The template are in .json but the section are in .liquid, is that what you have?  If so maybe i can help. 

This video might be helpful.  https://www.youtube.com/watch?v=3TvLOHoQgvw

For me, adding this in the product.liquid  worked fine 

<p class="line-item-property__field">
<label for="nom-a-inscrire">Nom/Name</label>
<input required class="required" id="nom-a-inscrire" type="text" name="properties[Nom/Name]">
</p>

[wannacanhaveit]

This worked with the exception of one detail - I was unable to make it required. I followed the instructions. I am using the Refresh template. Any suggestions? 

[lucianchev]

I'm currently facing the same issues, works perfectly but the required fields are still allowed to be blank and added to the cart.

I know you can remove the `novalidate` attribute from the form which does cause regular HTML form validation to kick in, but I assume that's put in there for a reason and can mess with other functionality?

Any other options? Did you find a fix yourself?

Thanks!

[DavidLee-Parkar]

I'm thrilled to find this discussion centered around gathering customization information for as a  beekeeping products. As someone deeply passionate about beekeeping, I understand the importance of tailoring equipment and solutions to meet the unique needs of our beloved pollinators.

I've been exploring ways to gather specific customization preferences from fellow beekeepers. Whether it's customizing hive designs, beekeeping suits, or other tools, understanding the requirements of our bees and beekeepers is crucial.

Could anyone here share their experiences in obtaining customization information for beekeeping products? What methods or tools have you found most effective in ensuring that the equipment you use aligns perfectly with your apiary's requirements?

Beekeeping is not just a hobby; it's a vital part of maintaining a healthy ecosystem, so getting customization right can make a big difference. I'm eager to learn from your insights and expertise.

Looking forward to some fruitful discussions on this buzzing topic!

[ajspillm]

Basic question - I added the code to main-product.liquid on the ride theme.  My text field shows up fine on the product page.  But if I make an order, I cannot find that info anywhere. Not on the orders page, not when exporting inventory, etc.  I don't need to show it on the confirmation page, shopping cart, or anywhere else, I just need to be able to find the data later.  Am I doing something wrong? Where can I find the text the user inputs later?

<p class="line-item-property__field">
  <label for="locking-id">Locking ID</label>
  <input required class="required" id="locking-id" type="text" name="properties[Locking ID]">
</p>

The first step is "Use an app to collect customization information for products".  But this is just an option, right, and if we don't want to use an app, we use the rest of the directions, right?

[simonithanvi31]

Hi there!

I am also not able to find the type="submit". Are you able to explain how you did it? I would really appreciate it, thank you!

[SnippetBoost]

If you’re looking to optimize your Shopify store’s conversion rate, I highly recommend checking out SnippetBoost.com. It provides a collection of high-impact code snippets designed to enhance your product pages and boost sales effortlessly. No coding skills needed, and it’s a one-time payment instead of expensive monthly subscriptions. I’ve seen great results with it! 🚀

Hope this helps!