Skip to main content

Like the title says, it would be great to have a feature where we can select rounded corners on product feed images. The alternative now is going into Figma or Photoshop. 2 problems with that:

  • It has to be a PNG image
  • It can’t be a dynamic feed (Ab checkout, browse ab etc.)

Hi @Vindo

 

Thank you for sharing your feedback with us! 

 

I have submitted a feature request on your behalf.

 

Thanks for participating in the Community! 

-Taylor 


Thanks @Taylor Tarpley looking forward to this feature :)


Workaround for this is, use the HTML block with inline CSS for the border radius. Like:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Placeholder 2000x800</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f7f7f7;
}
.wrapper {
padding: 0 15px; /* left & right padding */
}
.placeholder {
width: 2000px;
height: 200px;
border-radius: 25px;
display: block;
background-color: #ddd;
object-fit: cover;
}
</style>
</head>
<body>
<div class="wrapper">
<img
class="placeholder"
alt="2000x800 placeholder"
src="data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='800'>
<rect width='2000' height='800' fill='%23dddddd'/>
<text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle'
font-family='Arial, sans-serif' font-size='72' fill='%23555'>2000 × 800</text>
</svg>"
/>
</div>
</body>
</html>

Not ideal but works. And can be used for other things aswell. Not sure how to this with Shopify product pictures but it might spark some solutions for people.