How can I reduce the size of product images in the 'Taste' theme?

Store Design
1

Hi, I’m currently using the “Taste” theme in my store, and I want to decrease the image size of my products. As seen on here https://muradandco.com/products/sla057, the image is very large and takes up like half of the page, and when you click on it it explodes to be even bigger. How can I change this? I already have the setting “Desktop media size” set to small, which is the smallest I was able to make it.

1 Like
2

Hi @zabby ,

Please do the following instructions instead

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the code below at the very bottom of the file.
@media only screen and (min-width: 750px) {
slider-component.slider-mobile-gutter {
    width: 50%;
    margin: auto;
}
}
3

Hi @zabby ,

You can follow the instructions provided by the Shopify Help Center:

https://help.shopify.com/en/manual/shopify-admin/productivity-tools/image-editor#resize-an-image

Hope this was helpful!

4

Thanks! Is there any way to decrease the size of the image when you click on it to zoom?

5

Hi @zabby,

I would like to resize only the product image size when the products are selected and not collection image size. https://freshkingdom.in/products/seer-fish-king-fish

The code you have given reduces images of all size like collection images, products images, etc.

Thanks in advance for your help

6

Hi there, this worked for me!

However, instead of just moving the product image, it has moved every other container/image on my website. Is there a way to have this code to just affect the main image on the product page and not everything else.

Thanks