Dawn theme - product image border frame

David_ill
Tourist
5 0 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. 

Replies 7 (7)
oscprofessional
Shopify Partner
9161 1561 1925

Hi @David_ill

can you share preview link of your store ?

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
oscprofessional
Shopify Partner
9161 1561 1925

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

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
David_ill
Tourist
5 0 1

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

oscprofessional
Shopify Partner
9161 1561 1925

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

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
David_ill
Tourist
5 0 1

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
Shopify Partner
9161 1561 1925

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.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
David_ill
Tourist
5 0 1

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