Boarder around Add To Cart button

[Sproud]

Hi everyone. On my home page there is a black boarder around the “Add to cart” button but when entering the product page there isn’t. How do I change it so that there is also a black boarder around the button on the product page?

Thanks.

Theme: Origin

Preview: https://pg7vhe5h6xc4t4nz-58489143504.shopifypreview.com

[Made4uo-Ribe]

Hi @Sproud

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.

.product-form__buttons button:after {
  --border-opacity: var(--buttons-border-opacity);
}

And Save.

Result:

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

[Vinsinfo]

@Sproud Please follow below steps to add border around add to cart button in the product page. Let us know whether it is helpful for you.

1. From admin go to “Online Store” → “Themes”.
2. Click “Edit code” button from the current theme.
3. Go to “base.css” file.
4. Then paste the below code at the bottom of the file and then save changes.

.product .product__info-wrapper .product-form .product-form__buttons button:after {
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text), var(--border-opacity)), 0 0 0 var(--buttons-border-width);
}

Result will be like,

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

[websensepro]

Hi @Sproud

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[Sproud]

Thanks a lot!