Update to color selector variant for products

Solved

Update to color selector variant for products

MikeLewisDigita
Tourist
7 0 1

Hello,

I am using the Simple theme for my e-commerce site (https://illsockgame.com/). For the product variants color selector the theme uses a standard drop-down menu. But I'd like to instead use something that shows all of the colors, with the user being able to select a variant based on an image. Is there a way to change this in settings, or can I use some custom code to make this update? Or would this require a theme change (hoping not to do that though). Thanks for help with this!

 

CURRENT:

Screen Shot 2022-05-11 at 2.54.58 PM.png

 

WHAT I WANT:

Screen Shot 2022-05-11 at 2.53.24 PM.png

 

 

Accepted Solution (1)

Daniel
Shopify Staff (Retired)
1122 79 176

This is an accepted solution.

Hi there, @MikeLewisDigita

 

Welcome to the Community! Definitely a great place to gather some input regarding anything about the platform! We have a great group of contributors who are always willing to provide their own expertise and experience with regards to Shopify! 

 

With regards to what you are after, you can definitely find some coding solution about this and I look forward to seeing what other contributors who are more well-versed in this to do so. However, you can also use an app to achieve this in your own store. Feel free to checkout the following apps I found that will help you in this: 

 

  • Variants Options, Color Swatch: this a highly rated app with a free plan that allows you to present your color swatches in the image you presented above.
  • Advanced Product Options: another highly rated app with a free plan that will allow you what you want for your varianta.
  • Color Swatches, Variant Option: this is a fairly new but highly rated app that will also allow you to achieve what you are after; does include a free trial but not a free plan.

 

Definitely let us know how these work out for you! 

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Replies 13 (13)

PaulNewton
Shopify Partner
7746 679 1613

Always backup themes before making changes

This is an advanced theme customization.

 

The crude recommendation is to use an app.

If you have coding experience shopify has an OBSOLETE tutorial to use as an UNFINISHED jumping off point:

https://community.shopify.com/c/shopify-design/product-pages-add-color-swatches-to-products/m-p/6164... 

 

Otherwise consider finding a theme with the functionality you need baked in.

 

If you need the customization done for you contact me at paull.newton+shopifyforums@gmail.com please provide context in your email: store url, theme name, problem description or link to relevant posts.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


MikeLewisDigita
Tourist
7 0 1

Thanks Daniel for the reply. Thanks for the code link, but I'm afraid I'd break something if I tried it! 😱

 

I would like to explore the option of changing themes you suggested. Upon closer review of the Shopify Free Themes the Dawn theme has something close to what I'm looking for:https://themes.shopify.com/collections/free-themes . If that still doesn't work and I decide to go the customization route, I may circle back to you for help.

 

Thanks!

Daniel
Shopify Staff (Retired)
1122 79 176

This is an accepted solution.

Hi there, @MikeLewisDigita

 

Welcome to the Community! Definitely a great place to gather some input regarding anything about the platform! We have a great group of contributors who are always willing to provide their own expertise and experience with regards to Shopify! 

 

With regards to what you are after, you can definitely find some coding solution about this and I look forward to seeing what other contributors who are more well-versed in this to do so. However, you can also use an app to achieve this in your own store. Feel free to checkout the following apps I found that will help you in this: 

 

  • Variants Options, Color Swatch: this a highly rated app with a free plan that allows you to present your color swatches in the image you presented above.
  • Advanced Product Options: another highly rated app with a free plan that will allow you what you want for your varianta.
  • Color Swatches, Variant Option: this is a fairly new but highly rated app that will also allow you to achieve what you are after; does include a free trial but not a free plan.

 

Definitely let us know how these work out for you! 

To learn more visit the Shopify Help Center or the Community Blog.

MikeLewisDigita
Tourist
7 0 1

Thanks Daniel for the warm welcome and getting back to me. I downloaded both the Variants Options, Color Swatch and Advanced Product Options apps. Both of them look to be pretty nice options. However, neither one appears to have a free option. Advanced Product Options appears to have a 15 day free trial, while Variants Options, Color Swatch appears to have a 30-day free trial. Because I'm still waiting to get sales to both of my Shopify sites (https://illsockgame.com/) and (https://freshties4him.com/), I'm a little reluctant to invest in either solution at this time. But I may revisit once sales pick up. If I try one of the apps, I'll make sure to come back and let you know how it worked and if I subscribed.

 

Thanks again for getting back to me!

Daniel
Shopify Staff (Retired)
1122 79 176

My pleasure! 

 

Since you are possibly using a Shopify-made theme, you can also try to forward this request to our live support team. If you are already on a paid plan, you qualify for 60 minutes of design time from our themes team. Check out this link for more information about that. 

 

I can't guarantee that this is a customization that they can provide but it's always worth the ask! Also, if there are other things that you want but are having trouble to achieve within the editor you can also forward those request to them and our live support team will see if this is something that we can help you out with! 

 

All the best and please keep using the Community at your disposal! Lots of great information and even better help on here.

To learn more visit the Shopify Help Center or the Community Blog.

MikeLewisDigita
Tourist
7 0 1

Thanks Daniel, I'll definitely take you up on the offer to use the 60 minutes of Shopify design time with the themes team.

 

Have a great weekend!

MikeLewisDigita

my shopify sites:

https://illsockgame.com/

https://freshties4him.com/

 

MikeLewisDigita
Tourist
7 0 1

Hi @Daniel  thanks for the info about the 60 minutes of design time. I used the link but couldn't figure out how to sign up for the design time with the themes team. I have a couple of customizations to my theme that I'd like to request, but wasn't sure how to do so after I'm logged in. Let me know... thanks again!

Daniel
Shopify Staff (Retired)
1122 79 176

I am so happy to have been able to assist here!

 

The link I provided should give you that information behind this benefit of using a Shopify-made theme but once you are ready to forward your customization requests, you can simply reach out to our live support team. You can then inform them that you are wanting to use your 60 minutes of design time. They will listen to your requests then push it forward to our Themes team if it is something that we can help you out with. 

 

The link in my previous response will lead you to their queues. Definitely let me know if you need any further help regarding this matter. Happy designing! 

To learn more visit the Shopify Help Center or the Community Blog.

MTSAWARDS
Shopify Partner
16 1 5

Hello Mike, did you ever find a solution that works for you? I came across this post while searching for a solution to a problem I have and figured I'd share. There is a FREE app that lets you use color and image swatches, VARIANT OPTION PRODUCT OPTIONS.

 

You can view how I set it up on my test product here, this was done just yesterday. This is FREE but to have options like price add-ons, you would need the paid version. If you don't need price add-ons, this would work great.

MikeLewisDigita
Tourist
7 0 1

I installed the Variants Options, Color Swatch and trying it out for the next 30 days.

 

So far, so good!

Daniel
Shopify Staff (Retired)
1122 79 176

Hey, Mike! 

 

So great to hear you're liking the app so far! 

 

As for the 60 minutes design time, feel free to reach out to our live support team once you have anything on your end that you may want some help with and they will forward these requests to our themes team for approval. 

 

All the best to you friend! Happy selling! 

To learn more visit the Shopify Help Center or the Community Blog.

jeffromsquid
Shopify Partner
10 0 1

How would I be able to have one selector displaying color and another displaying limited edition colors?

MRamzan
Shopify Partner
529 3 46

You can try this solutions:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112