Dawn theme - product image border frame

David_ill
Tourist
8 0 2

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 8 (8)

oscprofessional
Shopify Partner
15821 2368 3077

Hi @David_ill

can you share preview link of your store ?

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
15821 2368 3077

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
David_ill
Tourist
8 0 2

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
15821 2368 3077

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
David_ill
Tourist
8 0 2

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
15821 2368 3077

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.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
David_ill
Tourist
8 0 2

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

Rosierose
Excursionist
29 0 4

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