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…

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…

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-templat…

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 prod…

Still looking for help on this issue. Thank you

@jbslide oh sorry for this can you please confirm this look! [KetanKumar_0-1702954289753.png]

@jbslide Thanks for confirm can you please try this code Go to Online Store->Theme->Edit code 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, 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 pro…

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 L…

@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 th…

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

Technical Q&A

jbslide December 19, 2023, 3:35am 6

KetanKumar,

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

Thank you

Topic		Replies	Views
how to center thumbnail images on product page? Store Design design , customizations , product-page	3	38	July 10, 2023
How to fit all thumbnail images under the selected image in one row? - Dawn Theme , ver. 12.0.0 Technical Q&A shopify-theme	4	50	December 18, 2023
Align Product Image Thumbnails To Left Of Main Image Store Design design , customizations , css , shopify-themes	19	221	November 27, 2024
How to Center Product Thumbnails? (Canopy) ...and I thought it would be easy! Store Design	4	73	January 19, 2022
How to center product image with thumbnails on both side carousel mode on mobile display Dawn Theme Store Design design , shopify-themes , product-page	3	56	October 16, 2023

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

Related topics