Feature Requests: Rounded corners for product feed images

Forum|Forum|1 year ago
October 22, 2024
4 replies
451 views

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.)

Best answer by Taylor Tarpley

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

Taylor TarpleyAnswer

Community Manager

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

V

VindoAuthor

Contributor I

Thanks @Taylor Tarpley looking forward to this feature :)

L

Lorenzo-TT

Contributor II

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.

A

alec

Contributor I

Any update to this feature? Would really like to leverage it once it becomes available.

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:

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials