SARAH
DocumentationAPI Reference

Themes and Customization

Learn to customize the appearance of your online store.

Last updated: 2025-01-26

Sarah allows you to customize the appearance of your online store to reflect your brand identity.

Available Themes

Default Theme

The default theme is clean and professional:

  • Colors: Blue and white
  • Layout: Product grid
  • Navigation: Top menu with categories
  • Cart: Side sidebar

Dark Theme

Dark theme for a modern look:

  • Colors: Dark tones with accents
  • Layout: Similar to default but with dark background
  • Ideal for: Modern brands, tech, fashion

Other Themes

According to your plan, additional themes may be available. Check your store configuration to see options.

Basic Customization

How to change logo:

  1. Go to Settings > Online Store
  2. Look for "Logo"
  3. Upload an image (PNG, JPG, or SVG)
  4. Save changes

Recommendations:

  • Format: PNG with transparent background or SVG
  • Size: 200x200px or similar
  • Weight: Optimize image for web

Header Image

How to change header:

  1. Go to Settings > Online Store
  2. Look for "Header Image" or "Header"
  3. Upload an image
  4. Save changes

Recommendations:

  • Size: 1200x400px or similar
  • Format: JPG or PNG
  • Content: Photo of your store, featured products, or custom design

Colors (if available)

Some themes allow color customization:

  1. Go to Settings > Online Store > Theme
  2. Look for "Colors" options
  3. Select main colors
  4. Save changes

Typical colors:

  • Primary: Main brand color
  • Secondary: Accent color
  • Background: Background color
  • Text: Text color

Customizable Elements

Company Information

Name

  • Appears in header and metadata
  • Used for SEO

Description (About)

  • Text that appears in the store
  • Useful for SEO and for customers to know your business

Store Features

You can customize features shown:

Example configuration:

json
{
  "icon": "ShoppingBag",
  "title": "Pick-up at store",
  "description": "Contact us via WhatsApp to coordinate pickup",
  "enabled": true
}

Available icons:

  • ShoppingBag, Package, CreditCard, Shield, Truck, etc.

Marquee (Banner)

Marquee Text:

  • Text that scrolls at the top
  • Useful for promotions or important announcements

Example:

  • "Free shipping on purchases over $10,000!"
  • "Black Friday: 30% OFF on entire store"

Customization Limitations

What you CANNOT customize (currently)

  • ❌ Complete page layout
  • ❌ Element positions
  • ❌ Custom fonts (in some themes)
  • ❌ Custom CSS
  • ❌ Custom JavaScript

Alternatives

If you need advanced customization:

  • Consider using a theme that's close to what you need
  • Contact support to request features
  • Use description and features to communicate your brand

Best Practices

Brand Consistency

  • Use your logo instead of generic logo
  • Coherent colors with your visual identity
  • Quality images that represent your business

Image Optimization

  • Compress images before uploading
  • Use web formats (PNG for logos, JPG for photos)
  • Appropriate sizes (don't upload giant images)

Content

  • Clear description of your business
  • Updated contact information
  • Relevant features for your customers

Next Steps