Storefront

The problem: a shop stitched together from disconnected screens loses shoppers at every seam. Each time she has to guess where to go next, or falls out of her language halfway through, she simply leaves.

From the first visit to a delivered order, the storefront is one continuous path. A shopper lands on the homepage, browses or searches to find a piece, opens its product page, picks their size and any add-ons, drops it in the bag, checks out, and then follows the order through to delivery from their account. Every step works in the shopper's chosen language and currency.

How to use it

1. Discover. The shopper arrives on the homepage and sees the hero, featured collections and any promotions you have placed.
2. Browse and filter. They open the product listing, a category or a collection, then narrow it down with the filter sidebar, sorting and search.
3. Open a product. A product page shows the gallery, description, price, sizes, add-ons, size chart, reviews and "you may also like" suggestions.
4. Add to bag. They choose a size and any add-ons and add the item to the cart.
5. Check out. They review the bag, enter delivery details, and pay (covered in Chapter 03).
6. Track the order. They follow the order from their account as it is confirmed, shipped and delivered (covered in Chapters 05 and 06).

Good to know: the storefront is the public shop. The pages and promotions a shopper sees are all built and arranged by you from the admin, with no developer needed.

The problem: seasons move faster than a fixed homepage. If refreshing your front door needs a developer, Ramadan arrives while the shop still leads with last season's edit.

The shop's front door, composed from arrangeable content blocks: a hero, featured collections and product picks, and any marketing bands you add. You control the whole layout from the admin, so the homepage can change for a season or a sale on your own schedule, without any code, and always looks freshly curated.

How to use it

1. The shopper opens the site and lands on the homepage.
2. They see the hero image, featured products and collections, and any promotional bands.
3. They click into a product, a collection or a banner link to start shopping.

Related: the homepage is built from content blocks; see CMS pages below and Chapter 10, Content & CMS, for the full block builder.

The problem: a shopper who wants a black abaya in size 54 under 400 riyals will not scroll through three hundred products to find it. She gives up, and you never even know she was there.

The main browse page where shoppers explore everything for sale. They can sort the grid, page through results, and narrow it down with a filter sidebar covering categories, collections, tags, colours, sizes, rating and price, so anyone lands on exactly what she wants in a few taps.

How to use it

1. The shopper opens the products page from the menu.
2. They tick filters in the sidebar (for example a colour, a size, or a price range) to narrow the grid.
3. They change the sort order (newest, price, name) and page through the results.
4. The chosen filters stay in the web address, so the filtered view can be bookmarked or shared.

Good to know: the sidebar only shows filters that actually exist in your catalog, and paging through results keeps every active filter in place.

The problem: this page is where the sale is won or lost. If the photos feel small, the fit is unclear or the stock position is vague, the shopper leaves to find answers elsewhere and rarely comes back.

Where a shopper decides to buy. A swipeable photo gallery with a strip of thumbnails lets her flick through every angle; on a computer, hovering over a photo zooms in for a closer look at the detail, and tapping any photo opens a full-screen view she can page through with arrows, a swipe, or the keyboard. Below the gallery sit the description and price, the size selector and any optional add-ons, a size chart to help her choose, customer reviews, and a "you may also like" set of related products. If the size or add-on she wants is out of stock, the page says so plainly and the add-to-bag button stays disabled until she picks something available.

How to use it

1. The shopper clicks a product anywhere on the storefront to open its page.
2. They swipe or hover through the gallery, and tap any photo to open a full-screen close-up.
3. They pick a size (checking the size chart if needed) and select any add-ons; the price updates. If their choice is out of stock, a clear notice appears and adding to the bag is blocked until they pick one that is available.
4. They add the item to the bag, and can scroll on to read reviews and explore recommended products.

Good to know: only Active products have a public page. Drafts and archived products are never reachable by shoppers.

The problem: most taps on your story links open inside Instagram's own cramped little browser, where a slow, cluttered page kills the impulse to buy before the photos even load.

A simpler, faster version of the product page, shown automatically when a shopper opens your shop from a link inside Instagram. It keeps just the essentials, the photos, the price and add-to-bag, so the page loads quickly and fits comfortably in that small window.

How to use it

1. A shopper taps a product link in your Instagram profile or a story.
2. The link opens inside Instagram's built-in browser.
3. They automatically see the simpler, faster product page, sized for that small window.

Optional feature: switch the Instagram layout on or off under Settings → Features. When it is off, every shopper sees the standard product page.

The problem: a regular restocking three of her usual abayas has to open every product page in turn, and each extra step is another chance for the order to be abandoned halfway through.

Lets a shopper add a product to the bag straight from its card on a listing, without opening the full product page. A small dialog lets them pick the size and any add-ons right there, so a repeat buyer can fill a bag in a few taps.

How to use it

1. While browsing a listing, the shopper taps the quick-add control on a product card.
2. A small panel opens to pick size, quantity and any add-ons.
3. They confirm, and the item is added to the bag without leaving the listing.

Optional feature: switch Quick-add on or off under Settings → Features. When it is off, the control simply does not appear.

