How can I edit the size chart button in the Dawn theme?

kyle345
Visitor
3 0 0

Hello, I'm currently working on customizing my Shopify DAWN theme, and I need assistance with some CSS. Specifically, I'm trying to modify the appearance of the "Add to Cart" and "Size Chart" buttons on my product page.

 

For the "Add to Cart" button, I want to change its background color to match my primary theme color, and its border color should also be adjusted to match.

 

As for the "Size Chart" button, I'd like to change its background to white, adjust the border color, and add some spacing so it doesn't overlap with the "Add to Cart" button.

 

I have already created a separate Liquid file for the size chart modal, but I'm having trouble finding where to make these modifications in my theme's existing code. Could anyone guide me on how to achieve this? Any help would be appreciated!

 

Thanks in advance!

Replies 5 (5)

Moeed
Shopify Partner
3795 958 1190

Hey @kyle345 
Kindly share your Store URL and password if enabled 

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Moeed
Shopify Partner
3795 958 1190

Hey @kyle345 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

 

<style>
a.button.size-chart-button {
    background: white;
    color: black;
    box-shadow: unset !important;
    margin-bottom: 25px;
    border: solid 1px black;
}
a.button.size-chart-button::after {
    position: unset;
}

button#ProductSubmitButton-template--18322653741338__main {
    background: black;
    color: white;
}
</style>

 

Moeed_0-1686551698132.png

Note: Adjust the color of Add to Cart button in the code according to how you want!

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

PageFly-Richard
Shopify Partner
4287 973 1627

Hi @kyle345 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

 

Online Store ->Theme ->Edit code

Assets ->Base.css

.button.size-chart-button {
    background-color: #fff !important;
    color: #000 !important;
    margin-bottom: 25px;
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

MRamzan
Shopify Partner
165 1 21

Create a size chart pop-up on each product page:

 

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112