How can I add round corners to images on Symmetry theme?

Store Design
, , , ,
1

Hello!

I’m trying to add rounded corners to my product images on my site but most of the responses I found are in relation to base.css. After looking I saw that I don’t have that; I have styles.css.liquid and themes.js. Is there a different solution for these codes or should I continue trying the current solutions on the discussion board?

2

Update 3-4-24: the following code works for many parts of the site but does not include individual product pages.

.rimage-outer-wrapper {border-radius: 6% !important;}
.product-block .rimage__image, .collection-block .rimage__image {border-radius: 6% !important;}

Any additional help would be appreciated.

3

Hi Steamy,

If your theme uses styles.css.liquid instead of base.css, you can still achieve rounded corners for your product images by adding custom CSS to styles.css.liquid

Here’s how you can do it:

Access Your Shopify Admin > Go to Theme Editor > Edit Code > Locate the CSS File (Look for the styles.css.liquid file in the list of theme files.) >

Add CSS for Rounded Corners

Replace .product__img with the appropriate class used for product images in your theme. You can find the correct class by inspecting the product image element on your website (usually right-click on the image and select “Inspect” or “Inspect Element” depending on your browser).

/* Round corners for product images */
.product__img {
  border-radius: 8px; /* Adjust the radius as needed */
}