change thickness for outline of button, image banner

Store Design
, ,

Topic summary

A user seeks to increase the thickness of button outlines on their image banner. They provide before/after screenshots showing the desired thicker border effect on their Dawn theme store (alexandrawestbrook.com).

Three solutions were offered:

  • Solution 1: Add CSS code to theme.liquid file above the </body> tag, targeting button borders with increased thickness
  • Solution 2: Use the Custom CSS section in Theme settings to add styling rules for banner buttons (2px solid white border with adjusted padding)
  • Solution 3: Edit the section-image-banner.css file directly, adding code to create 3px white borders with modified padding

All three approaches use CSS to modify border thickness and padding properties. Each respondent provided code snippets and result screenshots demonstrating the thicker outline effect. The discussion remains open with multiple viable solutions presented but no confirmed resolution from the original poster.

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

hello, i would like to make my button outline a bit thicker. This is what it looks like currently:

Screenshot 2025-03-30 at 18.23.40.png
Screenshot 2025-03-30 at 18.23.40.png988Ă—463 192 KB

i would like it to look something like this:

Screenshot 2025-03-30 at 18.23.43.png
Screenshot 2025-03-30 at 18.23.43.png876Ă—430 157 KB

as you can see, the box outline is thicker.

my website is www.alexandrawestbrook.com , theme is dawn

2 Likes
2

Hey @ads18922

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1743356162041.png
Moeed_0-1743356162041.png363Ă—592 112 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @ads18922 .

Here’s how to achieve that:

  1. Navigate to Sales Channels → Online Store → “Customize” button → Theme settings (Gear icon on the left sidebar) → Custom CSS
  2. Add the following code:
#MainContent .banner__text.rte.body a {
    padding: 11px 25px !important;
    border: 2px solid white !important;
    text-decoration: none !important;
}
  1. Save (right top corner)
  2. Hard refresh the storefront

If done correctly, the result should be like this:

Screenshot_2.png
Screenshot_2.png817Ă—445 243 KB

4

Hello @ads18922
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> section-image-banner.css
add this code at the end of the file and save.

.banner--desktop-transparent .rte a, {
border: 3px solid #fff !important;
padding: 9px 20px !important;
text-decoration: none !important;
color: white !important;
}

result

85.png
85.png653Ă—196 101 KB

If this was helpful, hit the like button and accept the solution.
Thanks