Solved

Want product thumbnail images center under selected image - Dawn Theme, ver. 12.0.0

jbslide
Explorer
50 7 7

I want the product thumbnail images centered below the selected image. The product below shows the images "left-justified" instead of centered.

 

jbslide_0-1702779309685.png

I used this code before (added to bottom of base.css) that I saw in another post and it seemed to work then stopped working:

@media screen and (min-width: 750px){
.thumbnail-slider .thumbnail-list.slider--tablet-up {
margin: 0 auto;
justify-content: center;
}
}

 

Website is adroitfulness.com

pw: LetMeIn45%

Product link: https://adroitfulness.com/products/xtl-forged-chopper-household-round-head-fish-cutting-knife-kitche...

 

Thank you in advance.

Accepted Solution (1)

jbslide
Explorer
50 7 7

This is an accepted solution.

This code actually resolved the issue:

.thumbnail-list {
grid-template-columns: repeat(5, 1fr) !important;
margin: 0px auto;
justify-content: center;
}

jbslide_0-1704252982429.png

I finally realized the problem was the desktop layout on the default product page was set "thumbnails" instead "thumbnails carousel".

When I switched to "thumbnails carousel" the code worked and the thumbnails center. 

View solution in original post

Replies 10 (10)

PageFly-Henry
Astronaut
809 226 198

Hi @jbslide 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

.product--medium .thumbnail-list {

    grid-template-columns: repeat(3,1fr);

    width: 70% !important;

    margin-left: 75px !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

jbslide
Explorer
50 7 7

PageFly-Henry,

Thank you, but it's not working correctly. The thumbnails shifted right, but not centered, and the thumbnails size reduced. I tried changing the numbers around but that really didn't help much. Thank you

jbslide_0-1702786834292.png

It also knocked the thumbnails for another product off center and to right:

jbslide_1-1702786941365.png

 

Thank you

 

 

jbslide
Explorer
50 7 7

Still looking for help on this issue.

Thank you

KetanKumar
Shopify Partner
36835 3635 11966

@jbslide 

oh sorry for this 

can you please confirm this look!

KetanKumar_0-1702954289753.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jbslide
Explorer
50 7 7

KetanKumar,

Yes, that's what I want. Centered just like that.

Thank you

KetanKumar
Shopify Partner
36835 3635 11966

@jbslide 

Thanks for confirm 

can you please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.product--medium .thumbnail-list 
   {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 300px;
  }

 After Code view

KetanKumar_0-1702960880774.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jbslide
Explorer
50 7 7

KetanKumar,

It didn't work. The thumbnails stay to the left:

jbslide_3-1702964349149.png

I changed the numbers in the code to this:

.product--medium .thumbnail-list
{
grid-template-columns: repeat(6, 1fr) !important;
max-width: 990px;
}

because the icons were small and one of my other products thumbnails  were in (2) rows of three:

jbslide_4-1702964889829.png

It was in (2) rows of 3 so I change the 3 to 6 in the code. The 990 just tried to test, and thumbnail images went back to normal size

 

Also I have a similar code at the bottom already: This was given to me from another post to resolved the issue of the product above not showing 6 thumbnails in one row. It showed (5) in one row and one in a 2nd row - from this post for your reference:

.thumbnail-list {
grid-template-columns: repeat(6, 1fr) !important;
}

https://community.shopify.com/c/technical-q-a/how-to-fit-all-thumbnail-images-under-the-selected-ima...

 

I hope this makes sense.

Thank you

websensepro
Shopify Partner
873 117 126

Hi, @jbslide.

 

Apply this code.

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

 

ul#Slider-Thumbnails-template--14630634553408__main {margin: 0px 70px auto !important;width: 55rem !important;}

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
jbslide
Explorer
50 7 7

@websensepro 

 

Thank you for taking a look.

I actually tried that code a couple days ago after taking a look at the one you resolved in the other post I mentioned.

 

I get the same result as mentioned above with the other developer that helped. The thumbnails shift right, but then my other product thumbnails are shifted too far right. The vest product thumbnails are shifting too far right. See below:

jbslide_0-1703255875178.png

jbslide_1-1703256106800.png

Seems there's other code(s) conflicting. Here is the link to the vest:

https://adroitfulness.com/products/autumn-women-vest-winter-puffer-parkas-coat-2023-new-casual-pocke...

 

I will just leave as is if it's not something easy to resolve/take too much of your time.

 

Thank you.

 

 

jbslide
Explorer
50 7 7

This is an accepted solution.

This code actually resolved the issue:

.thumbnail-list {
grid-template-columns: repeat(5, 1fr) !important;
margin: 0px auto;
justify-content: center;
}

jbslide_0-1704252982429.png

I finally realized the problem was the desktop layout on the default product page was set "thumbnails" instead "thumbnails carousel".

When I switched to "thumbnails carousel" the code worked and the thumbnails center.