Design & Themes
Official guide · English · Version 9c253d0cf11816df
The Design page lets you customize the visual appearance of your storefront. You can change your template, adjust colors, select fonts, set layout options, and control the text direction -- all from a single page with a convenient Save Changes button at the top.
Navigate to Storefront > Design & Setup > Design to access these settings.
Template Selection
At the top of the Design page, you can switch your storefront template at any time. The template determines the overall visual style of your entire store, including product cards, page layouts, and component styles.
Available Templates
| Template | Style Description |
|---|---|
| Modern | Clean, card-based, minimal design with smooth transitions |
| Classic | Traditional retail look with warm colors and serif accents |
| Bold | Dark backgrounds with neon glow effects |
| Fashion | Full-bleed images, lookbook-style layout with all-caps elegance |
| Food | Warm orange palette with rounded elements |
| Tools | Industrial grid layout with yellow accents |
| Machinery | Navy professional corporate look |
| Art | Masonry grid with soft pastels and gallery aesthetic |
| Digital | Gradient backgrounds with SaaS-style design |
| Sports | Bold red color scheme with energetic typography |
| Marketplace | Dense, info-rich marketplace layout with trust badges |
Browse the template grid
All templates are displayed as cards in a responsive grid. The currently selected template is highlighted with a blue border and checkmark.
Click a template to select it
Click any template card to switch to it. You can also click the preview icon to see a larger preview in a modal dialog before committing.
Save your changes
Click Save Changes at the top of the page to apply the new template.
Info: Changing your template does not delete any content. All your homepage sections, pages, and products remain intact. Only the visual styling changes.
Default product content template
Select a saved product template in Default product content template and wait for its immediate save confirmation. This applies to inheriting products; product links, enabled custom designs and primary-category templates take priority. This selector is separate from the store's theme and its Save Changes action. Use Section Templates to create a template, restore inheritance or update a shared layout.
Layout Direction
Below the template gallery, you can set the layout direction for your storefront:
- LTR (Left-to-Right) -- Default for languages like English, Spanish, French, German
- RTL (Right-to-Left) -- For languages like Arabic, Persian, Hebrew, Urdu
The direction affects the entire site layout including text alignment, navigation order, and component positioning.
Color Scheme
The Colors card lets you customize six color values that control the entire storefront palette:
| Color | Purpose |
|---|---|
| Primary Color | Main brand color used for buttons, links, and accent elements |
| Secondary Color | Supporting color for secondary buttons and highlights |
| Accent Color | Used for special highlights, badges, and call-to-action elements |
| Background Color | The main background color of your storefront pages |
| Text Color | The default color for body text and headings |
| Surface Color | The background color for cards, panels, and elevated surfaces |
Each color has two input methods:
- A color picker (click the colored square to open the browser's color picker)
- A text input where you can type a hex color code directly (e.g.,
#3B82F6)
Default Color Values
| Color | Default Hex |
|---|---|
| Primary | #3B82F6 (Blue) |
| Secondary | #1E40AF (Dark Blue) |
| Accent | #F59E0B (Amber) |
| Background | #FFFFFF (White) |
| Text | #111827 (Near Black) |
| Surface | #F9FAFB (Light Gray) |
Typography
The Typography card lets you choose separate fonts for headings and body text:
Heading Font
The font used for all headings (H1, H2, H3, etc.) throughout your storefront.
Body Font
The font used for paragraph text, product descriptions, navigation items, and all other body content.
Available Fonts
| Font | Style |
|---|---|
| Inter | Clean, modern sans-serif (default) |
| Roboto | Google's versatile sans-serif |
| Open Sans | Highly readable sans-serif |
| Lato | Warm, friendly sans-serif |
| Montserrat | Geometric sans-serif |
| Poppins | Rounded geometric sans-serif |
| Nunito | Rounded, soft sans-serif |
| Raleway | Elegant thin sans-serif |
| Playfair Display | Elegant serif with high contrast |
| Merriweather | Traditional serif for readability |
Layout Settings
The Layout card controls structural aspects of your storefront:
Product Grid Columns
Choose how many columns to display in the product grid:
| Option | Best For |
|---|---|
| 2 Columns | Large product images, fewer products per row |
| 3 Columns | Balanced layout (default) |
| 4 Columns | Dense layout showing more products at once |
Border Radius
Controls the roundness of corners on cards, buttons, and other elements:
| Option | Effect |
|---|---|
| None | Sharp corners (0) |
| Small | Slightly rounded (0.25rem) |
| Medium | Moderately rounded (0.5rem, default) |
| Large | Noticeably rounded (0.75rem) |
| Extra Large | Very rounded (1rem) |
Saving Changes
Warning: Changes are not applied until you click Save Changes at the top of the page. If you navigate away without saving, your changes will be lost.
Make your desired changes
Adjust any combination of template, colors, fonts, or layout settings.
Click Save Changes
The button is located in the top-right corner. A loading spinner appears while saving.
Verify on your storefront
After saving, visit your storefront to see the changes live. You may need to refresh the page or clear your browser cache.