Trying to get drop down selection to show up in cart

[Awall250]

Theme: Horizon 4.1.4

I created a drop down list via the ai generator on my products page. But no matter what I do, I cannot get it to show the selection the customer choose on the cart page. It works fine for the Special Instructions box but not for the drop down box. I have read everything I can and nothing seems to work.

Outline of what I need it to do:

Example - Dropdown options box for customer to choose the Text Color.

Example of Options:
Black
White
Red
Athletic Gold

Whichever one they choose would need to show up below the item (like the special instructions does) in the cart and finally on the order page.

Please help if you can.

Andrew

[Ploqo]

The problem:

The Fix: The fix is one attribute on the <select>: form="BuyButtons-ProductForm-{{ section.id }}". That ties the dropdown to the Add to cart button.

Result:

Steps:

• Online Store > Themes > Customize, then open a product page.
• Click your dropdown block (the Custom Liquid block you added). If you don’t have one, click Add block > Custom Liquid, just under the variant options.
• Replace the code in it with this:

<div class="cl-dropdown">
  <label for="cl-text-color"><strong>Text Color</strong></label><br>
  <select id="cl-text-color" name="properties[Text Color]" form="BuyButtons-ProductForm-{{ section.id }}">
    <option value="">- Choose -</option>
    <option>Black</option>
    <option>White</option>
    <option>Red</option>
    <option>Athletic Gold</option>
  </select>
</div>

• Save.

Notes

• Change “Text Color” (both spots) and the option list to your own wording.
• Add the product to the cart again after saving. Items already in the cart don’t update.
• The choice then shows under the item in the cart, at checkout, and on the order, just like Special Instructions.

Shopify App alternatives: Infinite Options, Globo Product Options, or Hulk Product Options.

Regards,
Ploqo

[Aris_Support]

Hi Andrew
I suggest making sure that the dropdown is connected to the product form first. Since your Special Instructions field is already working, the issue may be that the dropdown isn’t being considered a Shopify line item property.

A few things to check:

1. Check the dropdown’s name attribute
   It should be:

   name="properties[Text Color]"
   

   This makes sure Shopify save the selected value as a line item property.

2. Check that the dropdown belongs to the product form
   If the <select> is outside the product form, it won’t be included when the customer clicks Add to Cart. In that case, you can connect it using the product form’s ID:

   form="BuyButtons-ProductForm-{{ section.id }}"
   

3. Check the product form and /cart.js
   After selecting a color and adding the product to cart, open /cart.js in your browser and look at the added item. Under properties, you should see something like:

   "properties": {
     "Text Color": "Red"
   }
   

   • If it’s not in /cart.js, the dropdown isn’t being submitted correctly with the product form.
   • If it is in /cart.js but isn’t displayed in the cart, then the issue might come from the cart theme/template not rendering line item properties.

If you want an easier way to fix this without having to alter the theme code, you can try use a product-options app. Aris Product Options, Variants can create dropdown options without code and automatically save the customer’s selection as a line item property, so it can appear in the cart and be carried through to the order.

There are also options that allows you to modify the variants directly in cart.
Hope this helps!

[Tim57]

Tim from Sonder Sites in Melbourne. We spend a lot of time cleaning up AI-generated theme bits.

The generator almost certainly sat that dropdown outside the product form. Special Instructions works because it is inside the add-to-cart form. Give the select name="properties[Text Color]" and form="BuyButtons-ProductForm-{{ section.id }}", save, then add a fresh item and check /cart.js for "Text Color". If it is missing there, the form still is not wired. If it is present in /cart.js but hidden on the cart page, the generated cart block skipped the line-item properties loop.

Duplicate the theme before you keep prompting the generator. If Sidekick has already rewritten the product template, a human pass is faster than another prompt. If you get stuck, we are in Melbourne and happy to help.