Change Custom Variation from Pills to Icons/Images

Topic summary

A user is trying to display product variants as icons/images instead of the default pill-style buttons. They successfully implemented this for a color variant but are struggling with a gender variant.

Current Challenge:

  • Gender variant options need to display as visual icons (similar to the color swatches already working)
  • User created metafields but cannot properly assign the custom data to the product variants
  • Reference images show the desired outcome with icon-based gender selection

Proposed Solution:
A community member suggested using the Easify Product Options app, which:

  • Enables custom product options without coding
  • Supports multiple display formats: button, image swatch, and color swatch
  • Would allow gender variants to match the existing color variant styling
  • Includes screenshots demonstrating the app’s settings and expected visual result

Status: The discussion remains open, awaiting the original poster’s response to the suggested app-based solution.

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

As you can see in the image, I have managed to achieve this with the colour variant, but I am struggling to do the same for the gender variant.

I want it to look like this:

I managed to get them to appear in the metafields section at the bottom of the product editor page, but I can’t assign that custom data to the variants I created on the product - does this make sense?

Any help would be greatly appreciated!

Here’s my product variations for reference:

Hi @Cold_Toast

To achieve a similar setup, you can use Easify Product Options. It allows you to create custom product options for your gender variant, displaying them neatly in a button, image swatch, color swatch format. This way, the gender variant can be displayed just like the color variant, and you can control how it shows up in your store and it is no-coding. Here’s how it works:

  • This is the result:

  • This is the app setting:

I hope this answer helps solve the problem. If you need further assistance, feel free to reach out to Easify anytime! :hugs: