Themes and Customization - Sarah

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

Fashion

Full-screen hero, category gallery with photos and tall product cards. Built for apparel and accessories.

Beauty

Minimal header, centered catalog and an editorial product view. Built for cosmetics and design brands.

Showcase

Logo in the center, search on the left, cart on the right. The banner shows in full, at its own proportion. Under it, the benefits you already set on the shop (icon, title, and text).

The home page does not list the whole catalog: one row per main category that has products, up to 6. Subcategories stay in the parent row. View all opens that category. Search and category pages bring back the paged catalog.

In Online shop → Appearance, with the Showcase theme you can (without changing other stores):

Build the home with Offers and Featured products sections (or categories / product IDs).
Move the benefit blocks below the products.
Raise the WhatsApp button (floating with spacing) and show a short description on the card.
Upload the banner at original quality and, if you want, a dark overlay (off by default).

On desktop, Products opens the same large category menu. On phones, the ≡ button opens the side panel. WhatsApp, when it is in social links or the shop phone, sits at the bottom right (or floating if you enable it).

It does not require Plan Pro. Cart, checkout, and POS stay the same.

Sneakers (Pro)

Dark top bar with an always-visible search, bold uppercase headings, a scrollable category row, a large banner and tall edge-to-edge product photos. Two columns on phones.

On desktop, Products opens a mega-menu with one column per category and its subcategories below. On phones, the ≡ button opens a side panel where each category expands to show its subcategories.

Supermarket (Pro)

Large search pinned to the top, a category row, a short banner and a dense grid: 5 to 6 columns on desktop and 2 or 3 on phones (this theme ignores the desktop columns setting). Each card has an Add button; once the product is in the cart, it turns into − quantity +. Products with variants (size, color) open the product page to pick an option.

On desktop, the ≡ Categories button next to the shop name opens the category list; categories with subcategories show a second panel with All and each subcategory. On phones, the same list is behind the ≡ button. A category page shows the path (Home / Category) and a Filters sidebar on the left with checkboxes to pick one or more subcategories. On phones, filters open from the Filter button, with Clear and Apply.

If the price list chosen for the shop lowers a product's price (for example, a -15% list), the card shows the previous price struck through with the % OFF label next to it, the new price below and a full-width Add button. Without that list, the card shows only the price.

Sneakers and Supermarket can only be selected on the Pro plan. If the company leaves Pro, the shop falls back to the Default theme on its own and no other setting is lost. Menus and filters use the categories and subcategories you already set up in Products → Categories (no extra setup). If you hide categories in the shop settings, menus and filters are hidden too. Neither changes the cart, checkout or POS, and both show the same number of products per page as the Default theme.

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:

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.
Drag sections in Page structure, use the arrows, or click a block in the preview.
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.
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

Logo

How to change logo:

Go to Settings > Online Store
Look for "Logo"
Upload an image (PNG, JPG, or SVG)
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:

Go to Settings > Online Store
Look for "Header Image" or "Header"
Upload an image
Save changes

Recommendations:

A wide image (for example 1920 px). On Default, a built page, and Showcase it shows in full, with no crop.
Format: JPG, PNG, or WebP
Content: Photo of your store, featured products, or custom design

Colors (if available)

Some themes allow color customization:

Go to Settings > Online Store > Theme
Look for "Colors" options
Select main colors
Save changes

Typical colors:

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

Customizable Elements

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

Product Management in Store - Learn to manage products
Store Setup - Review complete configuration