Content & CMS

The problem: the idea for a page arrives today (a Ramadan lookbook, a "Story of Our Craft"), but turning it into a live page normally means briefing a developer and waiting, and by the time it is up the moment has passed.

Build any content page yourself out of ready-made building blocks: stack them, drag them into order, and fill in your words and images in both languages. A page stays a Draft while you work, completely invisible to shoppers, and goes live only when you switch it to Published, so a half-finished page never shows.

How to use it

1. Open Content → Landing Pages to see all your pages and whether each is published.
2. Click Create page, give it a title and a web address in each language.
3. Add blocks (headings, text, images, buttons, and more), then drag them by the grip handle to reorder.
4. Fill in the words for each language, and adjust each block's look in its Appearance panel if you wish.
5. Switch the page to Published and save. The page is now live on the storefront.

Your storefront pages are built from blocks for one simple reason: it puts the layout of your shop entirely in your hands. Instead of asking a developer to write code, you stack ready-made sections (a hero banner, a row of cards, a gallery, a contact form) like building bricks, drag them into the order you want, and fill in your own words and pictures. Every block is translated into each of your languages and is automatically styled to match your brand colours, fonts and spacing, so a page you assemble in minutes still looks designed and on-brand, in both English and Arabic.

Here is the full set of blocks you can stack on a page, and when each one earns its place:

Tip: keep a page as a Draft while you prepare it; nothing reaches shoppers until you publish. Blocks start collapsed so a long page stays easy to scan.

Tip: every block, and every repeated item inside one (a card, a testimonial, an FAQ entry, a form field, a gallery photo, a button), has a one-click Duplicate. Use it to copy something that is almost right and just tweak the copy, rather than rebuilding it from scratch.

The problem: a policy change or a new boutique phone number should be a two-minute edit, but when the home page, the legal pages and the shared layouts each live somewhere different, you hunt for the right place and hope you caught every copy.

One place to edit every fixed part of your storefront, grouped into three kinds: your storefront pages (home, about, contact), the shared layouts that shape the shop listing and every product, category and collection page, and the legal pages (privacy policy, terms of use, cookie policy, returns and shipping). None of these can be accidentally deleted, and a change made here lands everywhere it applies, using the same blocks as any other page.

How to use it

1. Open Templates → Front Pages to see your storefront pages, layouts and legal pages together.
2. Click the one you want to change to open it in the block editor.
3. Edit the words and images, add or reorder blocks, and fill in each language.
4. Save. The change goes live straight away, everywhere that page or layout is used.

Good to know: the legal pages live at their own tidy web addresses and are wired into the footer automatically, so shoppers can always find them. This is separate from Content → Landing Pages, which is for pages you create yourself and can delete at any time; see "Pages" earlier in this chapter.

The problem: you want every product page to change (reviews higher up, a "You may also like" row at the bottom), and you have 200 products. Editing them one by one is a week of work, and the pages drift apart the moment you miss one.

Your shop listing and every product, category and collection page share one layout each, built from the same drag-and-drop blocks as any other page (this is the "layouts" group inside Content → Front Pages). Instead of typing each product's name and photo into its own page, a block can be pointed at "whatever the shopper is currently viewing", so the one layout automatically shows the right name, photo and details for whichever product, category or collection someone opens. Change the layout once and every page of that kind updates together.

How to use it

1. Open Templates → Front Pages and pick a layout (Shop, Product, Category, or Collection).
2. Add and arrange the blocks that belong on that surface; the block palette only offers blocks that fit it.
3. For a block that should reflect the specific product, category or collection someone is viewing, point its content at that item's own field (its name, its photo) instead of typing fixed text.
4. Save. Every page of that kind updates immediately to the new layout.

Good to know: the shop listing and category/collection pages also come with a matching "browse all categories" and "browse all collections" layout, covered in Chapter 02.

