Store Builder
Design your storefront with our drag-and-drop visual editor.
Overview
The Store Builder is a powerful visual editor that lets you:
- Design pages without code
- Drag and drop components
- Preview on different devices
- Publish changes instantly
Accessing the Builder
- Go to Storefront > Store Builder
- Select a page to edit
- The visual editor opens
Editor Interface
Canvas
The main editing area where you:
- See your page design
- Drag components
- Select and edit elements
- Preview changes
Component Sidebar
Left panel with available blocks:
- Store - Product grids, purchase feeds, goals
- Basic - Text, images, buttons, containers
- Interactive - Countdown timers, social links
Settings Panel
Right panel for selected element:
- Content settings
- Style options
- Link configuration
- Advanced properties
Pages
Default Pages
Every store comes with editable pages:
- Home - Landing page
- Products - Product catalog
Product detail pages, checkout, and account pages are handled by the system and styled to match your theme.
Custom Pages
Create additional pages:
- Click Add Page
- Enter page name
- Set URL slug
- Start designing
Examples:
- About Us
- FAQ
- Terms of Service
- Category landing pages
Components
Store Components
| Component | Description |
|---|---|
| Product Grid | Display products in a grid |
| Featured Product | Highlight a single product |
| Recent Purchases | Social proof feed |
| Community Goal | Progress bar widget |
| Server Status | Game server status |
| Player Count | Online player count |
Basic Components
| Component | Description |
|---|---|
| Text | Headings and paragraphs |
| Image | Single images |
| Button | Call-to-action buttons |
| Container | Layout containers |
| Columns | Multi-column layouts |
| Divider | Horizontal separators |
Interactive Components
| Component | Description |
|---|---|
| Countdown | Timer countdown |
| Social Links | Social media icons |
| Video | Embedded videos |
| Custom HTML | Raw HTML/embed code |
Building a Page
Adding Components
- Find component in sidebar
- Drag onto canvas
- Drop in desired position
- Configure in settings panel
Arranging Components
- Drag to reorder
- Use containers for grouping
- Columns for side-by-side
- Adjust spacing with settings
Editing Content
- Select the component
- Edit text directly on canvas
- Or use settings panel for:
- Content changes
- Link destinations
- Style modifications
Styling
Component Styles
For each component, adjust:
- Colors and backgrounds
- Fonts and text sizes
- Padding and margins
- Borders and shadows
- Alignment
Using Theme Colors
Reference your brand colors:
- Primary color
- Secondary color
- Background colors
- Text colors
Custom CSS
For advanced customization:
- Select component
- Open Advanced tab
- Add custom CSS classes
- Or write inline styles
Responsive Design
Preview Modes
Test on different devices:
- Desktop - Full width
- Tablet - Medium width
- Mobile - Small width
Responsive Settings
Some components have device-specific settings:
- Column layouts that stack on mobile
- Font sizes per device
- Visibility toggles
Mobile Best Practices
- Larger tap targets
- Readable text sizes
- Simplified layouts
- Fast loading images
Templates
Using Templates
Start from a professionally designed template:
- Click Templates
- Browse available designs
- Click to preview
- Click Apply to use
Templates provide:
- Complete page layouts
- Matching style
- Optimized for conversion
Publishing
Preview Changes
Before publishing:
- Click Preview
- Opens in new tab
- Test on different devices
- Check all links work
Publish
To make changes live:
- Review your changes
- Click Publish
- Changes go live immediately
Unpublished Changes
If you need to discard changes:
- Close without publishing to discard
- Or refresh the page to reload the last published version
Navigation
Header/Footer
Edit global navigation:
- Click Navigation
- Add/remove menu items
- Configure links
- Set active states
Menu Items
| Setting | Description |
|---|---|
| Label | Menu text |
| Link | URL or page |
| New Tab | Open in new tab |
| Highlight | Feature this item |
Best Practices
Design
- Clear hierarchy
- Consistent spacing
- Readable typography
- Compelling images
- Clear CTAs
Performance
- Optimize images
- Limit custom fonts
- Minimize custom code
- Test loading speed
Conversion
- Above-the-fold CTAs
- Clear value propositions
- Trust signals
- Easy navigation
- Mobile optimization