Adding Borders on all Images in dawn theme

Store Design

Topic summary

Goal: add visible borders to product images in the Shopify Dawn theme without editing each image file.

Key attempts and guidance:

  • A CSS approach was suggested targeting .media–square and .media–portrait with a 1px solid border via theme.scss.liquid. Multiple participants report this file doesn’t exist in Dawn.
  • An alternative was given: add border CSS to .card-wrapper inside component-card.css. This successfully adds borders, but it affects the entire product card (image + info), not just the image.

Current issue:

  • The requester needs the border applied only to the image, not the accompanying information card. The provided .card-wrapper selector is too broad.

Status and next steps:

  • No final selector or file location was confirmed that targets only the image within Dawn’s structure.
  • Open items: identify the correct Dawn CSS file (e.g., component-specific CSS) and a selector that isolates just the image (not the whole card). The shared store URL and password were provided for context/testing.

Outcome: discussion remains open; a precise, image-only CSS solution for Dawn has not been posted yet.

Summarized with AI on January 25. AI used: gpt-5.
1

Hi

I would like to find out how one can add borders on images in Dawn them, I have resorted to adding the borders on the actual picture but the result is not noce

2

Welcome to the Shopify community!
Please share your site URL,

So I will check and provide a solution here.

3

https://wig-nature-collection.myshopify.com/

password: WignatureC1

4

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
.media--square,.media--portrait {
    border: 1px solid !important;
}
5

Hi

Thanks for the response, but I do not have this file theme.scss.liquid how do I go around this?

6 
.card-wrapper {
    border: 1px solid red !important;
}

@EltonZ
Add this code in component-card.css

Thank you.

7

Thanks so much I have options now, I however need it to only border the image the code is also covering the information card.

8

I don’t have a theme.scss.liquid file under assets I’m using the dawn theme