Skip to main content

How to style the background overlay

Control how dark and how blurred your storefront looks behind SmartSize popups — one setting for every size chart and fit quiz.


When a shopper opens a size chart or fit quiz, SmartSize dims the page behind the popup so the content stands out. The background overlay setting controls exactly how that dimmed layer looks — how dark it is, and how much it blurs your storefront underneath.


Where to find it

In your Shopify admin, open SmartSize → Settings. In the Sections list, under General settings, select Background overlay.


Darkness — dim the storefront

Darkness sets how strongly the page behind the popup is dimmed, from 0% (no dimming) to 80%. Drag the slider or type an exact percentage — the default is 30%. Increase it to darken the background and spotlight the popup, or lower it to keep more of your page visible.


Blur — soften what's underneath

Blur softens the storefront content behind the popup, from 0 px to 24 px. The default is a subtle 2 px. Even a small blur draws the eye to the popup without hiding your page.


Preview and save

The preview next to the sliders updates live as you make changes, and the badge above it shows your current combination — for example 30% · 2px blur. When it looks right, click Save. Changed your mind? Each slider has a Reset button that returns it to the default value.


💡 Tip: the background overlay is a store-wide default — it applies to every size chart and fit quiz popup. If one size chart needs a different look, you can override the overlay for just that chart in the size chart editor's popup settings.

Did this answer your question?