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
9209 1564 1929

Hi @David_ill

can you share preview link of your store ?

 

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
oscprofessional
Shopify Partner
9209 1564 1929

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. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | 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
9209 1564 1929

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. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | 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
9209 1564 1929

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. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | 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.