How can I remove a button shadow from my online store?

Technical Q&A
1

Hi guys!

At the moment we are in the development of our online store. Due to that we went into the code to customize some more things. We don’t know how it happened but now we have a shadow on the boarder of the button… We don’t want that at all! I add a picture under this question, so you can see!
So the boarder should be just red. We have to remove this shadow around it!

Is there anyone who’s able to help me out? Would love to finish the shop! Thank you!

Bildschirmfoto 2022-04-13 um 09.51.38.png
Bildschirmfoto 2022-04-13 um 09.51.38.png1012×596 18.9 KB

Best regards,

Fabio R

2

Hi @FabioRRR ,

Please share your store URL and password of front view.

So that I will check and let you know the exact solution here.

Best regards.

3

@FabioRRR
Hi,
Welcome to the Shopify community!

I am Adam Web Expert at Zworthkey,
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

1 Like
4

Hi Adam! Thank u for your quick answer and your help! Here is our Webstore: https://www.superare.at

5

Hi @FabioRRR ,

You can try follow the instruction below:

  1. Go to Online Store → Theme → Edit code.
  2. Asset → create separate css file for css code then paste code below in the file.
    Ex: /custom.css
.product-form__submit {
    border-color: red !important;
    box-shadow: none !important;
}
.button--secondary:after {
    box-shadow: none !important;
}
  1. Layout → /theme.liquid → paste code below into the tag of the file:
{{ 'custom.css' | asset_url | stylesheet_tag }}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

1 Like
6

@FabioRRR

.button--secondary:after {
    box-shadow: none !important;
}

'Add this code in the bottom of the Section-main-product.css file

  1. Navigate to Online Store->Theme->Edit code
  2. Asset->/Section-main-product.css ->paste Above code at the bottom of the file.
  3. Save it.
7

So my main problem is solved now! Thanks for that! But now my 2 buttons, which are in the black’n’white image got removed from the boarder… But i want that they have a border. May u fix that as well? Thank you for your engagement!

8

FYI

Bildschirmfoto 2022-04-13 um 11.35.38.png
Bildschirmfoto 2022-04-13 um 11.35.38.png2858×1356 313 KB

9

@FabioRRR
Kindly Share this page link,
So that i can help you,

10

Like the URL? Or what do u need?

1 Like
11

@FabioRRR
yes url, on which page it seems.

12

Hi @FabioRRR ,

You can try follow the instruction below:
Please paste code into create separate css file you create.
Ex: /custom.css

#Banner-template--14878015291532__image_banner .button--secondary:after {
    border: solid 1px #fff;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

1 Like
13

Awesome! Thank you so much! But now i Have one question left… How do i change the color of the “Check out” border in the same rgb(228, 50, 66)? Would that also be able to change in my custom.css?

Bildschirmfoto 2022-04-13 um 11.55.45.png
Bildschirmfoto 2022-04-13 um 11.55.45.png2880×1800 261 KB

14

Hi @FabioRRR ,

Sure, you also add new code change on custom.css file.

Example:

#cart-notification-product button.button.button--primary.button--full-width {
    border-color: red !important;
}
#cart-notification-product button.button.button--primary.button--full-width:after {
    box-shadow: none !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

15

hm… it’s not solved yet. The checkout button border hasn’t got changed…