Resize transparent background of product image

Store Design
1

I am trying to resize my product images, but I only need the transparent background resized. When you click on a collections page, the tops and/or sides of product images are cut off. I want to be able to see the full image from this page.

The only way I know how to do this is to download photos and resized them and dropped them back in but I cannot take the time to do this for all of the photos. Does anyone know how I can do this for all my photos within shopify?

Store website: www.PatchQuestInc.com

Thank you :).

2023-07-07.png
2023-07-07.png1920Ă—1080 418 KB

1 Like
2

Hi @PatchQuestInc ,

I try to fit it some images changes some are not.

Try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.rimage-wrapper .rimage__image.cover {
    object-fit: contain !important;
    width: fit-content;
}

Result:

Ribe_Dagandara_0-1688763867206.png
Ribe_Dagandara_0-1688763867206.png1360Ă—400 654 KB

I hope it help.

1 Like
3

Thank you for the help! I am unsure where to add this into the code as my assets folder does not have a “base.css” file. Where should this code go?

2023-07-10.png
2023-07-10.png1920Ă—1080 191 KB

1 Like
4

Try to find one of this folder “base.css, style.css or theme.css”. I think you have theme.css. paste it on the very end. Thanks!

1 Like