The problem: a shopper who knows exactly what she wants (black, crepe, size M) still has to scroll your whole catalogue to find it, and every extra scroll is another chance for her to give up and leave.

Two blocks built for product-listing pages: a filter sidebar shoppers use to narrow the products down (by size, fabric, price and your other options), and a product grid that lists the matching pieces with sorting and page numbers. Together they let you compose your own shop and category pages where shoppers find the right piece in a few clicks instead of an endless scroll.

How to use it

1. Open a listing template in Content → Landing Pages.
2. Add the filter sidebar block and choose which filter sections to show (or show them all).
3. Add the product grid block and set how many columns it uses.
4. Save. The page now shows a grid shoppers can filter, sort and page through.

The problem: the big fashion houses open their home pages with a cinematic moment; for a boutique, that usually means video production and a developer, so your home page stays a still image.

A striking full-width opening where a series of photos plays as the shopper scrolls, like slowly turning the piece in your hands. You lay your own words over it (a small opening line, a headline, a short body) and up to two buttons, and get a signature, editorial-grade moment with no video production and no developer.

How to use it

1. Add the stone-sequence block to a page in Content → Landing Pages.
2. Upload the whole set of frames in one go; they are kept in order and shown one after another as the page scrolls.
3. Write the overlay heading and copy, and set the button labels and links.
4. Choose how much scrolling the effect spans, then save.

Tip: the frames play purely from scrolling, so a sequence of evenly framed photos gives the cleanest rotation. With up to 100 frames, they are shown as a compact thumbnail grid you can scan and reorder at a glance, rather than one long list.

The problem: a boutique brand lives on magazine-style storytelling, but every editorial section (a full-page statement, an artfully overlapped pair of photos) normally means briefing a designer and waiting for the layout to come back.

Three ready-made storytelling blocks that give a page that considered, editorial feel. Statement lays a bold line of your own words across a full-width background image, with a soft wash for readability, a choice of heading style, and an optional button. Feature split places a full-width image beside a solid text panel, with the image on whichever side you choose. Image collage overlaps two photographs beside a text column with a decorative numeral and rich text, for an "our story" moment that feels art-directed rather than assembled.

How to use it

1. Add a Statement, Feature split or Image collage block to any page in Content → Landing Pages.
2. Upload the image (or the two, for the collage) and write your words in each language.
3. Pick the details: which side the image sits on, the panel colour, the wash over a statement image, the heading style.
4. Preview the block, then save.

The problem: you want your services presented side by side, but hand-built sections drift uneven (one card longer, one shorter) and the page ends up looking homemade instead of deliberate.

A tidy grid of content cards. Each card can hold an image or an icon, a title, a short body, and an optional link, and the grid stays even and balanced no matter how many cards you add, making it ideal for highlighting features, services or destinations.

How to use it

1. Add the cards block to a page and pick how many columns the grid uses.
2. Add each card with its image or icon, title and body, in each language.
3. Give a card a link if you want it to lead somewhere, then save.

Good to know: for the icon, pick from the ready icon set or upload your own image instead, for a fully on-brand mark; you can swap or remove an uploaded icon at any time.

The problem: the same three questions (sizing, fabric care, returns) reach you again and again, but answering them all on the page risks a wall of text that scares shoppers off before they read a word of it.

A collapsible list of titled panels. Each panel shows only its title until a shopper clicks to expand it, so you can answer every recurring question right on the page while it stays calm and easy to skim.

How to use it

1. Add the accordion block to a page.
2. Add each panel with its title and its content, in each language.
3. Choose whether shoppers can open one panel at a time or several at once, then save.

The problem: made-to-order requests arrive by Instagram message, email and WhatsApp, and the important one is always the one that gets buried; by the time you find it, the occasion it was for has passed.

