Add icons just before the variant names in dropdown in Dawn Theme

[sahilsharma9515]

I want to add different icons just before the names of variant, but not sure how to do that? I have tried doing it with variant but unable to achieve it. We are using Dawn 9.0 version theme, which is using Select and option dropdown, but unable to achieve the functionality, How can I achieve it?

Here is the screen shot how we want it to display on the page

Is there a way to achieve it?, We are not looking for an app, we want it in our theme.

[Hannastinson]

To show different icons before variant names in the Dawn 9.0 theme, you'll need to modify the theme's liquid files and CSS. Since the theme uses a select dropdown, the customization would involve adding custom HTML and CSS to control the icon display.

You'll likely need to target the variants dynamically with custom CSS or JavaScript and insert icons before the variant names.

Let me know if you'd like a more detailed step-by-step approach for this!

[sahilsharma9515]

Hi @Hannastinson Yes I want more step by step approach, can you help in this.

Best Regards

Sahil

[Easify-Jolie]

Hi @sahilsharma9515 

You can try Easify Product Options—it lets you add images before variant names without coding. It works smoothly with dropdowns and other selection types, offering advanced customization to enhance your product options. Here's an example for you:

• This is the result:

• This is the app setting: 

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