Help Center

Appearance

Themes, Designs & Layout Options ​

Choose from 22 themes for a complete visual direction, then customize the homepage and product-page composition without code. Every setting is available in your store dashboard under the Design and Layout tabs and through connected AI Chatbots.

1. Design Tab: Themes & Color Palettes ​

The Design tab allows you to switch your entire store's color scheme and aesthetic with 1 click:

  • Classic Theme Presets:
    • Pure Minimal: Clean, neutral light template with refined slate-blue accents.
    • Warm Pop: Energetic coral-orange tones with generous spacing and rounded corners.
    • Editorial Gold: Sophisticated typography with warm golden-amber accents.
    • Cobalt Pulse: High-contrast, dynamic blue-indigo aesthetic.
    • Midnight Black: Premium dark theme with deep surface tones and crisp contrasts.
    • Charcoal Warm: Earthy charcoal tones with balanced warm neutrals.
    • Market Modern: High-density, conversion-focused retail styling.
    • AMOLED Noir: Ultra-dark OLED theme with sharp accents.
  • Industry Theme Designs:
    • Fashion & apparel: Atelier Mono and Street Signal.
    • Consumer electronics: Circuit Blue and Graphite Lab.
    • Food & grocery: Harvest Market and Fresh Cart.
    • Furniture & home: Nordic Room and Terra Living.
    • Beauty & personal care: Rose Ritual and Botanical Glow.
    • Baby & kids: Cloud Nursery and Little Sprout.
    • Toys: Playroom Pop and Brick Lab.
  • Complete Design Application: Selecting a theme changes colors, surfaces, spacing, corner radius, borders, shadows, hero treatment, gallery, product cards, content variants, and default section order as one coordinated design.

Custom Color Palette Tab ​

Fine-tune or completely rebrand your store colors without touching CSS:

  • Core Token Customization: Directly customize 9 core design tokens: Primary, Contrast, Accent, Accent Contrast, Surface, Surface Alt, Text, Muted, and Border.
  • Smart Color Harmonies: Adjust primary or accent tones and see complementary contrast and surface suggestions dynamically calculated.
  • Interactive Color Pickers & Hex Inputs: Type hex codes directly or use the live visual palette picker with real-time UI preview.
  • Reset to Theme Defaults: Instantly reset all custom palette tokens back to the active theme's native color definitions at any time.
  • Independent Dark Mode: Configure optional dark-mode surfaces and text colors alongside light theme tokens.

2. Layout Tab: Storefront Sections & Reordering ​

The Layout tab gives you a drag-and-drop section manager with automatic real-time saving for every change:

  • Multi-Slide Carousel: Add up to 3 hero slides.
  • Product Deep-Linking: Link any slide directly to a specific catalog product.
  • Overlay Controls: Toggle custom slide headings or hide the title and action button to let banner artwork stand out.
  • Device Targeting: Upload multiple images per slide with per-image device toggles (Show on Desktop, Show on Mobile, or both). Uploaded images are automatically converted to optimized WebP.

Reorderable Middle Sections ​

Drag the grip handle or use up/down controls to reorder middle sections:

A. Categories Showcase ​

  • Toggle: Enable or disable the categories showcase on your homepage.
  • Headline: Set a custom section title (e.g., "Shop by Category").
  • 6 Display Styles:
    • Pills (chips): Compact horizontal pill badges.
    • Icons (round_icons): Circular image icons with auto-extracted product thumbnails.
    • Cards (cards): Full visual category cards.
    • List (list): Clean text-based category navigation.
    • Minimal (minimal): Modern low-contrast category chips.
    • Banner (banner): Wide visual category banners.
  • Category Reordering: Drag and drop category order and toggle individual categories on or off.

B. Flash Sale Announcer ​

  • Toggle: Enable or disable promotional sale banners.
  • Headline & Subtitle: Custom flash sale titles and promotional copy.
  • Countdown Timer: Built-in Ends at date/time selector with live expiration countdown.
  • Product Selection: Tap specific catalog products to attach them directly to the flash sale.

C. Marquee Banner & Top Announcement Bar ​

  • Top Announcement Bar: Fixed banner positioned above the site header with custom message and toggle.
  • Scrolling Marquee: Continuous horizontal ticker with custom marketing text.
  • Speed Control: Adjust ticker speed to Slow, Normal, or Fast.

D. Product Cards & Sections ​

  • Section Title: Custom headline for your catalog section.
  • Display Mode:
    • All Products: Displays all catalog items in a unified grid.
    • By Category: Groups products into distinct category sections with independent headers.
  • Product Grid Options (3 Styles):
    • Classic (classic): Standard balanced gap spacing (gap-3 md:gap-[var(--theme-spacing)]) designed for versatile retail merchandising.
    • Compact (compact): High-density merchandising layout with tighter gutters (gap-2 sm:gap-2.5 md:gap-3) to maximize visible items above the fold.
    • Editorial (editorial): High-fashion magazine layout where the first product spans 2 columns and 2 rows (col-span-2 row-span-2), transforming it into an eye-catching hero feature tile.
  • Card Options (3 Styles):
    • Classic (classic): Structured bordered card container with soft background (surface-alt) and high-contrast solid primary CTA button.
    • Elevated (elevated): Modern floating card container with soft ambient depth shadow (shadow-md hover:shadow-xl hover:-translate-y-1), subtle border, and polished finish.
    • Minimal (minimal): Modern borderless flat card with cleanly isolated image thumbnail, borderless body, and refined outline CTA button.
  • Grid Columns: Choose between 2 columns, 3 columns, or 4 columns on desktop, and 1 column or 2 columns on mobile.
  • Card View: Toggle between Grid and List card representations.
  • Badges & Labels: Toggle category name labels and sale discount badges.
  • Category Section Ordering: Drag and drop the exact order that category groups appear on your page. Available on both the global "All Products" section and per-collection catalog sections.
  • Secondary Promo Slider: Add up to 3 bottom slides above the footer for seasonal campaigns or secondary offers.
  • Linked Products & Device Targeting: Link slides to specific products with independent mobile/desktop banner targeting.

Storefront Styles ​

Fine-tune global geometry and spacing from the Styles panel:

  • Card Shape:
    • Sharp: Clean, 0px border radius for minimalist and editorial aesthetics.
    • Rounded: Soft, rounded card corners and containers.
  • Page Width:
    • Contained: Centered layout with max-width container.
    • Full Width: Edge-to-edge layout spanning the full browser width.
  • Font Weight:
    • Normal: Standard balanced typography weight.
    • Light: Thinner, refined headings for high-end luxury styling.
  • Borders: Choose normal, light, or borderless surfaces.

3. Product Page Layout ​

The Product Page panel controls the buying experience independently from the homepage:

  • Top Composition: Choose Classic, Spotlight, or Editorial.
  • Gallery: Choose Standard, Rail, or Cinematic image presentation.
  • Gallery Magnifier: Enable the product-image zoom treatment for higher-detail previews.
  • Purchase Card: Choose Clean, Surface, or Elevated styling.
  • Button Style: Choose Solid, Outline, or Soft actions.
  • Action Layout: Use Split, Stacked, or Primary emphasis.
  • Content Order: Reorder identity, price, availability, options, quantity, actions, and trust content inside the purchase card.
  • Button Order: Reorder Add to cart, Buy now, and Favorite.
  • Content Sections: Show or hide the marquee, categories, description, features, specifications, FAQ, reviews, and related products.
  • Reviews: Choose Cards, List, or Compact review presentation and decide whether ratings show in the summary, per review, both, or neither.
  • Related Products: Choose the related-product grid width and item count, including zero to hide recommendations.
  • Section Designs: Give descriptions, features, specifications, and FAQs their own surface, card, list, table, accordion, minimal, or plain presentation where supported.

Testimonials ​

Enable Testimonials as a reorderable homepage section, then choose a Cards, Quote, or Strip presentation and set its title and subtitle. Testimonials are managed from the dashboard workspace; the Layout tab controls placement and presentation.

4. Manage Design with MCP ​

Connect ChatGPT or another compatible MCP client and use the same supported design surface as the dashboard:

  1. Call get_store_info to confirm the active store.
  2. Call get_theme_config to inspect every available theme, its industry, visual effect, default composition, custom color tokens, and current layout settings.
  3. Use set_theme with an ID returned by get_theme_config.
  4. Use update_theme_colors to customize specific color tokens (primary, contrast, accent, surfaces, borders) or set reset_to_defaults: true to restore native theme colors.
  5. Use update_layout_settings for homepage and Product Page controls, including layout_cards_grid_style (classic, compact, editorial) and layout_cards_card_style (classic, elevated, minimal).
  6. Preview the storefront and only report success after the tool confirms the update.

See the AI Chatbots guide for the complete workflow and supported options.

5. Store Branding & Header Settings ​

From Dashboard → Stores → Settings → Branding:

  • Store Name: Set your public storefront title.
  • Logo Upload: Upload a primary brand logo displayed in the header.
  • Favicon Upload: Upload custom browser tab icons.