Build a form once (its fields, its look, and who should be told when someone fills it in), then drop it onto any page, or several, with a single Form block. Change the form once and every page using it updates together. When a shopper submits, every entry is checked for completeness before it reaches your inbox, lands in one structured, searchable list in the admin, and rings the bell in your admin notifications; you can also have it emailed to specific people or sent to your connected messaging channels.

How to use it

1. Open Templates → Forms and create a form: add fields (a text box, a longer text area, or a dropdown with your own options), mark which are required, and choose its look.
2. In the form's notifications settings, choose who should be emailed and which messaging channels should be alerted on a submission.
3. On any page, add a Form block and pick this form; the same form can be reused on as many pages as you like.
4. Read incoming entries in the form submissions inbox in the admin.

Built-in protection: every entry is checked for completeness and guarded against spam before it reaches your inbox, so only genuine, complete entries land there.

The problem: the layout is right but the details are off, a face cropped out of a banner, a section that feels cramped against the next one, and you should not need a designer for that.

Nearly every block carries an Appearance panel with the finishing controls: how the content aligns and how wide it sits, the background surface behind it, and its height, up to filling the whole screen. Blocks with images add their own polish: a focal point control so the important part of a photo stays in view however the screen trims it, and crop shapes for a clean, consistent frame. Heroes can run edge to edge or stay neatly contained, and galleries control their spacing, click-to-enlarge and captions.

How to use it

1. Open any block in the page editor and find its Appearance panel beneath the content fields.
2. Set the layout (alignment, width, side padding), the background surface, and the height, including full screen for a dramatic opening.
3. On image blocks, set the focal point and a crop shape; on a hero, choose edge to edge or contained; on a gallery, set the spacing, click-to-enlarge and captions.
4. Preview the block, then save.

The problem: publishing blind, then refreshing the live shop to see how the change came out, while customers are browsing that very page.

Every block has a preview button that renders it exactly as shoppers will see it, in your real fonts, colours and spacing. A Preview Page button shows the whole page in one view, including blocks you have not even saved yet, with or without the shop's header and footer around it, so you sign off the page before a single shopper sees it.

How to use it

1. While editing, click a block's preview button to see that one block exactly as shoppers will.
2. Click Preview Page to view the whole page, including blocks you have not saved yet.
3. Switch the shop's header and footer on or off to judge the page in context.
4. Publish only when it looks right.

The problem: a launch or a sale brings your busiest traffic of the year, and that is exactly when a shop grinds slow; keeping it fast should not depend on you remembering to refresh anything after every edit.

Speeds up your storefront pages by remembering their built-out content so they load fast, even on your busiest day. The cache clears itself automatically when the underlying content changes (you edit a page, a product, or a category), and you can clear it by hand at any time.

How to use it

1. Open Settings → Page Cache.
2. Set how long pages are remembered (a default duration, with optional per-page overrides).
3. Use the manual flush to clear everything, a single page, or a single content type when you want changes to appear instantly.
4. Save. Your pages now load from the fast cache and refresh themselves as content changes.

Good to know: the cache self-clears on most content edits, so the manual flush is mainly there for the rare moment you want a change to show the instant you make it.

The problem: your navigation should change with the season, a Ramadan entry under "Gifts", a new collection up front, but menu changes are usually developer work, so they land late or not at all.

Build your storefront navigation yourself with a drag-and-drop tree editor. Four fixed menu areas (the header drawer, the footer columns, the footer legal links, and the footer social icons) are yours to fill and reorder in minutes. A menu item can point to a page, a category, a collection, a product, a chosen storefront page, or a custom link.

How to use it

1. Open Content → Menus and pick the menu area you want to edit.
2. Add items and drag them to reorder, or indent them to nest one under another (up to three levels deep).
3. For each item, choose what it links to and give it a label in each language; you can also add an icon.
4. Set who sees an item (everyone, guests only, or signed-in shoppers only), then save.

Self-healing links: if an item points at a page or product that is later unpublished or removed, the link simply drops off the storefront on its own, so menus never lead to a dead end.