Style
Presets, colors, fonts, corners, spacing, buttons, product cards, and forms that apply across your entire store.
The Style tab sets your store's overall look. It's the same on every page, and changes here apply everywhere. Open it at Design Studio → Style, or click Style at the top of the settings panel.
The settings are grouped into Presets, Colors, Fonts, Corners & Spacing, Buttons & Product Cards, and Section Titles & Forms. Header and footer colors are with the rest of the header and footer settings.
Presets
A preset is a ready-made starting point. Click one to apply it to the preview, then fine-tune anything below and Save when you're happy.
| Preset | Look |
|---|---|
| Classic | The original E2C look: warm accent, friendly type. Choose it to go back to the default style. |
| Minimal | Black and white, square corners, lets products lead |
| Boutique | Elegant serif headings on a soft cream page |
| Bold | Loud uppercase headings and a punchy red accent |
| Fresh | Rounded, airy, and green. Good for food, plants, and wellness |
| Modern | Clean sans-serif with a confident blue accent |
Presets only change colors, fonts, corners, and component styles, including header and footer colors. Your content, images, sections, and banners stay as they are. The preset that matches your current style exactly is highlighted. Once you change a setting, none is highlighted.
Colors
Colors are grouped by where they're used.
| Group | Setting | Where it's used |
|---|---|---|
| Page | Page Background | The background behind all content |
| Cards & Panels | Product cards, panels, and raised surfaces | |
| Lines & Borders | Dividers, input outlines, and separators | |
| Text | Main Text | Main body text |
| Subtle Text | Secondary labels and captions | |
| Links on Hover | Text and link color when hovered | |
| Buttons & Highlights | Accent | Main button color and highlight color |
| Text on Accent | Label color on main buttons | |
| Prices | Price | Regular prices |
| Sale Price | Discounted prices (defaults to red) | |
| Page Banners | Banner Color / Banner Text | Every page banner set to Solid color |
Each color has a picker with its hex value beside it.
Contrast warnings
If a pair of colors is hard to read, a warning lists it with its contrast ratio, for example "Button text on the accent color: 2.8:1 (aim for at least 4.5:1)". The Studio checks main and subtle text on your background, text on cards, button text, prices, and banner text. Header and footer colors are checked in their own cards. You can still save with a warning, but buyers may struggle to read that text.
Fonts
| Setting | What it changes |
|---|---|
| Headings | Headings and titles |
| Body Text | Descriptions, labels, and general text |
| Heading Weight | As designed (default), Regular, Semi-bold, or Bold |
| Heading Letters | As typed (default) or ALL CAPS |
Headings and body text each have their own font, so changing one doesn't change the other. A sample under the pickers shows the two together.
You can choose from 18 fonts:
| Style | Fonts |
|---|---|
| Sans-serif | Poppins (the default), Open Sans, Roboto, Inter, Montserrat, Lato, Nunito, Raleway, Work Sans, DM Sans, Space Grotesk |
| Serif | Playfair Display, Lora, Merriweather, Cormorant Garamond, DM Serif Display, Georgia |
| System | System (your visitor's device font) |
Your store only loads the fonts you pick, so extra fonts don't slow it down.
Designs made in the Hero Builder keep their own fonts, unless you chose Store heading font or Store body font there.
Corners & Spacing
Each setting is a slider. The current value is shown next to its name.
| Setting | Default | Range | What it changes |
|---|---|---|---|
| Corner Roundness | 4 px | 0–24 px | How rounded cards, panels, and inputs are. 0 gives sharp corners. |
| Button Roundness | 4 px | 0–40 px | How rounded buttons are. Set it high for pill-shaped buttons. |
| Space Between Sections | 80 px | 20–160 px | The gap between sections on a page |
| Space Inside Sections | 60 px | 20–120 px | The space inside each section |
Buttons & Product Cards
| Setting | Options |
|---|---|
| Button Style | Solid (filled, default), Outline (border only), Soft tint (light tint) |
| Uppercase Button Text | Shows button labels in capital letters |
| Card Style | Classic (default), Minimal, Bordered |
| Image Shape | Shape of product images in cards: Square (default), Portrait (tall), Landscape (wide) |
| Hover Effect | What happens when a buyer points at a product card: None (default), Zoom image, or Lift card |
Section Titles & Forms
| Setting | Options |
|---|---|
| Section Title Alignment | Center (default) or Left for section headings |
| Highlight Last Word of Titles | On by default. Colors the last word of each homepage section heading with your Accent color, for example "New Products". Headings with only one word aren't affected. |
| Form Field Style | Look of input fields: Outlined (default), Filled, Underlined |