Atelier Theme Header Blur effect on scroll - Customization

Store Design
, , , , , , , , , , , ,
1

My website was developed using Atelier theme, in that I need to customize the header blur on scroll, when scroll was triggered, the header should be blur.

Reference website: https://prashasya.com/

My website: https://weaverstown.myshopify.com/

Password: weaver

Thanks in advance

1 Like
2

Hey @TCC_2025 .

Welcome to Shopify community.

In order to make the background of the header blurry then you need to paste the following code in the end of styles.css file.

Here is how you can find styles.css file.

Go to Shopify Admin >> Online Store >> Edit Code >> styles.css

Go to the end of this file and paste the following code.

.header__row {
  backdrop-filter: blur(10px) !important;
  background-color: #fffc !important;
}

Results:

![images.png|1915x858](upload://me61fJlVSxAEg0CMYamrbBMmWO6.jpeg)
3

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

.header[transparent][transparent=not-sticky][data-sticky-state=active]{backdrop-filter: blur(10px);}
4

Hey! @TCC_2025 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.header[transparent][transparent="not-sticky"][data-sticky-state="active"] {
    backdrop-filter: blur(10px) !important;
    background-color: #ffffff8a !important;
}

CodingFifty_0-1750600878641.png
CodingFifty_0-1750600878641.png1589×453 949 KB

5

Hello @TCC_2025

  1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
  2. In the Assets folder, open style.css and add your CSS code at the end
.header[transparent][transparent="not-sticky"][data-sticky-state="active"] {
backdrop-filter: blur(10px) !important;
background-color: #ffffff8a !important;
}

devcoders_0-1750611086928.png
devcoders_0-1750611086928.png1344×527 417 KB

1 Like
6

Hello @TCC_2025 !

To add a blur effect to your header on scroll in the Atelier theme, you’ll need two small tweaks:

  1. CSS to define the blur and transition.

  2. JavaScript to toggle the blur class when the page scrolls.

Step 1 – Add CSS

Open your theme’s stylesheet (e.g., base.css or theme.css) and add:

.header–blur {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
background-color: rgba(255,255,255,0.75);
transition: backdrop-filter 0.3s ease, background-color 0.3s ease;
}

This gives your header a nice, smooth blur when scrolled.

Step 2 – Add JavaScript

Edit your theme.js or global.js file (or inject via main-layout.liquid just before ):

Adjust the selector .header-wrapper, .header to match your theme’s header element.

If this reply was useful to you, we would really appreciate it if you gave us a LIKE and mark the issue as SOLVED!

7

Please add this code to Custom CSS in Sales channels > Online Store > Themes > Customize > Theme settings

.header[transparent][transparent=not-sticky][data-sticky-state=active] {
    backdrop-filter: blur(10px);
    background-color: #fffc !important;
}
8

Hello, @TCC_2025

I have also encounter same issues with tihs Atelier theme as well, but actually my shopify marketing agency helped me with that.