How can I display product variants as thumbnails instead of a color selector?

Store Design
1

Hello Everybody,

as being totally new to Shopify (have used other ERP and CMS for the last couple years) I need some help with a specific task. Searching the Forum and Help Pages couldn’t provide any useful answer, therefore posting now here.

I need to achieve an image-representation of a products variant in the “Variants Selector” of the “Products Overview” (Theme: “Spark”) instead of the usual drop-down menu.

For now I figured out that by changing the “Option Name” value for a product to “Color” the theme switches automatically to a color picker instead of drop-down:

screenshot-nuovoline.myshopify.com-2022.03.22-13_56_59.png
screenshot-nuovoline.myshopify.com-2022.03.22-13_56_59.png1390×1021 228 KB

Yes, the shop will be in German.

Now these “circles” somehow magically should be able to view a thumbnail of every variant, instead of a white background. Here a representation of a previous shop, that I need to apply the this theme:

screenshot-www.nuovoline.de-2022.03.22-14_06_01.png
screenshot-www.nuovoline.de-2022.03.22-14_06_01.png1265×787 134 KB

Really appreciate some hints in which direction to head to solve this problem (maybe code-wise or maybe there is some UI-friendly way that I haven’t discovered yet).

Greetings from Berlin,

Sebastian

2

@nuovoline_de
Welcome to the Shopify community.

You can get this by the color or image swatches Shopify App.

https://apps.shopify.com/globo-color-swatches

try out this link.

3

Hi @nuovoline_de ,

It’s customization work, for that you need to hire a developer or need a developer help,
to add this feature with custom code.

You can contact (https://www.halothemes.com/contact) for support.

If you find this answer helpful, please mark it as a SOLUTION.

Best regards.