Need to scroll my variants

Solved
New Member
11 0 0

I have been searching and searching for this and have found some posts that got no replies.

 

Is there a way to scroll the variant images, and if not, hide them? I sell print on demand and some of the products, like framed prints and phone cases, seem to have an endless list of variants. I know these images are necessary for when a customer selects a variant and need to see what it looks like, but that huge grid of variants on the product page is hugely distracting. If I could list them horizontally with a scroll, or simply hide them but have the image still come up when a variant is selected, that would be ideal. 

 

Thanks!

0 Likes
Shopify Expert
665 170 199

Hi, @MojaveRed ,

This is Evita from On The Map.

 

Can you add a screenshot and share your store URL? It's possible to create a horizontal scroll for variants.

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
11 0 0

Thank you, yes!

 

erin-mcguire-photography.myshopify.com

Store isnt live yet so password is ohbollywood.

 

 

 

variant snip.JPG

0 Likes

Success.

Astronaut
1069 144 256

Add this to the bottom of your style.scss.liquid in your assets folder:

 

ol.flex-control-nav.flex-control-thumbs {
    height: 150px;
    overflow-y: scroll;
}

Adjust the height as you see fit. I think 150 works though.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
11 0 0

Going to test this out right now! Thank you!!! 

0 Likes
New Member
11 0 0

I have it added to my test copy for now, but it worked like a charm!!! Thank you so much!!! 

 

variants with scroll snip.JPG

0 Likes
Astronaut
1069 144 256

Not a problem, the only issue I see with it is that it's kind of hard to scroll on mobile because the touch scroll will select whatever variant you start to scroll on. I'd suggest using a slider like slick.js to create a carousel out of your thumbnails, if for nothing else on mobile:

 

https://kenwheeler.github.io/slick/

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
11 0 0

Ooh, even better, Thank you so much!!!

0 Likes
New Member
11 0 0

I will, and I do have more edits I need to do. Thank you so, so much!!!

0 Likes