Custom text boxes

[Sunshinestar]

 

I’m using the Shopify craft theme, I have added in custom text boxes to my products through codes. But when customers add data in the text boxes, the data doesn’t show up on the cart page or in my Shopify admin. I can’t seem to fix it. When they add custom data into the text box it only says “custom” yet there’s 2 custom text boxes and nothing at all shows up for the 2nd text box.  

I have this code in my main-product.liquid:

<form action="/cart/add" method="post">
<!-- Hidden Input for Variant ID -->
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />

<!-- Quantity Selector -->
<div id="Quantity-Form-{{ section.id }}" class="product-form__input product-form__quantity{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} product-form__quantity-top{% endif %}" {{ block.shopify_attributes }}>
<label class="quantity__label form__label" for="Quantity-{{ section.id }}">
{{ 'products.product.quantity.label' | t }}
</label>
<input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" />
</div>

<!-- Custom Fields for Specific Products -->
{% assign product_title = product.title | downcase %}
{% if product_title == "camostar" or product_title == "y2k core" or product_title == "summer jam" or product_title == "chrome skies" or product_title == "ruby red" or product_title == "midnight" or product_title == "pastel bloom" or product_title == "deep treasure" %}
<div id="custom-size-container">
<label for="custom-size">Enter Custom Size:</label>
<input type="text" id="custom-size" name="properties[Custom Size]" />
</div>
{% endif %}

<!-- Instagram Handle Field (Optional) -->
<div id="instagram-handle-container">
<label for="instagram-handle">Instagram Handle - for easy contact (Optional):</label>
<input type="text" id="instagram-handle" name="properties[Instagram Handle]" />
</div>

<!-- Add to Cart Button -->
<button type="submit">Add to Cart</button>
</form>

And I have this code in my main-cart-items.liquid:

<tbody>
{%- for item in cart.items -%}
<tr class="cart-item" id="CartItem-{{ item.index | plus: 1 }}">
<td class="cart-item__media">
{% if item.image %}
{% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
<a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a>
<div class="cart-item__image-container gradient global-media-settings">
<img
src="{{ item.image | image_url: width: 300 }}"
class="cart-item__image"
alt="{{ item.image.alt | escape }}"
loading="lazy"
width="150"
height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
>
</div>
{% endif %}

 

 

 

[namphan]

Hi @Sunshinestar,

You can refer line item property

You just need to add the code as per this instruction, it will display fine

[namphan]

Hi @Sunshinestar,

I checked and you need to add 'form="{{ product_form_id }}"' for input, it will work fine. Refer code:

<input type="text" id="custom-size" name="properties[Custom Size]" form="{{ product_form_id }}" />

[tim]

Ideally, you should share a link to your storefront so we can see the problem firsthand.

The code you've shared does not look much like Craft and problem may be elsewhere.

However, modern themes by Shopify require form property on inputs, otherwise these inputs would not be submitted when adding to cart.

So you should try modifying your code like this:

from 

<input type="text" id="custom-size" name="properties[Custom Size]" />

to

<input type="text" id="custom-size" name="properties[Custom Size]" form="{{ product_form_id }}" />

And from 

<input type="text" id="instagram-handle" name="properties[Instagram Handle]" />

to

<input type="text" id="instagram-handle" name="properties[Instagram Handle]" form="{{ product_form_id }}" />

[Sunshinestar]

URL is https://clawedculture.com/cart

[tim]

Yep, that's what I thought. The code you've shared in your original post is not the same currently on your site, but my recommendation still the same -- add form=XXX property as I instructed above.