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

[David_ill]

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. 

[oscprofessional]

Hi @David_ill

can you share preview link of your store ?

[oscprofessional]

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

[David_ill]

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

 

[oscprofessional]

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

[David_ill]

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?

[oscprofessional]

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.

[David_ill]

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

[Rosierose]

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