How to make rounded corners on product pictures/thumbnails by default?

Shopify Discussion

Topic summary

Goal: make all product image thumbnails display with rounded corners in a Shopify theme.

Key guidance:

  • Edit the theme stylesheet (theme.scss.liquid or theme.css.liquid).
  • Locate the correct CSS selector for product thumbnails/images (e.g., .product-thumbnail or .product-image).
  • Add a border-radius rule to that selector. Use border-radius: 50% for perfectly round/circular thumbnails, or a px/rem value for softer rounded corners.
  • Save, preview, and publish; back up the theme first.

Follow-ups and clarifications:

  • The requester shared a screenshot asking if they found the right place; responders emphasized verifying the exact selector and applying the rule to the thumbnail element or its container.
  • One participant requested the store URL (and password if protected) to check directly; private help was offered.
  • A YouTube tutorial link demonstrating how to round thumbnails was provided.

Notes:

  • The attached screenshot is relevant for confirming where to insert CSS.

Status:

  • No confirmed fix yet. Next step is identifying the precise thumbnail selector in the theme and applying border-radius accordingly.
Summarized with AI on December 13. AI used: gpt-5.
1

Hi all fellow Shopify enthusiasts :grin:

I have a simple request/question, and that is I would love that all my product picture thumbnails have rounded corners by default.

How do I do that?

I have limited coding experience, so please bear with me :blush:

2 Likes
2

Hi @Valentin123 ,

Would you mind to share your URL website? with password if its protected. Thanks!

3

Hi,

  1. Edit code > “theme.scss.liquid” or “theme.css.liquid” file or similar > Search for section related to product images/thumbnails and find CSS class or ID that targets these elements

Something like .product-thumbnail or .product-image

  1. add the following CSS code inside the curly brackets:
border-radius: 50%;
  1. Save > Preview and Publish

Hope this will help and please take backup before following above steps

1 Like
4

Hi,

Thank you so much for your help.

I have what i believe is the right place? I have attached a screenshot here for you to see below.

rounded corners 2.jpg
rounded corners 2.jpg1386×1110 203 KB

Is that the right place? And then i added it somewhere there?

1 Like
5

You need to check which is the right name selector for the thumbnails. If youll like the default you can attach in the style tag for that container. But need together with the selector and border-radius. You can PM me your store if you dont like to public. Thanks!

6

Make your thumbnails rounded: