Some products really do have a long list of choices: 60 thread colors, 120 sports team names, 48 birth flowers, every US state. A plain dropdown with 100 entries works on paper, but on a phone it means a lot of thumb scrolling past things the buyer doesn't want. Below are the four patterns that fix it, when to use each, and how to set them up on Shopify.
First, should the list be this long?
Before you design around a long list, check whether every value earns its spot. Pull your last few months of orders and see which values people actually pick. It's common to find that a small group of colors or designs covers most sales and the rest are rarely chosen. Trimming the tail, or moving rare values to a "Request a custom color" text field, often beats any clever UI.
Also check whether the list belongs in Shopify variants at all. If the choice doesn't change your stock (thread color, font, team name), it's a personalization option, not a variant, and it shouldn't count against your variant or option limits. Our guide on adding more than 3 options to a product explains the split.
Searchable dropdown
A searchable dropdown filters the list as the buyer types. Someone looking for "Seattle" types "sea" and sees three matches instead of scrolling through 120 cities. It handles 100+ values without scroll fatigue and works best when buyers already know the exact value they want.
On Shopify this usually means a theme customization using a JavaScript library such as Select2 or Choices.js, or an options app that offers a search box on its dropdowns. Test it on a phone: the search box should open with the keyboard and the list should stay readable above it.
Categorized grouping
Grouping splits one long list into labelled sections, for example "Reds" with 5 shades, "Blues" with 8 and "Neutrals" with 6. The buyer jumps to the right section and only reads a short block. In a plain HTML dropdown this is the optgroup element. With swatches, show a small heading above each row of chips.
Grouping is a good choice for colors, where people think "I want a blue" before they think "Cornflower." If your list is mostly colors, our color options setup guide covers swatch sizing and naming.
Two-step selection
Two-step selection asks for a category first and then shows only the values in that category. Step 1: pick a color family (Red, Blue, Green). Step 2: pick the exact shade from a short list. Each step stays short, and the buyer never sees the full list at once.
You can build this with conditional logic: the first dropdown controls which second dropdown appears. In Print It My Way, conditional logic is part of the Pro plan ($13.99/month), and the conditional logic help article shows the setup.
For a deeper look at the pattern, read our guide to dependent dropdowns on Shopify.
Autocomplete
Autocomplete uses a text input that suggests matches as the buyer types. Someone types "Cri" and sees "Crimson" and "Cricket Green." It's the fastest option for buyers who know what they want, and it handles very long lists such as school names or ZIP-based locations. The downside is that browsers who don't know the options yet get no help, so pair it with a "See all" link.
Which pattern to use
| List size | Buyer knows the value? | Best pattern |
|---|---|---|
| Under 20 | Either | Plain dropdown or swatches |
| 20 to 50 | Usually browsing | Categorized grouping |
| 50 to 100 | Usually knows it | Searchable dropdown |
| 100+ | Browsing | Two-step selection |
| 100+ | Knows it exactly | Autocomplete |
These thresholds are rules of thumb from what we see in onboarding, not hard limits. Watch your own add-to-cart rate after a change.
Worked example: 64 embroidery thread colors
A hat store offers 64 thread colors. Instead of one 64-entry dropdown, it adds a "Thread family" dropdown with eight families (Reds, Oranges, Yellows, Greens, Blues, Purples, Neutrals, Metallics). Picking a family reveals a row of about eight swatches for that family. The buyer makes two quick taps, sees the color in live preview, and the final choice is saved on the order as a line-item property for the embroiderer. Nothing about the hat's stock changes, so no variants are added.
Mistakes to avoid
- Alphabetical order for colors. "Aqua, Beige, Black, Blue" makes buyers hunt. Sort colors by hue.
- Hiding the popular choices. Put your top five values at the top of the list or in a "Most popular" group.
- Tiny tap targets on mobile. A long list of small rows is easy to mis-tap. Give each row enough height.
- No default prompt. Start with "Choose a color" rather than preselecting the first value, so buyers don't check out with a color they never picked.
Frequently asked questions
How many options is too many in one dropdown?
Around 20 values a dropdown starts to feel long. Past about 50, buyers need search, and past 100 you're better off with grouping or a two-step selection.
How to add searchable dropdown to Shopify?
Either customize your theme with a JavaScript library such as Select2 or Choices.js, or use an options app that offers search on its dropdowns. Test the result on a phone before going live.
How to categorize long option list?
For a plain dropdown, the HTML optgroup element adds labelled groups. For swatches or richer layouts, use headings above each group, or a first dropdown that picks the group.
Two-step vs searchable dropdown?
Use a searchable dropdown when buyers already know the exact value, like a city or team name. Use two-step selection when they're browsing, like picking a shade within a color family.
Does long option list affect page speed?
Text lists have very little impact. Long lists of image swatches can add weight, so compress the images and lazy-load them.
Should I have 100 color options?
Only if all 100 get real orders. Check your sales data, merge near-identical shades, and offer a custom color request field for the rare ones.
Best app for long option lists?
Look for an app that supports grouping, swatches and conditional logic, since those cover most long-list patterns. Print It My Way includes dropdowns and swatches on its lower plans and adds conditional logic from Pro. See how personalizers and product options apps differ before you choose.
Mobile UX for 100+ options?
A full-screen or bottom-sheet list with a search bar at the top and grouped values below works well. Keep rows tall enough to tap accurately.
Related reading
Sources & further reading
Primary sources referenced in this article. We link to official platform documentation and standards bodies rather than secondary summaries so you can verify claims directly.
- Shopify Help Center: Product variants
- Shopify.dev: Product variant limits
- Shopify Help Center: Line item properties (customization)
Try it free on Shopify
Print It My Way's permanent Free plan includes live preview, custom options, and Cart Transform pricing.
Install Print It My Way