I need some help changing ratio of product thumbnails on product page (Dawn Theme)

Store Design
1

Hello, I need to change the aspect ratio of the product thumbnails for Dawn theme on the product page. They default at 1:1 ratio but I need them to be of a larger height (Portrait) ratio, and I don’t want them to appear cropped in the thumbnails. I tried looking for an adapt to image option, but I’ve had no luck! Please help.

One last thing, I understand that a code might have to be plugged in somewhere to make this happen, and if I’m being honest coding absolutely scares me. I would need step by step instructions on how to make this possible, or if someone could plug it in for me, I’d be even more grateful.

I have attached a screenshot of what I am referring to in regards to my stores product thumbnails and how they currently look like.

Thanks so much in advance

:slightly_smiling_face:

2

Hi @JessMik ,

Can you kindly share your store link (with the password, if any) with us?

3

Hi there. Yes of course. My store link is
https://pretty-little-flower-boutique.myshopify.com - I did change the
domain to shopprettylittleflowerboutique com just in case you need both.

4

Hi @JessMik
Is this what is required? if yes add this code in base.css

  • Go to online store > click on 3 dots > Edit code > search for base.css and add below code at very bottom
.thumbnail-list__item::before {
  content: "";
  display: block;
  padding-bottom: 140% !important;
}

Screenshot_41.png
Screenshot_41.png1885×956 152 KB

2 Likes
5

This is exactly what I am trying to do. Would you be able to do this for me
and have it saved? Or could you please tell me where in the edit code
section that I’d be able to fine base css? Please and thank you so much!

6

This is exactly what I am trying to do. Would you be able to do this for me and have it saved? Or could you please tell me where in the edit code section that I’d be able to fine base css? Please and thank you so much!

7

Hi @JessMik

Please check the below screenshot

Screenshot_42.png
Screenshot_42.png1727×789 56.5 KB

Screenshot_43.png
Screenshot_43.png1740×929 51.3 KB

8

Thank you so much! My coding area doesn’t really resemble that. Am I replacing the old ratio code that says ratio before in those exact spots where the numbers were for the new code I’d need to copy and paste in?

Have I mentioned how much I hate coding? Lol. So sorry for all of the questions and confusion.

9

Hi @JessMik ,

No worries, you just need to copy and paste the code which I had share earlier at very bottom of base.css and save that file.

10

Hi @JessMik

Let me know if you have issue in adding that code.

I will do it for you for that I will request you for store access and add that code for you in that file

11

Thank you so so much! I did it. But is there a way to make those thumbnail product images just a bit bigger?

12

And if there is a way to make those images just a bit bigger, would I need to delete the previous code you gave me for a new code? Thanks so much again!