02GENERAL
Glass surfaces
This page explains how “Glass surfaces” actually behaves, which data it depends on, and what its settings change.
Glass surfaces
This page explains how “Glass surfaces” actually behaves, which data it depends on, and what its settings change.
What the theme does automatically
This section only displays elements that have content. Empty elements are ignored to preserve the layout.
Understand the settings
Colors
Glass color
Default: #71575B glass_colorClear reflection
Default: #FFFFFF glass_reflex_light_colorDark reflection
Default: #000000 glass_reflex_dark_colorText on glass
Default: #FFF9F6 glass_content_colorInteractive elements
Default: #FFF9F6 glass_action_colorFallback fund
Default: #E8E8E9 glass_background_colorTransparency and blur
Glass Opacity
Default: 14 · Range: 0–80% glass_opacityBlur on desktop
Default: 16 · Range: 0–40px glass_blurBlur on mobile
glass_mobile_blurChoose 0 to disable backdrop blur on mobile.
Default: 10 · Range: 0–18pxSaturation behind the glass
Default: 150 · Range: 80–180% glass_saturationBrightness behind the glass
Default: 108 · Range: 80–140% glass_brightnessBorders and reflections
Border color
glass_border_colorIndependent of glass color and reflections.
Default: #FFFFFFBorder Opacity
Default: 58 · Range: 10–90% glass_border_opacityBright edges
Default: 72 · Range: 0–100% glass_edge_intensitySurface reflections
Default: 46 · Range: 0–100% glass_reflection_intensityLight reflection intensity
Default: 100 · Range: 0–300% glass_reflex_lightIntensity of dark reflection
Default: 100 · Range: 0–300% glass_reflex_darkAvailable blocks
This section has no reorderable blocks. Its content is controlled by its settings and related Shopify data.
Before publishing
- ✓
Content remains readable in every color scheme.
- ✓
Labels match the storefront language.
- ✓
Displayed promotions match Shopify rules.
- ✓
Interactions remain accessible by keyboard and touch.