The problem: how a shopper arrives should decide what she sees. A Ramadan banner that dumps her into a wall of unrelated products, or a menu with no way to survey the whole range, both end in the back button.

Every category and every collection gets its own browsable page, showing just the products that belong to it: the focused entry points shoppers reach from the menu, the homepage, or a promotion. The storefront also has two automatic index pages, one listing every department and one listing every collection, each as an elegant grid that updates itself the moment you add or retire one, so there is nothing for you to maintain. Like every storefront page, they are built from blocks, so their look can be restyled from the page templates without code.

How to use it

1. The shopper picks a category from the navigation menu, a collection from the homepage, or opens the "all categories" / "all collections" page to browse the full list.
2. They land on a page listing only that group's products (or, on the "browse all" pages, every category or collection as a grid that keeps itself up to date).
3. They browse and click through to a product just as on the main listing.

The problem: a shopper who knows exactly what she wants will give the search box one chance. If it comes back empty or ignores her Arabic, her next search happens on Google, on someone else's shop.

Lets a shopper type what they are looking for and get matching products instantly. Search works in the shopper's own language, and the results can be narrowed with the same filters as the listing, so she finds the piece in seconds.

How to use it

1. The shopper types a word or phrase into the search box.
2. Matching products appear in a results grid.
3. They refine the results with the filter sidebar and sorting, then click into a product.

The problem: in the boutique you would mention the matching hijab at the till. Online nobody makes that suggestion, so the abaya sells alone and the rest of the set stays on the shelf.

Surfaces similar and frequently-bought-together products on the product page, so a shopper discovers the right next item at the exact moment she is already reaching for her card. Your hand-picked product relations always come first, topped up automatically when there are not enough.

How to use it

1. The shopper opens a product page.
2. Below the product they see a "you may also like" set of related items.
3. They click any suggestion to jump to that product.

Related: you set the hand-picked links in the product editor; see Product relations in Chapter 01, Catalog.

The problem: your buyers quietly learn that a style runs a touch small, but that knowledge never reaches the next customer, so the same wrong-size order keeps happening.

Lets a signed-in customer rate a product and write a review, with an optional note on fit, the size they bought and their city, plus up to five photos. Reviews from a verified purchase get a verified badge once published, so future customers order the right size the first time.

How to use it

1. A signed-in customer opens the reviews area on a product page.
2. They give a star rating and write their review.
3. They can optionally add fit and size details, their city, and up to five photos.
4. They submit; the review goes to you for approval before it appears publicly.

Good to know: each customer can review a product once, and you approve or reject reviews before they go live (see Reviews moderation in Chapter 01, Catalog).

The problem: a hesitant shopper eyeing a higher-priced piece wants proof from buyers like her. If she cannot find it on the page, she goes looking for reassurance elsewhere and does not come back.

The published reviews shown on a product page: an at-a-glance summary plus a feed a shopper can filter and sort, load more of, mark as helpful, and report if something looks off. It lets other buyers' honest experience close the sales that doubt would otherwise lose you.

How to use it

1. The shopper scrolls to the reviews area on a product page.
2. They read the rating summary, then filter and sort the feed and load more reviews.
3. They mark reviews as helpful, or report a review that breaks the rules.

The problem: your free-delivery week ends Friday, but a notice posted only on the homepage misses every shopper who lands straight on a product page from Instagram.

Short text strips you can pin to the very top or the very bottom of every page, for things like free-shipping notices or sale dates. When more than one is live, the strip gently rotates through them, and shoppers can dismiss a strip you mark as dismissible, so your most time-sensitive offer is seen no matter which page a shopper lands on first.

How to use it

1. The shopper sees the strip on every page, at the top or bottom of the screen.
2. If several are live, the strip rotates through them automatically.
3. They can close a dismissible strip, and it stays hidden for them.

Where to set it: create and schedule announcements under Content → Announcements. Only live, in-schedule strips ever reach shoppers.

The problem: a visitor browses, hesitates and leaves, and you are left with no email, no sale and no way to reach her again. Yet a popup that nags on every visit drives away the shoppers who stayed.

An overlay you can show shoppers to promote an offer or capture signups. You control where it appears, when it appears (as the page opens, after a few seconds, when she scrolls, or as she is about to leave) and how often it may show again, so it never becomes a nuisance.

How to use it

1. The shopper browses the storefront as normal.
2. At the moment you chose, the popup appears with your image, message and optional button.
3. They act on it or close it; your frequency rule decides when (if ever) they see it again.

Where to set it: build and schedule popups under Content → Popups. Only one live popup shows at a time, by priority.

The problem: your new bridal collection is live, but shoppers only find it if they think to dig through the menu. A launch with no visual push might as well be invisible.

Promotional image bands you place in fixed spots around the storefront: a strip above the header, the homepage hero and content bands, and spots near the footer. Each banner can link to a product or category, and every link is checked to be safe before it reaches shoppers.

How to use it

1. The shopper sees the banner in its spot as they browse.
2. They click it to follow its link to a product or category.
3. You decide which banners are active and in what order from the admin.

