Re: regarding the thumbnail position in main product

Sohan2198 · ‎01-30-2024

Hey,

I want to change my thumbnail position in main product. As of now the thumbnail is show the bottom of the main product image. So I need change thumbnail position bottom to left.

I using the vivid theme.
Please resolve the problem

Best regards

Sohan

Shopify_

ThePrimeWeb · ‎01-30-2024

Hey @Sohan2198,

Please try this and let me know 😊

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: 991px) {
    media-gallery#MediaGallery-template--16370977964205__main {
        display: grid;
        grid-template-columns: 1fr auto;
    }
    
    slider-component#GalleryViewer-template--16370977964205__main {
        margin-left: 110px;
    }
    
    slider-component#GalleryThumbnails-template--16370977964205__main {
        width: 110px;
        position: absolute;
        margin-top: 0;
    }
    
    
    .thumbnail-slider ul#Slider-Thumbnails-template--16370977964205__main {
        flex-direction: column;
        width: 100%;
        height: 600px;
    }
    
    .thumbnail-slider ul#Slider-Thumbnails-template--16370977964205__main li {
        width: 100%;
    }
    
    media-gallery#MediaGallery-template--16370977964205__main .slider-button {
        display: none;
    }    
}

</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!

View solution in original post

ThePrimeWeb · ‎01-30-2024

Hey @Sohan2198,

I don't see the changes in the website code, are you sure you saved it and please check if you are in the correct theme.

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!

View solution in original post

ThePrimeWeb · ‎02-02-2024

Hey @Sohan2198,

Delete the previous code and apply this instead

<style>
@media only screen and (min-width: 991px) {
    media-gallery.product__media-gallery {
        display: grid;
        grid-template-columns: 1fr auto;
    }
    
    slider-component.slider-mobile-gutter:not(.thumbnail-slider) {
        margin-left: 110px;
    }
    
    slider-component.thumbnail-slider {
        width: 110px;
        position: absolute;
        margin-top: 0;
        top: 0;
        left: 0;
    }
    
    
    .thumbnail-slider ul.thumbnail-list {
        flex-direction: column;
        width: 100%;
        height: 600px;
    }
    
    .thumbnail-slider ul.thumbnail-list li {
        width: 100% !important;
    }
    
    media-gallery.product__media-gallery .thumbnail-slider .slider-button {
        display: none;
    }    
}
</style>

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!

View solution in original post

ThePrimeWeb · ‎01-30-2024

Hey @Sohan2198,

Can you share the store url and store password (if any)

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!

Sohan2198 · ‎01-30-2024

Please check @ThePrimeWeb

https://www.shopqse.com/

Shopify_

ThePrimeWeb · ‎01-30-2024

Hey @Sohan2198,

Please try this and let me know 😊

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: 991px) {
    media-gallery#MediaGallery-template--16370977964205__main {
        display: grid;
        grid-template-columns: 1fr auto;
    }
    
    slider-component#GalleryViewer-template--16370977964205__main {
        margin-left: 110px;
    }
    
    slider-component#GalleryThumbnails-template--16370977964205__main {
        width: 110px;
        position: absolute;
        margin-top: 0;
    }
    
    
    .thumbnail-slider ul#Slider-Thumbnails-template--16370977964205__main {
        flex-direction: column;
        width: 100%;
        height: 600px;
    }
    
    .thumbnail-slider ul#Slider-Thumbnails-template--16370977964205__main li {
        width: 100%;
    }
    
    media-gallery#MediaGallery-template--16370977964205__main .slider-button {
        display: none;
    }    
}

</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!

Sohan2198 · ‎01-30-2024

@ThePrimeWeb

This code not working

result

Nothing change

Shopify_

ThePrimeWeb · ‎01-30-2024

Hey @Sohan2198,

I don't see the changes in the website code, are you sure you saved it and please check if you are in the correct theme.

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!

Sohan2198 · ‎02-02-2024

@ThePrimeWeb

I need on whole product.

its work only on one product

Shopify_

ThePrimeWeb · ‎02-02-2024

Hey @Sohan2198,

Delete the previous code and apply this instead

<style>
@media only screen and (min-width: 991px) {
    media-gallery.product__media-gallery {
        display: grid;
        grid-template-columns: 1fr auto;
    }
    
    slider-component.slider-mobile-gutter:not(.thumbnail-slider) {
        margin-left: 110px;
    }
    
    slider-component.thumbnail-slider {
        width: 110px;
        position: absolute;
        margin-top: 0;
        top: 0;
        left: 0;
    }
    
    
    .thumbnail-slider ul.thumbnail-list {
        flex-direction: column;
        width: 100%;
        height: 600px;
    }
    
    .thumbnail-slider ul.thumbnail-list li {
        width: 100% !important;
    }
    
    media-gallery.product__media-gallery .thumbnail-slider .slider-button {
        display: none;
    }    
}
</style>

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!

Sohan2198 · ‎02-06-2024

hello @ThePrimeWeb

How to fix this

too long div

please help

Best,

Sohan

Shopify_

Sohan2198 · ‎02-06-2024

Hello @ThePrimeWeb

I fixed but my

slider button not working

please check

Best regards

Sohan

Shopify_

ThePrimeWeb · ‎02-06-2024

Hey @Sohan2198,

Those buttons didn't work since the beginning. I am not sure what's causing it. That's why I put a display none in the CSS .

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!

Sohan2198 · ‎02-02-2024

I replace Id the class

    .thumbnail-slider ul.pswp-gallery product__media-list contains-media grid grid--peek list-unstyled slider slider--mobile {
        flex-direction: column;
        width: 100%;
        height: 600px;
    }
    .thumbnail-slider ul.pswp-gallery product__media-list contains-media grid grid--peek list-unstyled slider slider--mobile li {
        width: 100%;
    }
   media-gallery.product__media-gallery .slider-button {
        display: none;
    }
}

</style>

Shopify_

ThePrimeWeb · ‎02-02-2024

@Sohan2198,

Your classes are wrong, see the code I just pasted above your reply

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!

Re: regarding the thumbnail position in main product

regarding the thumbnail position in main product

Community Blog Articles