How can I adjust photo sizes using Origin theme?

Store Design
1

Hello, I am trying to adjust the size of my photos with Origin theme. I am still in the process of making this store, and would like to see how I can have smaller photos. https://shaba-1707.myshopify.com/

2

Hi Adrian, I have gone through your request There are some approaches to this and these are;

  1. You can re-upload a better / desired size of your product image
  2. You can resize the image right from the Shopify Editor

You can do these.

3

Hello @adrianseller ,

It’s GemPages support team and glad to support you today.

I would like to give you a recommendation to support you so kindly follow steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1671937542274.png
GemPages_0-1671937542274.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

For example,

GemPages_1-1671937862819.png
GemPages_1-1671937862819.png1919×967 80 KB

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

4

Hi @adrianseller

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file base.css

.product__media-list .product__media-item .product-media-container .media > img {

    object-fit: contain !important;

}

.product__media-list .product__media-item .product-media-container .media {

  background: white;

}

Hope this answer helps.
Best regards,
Victor | PageFly

5

Has this been updated since this post? I attempted to modify the code using the above and I don’t see any changes to the size of the images. Thank you!

6

Removed the code dictating background colour. Reduce the 100% to 70% or even lower to change the image size.

.product__media-list .product__media-item .product-media-container .media { padding-top: 70%; } .product__media-list .product__media-item .product-media-container .media > img { object-fit: contain; }