Skip to content
Help
English
Storefront builder

Builder settings reference

Every store-wide builder setting, colors, typography, page width, checkout flow, and form fields, and how each one is configured separately for every market.

Settings are per market

Every setting in this article is stored per market, not once for the whole store. Each market keeps its own colors, fonts, page width, checkout flow, and form fields, so you can run a different look and a different order form in each country you sell to.

Open the builder, use the market tab (country flag icon) in the left sidebar to pick a market, then open the Settings tab (gear icon). Everything you change applies to the market that is currently selected. To give another market different settings, switch to it first and set them again. Within a market the settings are global across pages: changing a color scheme updates every page at once. Nothing reaches shoppers until you click Publish.

Colors

Each market has a palette of up to nine color schemes. Sections, blocks, and components reference a scheme by its number, so editing one scheme recolors every part of the store that uses it. For the full list of color roles inside a scheme and tips on building a strong palette, see Colors, fonts, and branding.

Typography

The typography settings map font families to four roles:

  • Body: paragraph and general text.
  • Heading: large page and section titles.
  • Subheading: secondary titles and lead-ins.
  • Accent: highlights, badges, and small labels.

Pick a font for each role and the whole market follows it. Latin fonts are paired automatically with a matching Arabic font, so right-to-left languages still render cleanly.

Page width

The layout setting controls the maximum width of your content. A narrower width keeps text and products centered with margins on large screens; a wider width fills more of the viewport. Sections set to full width ignore this and stretch edge to edge.

Branding assets

The branding settings hold your logo, your favicon (the small icon in the browser tab), and an optional body background image. Set them per market when you want each market to look distinct, or reuse the same files everywhere.

Checkout flow

The checkout settings decide how a shopper moves from a product to a completed order.

Checkout method

  • Add to cart: shoppers collect items in a cart drawer and check out from there. Best when buyers often order more than one item.
  • Fast checkout: the cart is skipped and the buyer goes straight to the order form. Best for single-product or cash-on-delivery stores where speed matters.

Secondary method

You can turn on the other method as a secondary option, so a store built around fast checkout can still show an add-to-cart button alongside it, and the other way around.

Checkout form fields

The form fields control exactly what you collect on the order form. Available fields include full name, first and last name, company, gender, birthday, address, national ID, neighborhood, apartment, floor, ZIP code, order note, gift option, email, phone, and WhatsApp number. For each field you control three things:

  • Status: Required (the buyer must fill it), Optional (shown but not mandatory), or Hidden (removed from the form).
  • Label: the visible field name the buyer reads.
  • Placeholder: the hint text shown inside the empty field.

You can also reorder the fields to set the sequence buyers see. Because the form is per market, you can require a national ID in one market and drop it entirely in another.

Form input styling

The form input settings control how every input on the storefront looks: the input layout, the color scheme the inputs use, and whether field icons are shown.

Interface icons

The icon settings set the weight (line thickness) of the interface icons used across the store, and whether certain icons are shown at all.

Animations

The animation toggles turn the storefront's motion effects on or off. Switch them off when you prefer a static, faster-feeling store or want to respect visitors' reduced-motion preferences.

Automations

The automation settings control autonomous storefront behaviors, such as how media is handled and other actions that run on their own without a manual step.

Content protection

The protection settings restrict certain browser interactions, such as right-click and text selection, to make casual copying of your images and text harder. For stronger protection against competitors and bots, see Protecting content with Spy Blocker.

Maintenance mode

Maintenance mode hides your storefront behind a temporary holding page during updates or downtime. You can set the message visitors see and the color scheme of that page. Turn it off to bring the store back online.

Custom CSS and JavaScript

For advanced customization, the CSS setting injects your own styles across every page, and the JavaScript setting injects custom scripts such as third-party tracking. Use these only if you are comfortable with code, because a mistake here can affect the whole storefront.