Where these settings live
Branding is configured per market, and within a market it affects every page at once. Open the builder, pick a market with the markets button (country flag) at the top of the left sidebar, then open the Settings tab (gear icon). Settings has its own sub-tabs in this order: Branding, Colors, Fonts, Layout, Animations, Automations, Inputs, Icons, Prohibitions, Checkout, Checkout form, Maintenance page, Custom CSS, and Custom Javascript. Changes apply to the market you have selected and go live when you click Publish. Switching markets reloads that market's own colors, fonts, and layout.
Color schemes
The Colors tab holds up to 9 color schemes. Once you reach the limit, the add card turns into a disabled count badge like 9/9. Every section, block, and component references one scheme by its number, so changing a scheme's colors instantly restyles every section that uses it across all pages. Right-click a scheme card to duplicate or delete it.
Color roles in each scheme
Each scheme defines these roles, all set as hex values:
- Background: the main section background.
- Inner Background: a tinted background for cards and nested content inside a section.
- Heading: heading text color.
- Text: paragraph and body text color.
- Important text: emphasized text such as prices and highlighted values.
- Links and Hover links: hyperlink color in its normal and hovered states.
- Border: element borders and divider lines.
- Outline: focus rings and accent outlines that must stand out more than borders.
- Shadow: box shadow color (usually semi-transparent).
- Primary button: background, text, and border, each with its own separate hover color (6 values total).
- Secondary button: background, text, and border, each with its own separate hover color (6 values total).
- Input background, text, border, and label: the styling of form fields.
- Input hover background: the input background when a shopper hovers the field.
Tips for strong schemes
- Keep a neutral light Background on most sections and reserve bold colors for one accent scheme on hero and call-to-action sections.
- Make Primary Button Background clearly distinct from the section Background so the button stands out.
- Set Inner Background as a slight tint of the main Background so cards read as separate without jarring.
- Aim for at least 4.5:1 contrast between text and its background.
Fonts
The Fonts tab maps four roles to a font family each:
- Body: paragraph text and descriptions.
- Heading: all headings across the store.
- Subheading: secondary titles and section subheadings.
- Accent: a stylistic font for prices, badges, and decorative emphasis.
Available fonts: Inter, Helvetica, SF Mono, New York, System UI, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Nunito, Merriweather, Playfair Display, Lora, PT Sans, PT Serif, Quicksand, Space Grotesk, DM Sans, Syne, Manrope, Outfit, Urbanist, Oswald, Bebas Neue, Abel, Abril Fatface, and Acme. For stores with Arabic content, each font is paired automatically with a matching Arabic counterpart, so you do not select an Arabic font separately.
Page width
The Layout tab has a Page width slider that sets the maximum width of the main content grid, from 900 to 1400 px in steps of 100 (so 900, 1000, 1100, 1200, 1300, or 1400; the default is 1200). Sections set to Page width are constrained to this value; sections set to Full always span the entire viewport regardless. On viewports narrower than the chosen width, sections shrink to fill 100% of the screen.
Logo
The logo is set in two places: the Logo block inside the Header section, and the About Us block in the footer. Click the block, then use its Logo image picker to choose an image from your media library or upload a new one. After picking it, set the display Width and Height (each 20 to 300 px); the other dimension auto-scales to keep the aspect ratio. The header logo defaults to 120 px wide by 50 px tall, and you can set its horizontal position (left, center, or right) and padding. By default the header logo links to the home page; you can make it purely decorative by turning off the Logo redirects to home toggle in the Header group of the Prohibitions tab.
Favicon
Set the favicon in the Branding tab. Click Select favicon and choose a PNG, JPEG, WEBP, or ICO image (recommended size 32x32 or 16x16 px). It appears in browser tabs and bookmarks.
Body background image
Also in the Branding tab, you can optionally set a Body image behind the entire store (PNG, JPEG, or WEBP). Once an image is selected, two controls appear: Size (Cover fills the viewport, cropping if needed; Contain fits the whole image) and Repeat (when on, the image tiles and scrolls with the page; when off, a single image stays fixed in the viewport as content scrolls over it). Use a heavily compressed image to avoid slowing page load.
Custom CSS and JavaScript
For changes the standard settings cannot make, the Custom CSS tab and the Custom Javascript tab each accept up to 1,000 characters that are injected into and run on every page of the store. Use them sparingly. For styling scoped to a single section, every section also has its own Custom CSS tab in its control panel, which is safer than the sitewide field.