Where to set it: manage banners, and where each one shows, under Marketing → Banners. Each banner can carry a desktop, tablet and mobile image.

The problem: a marketing idea, a fabric guide, a campaign page, arrives on Tuesday. If publishing it means briefing a developer, it ships next month or never.

Custom content pages you build with a drag-and-drop block editor, for things like a lookbook, a campaign page or a guide. Each page gets its own web address and is shown to shoppers once you publish it, so an idea can go live the day you have it.

How to use it

1. The shopper opens a content page from a menu link or a banner.
2. They read the page, which is laid out from headings, text, images, galleries and other blocks.
3. You build and publish these pages from the admin with no code.

Related: the full block builder is covered in Chapter 10, Content & CMS. Drafts stay hidden until you publish.

The problem: the last question before paying is usually "can I return it?". A shop where the returns policy is missing or unfindable answers that question with silence, and the shopper does not pay.

A fixed set of policy pages every shop needs, such as privacy, terms, returns and shipping. They use the same block editor as other pages, come pre-filled with starter text, and are linked from the footer, so every shopper gets clear, in-language answers before she pays.

How to use it

1. The shopper clicks a policy link in the footer (for example Privacy or Returns).
2. They read the policy page, with the heading shown above your content.
3. You edit the wording from the admin; these pages cannot be deleted or renamed.

Related: the home, about, contact, and legal pages are all edited from one consolidated admin section; see "Front pages & legal pages" in Chapter 10, Content & CMS.

The problem: to a first-time visitor you are just another shop in an endless feed. With nowhere to meet the people and the story behind the label, trust has nothing to grow on.

Your brand-story page, where shoppers learn who you are and what you stand for. It is built from the same content blocks as any other page, so you can shape it however you like and turn a first-time browser into a returning customer more often.

How to use it

1. The shopper opens the About page from the menu or footer.
2. They read your story, laid out in your own content blocks.
3. You edit it from the admin under the Front Pages section.

The problem: somewhere on your site is the exact page a lost shopper wants, and search engines need to find every page of your catalogue too. Without one tidy directory, both wander.

A human-friendly navigation hub that lists the main shop links, all your categories and collections, and your content pages in one place. It gives shoppers (and search engines) an easy overview of everything on the site, so you never lose traffic to poor navigation.

How to use it

1. The shopper opens the sitemap page, usually from a footer link.
2. They see a tidy directory of shop links, categories, collections and pages.
3. They click any entry to go straight there.

The problem: a visitor with a pre-purchase question and no account has no way to ask it, so the question, and the order that hung on the answer, walk away.

A public contact form any visitor can use to message the store, no login needed. A submission lands in your store inbox so staff can reply directly by email, and the form quietly keeps automated junk out, so what reaches you is real questions.

How to use it

1. The visitor opens the contact page.
2. They fill in their name, email, an optional subject and their message, then submit.
3. They see an on-page confirmation, and the message lands in your store inbox.

Good to know: replies go straight to the visitor's email, so staff can respond from their usual mail client.

The problem: a list padded with typos and throwaway addresses quietly poisons your sender reputation, until the campaign you actually care about starts landing in spam folders.

Lets shoppers subscribe to your marketing emails, with one safeguard: they click a confirmation link in an email first, so only addresses that are real, and really theirs, ever join your list. Every marketing email carries a one-click unsubscribe, and the whole newsletter can be switched off site-wide.

How to use it

1. The shopper enters their email in the newsletter form.
2. They receive a confirmation email and click the link to confirm.
3. They are now subscribed, and can unsubscribe with one click from any email.

Good to know: no marketing email is ever sent to an address until it has confirmed, which protects your sender reputation. The admin newsletter tools sit behind the email system feature.

The problem: keep emailing an address that no longer exists, or someone who marked you as spam, and the big mail providers start quietly treating everything you send as junk.

Addresses that do not exist, or that complained about your mail, are taken off your list automatically, so your emails keep landing in inboxes. Your email provider reports the undeliverable address or the complaint back to the store, and that address is quietly skipped from then on, with nothing for you to do.

What it means for you

1. A subscriber's address comes back undeliverable, or they mark an email as spam.
2. Your email provider reports it back to the store.
3. That address is taken off your list automatically and skipped by future campaigns, with no action needed from you.

Good to know: this runs behind the scenes to keep your emails landing in inboxes. Once an address is taken off the list it stays off marketing sends unless the person subscribes again.

The problem: a visitor who must convert prices in her head, in a language she reads slowly, is doing arithmetic instead of shopping, and unfamiliar money is one of the quietest reasons a full bag gets abandoned.

Controls in the header that let a shopper switch the site language or the currency prices are shown in. Both follow the shopper across the whole shop, and the prices recalculate instantly to the chosen currency, so she browses and checks out in the language and money she thinks in.

How to use it

1. The shopper opens the language or currency control in the header.
2. They pick a language or a currency from the list.
3. The shop reloads in that language, or re-prices everything in that currency.

Where to set it: the available languages and currencies are managed under Settings → Languages and Settings → Currencies.