How can I create circular thumbnails using the Dawn theme?

jcrispy · ‎02-21-2024

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!

ThePrimeWeb · ‎02-21-2024

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
Check out our interview with Shopify!

jcrispy · ‎02-21-2024

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

jcrispy · ‎02-21-2024

ThePrimeWeb · ‎02-21-2024

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
Check out our interview with Shopify!

jcrispy · ‎02-21-2024

www.dwellapparel.com

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

jcrispy · ‎02-21-2024

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!

ThePrimeWeb · ‎02-21-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

jcrispy · ‎02-21-2024

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

Let me see if this works.

ThePrimeWeb · ‎02-21-2024

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
Check out our interview with Shopify!

jcrispy · ‎02-21-2024

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

ThePrimeWeb · ‎02-21-2024

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
Check out our interview with Shopify!

jcrispy · ‎02-21-2024

Oh yes - let me try that!

jcrispy · ‎02-21-2024

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

ThePrimeWeb · ‎02-21-2024

@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
Check out our interview with Shopify!

jcrispy · ‎02-21-2024

ThePrimeWeb · ‎02-21-2024

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>

I

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

jcrispy · ‎02-21-2024

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 · ‎02-21-2024

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
Check out our interview with Shopify!

jcrispy · ‎02-21-2024

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

ThePrimeWeb · ‎02-21-2024

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
Check out our interview with Shopify!

webwondersco · ‎02-21-2024

@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. :)..! Instagram

MRamzan · ‎11-25-2024

Circular thumbnails:

Hire Me:

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

How can I create circular thumbnails using the Dawn theme?

How can I create circular thumbnails using the Dawn theme?

Community Blog Articles