Choose a theme, colours and fonts

Make the storefront look like your brand: start from one of twelve theme presets, then set your own colours and fonts. Everything here is in the first three groups of the Studio’s Design tab, and the preview shows each change as you make it.

To open the Studio, go to the sidebar and, under Storefront, open Design. New to the Studio? Start with Get to know the Storefront Studio.

Choose a theme preset, and what it changes

A theme preset is a complete starting look. Each card in Theme preset shows four colour swatches, the preset’s name and a few words about its character.

In Theme preset, click the preset you want to try.

Sadeem chosen in Theme preset: its card is outlined, and the whole preview has turned mauve, from the announcement bar to the Shop new in button — One click re-themes the whole preview, here from Terra to Sadeem

The outline moves to that card, the group’s heading shows its name, and the whole preview changes. Try as many as you like: nothing is live until you publish.

Preset	Character	Typeface	Corners	Density
Atelier	Minimal editorial	Editorial serif	Sharp	Editorial
Sadeem	Drapey, mauve, quietly luxe	Editorial serif	Soft	Editorial
Onyx	Luxury high-contrast	Editorial serif	Sharp	Editorial
Oud	Smoky plum, saffron brass	Arabic-first architectural	Soft	Editorial
Terra	Warm artisan	Friendly & clear	Round	Editorial
Haven	Quiet, roomy, considered	Friendly & clear	Soft	Editorial
Bloom	Vibrant beauty	Friendly & clear	Pill	Standard
Juno	Bright, round, parent-proof	Soft & playful	Round	Standard
Volt	Bold direct-to-customer and tech	Bold & confident	Soft	Standard
Circuit	Loud, dense, deal-driven	Marketplace	Soft	Dense
Souq	Fresh, fast, everyday	Marketplace	Soft	Dense
Drop	Loud, limited, no restocks	Bold & confident	Sharp	Dense

Choosing a preset sets all of these at once:

the brand colour and accent colour, and the preset’s own background colours
the typeface, with heading face and body face set back to From typeface
the corners and the shadows
the density, and the product card’s image ratio (Square for the dense presets, Tall for the rest)
light or dark: Onyx and Drop give a dark storefront, and there is no separate light or dark switch
the shape of the hero banner, which only the preset decides

It leaves everything else as it is: neutral tint, type scale, numerals, section rhythm, category tiles, buttons, the product card switches, the header, your homepage sections, motion, the footer, your photos and all your text.

Tip

Choose the preset first, then fine-tune. A preset replaces your brand and accent colours, so note your colour codes before you browse the presets, and type them back in afterwards if you want to keep them.

Brand colour, accent colour and neutral tint

Type a new brand colour and accent colour, watch the preview change, then publish

Colour holds your two brand colours and how much they tint the storefront’s background.

Each colour has a swatch to pick from and a box to type a code into

Control	What it colours
Brand colour	Your main colour: the main buttons, the announcement bar and other strong surfaces.
Accent colour	The highlights: small labels such as the hero’s line above the headline, links, star ratings and selected options.
Neutral tint	How much of your brand colour tints the background and panels: None, Subtle or Tinted.

To set a colour:

In Colour, click the swatch beside Brand colour and pick a colour. The preview follows as you move.
Or click the code box beside it, type a colour code such as #5E4352, and press Enter. The colour applies when you press Enter or click away from the box.
Do the same for Accent colour.
In Neutral tint, choose None for the preset’s plain background, Subtle for a hint of your brand colour, or Tinted for a clearly warmer or cooler background.

In the code box, type # followed by six digits and letters from A to F, such as #5E4352. The box does not check what you type: a colour name such as plum, or a code with a character missing, gives the storefront the wrong colours. If the preview looks wrong after you press Enter, check the code, or pick the colour from the swatch instead.

When the group is folded, its heading shows your brand colour’s code, for example #3B2A22.

Your storefront keeps text readable on any colour you choose. Text on a button turns light or dark to suit the brand colour, and if the brand colour is too pale for readable button text, buttons are drawn a little darker. The accent is adjusted the same way where it is used for small text: made darker on a light storefront, and lighter on a dark one such as Onyx or Drop. So a colour can look slightly deeper, or on a dark storefront slightly lighter, than its code.

