Storefront Themes
Pick a complete storefront design, pair it with any color palette, edit content and SEO beside a live preview, and save when it looks right.
Your storefront ships with a gallery of professionally designed themes. A theme is a complete design, not a color swap: it changes the header, homepage hero, product cards, the product page structure, checkout and tracking pages, the mobile navigation, button shapes, and even the icon stroke style. Colors are a separate choice, so any design can wear any palette.
Open the Theme Builder
- Go to Online Store > Design and click Open Theme Builder. The builder opens full screen: your editing panel on one side and a live preview of your real store on the other.
- Pick a design from the Design panel. Each card shows a layout sketch, default colors, name, and the kind of shops it fits best. The live preview updates with your real products.
- Pick colors from the Colors panel, or keep Theme colors to use the palette the design was created with.
- Fine-tune fonts and corner roundness from the Style panel.
- Click Save Theme to publish your design, colors, fonts, and corners. Customers keep seeing the saved theme until you save these changes.
On a phone, the builder stacks: the live preview sits on top and the panels become tabs below it. Save, discard, and reset stay available in the top bar.
Save, Discard, or Reset
The top bar tells you whether your theme has unsaved changes or is being published.
- Save Theme publishes your current design, colors, fonts, and corners. If saving fails, your draft stays available so you can retry.
- Discard changes returns those settings to the last saved theme after you confirm.
- Reset to Default clears those settings in your draft after you confirm. Review the default look, then choose Save Theme to publish it or Discard changes to keep the saved theme.
Separate saves
Logo, banner, and content changes save separately and update the live store when saved. Discarding or resetting the theme does not undo those changes.
The Design Gallery
| Theme | Design | Great for |
|---|---|---|
| Classic | Balanced layout, carousel hero, labeled mobile nav | Any store |
| Bistro | Centered identity, split hero, rounded corners | Restaurants, cafes, bakeries |
| Market | Dense grid, compact product cards, bold icons | Supermarkets, minimarkets |
| Clinic | Airy minimal bars, stacked product page, thin icons, flat order pages | Pharmacies, optics, beauty care |
| Tech | Full-bleed hero, image-overlay cards, gallery product page, floating icon nav | Electronics, mobile shops, hardware |
| Boutique | Centered premium layout, gallery product page, thin icons, flat order pages | Jewelry, furniture, gifts |
| Fashion | Magazine-style slim bars, stacked product page, monochrome default palette | Clothing, boutiques |
| Playful | Rounded pill corners, cheerful default pastels, bold icons | Gift shops, bookstores, stationery |
Note
If no theme is selected, your storefront uses the Classic look. You can return to it any time with Reset to Default.
Colors Are Yours to Swap
The Colors panel lists every palette in the catalog, each with light and dark variants:
- Theme colors (the default) follows whatever palette the selected design was created with. Switching designs switches colors with it.
- Picking a named palette or Custom colors locks your colors when you switch designs. Choose Theme colors to follow each design's original palette again.
- Custom colors builds a palette around YOUR brand: pick one color and complete light and dark palettes are derived from it automatically, with text contrast handled for you.
- Every palette is contrast-checked for readability in both light and dark mode.
Style, Logo, Banners, and Content
Four more panels finish the picture, all against the same live preview:
- Style: six font pairings (every one covers Arabic and English scripts) and corner roundness from
SharptoPill. Keep Theme default to use what the design ships with. - Logo: upload the logo shown in your storefront header and receipts.
- Banners: your home-page hero images. Upload, re-order by drag, and set click-through links; every design shows all of them.
- Content: the announcement bar text and footer text in both languages. Saving here updates the preview right away.
Note
Logo, Banners, and Content live in the builder so you can see every change beside the live preview. SEO lives under Online Store > Marketing, custom pages under Online Store > Content, contacts and social links under Online Store > Content > Contacts & Social Media, and featured products under Online Store > Design > Special Products.
Live Preview
The builder canvas renders your actual storefront with the draft settings applied:
- Switch between desktop and mobile widths to check both experiences.
- Design, color, font, and corner drafts are visible only in the preview. Customers keep seeing the saved theme until you click Save Theme.
- Choose Open preview to browse in a separate tab. On a phone, the embedded preview leaves swipe gestures to the editor so you can reach every panel.
- If loading takes too long, choose Retry preview or open the preview in a new tab. Reloading the preview does not discard your draft.
Note
The preview needs an Active storefront. If your online store is inactive, activate it from Online Store > Overview first.
Light and Dark Mode
Every palette ships with matching light and dark variants. Customers still switch modes from the storefront header, and your design keeps its identity in both.
Related
- Storefront Appearance: Logo, hero banners, and featured products
- Online Storefront Overview: What customers see across the full storefront
- Sharing Your Store: Share your subdomain link and QR poster