+1Best answer by Taylor Tarpley
Hi
Thank you for sharing your feedback with us!
I have submitted a feature request on your behalf.
Thanks for participating in the Community!
-Taylor
+60Hi
Thank you for sharing your feedback with us!
I have submitted a feature request on your behalf.
Thanks for participating in the Community!
-Taylor
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.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.