Theme Customization

Customize your store's appearance to match your brand.

Available Themes

Pre-built Themes (all mobile-responsive):

1. Modern - Clean minimalist design
2. Bold - Vibrant colors for impact
3. Classic - Traditional e-commerce
4. Luxury - Premium product showcase

Changing Your Theme

1. Go to Stores → Select store → Appearance
2. Click "Change Theme"
3. Preview available themes
4. Click "Apply Theme"

Changes are live immediately!

Color Customization

Brand Colors:

• Primary: Main brand color (buttons, links)
• Secondary: Accent color
• Background: Page background
• Text: Main text color

Dark Mode:

• Enable/Disable
• Auto (follows system preference)
• Custom dark colors

Typography

Font Families:

• Headings: Choose from 50+ Google Fonts
• Body: Choose reading font
• Custom fonts: Upload your own (Enterprise)

Font Sizes:

• Adjust heading sizes
• Body text size
• Button text size

Layout Options

Homepage Layout:

• Hero section style
• Product grid (2, 3, or 4 columns)
• Featured products position
• Testimonials placement

Product Page Layout:

• Image gallery position (left/right)
• Description layout
• Related products
• Review section

Custom CSS

Add your own styles (Growth/Enterprise):

/* Custom CSS */
.product-card {
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.cta-button {
  background: linear-gradient(to right, #6366f1, #a855f7);
}

Custom JavaScript

Add custom functionality (Enterprise):

// Track custom events
document.querySelectorAll('.add-to-cart').forEach(btn => {
  btn.addEventListener('click', () => {
    // Your custom tracking
    console.log('Product added to cart');
  });
});

Mobile Optimization

All themes are mobile-optimized:

• ✅ Responsive breakpoints
• ✅ Touch-friendly buttons
• ✅ Fast loading
• ✅ App-like experience

Preview Mode

Test changes before going live:

1. Make theme changes
2. Click "Preview"
3. View in new tab
4. Approve or make more changes
5. Click "Publish" when ready

Best Practices

✅ Keep brand colors consistent ✅ Use high-contrast colors for CTAs ✅ Test on mobile devices ✅ Keep loading time under 3 seconds ✅ Use professional fonts

Theme changes are instant!