Style a block: spacing, background, border, shadow, animation
Click a block, open the pencil (Edit) icon and choose the Styles tab: it groups Typography, Dimensions, Spacing, Background, Border, Shadow, Display, Position and Animation. The device selected in the top bar decides whether your change applies to desktop, tablet or mobile.
Steps
- Open Online Store → Theme Settings (or a landing page) and click the block. To style a whole container rather than the text inside it, pick the Section or Box from Design Layers.
- Click the pencil icon in the left rail, then the Styles tab.
- Work through the sections you need:
- Typography: font family, size, weight, colour, line height, letter spacing, alignment, transform.
- Spacing: Padding (inside) and Margin (outside).
- Background: Solid, Gradient or Image.
- Border: width, style, colour, radius.
- Shadow: presets None / Soft / Floating / Bold, or offsets, blur, spread, opacity and colour.
- Position: Static, Relative, Absolute, Fixed or Sticky, plus Layer Position (stacking order).
- For motion, open Animation, pick a preset from Attention Seekers, Entrance, Exit or Special Effects, then set Duration (ms), Delay (ms) and Loop animation.
- Read the "Applied on" notice: with the phone frame selected, styles apply to Mobile (up to 768px); with the tablet frame, to Tablet (up to 991px); otherwise to Desktop. Switch device and repeat where needed.
- Click Save, and make sure the page is Published.
Common problems
- I styled a block on desktop but nothing changed on my phonestyles are saved per screen size; select the phone frame and set them again.
- I want every button or the whole store's colours changedthe Styles tab is per block. Use Theme Customizer (swatch icon) for store-wide colours, font and Radius.
- My styles vanished after changing the block's designswitching a variant resets styles; set them again.
- One text looks different from the rest of the storeyou set a per-block Font Family in Typography; remove it to inherit the store font.