FROM CACHE - en_header
Promotion image

Re: regarding the thumbnail position in main product

Solved

regarding the thumbnail position in main product

Sohan2198
Pathfinder
124 8 18
‎01-30-2024 08:44 AM

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_
756 Views
0 Likes
Report
Accepted Solutions (3)
In response to Sohan2198

ThePrimeWeb
Shopify Partner
2138 616 503
‎01-30-2024 11:23 AM

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

721 Views
1 Like
Report
In response to Sohan2198

ThePrimeWeb
Shopify Partner
2138 616 503
‎01-30-2024 01:22 PM

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

709 Views
0 Likes
Report
In response to Sohan2198

ThePrimeWeb
Shopify Partner
2138 616 503
‎02-02-2024 09:23 AM

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

678 Views
1 Like
Report
Replies 12 (12)

ThePrimeWeb
Shopify Partner
2138 616 503
‎01-30-2024 09:06 AM

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!
745 Views
0 Likes
Report
In response to ThePrimeWeb

Sohan2198
Pathfinder
124 8 18
‎01-30-2024 10:33 AM

Please check @ThePrimeWeb 

 

https://www.shopqse.com/

Shopify_
725 Views
0 Likes
Report
In response to Sohan2198

ThePrimeWeb
Shopify Partner
2138 616 503
‎01-30-2024 11:23 AM

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!
722 Views
1 Like
Report
In response to ThePrimeWeb

Sohan2198
Pathfinder
124 8 18
‎01-30-2024 01:18 PM

@ThePrimeWeb 

This code not working

Sohan2198_0-1706638541217.png

result

Sohan2198_1-1706638650746.png


Nothing change 

Shopify_
712 Views
0 Likes
Report
In response to Sohan2198

ThePrimeWeb
Shopify Partner
2138 616 503
‎01-30-2024 01:22 PM

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!
710 Views
0 Likes
Report
In response to ThePrimeWeb

Sohan2198
Pathfinder
124 8 18
‎02-02-2024 09:02 AM

@ThePrimeWeb 

I need on whole product.

its work only on one product

Shopify_
685 Views
0 Likes
Report
In response to Sohan2198

ThePrimeWeb
Shopify Partner
2138 616 503
‎02-02-2024 09:23 AM

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!
679 Views
1 Like
Report
In response to ThePrimeWeb

Sohan2198
Pathfinder
124 8 18
‎02-06-2024 07:12 AM

hello @ThePrimeWeb 

 

How to fix this

Sohan2198_0-1707221493162.png

too long div 

 

please help 

 

Best, 

Sohan

Shopify_
647 Views
0 Likes
Report
In response to Sohan2198

Sohan2198
Pathfinder
124 8 18
‎02-06-2024 07:18 AM

Hello @ThePrimeWeb 

 

I fixed but my 

slider button not working

Sohan2198_0-1707221836651.png

please check

 

Best regards

Sohan

Shopify_
644 Views
0 Likes
Report
In response to Sohan2198

ThePrimeWeb
Shopify Partner
2138 616 503
‎02-06-2024 08:02 AM

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!
637 Views
1 Like
Report
In response to ThePrimeWeb

Sohan2198
Pathfinder
124 8 18
‎02-02-2024 09:23 AM

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_
678 Views
0 Likes
Report
In response to Sohan2198

ThePrimeWeb
Shopify Partner
2138 616 503
‎02-02-2024 09:25 AM

@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!
675 Views
0 Likes
Report

Community Blog Articles

b2b-store-_2_.webp
The 9 Questions You Need To Answer When Starting a B2B Store

Starting a B2B store is a big undertaking that requires careful planning and execution. W...

By JasonH Sep 23, 2024
page_thumb_platform Cropped.png
Get ready for peak holiday selling season 2024

By investing 30 minutes of your time, you can unlock the potential for increased sales,...

By Jacqui Sep 11, 2024
03 leaderboard.webp
Highlights | Top Contributors August '24

We appreciate the diverse ways you participate in and engage with the Shopify Communi...

By JasonH Sep 9, 2024
Terms of Service Privacy Policy