Slideshow Button and Image Banner Button

Store Design
, , ,

Topic summary

A user is trying to customize button borders on their Shopify store’s slideshow and image banners. While they can modify text color, they cannot change the button border itself and want it to be white.

Screenshots provided: The user shared three images showing the current button appearance on their site.

Solutions offered:

  • Two community members requested store access (URL: www.gogghi.ch, password provided)
  • Multiple CSS solutions were proposed targeting .banner__box .button and related selectors
  • Code snippets involve modifying theme.css or base.css files with custom border and box-shadow properties
  • One solution specifically uses box-shadow with white (#fff) and off-white (#f8f8f8) values to create the desired border effect

Resolution: The issue was resolved successfully. The user confirmed the solution worked with a thank you message.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hello Everybody!

I am changing my website a bit and got some toubles with my buttons on the slideshow and image banners..

I can change text color etc. but not the border of the button itself.. can someone help me with that please?

I would want it to be white!

I will put some screenshots in so it will be easier

thanks for the help!

Bildschirmfoto 2025-04-30 um 13.49.57.png
Bildschirmfoto 2025-04-30 um 13.49.57.png2686×1758 553 KB

Bildschirmfoto 2025-06-11 um 15.36.11.png
Bildschirmfoto 2025-06-11 um 15.36.11.png2526×1624 409 KB

Bildschirmfoto 2025-06-11 um 15.35.00.jpg
Bildschirmfoto 2025-06-11 um 15.35.00.jpg1914×897 149 KB

2

Hi @LeandroS ,

kindly provide your store URL please and if it is password protected, please share the password as well.

Thanks!

3

Hi @LeandroS

Can you please share the store password so I can provide the exact code for this?

4

www.gogghi.ch

password: DESERTPALM-SUMMERDUNES

5

www.gogghi.ch

password: DESERTPALM-SUMMERDUNES

6

Hi @LeandroS ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.banner__box .button--secondary:after {
    border: 1px solid black !important;
}

.banner__box .button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after{
    box-shadow: 0 0 white !important;
    border: 1px solid black;
}
7

@LeandroS

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.banner__box .button--secondary:after {
    border: 1px solid black !important;
}

.banner__box .button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after{
    box-shadow: 0 0 white !important;
    border: 1px solid black;
}
8

Try this code

Navigate to Online Store > Themes > click on Edit code.
Locate and open the theme.css or base.css file. Scroll to the bottom and add the following CSS code:

.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded::after {
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) #fff, 0 0 0 var(--buttons-border-width) #f8f8f8 !important;
}
9

perfect thanks for the help!