Make the hollow add to cart button full

[Jarch1]

Basically I want to make the add to cart button on my products a full green instead of just the outline. I'm using the free publisher theme.

[comercioservice · Accepted solution]

@Jarch1  

hi Hope you are well,

I’ve taken a look at what you need—just a little CSS magic, and everything will be fixed! Follow my steps, and you'll have it sorted in no time!

1, from admin, go to Online Store > Themes.

2, Actions > Edit code for your active theme.

3, Find and open the theme.liquid file, maybe in the Layout folder.

4, Look for the </head> tag and paste the code in the end

<style>
.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after {
}

button.product-form__submit.button.button--full-width.button--secondary {
    background: #315b02;
    color: #fff;
}

button.product-form__submit.button.button--full-width.button--secondary::after {
    box-shadow: unset;
}
</style>​

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM

Thank you

[tim]

Add this to the sections "Custom CSS" setting:

button.product-form__submit {
  color: rgb(var(--color-base-background-1));
  background: rgb(var(--color-base-text));
}

Do not edit your theme code unless it's absolutely necessary (not in this case). This will save your headaches with theme update.