Shadows Theme Settings
Shadows help create depth, improve visual hierarchy, and make interactive elements feel more natural and clickable.
The Shadows section is divided into three main parts:
- Buttons
- Cards
- Forms
Each part includes the same core controls:
- opacity
- horizontal offset
- vertical offset
- blur
The shadow color comes from your Color Scheme, so it always matches your brand.
🔘 Button Shadows
Button shadows are great for highlighting call-to-action buttons and improving click clarity.
Opacity
Controls how visible the shadow is.
Lower opacity = softer, subtle shadows.
Higher opacity = stronger, elevated buttons.
Horizontal offset
Moves the shadow left or right (X-axis).
- positive values → shadow moves right
- negative values → shadow moves left
Vertical offset
Moves the shadow up or down (Y-axis).
- positive values → shadow drops downward (most common)
- negative values → shadow appears above the button
Blur
Controls how soft or sharp the shadow appears.
- low blur → sharp, bold shadow
- high blur → soft, natural shadow
🃏 Card Shadows (Product & Content Cards)
Applies to:
- product cards
- promo cards
- content blocks
Opacity
Defines the strength of shadow visibility.
Horizontal offset
Moves the card shadow left or right.
Vertical offset
Adds depth by moving the shadow down or up.
Blur
Controls the smoothness of shadow edges.
Use soft blur values for a modern, premium style.
📝 Form Shadows
Affects:
- inputs
- quantity selectors
- search
- contact fields
Opacity
Adjusts how noticeable the shadow is.
Horizontal offset
Moves the shadow right or left.
Vertical offset
Creates depth under the field.
Blur
Softens or sharpens the form shadow.
⭐ Best practices for shadows
- Use low opacity for a premium look (subtle > heavy)
- Increase blur for softer, more natural UI
- Keep button shadows slightly stronger than card shadows
- Avoid extreme offsets unless intentional
Shadows help guide the eye, create hierarchy, and enhance the overall feel of your store — without adding visual clutter.