Adding a dropdown to cart drawer?

[kristd]

Hi,

I need to add a dropdown function to my cart drawer. I actually need two of them, where the second one is conditional based on the first one.

For our business, we sell products to customers who have preferred distributors, so we’d like to give customers the option to choose a distributor when checking out. Because our distributors have many locations, we’d like the second dropdown to be for customers to choose a city. So, this would be based on which distributor they select.

I tried adding code to cart-drawer.liquid and while it looks great and works at first, it eventually breaks - specifically, the options for city do not come up after selecting a distributor. Ideally, this is something I can eventually add to order notification notes as well but I need to get this working first.

I’m wondering if this functionality is even possible, or if someone has an app recommendation that can help. Thank you.

[devcoders]

Hi @kristd

Create Metafields for Distributor & Cities

Go to:

Settings → Custom Data → Store → Add definition

A) Distributor List

• Name: Distributor List
• Namespace/key: custom.distributor_list
• Type: List of single line text
• Assign your distributor names (example: Distributor A, Distributor B)

B) Cities List (JSON)

• Name: Distributor City Map
• Namespace/key: custom.distributor_city_map
• Type: Multi-line text

Paste JSON like this:

{
  "Distributor A": ["City 1", "City 2", "City 3"],
  "Distributor B": ["City 4", "City 5"],
  "Distributor C": ["City 6", "City 7", "City 8"]
}

---

Edit cart-drawer.liquid (Dawn theme)

Find where the subtotal/cart checkout button area appears and insert this before it:

<div id="distributor-container">
  <label>Select Distributor</label>
  <select id="distributor-select" class="cart-select">
    <option value="">Select distributor</option>
  </select>

  <label>Select City</label>
  <select id="city-select" class="cart-select" disabled>
    <option value="">Select city</option>
  </select>
</div>

Add JavaScript (dynamic dropdown logic)

Place before </cart-drawer> closing tag:

<script>
document.addEventListener('cart:updated', setupDropdowns);
document.addEventListener('DOMContentLoaded', setupDropdowns);

function setupDropdowns() {
  const distributors = {{ shop.metafields.custom.distributor_list | json }};
  const cityMap = {{ shop.metafields.custom.distributor_city_map | json }};
  
  const distributorSelect = document.querySelector('#distributor-select');
  const citySelect = document.querySelector('#city-select');

  if (!distributorSelect || distributorSelect.dataset.loaded) return;

  // Populate distributors
  distributors.forEach(d => {
    const option = document.createElement('option');
    option.value = d;
    option.textContent = d;
    distributorSelect.appendChild(option);
  });
  
  distributorSelect.dataset.loaded = true;

  // Distributor change event
  distributorSelect.addEventListener('change', function() {
    citySelect.innerHTML = '<option value="">Select city</option>';

    if (!this.value) {
      citySelect.disabled = true;
      return;
    }
    
    cityMap[this.value].forEach(c => {
      const option = document.createElement('option');
      option.value = c;
      option.textContent = c;
      citySelect.appendChild(option);
    });

    citySelect.disabled = false;

    updateCartAttributes(this.value, null);
  });

  citySelect.addEventListener('change', function() {
    updateCartAttributes(distributorSelect.value, this.value);
  });
}

// Save values to Shopify cart attributes (order note data)
function updateCartAttributes(distributor, city) {
  fetch('/cart/update.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      attributes: {
        Distributor: distributor || '',
        City: city || ''
      }
    })
  });
}
</script>

Best regards,
Devcoder

[kristd]

Hi @devcoders

Thank you so much for your suggestion and time looking into my issue! I went through all those steps and while it added the dropdowns to my cart-drawer, my list of distributors does not populate. It just tells me to select distributor.

For the metafields steps my settings are a little different. I also never created those before. Can you please confirm this is correct:

Settings > metafields and metaobjects > shop > add definition >

• Name: Distributor List
• Namespace/key: custom.distributor_list
• Type: List : Single line text

Save > edit value > then I added each distributor to a new line item

For the second part,

• Name: Distributor City Map
• Namespace/key: custom.distributor_city_map
• Type: One : multi line text

Save > edit value > then I pasted the JSON with my info

As far as the code goes, I copy and pasted exactly.

Any ideas? Thank you!

[PaulNewton]

If the choices are small just make a single drop down with the distributor + city name.
There’s also whether your doing this backwards by making customers choose a city last especially if not all distributors are in all cities, etc etc.

And using metafields can also be overkill for a small set of options.
And should instead by using data attributes on the first dropdowns options to connect/populate the subsequent dropdowns.

[kristd]

Hi @PaulNewton Thanks for your response!

I have a long list of distributors, and each distributor has different cities they have locations in. Because of this, it’s not that user-friendly or visually appealing to have a single dropdown with the distributor + city name. I do like the idea though, and would certainly do this if our list was smaller.

The user flow we want is for customers to choose a distributor, then based on which distributor they choose, they can choose from a list of cities that distributor is in. Our customers have preferred distributors and aren’t really looking based on their desired city, so that is why we want them to choose a distributor first.

I am not too familiar with metafields or data attributes, so if you have any suggestions please let me know. Thank you.

[PaulNewton]

And then there’s do customers know all city names, or is this a distance thing and a visual map would be better etc etc
Plenty of suggestions ,yet actual implementation is an advanced customization beyond the scope of the forums.
You can reach out if you need services.

Other posters will probably provide “AI” generated responses so good luck with that.

[kristd]

All good points to consider, and I really appreciate the input! Though, I just need help with the implementation. We already have the user flow defined.

Customers don’t need to know every city name. Most distributors only have a few locations, though a few have more. There’s no need for distance calculations or a map.

All I need is a dropdown for the list of distributors, and a second dropdown that updates to show the cities based on the selected distributor.

This is the same flow our customers are already used to when placing an order over the phone or via email, they tell us their preferred distributor, then select the location that works best for them.

Thanks again.

[devcoders]

Hi @kristd

Please create metafields like this:

Go to:
Settings → Metafields → Products → Add definition

Distributor List

• Type: List → Single line text
• Namespace/key: custom.distributor_list

Add each distributor as a list item.

Distributor City Map

• Type: Single line text (not multiline / not JSON field type)
• Namespace/key: custom.distributor_city_map

And format your mapping like this:

Distributor A: City1, City2, City3
Distributor B: CityA, CityB

No JSON needed — the JS script reads this format directly

Once you move the metafields to Products, the distributor list will populate correctly in your cart drawer.

If you want, feel free to share a screenshot of your metafields setup and I can double-check it for you. Happy to help!

Best regards,
Devcoder

[kristd]

Hi @devcoders

Thank you so much for your response. Where do I add the distributors? When I did it via Shop, it let me edit values near where it shows delete definition in this screenshot.