How to fix select name on Shopify

Steps for Shopify

1. In your Shopify admin, go to Online Store → Themes → click the three-dot menu next to your active theme → Edit code.
2. Locate the template or snippet that renders the offending dropdown. Common culprits: 'snippets/product-variant-picker.liquid' (variant/size selectors), 'sections/collection-template.liquid' or 'snippets/sort-by.liquid' (sort dropdowns), and 'snippets/country-selector.liquid' (currency/country pickers).
3. Find the bare <select> tag and add a linked <label> immediately before it, e.g.: <label for="SortBy">Sort by</label> <select id="SortBy" name="sort_by">. Make sure the 'for' value matches the select's 'id' exactly.
4. If the design has no room for a visible label (e.g. a compact header sort), add aria-label="Sort results by" directly on the <select> tag instead.
5. Click Save, then preview the storefront and verify with the axe DevTools browser extension or VoiceOver/NVDA.

<!-- Method 1: explicit <label> with for/id pair (recommended) -->
<label for="sort-by">Sort results by</label>
<select id="sort-by" name="sort-by">
  <option value="price-asc">Price: Low to High</option>
  <option value="price-desc">Price: High to Low</option>
</select>

<!-- Method 2: wrapping <label> (implicit association) -->
<label>
  Select size
  <select name="size">
    <option value="s">Small</option>
    <option value="m">Medium</option>
  </select>
</label>

<!-- Method 3: aria-label when no visible label is feasible -->
<select name="country" aria-label="Shipping country">
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
</select>

<!-- Method 4: aria-labelledby pointing to existing visible text -->
<span id="qty-label">Quantity</span>
<select name="quantity" aria-labelledby="qty-label">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

What is select name?

Every dropdown menu (`<select>` element) on a webpage — such as a size selector, country picker, or sort-by filter — needs a visible or programmatically associated label that tells users what the dropdown is for. Without one, screen readers and other assistive technologies simply announce it as "combo box" or read out the first option, giving blind and low-vision shoppers no idea what they're selecting. WCAG Success Criterion 4.1.2 (Name, Role, Value) requires that all interactive controls, including dropdowns, have an accessible name. The label can be a visible `<label>` element linked by a `for`/`id` pair, a wrapping `<label>`, or an `aria-label` / `aria-labelledby` attribute when a visible label isn't practical.

In many countries (the US, UK, EU, Canada, Australia) accessibility laws require that online stores meet WCAG 2.1 AA, meaning an unlabelled dropdown is a documented legal liability that can trigger complaints, lawsuits, or regulatory action — and ecommerce is one of the most targeted industries. Beyond legal risk, screen-reader users who can't understand a dropdown will abandon the purchase, directly harming conversions and revenue. Google's crawlers also read ARIA and label attributes to better understand form context, so fixing labels can improve how product-filter and checkout pages are indexed. Fixing this issue also benefits voice-control users (e.g. Dragon NaturallySpeaking) who activate controls by speaking their label out loud.

See the complete Select name guide for every platform and the full background.