How to customize the product image border frame in Dawn theme?

Store Design

Topic summary

A user seeks to customize the product image border in Shopify’s Dawn theme. While the theme includes a ‘Show image border’ option under Featured Collection settings, the default border is too subtle.

Solution Provided:

A community member shares CSS code to customize border color and weight:

  • Add code to component-card.css (Online Store → Theme → Edit Code → Assets)
  • First code snippet targets product grid borders on homepage
  • Second code snippet (product__media-list .product__modal-opener) addresses individual product page borders

Current Issue:

The CSS modifications work on desktop view but fail to display on mobile devices. The original poster lacks a live store URL for further troubleshooting since they’re testing the theme.

Additional Question:

Another user asks about code placement within the component-card.css file, having tried both beginning and end positions without success in seeing borders.

The discussion remains open with unresolved mobile responsiveness and implementation questions.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hello,

Can anyone help? I’m testing out the Dawn theme for my store - I like it, but feel it’s missing some key customisation options.

I’ve looked through the forum and I can’t find any discussions or a solution.

Within the ‘Featured collection’ options under ‘Product card’ I’ve ticked the ’Show image border’ option. This adds a fine key line border to my product images - which I want, however I’d like to customise the colour and weight of the line as I think it’s too subtle.

Has anyone managed to do this?

As I’m only testing out this theme at the moment, I don’t have a URL as it isn’t a live store. I was wondering if anyone else who is using this theme is having similar issues or knows of a solution?

Any help would be appreciated.

Thanks in advance.

2

Hi @David_ill

can you share preview link of your store ?

3

Please add the below code in component-card.css

  1. Go to Online store → Theme → Action → Edit code
  2. Asset → component-card.css
.card.card--product.card--outline {
    border: 2px solid rgba(0, 0, 0, 0.3); /*change the color and width as required*/
}

Hope this will help you
Thanks

4

Thank you for your quick reply and help.

I’ve added the supplied code as suggested in the component-card.css and this has worked perfectly on the multiple product grid on the home page.

Unfortunately it hasn’t worked on the individual product card when you click on a single product. (Image attached for reference).

Is this possible?

Thank you

Dawn product card-01.png
Dawn product card-01.png1505×651 81 KB

5

yes it is possible.
Add this code
.product__media-list .product__modal-opener {
border: 2px solid red;
}

6

Once again, thank you so much for your quick reply.

This has worked perfectly when viewed on desktop but neither code update has worked when I view on mobile.

Do I need to add both codes elsewhere for this to be consistent on desktop and mobile?

7

Please share me your store URL. So that I can help you
As the code I shared with you is for all the view desktop, mobile.

8

Sorry, I don’t have a URL as it isn’t a live store yet.

9

I keep trying this, but am not having any luck. Does it matter where in the component card asset we add it? I tried the beginning and the end, but still couldn’t see any borders