Solved

How to display custom fields in shopping cart

Greggy55
Excursionist
26 0 2

Hello everyone, 

I am trying to get custom fields to display in my shopping cart once a user has added the item with the custom fields to their cart. 

Picture below shows the item with the custom fields :

Greggy55_0-1713294750618.png

I added this code to the main-product.liquid code block to achieve this. here is the code : 

<style>
.main-product-property label {
display: inline-block;
width: 120px; /* Adjust as needed */
margin-right: 10px; /* Adjust as needed */
}
</style>

{% if product.metafields.custom.name_field %}

<!-- Custom fields -->
<div class="main-product-property">
<label>Name</label>
<input type="text" name="properties[Name]">
</div>

{% endif %}

{% if product.metafields.custom.surname %}

<div class="main-product-property">
<label>Surname</label>
<input type="text" name="properties[Surname]">
</div>

{% endif %}

{% if product.metafields.custom.date_of_birth %}

<div class="main-product-property">
<label>Date of Birth</label>
<input type="text" name="properties[Date of Birth]">
</div>

{% endif %}


{% if product.metafields.custom.time_of_birth %}

<div class="main-product-property">
<label>Time of Birth</label>
<input type="text" name="properties[Time of Birth]">
</div>

{% endif %}


{% if product.metafields.custom.weight %}

<div class="main-product-property">
<label>Weight</label>
<input type="text" name="properties[Weight]">
</div>

{% endif %}

{% if product.metafields.custom.height %}

<div class="main-product-property">
<label>Height</label>
<input type="text" name="properties[Height]">
</div>

{% endif %}

I also added custom data and added definitions for the different fields I wanted. The definitions are here :

  • Height
    product.metafields.custom.height
     
    True or false
    1 product
     
  •  
    Weight
    product.metafields.custom.weight
     
    True or false
    1 product
     
  •  
    Time of Birth
    product.metafields.custom.time_of_birth
     
    True or false
    1 product
     
  •  
    Date of Birth
    product.metafields.custom.date_of_birth
     
    True or false
    1 product
     
  •  
    Surname
    product.metafields.custom.surname
     
    True or false
    1 product
     
  •  
    name field
    product.metafields.custom.name_field
     
    True or false
    1 product
     

 

I am now in my main-cart-items.liquid code editor , however I dont know how I can get these options to display in your cart. 

Greggy55_1-1713294929952.png

What do I need to add so it will now display the info on the product page ? I need this info to display in the shopping cart :

Name 
Surname 
Date of Birth 
Time of Birth 
Weight 
Height

 

 

Thanks for any help!

Using Dawn theme.


***Update***

I went to my cart and i added the .json at the end of the url. 

It seems like the custom fields are not being saved to the item? And that is why it is not displaying?


I had a chat with chatgpt , here is what it says :

From the JSON response, it appears that the "properties" object for the item is empty. This might be why the custom fields are not displaying in your cart. Make sure that the custom fields are correctly assigned to the product properties in your store's backend. If the properties are correctly set but still not appearing, there might be an issue with how the properties are being rendered in your cart template.


I am not sure how to ensure the custom properties are being saved???


My store URL is : 

https://40f42b-de.myshopify.com/

 

Password is : saompo

Accepted Solution (1)

aldy-expatify
Shopify Partner
57 5 10

This is an accepted solution.

Hi @Greggy55 

Sorry just need your confirmation. I see that the data already shown, have you solved the issue?

aldyexpatify_0-1713349045003.png

 

If you like our solution, please like and mark it as a solution.
Don't hesitate to reach us for more Shopify solutions. Thanks 🙂
Website: Expatify Indonesia
Email: guru@expatify.co.id
Whatsapp: Whatsapp

View solution in original post

Replies 5 (5)

aldy-expatify
Shopify Partner
57 5 10

This is an accepted solution.

Hi @Greggy55 

Sorry just need your confirmation. I see that the data already shown, have you solved the issue?

aldyexpatify_0-1713349045003.png

 

If you like our solution, please like and mark it as a solution.
Don't hesitate to reach us for more Shopify solutions. Thanks 🙂
Website: Expatify Indonesia
Email: guru@expatify.co.id
Whatsapp: Whatsapp
Greggy55
Excursionist
26 0 2

Yes I solved it thank you

aldy-expatify
Shopify Partner
57 5 10

@Greggy55 Cool 👍
Would you mind marking the post as solved, please?

If you like our solution, please like and mark it as a solution.
Don't hesitate to reach us for more Shopify solutions. Thanks 🙂
Website: Expatify Indonesia
Email: guru@expatify.co.id
Whatsapp: Whatsapp

EasifyApps
Shopify Partner
541 16 42

Hi @Greggy55,

You can easily create your text fields using the free Easify Product Options app. It's a quick solution that allows you to not only create the fields but also display the entered values on the cart page, all without any need for coding on your part. 😊

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

Greggy55
Excursionist
26 0 2

I managed to solve it. thanks for the help!!!