Shopify themes, liquid, logos, and UX
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.
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
Hi , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024