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

llebowitz
Shopify Partner
3 0 0

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.

 

Replies 8 (8)

J2112O
Shopify Partner
9 1 4

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
Shopify Partner
3 0 0

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
Shopify Partner
9 1 4

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
Shopify Partner
3 0 0

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
Shopify Partner
9 1 4

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
New Member
4 0 0
  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
Shopify Partner
582 14 44

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:

EasifyAppsZoe_0-1695924920633.png

 

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

EasifyAppsZoe_1-1695924969914.png

EasifyAppsZoe_2-1695924987151.png

 

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

EasifyAppsZoe_3-1695925017000.png

 

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

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support

Tufan_Minimate
Shopify Partner
27 0 1

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. 

Screenshot 2024-03-01 at 17.00.42.pngScreenshot 2024-03-01 at 16.42.21.png

 

MINIMATE APPS - CUSTOMIZATION & SCARCITY MADE SIMPLE!
Mini Customization Fields: Effortlessly create and manage custom product fields for a personalized product options.
Hey! Scarcity Low Stock Counter: Boost sales by displaying low stock message to create a sense of urgency.
Explore Our Apps for Free | 24/7 Dedicated Support for Shopify merchants