Design button

Topic summary

A user seeks CSS code to customize an \

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.

Hi can you please help me with the CSS code? I want to change the color of the button that says add to bag. make the outline white, inside ‘‘9D9898’’ and the colour of letter black

URL: matibrnd.com

password: biangu

2 Likes
  • Here is the solution for you @MT27
  • Please follow these steps:

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.

  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

Hi @MT27

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

button.product-form__submit:after {
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(255, 255, 255, 1), 0 0 0 var(--buttons-border-width) rgba(255, 255, 255, 1);
}
button.product-form__submit:before {
    box-shadow: none;
}
button.product-form__submit {
    background: #9D9898;
    color: black;
}

And save.

result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

Thank you it worked!! can you please also tell me how to change the text?

1 Like

Do you want to change the color of the text @MT27 ?

no the actual text

1 Like

Do you want change text “Add to bag” to other text @MT27 ?

yes too ‘‘Add to Cart’’

1 Like

Do you want like this @MT27 ?

  • Here is the solution for you @MT27
  • Please follow these steps:

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.

  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.