Open Box shadow in Theme Manager. The screen lets you edit the box-shadow design tokens for the current storefront theme.
Shadow levels
Token slot | Description |
shadows.0 | Shadow level 0. |
shadows.1 | Shadow level 1. |
shadows.2 | Shadow level 2. |
shadows.3 | Shadow level 3. |
shadows.4 | Shadow level 4. |
shadows.6 | Shadow level 6. |
Editor controls
Control | Description | Options or values |
Horizontal Length | A slider for the horizontal length of a shadow. | The unit selector displays px. |
Vertical Length | A slider for the vertical length of a shadow. | The unit selector displays px. |
Blur Radius | A slider for the blur radius of a shadow. | The unit selector displays px. |
Spread Radius | A slider for the spread radius of a shadow. | The unit selector displays px. |
Shadow | An optional text field for the shadow value. | The field is not required. |
Code value | Each shadow-level editor exposes a code value. | Each code value has a Copy to clipboard control. |
Preview and toolbar
The live preview shows storefront components that use each shadow level, including card surfaces, search dropdowns, icon popovers, and the mobile fixed footer. You can judge the visual effect before saving.
Control | Description | State or behavior |
Save | Saves all changes to the current theme. | The control is disabled until you make a change. |
Sync | Pushes the saved theme build to the storefront. | Use it after saving when the saved theme build needs to be pushed to the storefront. |
Notes
Selecting a shadow level slot opens its individual editor.
Related