product variant style to dropdown for mobile only

Topic summary

A user is seeking to modify their Shopify product variant selector to display as a dropdown menu on mobile devices only, while keeping the default list-style layout on desktop.

Current situation:

  • Desktop version shows variants in a standard list format (as intended)
  • Mobile version also displays the list format

Desired outcome:

  • Mobile: Convert variant selector to a dropdown menu for better space efficiency
  • Desktop: Maintain existing list-style presentation

The user has provided screenshots showing both the current desktop layout and their desired mobile dropdown appearance. This appears to be a CSS-based responsive design question with no responses or solutions offered yet.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.

Hi everyone!

Is there any way to sow the variant selector as a dropdown menu on mobile only?

This is how i want it to look on the mobile view:

And this is how it looks by default on desktop :

I’d like to leave the menu style as is for the desktop version, but change the menu on mobile to a dropdown list.