How to customize the color and the text for the button on products in section "top selling products"

[michal22]

Hi I d like to ask how could I customize a button on my "best selling products" collection on the front page from "choose options" or "buy it now" to "Shop Now" and making the button rectangular with the same green color that is my website covered with. I cannot send screeshots because they are saved in png or jpg and it wouldnt accept them but i ll send link to my store. The "best selling products" section is on my front page.

My store: pawitopia.com

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @michal22 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.quick-add__submit {
    background: #139C7E !important;
    color: white !important;
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSS-TekLabs · Accepted solution]

Can you add more code in file theme.css @michal22 

.quick-add__submit::after {
    box-shadow: none !important;
}

[BSS-TekLabs · Accepted solution]

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @michal22 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.quick-add__submit {
    background: #139C7E !important;
    color: white !important;
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSS-TekLabs]

And add this code before tag </head> in file theme.liquid to replace text to "Shop now" @michal22 

<script>
let listButtons = document.querySelectorAll(".quick-add__submit")
listButtons.forEach((element) => element.textContent="Shop Now");
</script>

[BSS-TekLabs]

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you @michal22 .

[michal22]

i dont know why but this doesnt work for me

[michal22]

Thank you it works but could you lease tell me how to remove the black line that outlines the text?

[BSS-TekLabs · Accepted solution]

Can you add more code in file theme.css @michal22 

.quick-add__submit::after {
    box-shadow: none !important;
}

[BSS-TekLabs]

<script>
window.addEventListener('load', function() {
let listButtons = document.querySelectorAll(".quick-add__submit");
listButtons.forEach((element) => element.textContent="Shop Now");
})
</script>

Please edit the code added to theme.liquid with this code @michal22 

[michal22]

thank you very much but now after clicking the buttons nothing happens they only fade a little bit 

[BSS-TekLabs]

Can you remove code and i can check again

[michal22]

sure , i just did that

[BSS-TekLabs]

Replace this code to "Shop Now"

[BSS-TekLabs · Accepted solution]

[BSS-TekLabs · Accepted solution]

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you @michal22