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

[kyle345]

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!

[Moeed]

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

[kyle345]

https://www.ponique.com.au/products/copy-of-amelie-leggings-only-black

[Moeed]

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>

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

[PageFly-Richard]

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

[MRamzan]

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