How to fix select name on Shopify

Steps for Shopify

1. In your Shopify admin go to Online Store → Themes → click 'Customize' on your active theme.
2. For product option selects (size, color, etc.), click 'Edit code' (Actions → Edit code) and open the relevant Liquid file — typically `snippets/product-variant-picker.liquid`, `sections/main-product.liquid`, or `snippets/product-form.liquid` depending on your theme.
3. Locate the `<select>` tag for each option. Check whether it already has a `<label for="…">` above it with a matching `id` on the select. If not, add `id="product-option-{{ option.name | handleize }}"` to the `<select>` and add `<label for="product-option-{{ option.name | handleize }}">{{ option.name }}</label>` immediately before it.
4. For sort-by dropdowns, open `sections/main-collection-product-grid.liquid` (or `collection.liquid`) and find the sort `<select>`. Add `id="SortBy"` to the select and `<label for="SortBy" class="visually-hidden">Sort by</label>` before it. Most themes already include a `.visually-hidden` utility class in their base CSS.
5. For checkout fields (country, province), these are controlled by Shopify's checkout — you cannot directly edit them on standard Shopify plans. On Shopify Plus you can customize checkout.liquid: add matching `for`/`id` pairs to any custom selects you add.
6. Save the file, then preview the theme and test with a screen reader or the axe browser extension to verify the label is announced.

What is select name?

Every dropdown menu on your website (a `<select>` element — things like "Choose a size", "Select a country", or "Sort by") must have a text label that is programmatically linked to it. Without this link, a screen reader user who tabs to the dropdown hears nothing useful — just "combo box" with no context about what they're supposed to choose. A label can be a visible `<label>` tag, a hidden-but-accessible ARIA attribute, or a wrapping label element — but something must be there and connected.

Screen reader users — who include blind shoppers, people with motor disabilities, and many others — cannot use unlabeled dropdowns. This directly breaks the shopping experience: they cannot select a product size, filter results, choose a shipping country, or complete a checkout form. Beyond lost sales, missing form labels violate WCAG 2.1 Success Criterion 4.1.2, which is cited in accessibility laws in the US (ADA), EU (EAA), UK (PSBAR), and Canada (AODA). Accessibility lawsuits overwhelmingly target e-commerce sites, and missing form labels are among the most commonly cited violations. Fixing this removes legal risk and opens your store to a wider audience.

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