Need URGENT help pulling custom liquid into cart

Shopify Discussion

Topic summary

A Shopify store owner selling experience days needs help transferring a custom date selector from product pages to the cart. Despite hours of troubleshooting with ChatGPT, the selected experience date isn’t appearing in the cart.

Solution provided:

  • Use name="properties[Experience Date]" attribute on date inputs to pass data as line item properties
  • For custom date pickers, use a hidden input field with the properties naming convention
  • Update the hidden field value via JavaScript when dates are selected
  • Display the date in cart templates by accessing item.properties['Experience Date']

Key technical point: Custom liquid on product pages doesn’t automatically transfer to cart—data must be explicitly passed through Shopify’s line item properties system.

Code examples were provided for both simple date inputs and complex custom pickers. The responder offered to review the original code if the solution doesn’t resolve the issue. Status: Awaiting confirmation whether the proposed solution works.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

I need help pulling custom liquid from the product page into the cart. I have spent hours on end trying to figure this out and using Chat GPT but I havent managed to implement anything that works. For context, I provide experience days and need customers to be able to select a date they wish for their experience to take place. I have this as a custom liquid but it is not pulling through onto the cart.

Any help or advise on this would be appreciated…

1 Like
2

Hey @Tommasters9 ,

Oh man, I totally feel your pain on this one!

The key thing with Shopify is that custom liquid on product pages doesn’t automatically carry over to the cart - you need to pass it through as line item properties. Here’s how to get your date selector working:

On your product page, make sure your date input has the right naming:

<label for="experience-date">Select Experience Date:</label>
<input type="date" 
       name="properties[Experience Date]" 
       id="experience-date" 
       required>

The crucial part is name=“properties[Experience Date]” - that “properties” prefix is what tells Shopify to save this data with the cart item.

If you’re using a more complex date picker, wrap it like this:

<div class="date-selector">
  <label>Choose your experience date:</label>
  <!-- Your custom date picker liquid here -->
  <input type="hidden" 
         name="properties[Experience Date]" 
         id="selected-date-hidden">
</div>

<script>
// When your custom picker changes, update the hidden field
document.addEventListener('dateSelected', function(e) {
  document.getElementById('selected-date-hidden').value = e.detail.selectedDate;
});
</script>

Then in your cart template, you can display it:

{% for item in cart.items %}
  <div class="cart-item">
    <h3>{{ item.product.title }}</h3>
    {% if item.properties['Experience Date'] %}
      <p><strong>Experience Date:</strong> {{ item.properties['Experience Date'] }}</p>
    {% endif %}
  </div>
{% endfor %}

If you’re still having trouble, can you share a bit of your current date selector code? I’d be happy to take a look and see what might be tripping it up!

Hope this helps get you unstuck!

Cheers!
Shubham | Untechnickle