How to make thumbnails circular

jcrispy
New Member
15 0 0

Hi - can anyone help? Currently, my thumbnails are stacked on each other in a square shape with no space between the thumbnails.

 

Instead - I would like to make my thumbnails on the left side to be circular and have space between them like this example....I am using the Dawn theme. 

Thank you!

 

 

 

Replies 21 (21)

ThePrimeWeb
Shopify Partner
1720 477 352

Hey @jcrispy,

 

Could you share the link to your store? And please share a screenshot of the thumbnails you want to amend if possible. Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
jcrispy
New Member
15 0 0

This is what I'd like to accomplish for my products page!

jcrispy
New Member
15 0 0

Screen Shot 2024-02-21 at 9.37.28 AM.png

ThePrimeWeb
Shopify Partner
1720 477 352

Please share your store link as well please.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
jcrispy
New Member
15 0 0

www.dwellapparel.com

 

Currently my product page images are stacked. But I would like them to look like the image I provided.

 

 

jcrispy
New Member
15 0 0

This is what I have right now...

Wondering how to get thumbnails to the left of the main picture and to make the thumbnails a circle shape.

Thank you!

Screen Shot 2024-02-21 at 10.14.01 AM copy.jpg

ThePrimeWeb
Shopify Partner
1720 477 352

Hey @jcrispy,

 

I didn't realise you changed the slider halfway, I was already writing the code and once you changed I had to restart all over again. 

Anyway I completed it now, and it is nice on desktop, but on mobile it's not so nice so I disabled it for mobile. 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
@media only screen and (min-width: 750px) {
    .product--thumbnail_slider .thumbnail-slider {
        flex-direction: column !important;
        align-items: normal  !important;
    }
    
    .thumbnail-slider .thumbnail-list.slider--tablet-up {
        flex-direction: column !important;
    }
    
    .thumbnail.global-media-settings img {
        width: 100px !important;
        height: 100px !important;
        border-radius: 50% !important;
    }
    
    .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
        height: 100px !important;
        width: 100px !important;
    }
    
    button.slider-button.slider-button--prev {
        display: none !important;
    }
    
    button.slider-button.slider-button--next {
        display: none !important;
    }
    
    media-gallery.product__column-sticky[aria-label="Gallery Viewer"] {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
    }
    
    .thumbnail-slider.slider-mobile-gutter.quick-add-hidden {
        order: -1 !important;
    }
    
    .thumbnail[aria-current] {
        border-radius: 50% !important;
    }
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708540286083.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
jcrispy
New Member
15 0 0

Oh my gosh - I'm so sorry!  I apologize!!!

Let me see if this works.

 

ThePrimeWeb
Shopify Partner
1720 477 352

No worries, just refresh the page here, I edited the post and changed the code abit. I forgot to add some priorities

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
jcrispy
New Member
15 0 0

It worked for my tees and sweatshirts collections, but my totebags, glassware and mens section - the photos went away?

 

ThePrimeWeb
Shopify Partner
1720 477 352

Hey @jcrispy,

 

I see that the sections totebags, glassware and mens are using the old stack method, maybe it's a different product template? Can you switch them to the new slider that you did for the others?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
jcrispy
New Member
15 0 0

Oh yes - let me try that!

 

jcrispy
New Member
15 0 0

So it seems if my product only has one picture, then it has disappeared?

ThePrimeWeb
Shopify Partner
1720 477 352

@jcrispy,

 

If you're talking about the gift card, I see that also is using the stack method. What happens when you try to switch it to the slider? Or any product with one picture for that matter.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
jcrispy
New Member
15 0 0

Screen Shot 2024-02-21 at 11.07.16 AM.png

ThePrimeWeb
Shopify Partner
1720 477 352

In case @jcrispy,

 

You could replace the code with this one which will check if the slider is enabled and only then apply the effect.

Just remove the code from the previous post and replace it with the one below. You don't need to change anything else.

<style>
@media only screen and (min-width: 750px) {
    .product--thumbnail_slider .thumbnail-slider {
        flex-direction: column !important;
        align-items: normal  !important;
    }
    
    .thumbnail-slider .thumbnail-list.slider--tablet-up {
        flex-direction: column !important;
    }
    
    .thumbnail.global-media-settings img {
        width: 100px !important;
        height: 100px !important;
        border-radius: 50% !important;
    }
    
    .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
        height: 100px !important;
        width: 100px !important;
    }
    
    button.slider-button.slider-button--prev {
        display: none !important;
    }
    
    button.slider-button.slider-button--next {
        display: none !important;
    }
    
    media-gallery.product__column-sticky[aria-label="Gallery Viewer"]:has(.thumbnail-slider) {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
    }
    
    .thumbnail-slider.slider-mobile-gutter.quick-add-hidden {
        order: -1 !important;
    }
    
    .thumbnail[aria-current] {
        border-radius: 50% !important;
    }
}
</style>

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
jcrispy
New Member
15 0 0

I just checked and I did the same thing to all my product templates...with the thumbnails/carousel.  But any product listings with one photo has gone away (Gift card, or some of my totes and glassware).

 

 

ThePrimeWeb
Shopify Partner
1720 477 352

Try the code I just posted above @jcrispy, so far it seems to work when I test it.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
jcrispy
New Member
15 0 0

YES!!! Amazing 🙌 Thank you so very much!!! I spent hours trying to figure this out yesterday and this morning. I appreciate it!!!

ThePrimeWeb
Shopify Partner
1720 477 352

Before you first replied, I was about to go to sleep, it's almost 5am for me now. Glad I could help you out

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

webwondersco
Shopify Partner
1035 157 154

@jcrispy Hope you are doing well.

 

Did you check if your theme settings provide such an option in theme customization?

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
a small Coffee Tip would be greatly appreciated. 🙂