Re: regarding the thumbnail position in main product

Solved

regarding the thumbnail position in main product

Sohan2198
Pathfinder
124 8 18

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_
Accepted Solutions (3)
ThePrimeWeb
Shopify Partner
2139 616 505

This is an accepted solution.

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.

ThePrimeWeb_0-1706631779841.jpeg

 

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
Shopify Partner
2139 616 505

This is an accepted solution.

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
Shopify Partner
2139 616 505

This is an accepted solution.

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

Replies 12 (12)

ThePrimeWeb
Shopify Partner
2139 616 505

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
Pathfinder
124 8 18

Please check @ThePrimeWeb 

 

https://www.shopqse.com/

Shopify_
ThePrimeWeb
Shopify Partner
2139 616 505

This is an accepted solution.

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.

ThePrimeWeb_0-1706631779841.jpeg

 

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
Pathfinder
124 8 18

@ThePrimeWeb 

This code not working

Sohan2198_0-1706638541217.png

result

Sohan2198_1-1706638650746.png


Nothing change 

Shopify_
ThePrimeWeb
Shopify Partner
2139 616 505

This is an accepted solution.

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
Pathfinder
124 8 18

@ThePrimeWeb 

I need on whole product.

its work only on one product

Shopify_
ThePrimeWeb
Shopify Partner
2139 616 505

This is an accepted solution.

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
Pathfinder
124 8 18

hello @ThePrimeWeb 

 

How to fix this

Sohan2198_0-1707221493162.png

too long div 

 

please help 

 

Best, 

Sohan

Shopify_
Sohan2198
Pathfinder
124 8 18

Hello @ThePrimeWeb 

 

I fixed but my 

slider button not working

Sohan2198_0-1707221836651.png

please check

 

Best regards

Sohan

Shopify_
ThePrimeWeb
Shopify Partner
2139 616 505

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
Pathfinder
124 8 18

I replace Id the class

<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 {
        margin-left: 110px;
    }
    slider-component.slider-mobile-gutter {
        width: 110px;
        position: absolute;
        margin-top: 0;
    }

 

    .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
Shopify Partner
2139 616 505

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