How do I change the product image size for Ride theme?

Store Design
1

Hey everyone!

The main product photos on the Ride theme are too big for my liking. I am hoping to change it. Just in the basic front end editor, I changed the size to small and that is still too big. I went into the main-product.liquid and changed the sizes of the values small, medium and large but it didn’t affect anything.

This is the section I was editing:

{%- liquid
assign variant_images = product.images | where: ‘attached_to_variant?’, true | map: ‘src’
assign media_count = product.media.size
if section.settings.hide_variants and media_count > 1
assign media_count = media_count | minus: variant_images.size | plus: 1
endif

if section.settings.media_size == ‘large’
assign media_width = 0.65
elsif section.settings.media_size == ‘medium’
assign media_width = 0.55
elsif section.settings.media_size == ‘small’
assign media_width = 0.45
endif
-%}

I changed the .45 value to .10 and it didn’t do anything. I made sure the media display settings on the front end were set to small. And to be sure, at one point I changed all three of small medium and large to .10 and nothing.

Let me know what you guys think! Thank you!!

2 Likes
2

@Mad24

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
3

Hi @Mad24 ,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (min-width: 990px) {
	.product__media-wrapper {
		max-width: 40% !important;
		width: calc(40% - var(--grid-desktop-horizontal-spacing) / 2) !important;
	}
	.product__info-wrapper {
		max-width: 60% !important;
		width: calc(60% - var(--grid-desktop-horizontal-spacing) / 2) !important;
	}
}

Hope it helps!

4

I have the same issue.

I’ve connected the Syncee drop shipping app. All product images are uploaded automatically to the Shopify webstore. However the images displayed on the product page are massive and are also different sizes. What I’m hoping to do is confine the pictures to a certain size. Then the click to zoom function may need adjusting too.

https://standuppaddleboard.shop/password

shabru

One specific example is as follows

https://standuppaddleboard.shop/products/b0303016

1 Like
5

@Dean2

yes, 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__media {
    padding-top: 100% !important;
}
.product__media img {
    object-fit: contain;
}
2 Likes
6

Thank you very much. That was very helpful on the product page.

The next issue is when you click on the product picture, it opens in zoom and the image is just as large and your scrolling through pages of picture. Is there something similar to fix that?

7

I had the same issue and this worked for me. Thank you!