How can I adjust the size of my website's thumbnail images?

Store Design
,
1

Hello,

Just have a small issue with the home page of my website. Note that I am just starting out with the starter plan so not sure if that is why?

https://cheekysneaks-7934.myshopify.com/

The thumbnail images on the website do not fit the square thumbnail. I was expecting them to auto adjust in the square box which looks like it is a 284 x 284 square. If you click on the product then the images look good.

Please see screenshot below. Many thanks!

Luke

Cheekysneaks_0-1679162043611.png
Cheekysneaks_0-1679162043611.png724×404 98.3 KB

1 Like
2

@Cheekysneaks

hello,

Please use square images on grid. currently image size wide.

Because we change the size of image with coding than grid look is not good like this,

shreyhweb_0-1679163988509.png
shreyhweb_0-1679163988509.png2148×512 116 KB

so i will suggesting you use the square image on products.

Thankyou :slightly_smiling_face:

1 Like
3

Hi @Cheekysneaks
I would like give you a solution.

  1. Go to Online Store → Theme → Edit code https://prnt.sc/XkUYXZPnym_E

  2. Open your base.css in the Assets folder.

  3. Paste the below code at the end of the file. https://prnt.sc/2o18VWRD_CU0

.collection .product-card-wrapper .card__media img{
 object-fit: contain !important;
}
.collection .product-card-wrapper .card__inner{
  background: rgba(0,0,0,0) !important;
}

Result:

GemPages_0-1679205220433.png
GemPages_0-1679205220433.png1022×785 102 KB

Best regards,
GemPages Support Team

4

Hi @Cheekysneaks ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

Hope my answer will help you.

Best regards,

Victor | PageFly

5

@GemPages @PageFly-Victor @shreyhweb ,

Thanks for your suggestions, I think because I am on the starter package, I don’t see the three ellipse and the option to edit code. I will try and amend to pics to square them off for the time being.

Thanks for your time and suggestions.

Luke

1 Like