Bleeding graphics on product photos

Bleeding graphics on product photos

L01
Visitor
1 0 0

Is there a way to stop the images from "bleeding" i.e. to crop the images so they are not cut off?  I have the basic shopify plan.  I tried resizing the images but it made no difference to the appearance of the site.ss.png

Replies 2 (2)

rajweb
Shopify Partner
210 15 13

Hey @L01 ,

To prevent images from being cut off or "bleeding" in your Shopify store, 

Adjust CSS

You can add custom CSS to control how images are displayed. Specifically, you can use the object-fit property, which controls how images are resized within their containers.

Follow these steps:

1. Log in to your Shopify admin panel.

2. Online Store > Themes > Edit Code.

3. Locate the file  theme.scss.liquid or theme.css.liquid (or any other relevant CSS file depending on your theme). 

.product-card img {
    object-fit: cover; /* Ensures the image fits without distorting */
    width: 100%; /* Makes sure it spans the entire container */
    height: auto; /* Adjusts height to maintain aspect ratio */
}

The object-fit: cover; ensures that the image covers the entire area without stretching, and it will be cropped proportionally from the center. You can also use  object-fit: contain; if you prefer to make sure the entire image is visible without any cropping, but this may leave some empty space around the image.

Resize or Crop Images in Shopify Admin

Alternatively, you can manually resize or crop your images directly from the Shopify Admin panel.

Go to  Product > All Product

Select a product and scroll down to the Images section.

Click on an image to edit it, and use the built-in cropping and resizing tools to modify the image dimensions to fit the aspect ratio required by your theme.

 

Use Shopify's Image Editor Apps

If you're using the basic Shopify plan and resizing in the admin doesn't help, there are apps in the Shopify App Store that allow more advanced image editing features. Apps like Pixc, Image Resize by Pixc, or Bulk Image Edit provide more control over image dimensions and optimization, which may help resolve the issue.

 

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com

websensepro
Shopify Partner
1272 144 160

Hi  , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial