Custom Product Field Data Not Showing in Cart (Theme: Classic)

New Member
2 0 0

Hi all,

Thanks in advance for any help and apologies if I'm missing something obvious!

I have a customer that has a range of t-shirts with LOTS of colours/sizes, taking them over the Variant Limit.  To get around this, I have removed all color info from the product and created a new product template with the colours as a hard-coded custom field dropdown (select menu).  Unfortunately despite this tutorial saying that the Classic theme should show the custom field data, its not showing up.

The code for my form is below with the bit I added in the middle on its own for clarity any pointers would be hugely appreciated!


          <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
            <select name="id" id="productSelect" class="product-single__variants">
              {% for variant in product.variants %}
                {% if variant.available %}
                  <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
                {% else %}
                  <option disabled="disabled">
                    {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                {% endif %}
              {% endfor %}

  			<label for="colourSelector">Customized Colour Selected (TEST)</label>
              <select name="colourSelector" data-option="option2" id="colourSelector">
                <option value="Black">Black</option>
				<option value="Bottle Green">Bottle Green</option>
                <option value="Chilli Gold">Chilli Gold</option>
                <option value="Heather Grey">Heather Grey</option>
                <option value="Light Blue">Light Blue</option>
                <option value="Navy">Navy</option>
                <option value="Purple">Purple</option>
				<option value="Real Green">Real Green</option>
                <option value="Red">Red</option>
                <option value="Royal Blue">Royal Blue</option>
                <option value="White">White</option>

            <div class="product-single__prices">
              <span id="ProductPrice" class="product-single__price" itemprop="price" content="{{ product.price | divided_by: 100.00 }}">
                {{ product.price | money }}
              {% if product.compare_at_price > product.price %}
                <s id="ComparePrice" class="product-single__sale-price">
                  {{ product.compare_at_price_max | money }}
              {% endif %}
            <div class="product-single__quantity{% unless settings.product_quantity_enable %} is-hidden{% endunless %}">
              <label for="Quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
              <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
            <button type="submit" name="add" id="AddToCart" class="btn">
              <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
Shopify Expert
9778 86 1524

Hey CCS 2000,

If you're hoping to add the value of the colourSelector as a Line Item Property you'll need to make sure the name attribute is in the correct format. Right now you have this:

<select name="colourSelector" data-option="option2" id="colourSelector">

It should be more like this:

<select name="properties[colour selector]" data-option="option2" id="colourSelector">

Take a look at UI generator for some examples.

★ Winning Partner of the Build a Business competition. ★
1 Like
New Member
2 0 0

Awesome - thanks so much for your help!

Shopify Staff
Shopify Staff
81 0 11

I'll move this thread to Shopify design