Impulse Theme - Variant swatches on Desktop and Dropdown on Mobile

Store Design

Topic summary

A user working with the Archetype Impulse theme wants to display product variant options (size/color) as swatches on desktop but dropdowns on mobile. The theme’s product page settings only allow choosing one display method for both devices.

Images provided show:

  • Desktop swatches layout
  • Mobile dropdown preference
  • Current mobile swatch display (variants wrapping across multiple rows)

Alternative request: If the dual-display approach isn’t feasible, the user would accept swatches on both devices but wants all options displayed in a single neat row instead of wrapping.

Responses:

  • One commenter notes this requires theme code modifications beyond simple CSS and recommends hiring a professional developer.
  • Another suggests using Easify Product Options app as a no-code solution that allows customizable swatch displays across devices, with screenshots demonstrating the app’s settings and output.

Status: The discussion remains open with no definitive solution implemented yet.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

I’m using Archetype Impulse theme. In product page settings you can display the Size / Color variations as either Swatches or Dropdown.

Is there a way to show Swatches for Variants on Desktop and Dropdown for Variants for mobile?

(Desktop image below)

Desktop Swatches.jpg
Desktop Swatches.jpg867×606 28.2 KB

(Mobile image below)

Dropdown on mobile.jpg
Dropdown on mobile.jpg447×480 14.3 KB

Alternatively, if the above isn’t easy or possible, we’d prefer to use the swatches for both mobile and desktop.

If we go this route, is there a way to make all the swatches appear in 1 row, so it’s neater

(This is how it currently looks)

Alternative Idea.jpg
Alternative Idea.jpg457×707 27.9 KB

Thanks for your help

2

Hi @Winston77

This requires modifications to the theme code and cannot be resolved by simply adding CSS. A more in-depth adjustment is needed to properly implement the changes.

I would recommend that they hire a professional developer to handle this, as it involves coding expertise beyond basic styling adjustments. Investing in a skilled developer will ensure the changes are implemented correctly and efficiently.

Best,

Daisy

3

Hi @Winston77

You can try Easify Product Options! It lets you use swatches for both desktop and mobile and customize the display for a cleaner look, all without coding! This app lets you customize product options in various ways—here’s an example that I think would work well for your store:

  • This is the result:

EasifyJolie_0-1741336779986.png
EasifyJolie_0-1741336779986.png1078×537 139 KB

  • This is the app setting:

EasifyJolie_1-1741336847099.png
EasifyJolie_1-1741336847099.png1330×567 33.9 KB

This app is straightforward, and I believe it will work well for you. Reach out to Easify if you need any assistance! :hugs: