Skip to content
Help
English
Storefront builder

What are the builder Settings tabs and how do I use them?

A field-by-field reference to the builder Settings panel: branding, colors, fonts, page width, animations, automations, form inputs, icons, prohibitions, checkout method, checkout form fields, maintenance page, and custom CSS and JavaScript, all configured per market.

Where the Settings panel lives

The builder Settings panel holds the store-wide design and behavior controls that sit outside any single section. Open the builder, then in the left icon rail click the gear icon (the market flag, pages, and posts icons sit above it). The panel opens as collapsible tabs: Branding, Colors, Fonts, Layout, Animations, Automations, Inputs, Icons, Prohibitions, Checkout, Checkout form, Maintenance page, Custom CSS, and Custom Javascript. Every change is a draft until you press Publish in the top bar.

Settings are stored per market

All of these settings are saved per market, not once for the whole store. The panel subtitle reads "Global settings of [market name]" to show which market you are editing. Switch markets with the flag icon first, then open Settings. Within a market the settings are global across every page.

Branding

This tab holds two image assets (it does not hold your logo, which is set inside the header section, not here):

  • Favicon: the small browser-tab icon. Accepts PNG, JPEG, WEBP, or ICO (32x32 or 16x16 recommended).
  • Body image: an optional store-wide background. Accepts PNG, JPEG, or WEBP. When set, two more controls appear: Size (Cover or Contain) and a Repeat toggle.

Colors

Each market has up to nine color schemes (minimum one). Every section, block, and component references a scheme by its number, so editing one scheme recolors everything that uses it. Click a card to edit its colors, right-click to Duplicate (blocked at nine) or Delete (blocked on the last scheme), and drag to reorder. A scheme defines colors for backgrounds, headings, body text, links, borders, outlines, shadows, primary and secondary buttons (with hover states), and form inputs.

Fonts

Typography maps a font family to four roles:

  • Body: paragraphs and general text.
  • Heading: large page and section titles.
  • Subheading: secondary titles and section subheadings.
  • Accent: decorative emphasis.

The font picker (with search) splits fonts into System fonts (load instantly) and Non-system fonts (downloaded to the visitor, can slow load). Using more than one non-system font may hurt page speed. Each Latin font is paired automatically with a matching Arabic font, so right-to-left languages render cleanly.

Layout

One control: Page width, a slider from 900px to 1400px in 100px steps (default 1200). This is the maximum content width on large desktop screens only. On mobile the width is always 100%. Sections set to full width ignore this value and stretch edge to edge.

Animations

  • Scroll reveal: how sections animate as they enter the viewport: None, Fade, Slide up, Slide left, or Zoom (default Slide up).
  • Images zoom effect: a toggle that enables hover zoom on product images.

Automations

One toggle: Autoplay Videos. When on, video blocks start playing on their own. Because of browser policies they stay muted until the visitor interacts with the page.

Inputs (form input styling)

This tab styles every storefront input. It has no color option (input colors come from the color scheme). The controls are:

  • Type (Layout): Collapse places each label above its own field, Expand places one label above the whole fieldset like a header.
  • Icons: None hides field icons, Default shows them inside the field, Label attaches them to the label.
  • Position: Start or End, shown only when Icons is set to Default.

Icons

One control: Stroke, the line weight of interface icons, set to Default (normal) or Heavy (bold).

Prohibitions

Restrict browser interactions to make casual copying harder. General options: Copying texts and images, Selecting texts and images, Accessing the context menu (right-click), and Inspecting the page (removes page content if developer tools are detected). A separate Header option, Logo redirects to home, makes the header logo link to the home page when on, or decorative when off.

Checkout

  • Checkout method: Add to cart sends shoppers through the cart drawer, Fast checkout skips the cart and goes straight to the order form.
  • Secondary method: a toggle that also offers the opposite method as a secondary option, so a fast-checkout store can still show an add-to-cart button, and the reverse.

Checkout form

This tab controls every field on the order form. Each field is one row you can drag to reorder. For each field you set:

  • Status: Disabled (hidden, removed from the form), Enabled (shown but optional), or Required (the buyer must fill it).
  • Label: the visible field name (up to 50 characters).
  • Placeholder: the hint text inside the empty field (up to 50 characters).

Region fields (District, City, State, Commune, Province) also get a Type control (Input for free text or Select for a dropdown), but only when the active market's country has curated location data. Available fields include full name, first/last name, company, gender, birthday, address, address line 2, national ID, neighborhood, district, apartment, floor, ZIP, city, state, commune, province, order note, gift, email, phone, WhatsApp, link, color, shipping, and payment. Since the form is per market, you can require a national ID in one market and hide it in another.

Maintenance page

Hide the storefront behind a holding page during updates. Controls: an Enabled master toggle (when on, every route shows the maintenance page, not just the homepage), a Heading (plain text, up to 100 characters), a Message (rich text, up to 500 characters), and a Color scheme. Turn Enabled off to bring the store back online.

Custom CSS and Custom Javascript

For advanced tweaks, Custom CSS injects your own styles (up to 1000 characters) and Custom Javascript injects your own scripts such as third-party tracking (up to 1000 characters). Both apply to the entire store, so use them only if you are comfortable with code.