Solved

Flow Theme - Product Page "Add to Cart" Button

Tia34
Excursionist
17 0 7

Hello,

I am looking to change the font on the "Add to Cart" button so that it matches "Buy It Now".

Any help would be appreciated,

Tia

https://m0nlixet7j9ijq20-26037026838.shopifypreview.com

Screen Shot 2021-10-29 at 12.26.54 PM.png

Accepted Solution (1)

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@Tia34 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

 

<style>.btn.add-to-cart--secondary{
    font-weight: var(--alt-btn-font-weight) !important;
    font-style: var(--alt-btn-font-style) !important;
    background: var(--primary-btn-bg-color) !IMPORTANT;
    color: var(--primary-btn-text-color) !IMPORTANT;
}

.btn.add-to-cart--secondary:hover{

    background: var(--primary-btn-bg-hover-color) !important;
    color: var(--primary-btn-text-hover-color) !important;
}
</style>

 



Kind regards,
Diego

 

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 3 (3)

diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

@Tia34 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

 

<style>.btn.add-to-cart--secondary{
    font-weight: var(--alt-btn-font-weight) !important;
    font-style: var(--alt-btn-font-style) !important;
    background: var(--primary-btn-bg-color) !IMPORTANT;
    color: var(--primary-btn-text-color) !IMPORTANT;
}

.btn.add-to-cart--secondary:hover{

    background: var(--primary-btn-bg-hover-color) !important;
    color: var(--primary-btn-text-hover-color) !important;
}
</style>

 



Kind regards,
Diego

 

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

Tia34
Excursionist
17 0 7

Hi Diego,

This is amazing! Thank you so much that worked right away.

I have a few other items I need help with. Would you be willing to help?

Tia

diego_ezfy
Shopify Partner
2935 562 883

@Tia34 

You're welcome. Sure, feel free to reach out to me via email with more information.

Thanks.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.