My customization field for a product won't appear in the cart details

[llebowitz]

I am a junior developer working with a client to update their Shopify website. They are rolling out a new product that requires a customization field. Using the following tutorials, I have created a custom product template, and added a text input field. What is NOT working is getting the custom text to appear in the cart. 

Tutorials used: 

How to Create A Product Page for Specific Product - {% Shopify Tutorials %}

Add Custom Textbox or Dropdown to Dawn Product Page - No APP needed

Here is a rundown of what I've set up:

- Using the first tutorial above, I created a custom-product.liquid section, and a product.custom.json template.

- In the custom-product.liquid section, I have the following code. The bolded text is what I added. The text input code was generated using Shopify UI Elements Generator, but I added the form="product-form-{{ section.id }}" to see if that would connect it to the cart details.

{%- form 'product',
product,
id: product_form_id,
class: 'form',
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}
<p class="line-item-property__field">
<label for="custom-name">Custom Name</label>
<input
required
class="required"
id="custom-name"
type="text"
name="properties[Custom Name]"
form="product-form-{{ section.id }}"
>
</p>

I had also previously used the following tutorial, which I believe is essentially the same as what I did above, but you add the custom code using a custom block in theme customization rather than editing the code directly.

Add a Note Field To Products in Shopify 2.0 - Gifts, Engravings, Customizable Products...

This forum post contains information about how to add the customization details to the cart, but my sections/templates do not look the same so I am a little unsure as to where I can include this code.

I also was wondering if it would make sense to edit the main-cart-items.liquid template and create a rule to only display a div if a product has a custom template.

Any and all help would be appreciated! Unfortunately the client needs this set up urgently and I am running out of things to try.

[J2112O]

I have been studying and trying to learn how to do this very same thing too as I want to learn more Shopify development.

It seems like what you have should work...

One thing I can think of is did you add your custom product liquid file to be specified in the product.custom.json file you created? Not sure if that would cause the custom input field not to work or not.

See this video at about the 13:00 timestamp. Hope it helps you. Good luck!

https://youtu.be/UtJ77gcWqaU

[llebowitz]

Thanks, this is a great resource! Unfortunately it did not solve my issue, but it reaffirmed that there is probably something funny going on with how the site was built (not by me), and not how I'm building this input line. Any troubleshooting ideas to figure it out?

[J2112O]

Is the theme Dawn Theme? Since most of the tutorials I've seen show working with Dawn theme, I think this property in the input field is for Dawn Theme specific:

form="product-form-{{ section.id }}"

And maybe if not Dawn theme, then the form id is different and not obtainable with the section.id liquid code?

I'm not sure but I'll do more research too as I have some time.

Good luck.

[llebowitz]

I am using Dawn 2.2.0, and I'm now pretty sure that the issue is with the Ajax cart used in the most updated theme? It seems that this is an ongoing issue where line items are not displayed. I'm now transitioning to using an app since this needs to get wrapped up ASAP, but I did have some success with this tutorial to get around the ajax issue: https://community.shopify.com/c/shopify-discussions/line-item-properties-and-the-dawn-theme/td-p/194...

This tutorial did display what was typed into the custom line item, but it was appearing on every product. I'm sure this could be resolved by adding some logic etc.

[J2112O]

Thanks for sharing the information and the linked article too. I'll definitely be bookmarking it in case I run into any of those issues too.

[quickgraphics]

1. Ensure Correct Form Field Naming: Check if the naming convention used in your custom input field matches the naming convention expected by Shopify. The properties[Custom Name] should align with the naming used for Shopify to recognize it as a property that should be included in the cart details.

2. Verify Cart Display Settings: Confirm that your cart template (cart.liquid) is set up to display these custom properties. The default Shopify cart template might not automatically display custom properties, so you'll need to add code to show these details.

3. Update Cart Template (cart.liquid): In your cart.liquid template, search for the code that renders line items. Look for a loop that goes through each item in the cart and displays its properties. Add code to display the custom property you've set up for the product.

   It might look something like this:

   liquidCopy code

   {% for item in cart.items %} <p>Product: {{ item.title }}</p> <!-- Add code to display custom properties --> <p>Custom Name: {{ item.properties['Custom Name'] }}</p> {% endfor %}

4. Check JSON Response: After adding the product to the cart with the custom details, inspect the JSON response from the cart. Verify if the custom property ('Custom Name') is included in the cart item properties. This can be checked using browser developer tools or a tool like Postman if you're making API requests.

5. Test with Default Themes: If possible, switch to a default Shopify theme temporarily to see if the issue persists. This can help in isolating whether the problem is related to your custom theme setup.

6. Debug with Shopify Support: Reach out to Shopify support for specific guidance related to your theme setup and cart display issues. They might be able to provide insights or identify any missing steps in your customization.

Regarding your idea to edit the main-cart-items.liquid template based on the custom template, it could work as long as you're checking for the existence of the custom property in the cart item details and displaying the information accordingly. if you want more info visit here www.quickprinting.ae

By following these steps and ensuring proper naming conventions and template modifications, you should be able to display the custom text entered by the user in the cart alongside the product.

[EasifyApps-Zoe]

Hi @llebowitz,

To seamlessly incorporate a custom text field onto your product page, consider leveraging the user-friendly Easify Product Options app, which is free and requires no coding. Here's a brief guide on how to set it up 🤗:

• Start by creating a new option set:

• Add a text field, choosing either Text Box for a short text field or Text Area for a long one. Customize it to your preferences.

• Select the product(s) to which you want to add the text field, and that's all there is to it!

This app simplifies the process. Give it a try 🙌!

[Zel_Minimate]

Hello,

I hope you already solved your issue but in case you are still seeking a solution to move faster, you can check Mini:Customization Fields App. It allows merchants to create as many field as possible. 

[anywearallyson]

I love the Mini: Customization Fields App - However - I cannot get the customized fields to show up on packing slips or an export of orders. Is there a way to collect that information when pulling orders in bulk?

[Zel_Minimate]

I am glad to hear that you love the app so far! 

You can customize the packing slips from Shopify to include the customized fields. Please check this guide for the detail. You can even include the customized fields to order confirmation email too. 

Regarding the export of orders, our app adds the customized fields as "line item properties" and unfortunately built-in Shopify order export does not include "line item properties". However, there are 3rd party exporting apps like Data Export or Matrixify  address that. 

Please let me know if you have any other questions! 

[Renars]

Hi @Zel_Minimate 

Thank you for recommending using the Matrixify app for this.

You sure can export Orders with our app and also have the line item properties exported.

Here we have a tutorial explaining how to do exactly that with our app - Export Shopify Order line item properties

If you have any questions or concerns along the way - reach out to us directly!