Open Box shadow in the Theme Manager menu, which also contains Palette, Typography, Spacing, Border radius and Templates. The screen heading is Create Box shadow. Use the screen to edit the box-shadow design tokens for the storefront theme.
Shadow slots
The screen lists six slots: shadows.0, shadows.1, shadows.2, shadows.3, shadows.4 and shadows.6. Each slot has its own editor, and every editor is expanded when the screen opens.
Token slot | Description | Preview component |
shadows.0 | Shadow level 0 | Beauty card (elevation 0, border-only) |
shadows.1 | Shadow level 1 | Card, Cart summary, Order list and Cart table (desktop) |
shadows.2 | Shadow level 2 | Electronics card (default) and Global Search Dropdown |
shadows.3 | Shadow level 3 | Subheader / Categories burger |
shadows.4 | Shadow level 4 | Fashion One / Fashion Two card image, Beauty card image and Icon Popover |
shadows.6 | Shadow level 6 | Mobile Fixed Footer Box Shadow 6 |
Slot editor controls
Every slot editor starts with a token name and a Copy to clipboard button. The editors for shadows.1, shadows.2, shadows.3, shadows.4 and shadows.6 also contain the controls in the following table.
Control | Description |
Token name | A label in the form --shadows-N, where N is the slot number. |
Numbered buttons | A group of buttons labelled with numbers at the top of the editor. |
Horizontal Length | A slider with a unit selector. |
Vertical Length | A slider with a unit selector. |
Blur Radius | A slider with a unit selector. |
Spread Radius | A slider with a unit selector. |
Shadow | A text field that follows the sliders. |
Toolbar and sync
Control | Behavior |
Sync | A button that follows the Create Box shadow heading. It pushes the saved theme build to the storefront. |
Cancel | Discards unsaved changes and restores the last saved values. |
Save | Unavailable when the screen opens. Saves all changes to the theme. |
Live preview
The preview shows storefront components that use each shadow level, including card surfaces, search dropdowns, icon popovers and the mobile fixed footer. Use it to judge the visual effect of a shadow before you save. The preview area contains sample product cards, a cart summary, an order list and a cart table.
Related