SARAH
DocumentationAPI Reference

Themes and Customization

Learn to customize the appearance of your online store.

Last updated: 2026-08-18

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.

Theme Studio (Pro)

Theme Studio is an optional beta visual editor on Online Store. The page layout stays the same: chat on the left, live preview on the right.

Who can use it: Plan Pro and an admin user. Without Pro, the General / Catalog / Design / Advanced tabs stay as they are.

How it works:

  1. Ask the chat for a change, pick a starter theme (Editorial = Beauty, Lookbook = Fashion, Market = Default, or from your current theme), or add a module from the palette.
  2. Drag sections in Page structure, use the arrows, or click a block in the preview.
  3. Save stores a draft. The public store does not change yet. If a layout is waiting to go live, Publish theme shows an unpublished cue.
  4. Publish theme compiles the layout and switches the live store to Theme Studio. If the layout is invalid (header, product catalog, and footer are required), publish is blocked and the classic theme stays live.

Starter themes bind your logo, about text, header media, and first shop categories.

What the chat can change: the same settings as the tabs (about, pickup, prices, grid columns, marquee, features, SEO schema, hide price, and similar).

What the chat cannot change: analytics scripts and custom domain. Those live under Settings → Advanced. Theme Studio never runs custom JavaScript: layouts are a validated document (no <script>, iframes, or checkout/POS changes). Product blocks stay Sarah modules so cart and search keep working.

Invalid or unpublished Studio layouts fall back to Default, Fashion, or Beauty.

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

Pin above the header:

  • In Design, you can keep the marquee fixed above the menu while scrolling
  • If you leave it off, the marquee scrolls away (same as before)

Example:

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

Customization Limitations

Classic themes

Without Theme Studio, you cannot rearrange the full page layout or inject custom CSS/JavaScript.

Theme Studio

  • Custom JavaScript, iframes, and analytics scripts are not written by the chat. Use Settings → Advanced for header scripts.
  • Checkout, payments, and POS are unchanged.
  • Publish requires a valid layout (header, product catalog, footer).

Alternatives

If you need a look that Theme Studio cannot express yet, start from the closest starter theme or contact support.

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