Typeface pairs

Typeface, in the Typography group, sets the fonts for the whole storefront. Most typefaces are a pair that covers both Latin and Arabic letters, so English and Arabic look like one brand.

The Typography group open: Typeface Editorial serif with its description beneath, Heading face and Body face both From typeface, Type scale Default and Numerals 123 — The Typography group: a typeface, two optional overrides, the text size and the digits

In Typography, click the Typeface menu.

The typeface menu open, each choice showing its name and a sample, Handgloves 24, written in that face; Editorial serif is selected — Every choice shows a sample in its own face, so you can compare before you pick

Click a typeface. Its description appears under the menu, and the preview changes.

Typeface	The console describes it as	Fonts (Latin · Arabic)
Modern & technical	Engineered, precise: electronics, tools, business catalogues	IBM Plex Sans · IBM Plex Sans Arabic
Editorial serif	Restrained, considered: fragrance, dates, oud, jewellery, gifting	Noto Serif · Noto Naskh Arabic
Friendly & clear	Open, calm: beauty, wellness, pharmacy, kids, services	Readex Pro
Marketplace	Dense, fast, many products: grocery, pharmacy, spare parts	Noto Sans · Noto Sans Arabic
Bold & confident	Loud and geometric: streetwear, trainers, supplements, coffee. Headings only, body in Noto Sans	Alexandria
Arabic-first architectural	Monumental, carved: Gulf heritage, Ramadan, perfume wordmarks. Headings only, body in Noto Naskh Arabic	Reem Kufi
Soft & playful	Sweet, warm: bakeries, desserts, florists, toys. Headings only, body in Readex Pro	Lemonada

The last three are display faces for headings. Body text uses the sturdier face named in their description.

The menu lists the typefaces that suit the language the preview is showing. Arabic-first architectural is an Arabic face, so it is offered only while you preview in Arabic.

The Oud preset uses Arabic-first architectural. While you preview English, the Typeface menu shows it greyed out and marked Arabic-only face. Nothing is broken: your choice is kept, and your English headings still use it. If your store sells mostly in English, you may prefer another typeface.

Heading face and body face

A typeface sets both headings and body text. To mix, override either one:

Control	What it changes	Choices
Heading face	Headlines, section titles, product names and your store name in the header.	From typeface (the default), or any face that suits the previewed language.
Body face	Everything else, such as descriptions, menus and prices.	From typeface, or one of the four faces that stay legible at small sizes: Modern & technical, Editorial serif, Friendly & clear and Marketplace.

Click the Heading face menu and choose a face.

The heading face menu open: From typeface selected at the top, then Modern & technical, Editorial serif and Friendly & clear, each with a sample — From typeface keeps the heading face of your typeface; any other choice overrides it

Click the Body face menu and choose a face, or leave it on From typeface.

The body face menu open, offering From typeface and only the faces that stay legible at small sizes — Body text is offered only the faces that read well small

Under Body face, the console reminds you: Only faces that stay legible at small sizes are offered for body text. Choosing a new Typeface sets both overrides back to From typeface.

If you chose an Arabic-only face while previewing Arabic, and then switch the preview to English, the menu shows that face greyed out and marked Arabic-only face. Your choice is kept.

Type scale and numerals

Control	Choices	What it does
Type scale	Compact, Default, Spacious	Makes all the storefront’s text a little smaller (Compact) or a little larger (Spacious).
Numerals	123 or ١٢٣	Which digits your Arabic storefront uses for prices, dates and counts.

Numerals appears only when your store sells in Arabic, and it changes only the Arabic storefront: English and French always use 123. Choose ١٢٣ if your customers prefer Arabic-Indic digits; 123, the default, keeps Western digits.

Check it in each language, then publish

Colours and fonts are shared by all your store’s languages, but each language uses its own half of the typeface, so check every one:

In the top bar, switch the preview to each of your store’s languages.
Click the phone icon and look again: headings wrap differently on a small screen.
Click Product to check a product page.
Click Publish to put the new look live, or Save draft to finish later.

Read Save a draft and publish your storefront for what each button does. Next, tune the spacing, buttons and product cards in Adjust spacing, buttons and product cards, or let AI suggest a whole look with Generate your storefront with AI.