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

Store Design
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