Store CustomizationHero Builder
Styling & Customization
Change colors, fonts, spacing, size, layout, and effects in the Hero Builder, per screen size.
Select an element on the canvas, then use the Styles panel on the right. Click a group to expand it.
Style groups
Background
- Background Image – pick or upload an image.
- Background Color.
- Image Size – Original Size, Cover (Fill), Contain (Fit), or Stretch.
- Image Position – Center, Top, Bottom, Left, Right, or a corner.
Text Style
- Font – choose Inherit from Parent, Store heading font, Store body font, your store's theme fonts, display fonts (Playfair Display, DM Serif Display, Cormorant Garamond, Montserrat, Inter, Space Grotesk, Bebas Neue), or common web fonts like Arial and Georgia.
- Font Size, Font Weight (Light to Extra Bold), Style (Normal or Italic).
- Text Color, Text Align (Left, Center, Right).
- Line Height, Letter Spacing.
- Capitalization – As typed, UPPERCASE, Capitalize Words, or lowercase.
Choosing Store heading font or Store body font keeps your hero in sync with the fonts you pick in the Design Studio. Display fonts are only loaded on your store when your hero uses them.
Spacing
- Inner Spacing (Padding) – space inside the element.
- Outer Spacing (Margin) – space around the element.
- Set Top, Right, Bottom, and Left separately.
Size & Position
- Width, Max Width.
- Height – Auto, Full Screen, Large (80%), Medium (60%), or Small (40%) of the screen height.
- Min Height – Auto, Full Screen, Large (90%), Medium (70%), or Small (50%).
Layout & Alignment
- Display Type – Block, Flex (Flexible), Grid, Inline Block, or Hidden.
- Flex Direction – Horizontal or Vertical.
- Horizontal Align and Vertical Align.
- Gap Between Items.
Effects
- Opacity.
- Border Radius – round the corners.
- Shadow – None, Subtle, Soft, or Dramatic.
- Border – None, Hairline, Solid (text colour), or Solid white.
Designing for each screen size
Use Desktop, Tablet, and Mobile in the top bar to switch the canvas size.
- Changes you make in Desktop view apply everywhere unless overridden.
- Changes you make in Tablet or Mobile view apply only to that screen size and smaller. For example, set a smaller heading size in Mobile view without changing desktop.
- To hide something on phones only, switch to Mobile and set Display Type to Hidden.
Next, learn how to save and publish your design.