Dawn theme Image banner button customization

Store Design
, , , ,

Topic summary

A user seeks to customize the Dawn theme’s image banner button by removing its border and adding a glassy, translucent effect similar to the header on scroll.

Proposed Solutions:

Multiple developers offered CSS code snippets to achieve this:

  • One suggested adding CSS to theme.liquid to remove the button’s box-shadow
  • Another provided more comprehensive CSS for base.css that removes the border, adds a semi-transparent background with blur effect (backdrop-filter: blur(10px)), and adjusts text color

Current Status:

The glassy effect has been successfully implemented based on a shared screenshot. However, a new issue emerged: the button text lacks visibility against the new background. A follow-up request was made to make the text bold for better readability.

The discussion remains open with the text visibility issue pending resolution.

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

I’m using the Dawn theme in that I want to customize the hero section image banner button, I want to remove the border on button and want to make the button glassy touch like the header on scroll. Please anyone help me to customize those.

website: https://coffeebyrsa.com/

image
image315×595 45.5 KB

2

Hey @Sivadarshan

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 </ body> tag
<style>
.banner__buttons a:after {
    box-shadow: unset !important;
}
</style>

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

3

Hi @Sivadarshan,

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

Thanks!

4

@Sivadarshan please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

.banner__box .button{
background-color: #fffc !important;
    backdrop-filter: blur(10px);
    box-shadow: unset !important;
color: #8a5e3b;
}

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

it should look like below

image
image1366×768 243 KB

5

image
image641×362 70 KB

It’s looking good now, but the text isn’t very visible. Can you make the text bold? @Sivadarshan