Store Pages and Shop Layout

Edit storefront pages, Shop blocks, campaign sections, previews, and shared design variables.

Overview

Store settings → Pages (/en/store/pages) edits About, Contact, FAQ, Returns, Terms, and other storefront pages. The Shop tab controls content blocks shown with the product grid.

Saved content appears at shop.orderinchat.com/store/{slug} or your verified custom domain. You manage the storefront from the main OrderInChat panel.

Edit a page: drafts, publish, history

The page editor has three panes: pages and sections on the left, the live preview in the middle (desktop or mobile, light or dark) and the section form on the right. Every section type is available (hero, feature grid, spotlight, stats, banner, testimonials, rich text, FAQ, contact cards, legal info, media grid with videos, product gallery, campaign carousel and wall).

Pick a page on the left, then a section in the list or in the preview.
Edit it on the right. Drag sections to reorder them, use the eye to hide one, and Add section to insert a new one. The toolbar above the preview moves, duplicates, hides or deletes the selected section; Undo brings back the last change. Add section offers every section type on every page: the ones made for that page come first under Recommended for this page, the rest under All sections.
Your edits are saved as a draft automatically (the top bar shows "Draft saved"). Nothing changes on your storefront yet.
Click Publish. The window lists what changed on each page, offers to translate the changed texts first (on by default, with the credit estimate and your balance) and then puts every draft live together. The storefront is refreshed right after. Sections the drafts add or change are also checked against your store: text that is not in your store language, or a section offering something your store does not have (points, appointments, a blog, coupons, WhatsApp, a calculator), is listed, and you publish only after ticking that you checked it. Sections written with AI more than a day ago (or by an older AI version), a draft from an AI tool or import that was never edited for a day, and a draft that started before a site import replaced the live page are listed there too.

History shows every version of the page (editor, AI assistant, AI tools, import, restore) with what changed. Restore as draft turns an old version into the draft; the live page changes only when you publish. The last 50 published versions and 90 days are kept.
If the same page is saved in another tab, the editor asks whether to load that version or keep yours. If someone published the page after your draft started, use Bring my draft up to vN: your changes are kept and theirs are merged in.
The same banner shows how old the draft is and where it came from, for example Draft saved yesterday · source: Import. If the draft is older than a day, its age is unknown or it was not written in the editor (AI, import, translation, restore …), the banner also offers Discard draft. After you confirm, the draft is deleted and the editor shows the live version again; the live site does not change. This cannot be undone.
AI fill & import (top bar) writes your pages from your website URLs or documents, or imports a whole site step by step. Everything it writes is a draft: review it, then publish.
The section form has three tabs: Content, Style (row width, full width, animation) and Visibility (show on the store, show on all devices / desktop only / mobile only — mobile means narrower than 768 px — and the section's translation status per language).
Section form header: the section type, its name (edit it in place) and buttons to hide, move, duplicate or delete it; fields sit in folding groups. New sections: logo strip (in a row or scrolling), timeline / steps, team, comparison table (yes, no or text per cell), map (an address on Google Maps with a directions button) and video (YouTube, Vimeo or a video file; the player loads only when the shopper presses play). Section colours (background, text, button colours, opacity) are on the Style tab under Colours; colours of a single item, such as a card, stay with that item on Content.
Page layout parts: the fixed pieces of the About, Contact and FAQ pages are sections in the list too — Contact page header (title, text, open-now status or reply time), Opening hours (days and times come from Store setup), FAQ box, About page header (title, text, logo, cover image, buttons), FAQ page header and the Still need help box. Hide them with the eye, change their texts (empty = the built-in text in each visitor's language; your own texts can be translated in translation mode) and their colours on Style. They keep their place on the page and cannot be duplicated or deleted. Until you change one, the page looks exactly as before.
Language menu (top bar): pick a language to edit its translations. Every text shows the source, the translation and a status (up to date, needs update, missing); the preview shows that language. Texts you write here are published as they are — "translate first" never overwrites them. Your own sections on About, Contact, FAQ, Returns, Shop and your own pages are translated here too. Publish's "translate first" lists per page how many texts it will translate into which languages, and only translates texts that are new or whose source changed since their translation.
Tools (page settings, shown when no section is selected): AI fill for this page only, Variables ({{store_name}} and the other store tags with a copy button, the return window and your own variables) and Export / Import sections (JSON) for owners and admins. An import replaces the page's sections as a draft (fixed page parts stay, at most 512 KB, page limits checked); Undo brings the old sections back.
Designed sections and free HTML: sections made with Design with AI, and rich text whose layout the visual text editor cannot keep, open as HTML instead, so their layout is never flattened. Edit HTML opens a code editor with line numbers; Check removes unsafe code (scripts, event handlers, outside resources), switches colours to the theme and shows what was removed with a desktop / mobile preview; Apply puts it into the draft. On a designed section, Change with AI rewrites only that section from your instruction: the credit estimate is shown first, AI runs only when you click Create, the same request again is free, and you see a preview before Apply. Undo and History work as usual.
History → Preview shows an older version in the preview without changing anything; restore it as a draft from the same banner.
Footer settings: WhatsApp button, menu icons, social links (platform, icon style, URL, one icon size) and the legal company details, which also appear on Terms. Shop settings: the header above the product filters (eyebrow, title, subtitle, alignment per line).

Open Header menu in the left pane (under On every page). It lists what shoppers see in the store header, in order.

Order: drag an item, or use the arrows. → puts an item in the submenu of the item above it (one level); ← takes it out. On a computer the submenu opens on hover or with the arrow next to the item (keyboard: Enter, arrow down, Escape); on phones it folds open in the menu.
Hide / show with the eye. A page you switched off (FAQ, About, Contact, Returns) stays hidden whatever the menu says.
Add: a store page (Home, Shop, About, Contact, FAQ, Returns, Terms, Insights, Campaigns), one of your own pages, a link (https://…, mailto:, tel: or a store path such as /shop, optionally in a new tab) or a submenu heading that only opens its submenu.
Label: empty shows the page's own name in every language. In translation mode (language menu in the top bar) you type the label for that language.
Menu changes are drafts like page edits: the preview shows them at once, Publish puts them live. Back to the standard menu returns to the default menu (Shop, FAQ, About, Contact, Insights). The footer has its own menu (below).

Your own pages: New page (under the pages list) asks for a title, creates the page with a text section and can add it to the header menu. Add any section type, as on the home page. The page is published at /p/<address> (the address comes from the title and does not change later). Its title and the texts of its sections can be translated in translation mode. Delete page removes it, and its menu entries, when you publish. Up to 30 pages of your own.

New header (below the menu list): a header with drop-down panels — categories with product counts, short descriptions and a featured card. Switch on Use the new header, then choose a Layout (Split, Tiles, Columns, Centered), the height, background, surface, menu position and icon style, what the panels show (product counts, category pictures, descriptions) and which tools sit in the header (account, currency, language, light / dark, campaigns). Featured card: automatic (an active campaign, else the newest product), a campaign, product or category you pick, or none. Under Menu items each top-level item gets its panel (automatic, categories, submenu links or none), a category, an icon and a one-line description (up to 90 characters, no prices or phone numbers; in translation mode per language). Values the AI chose for your design carry an AI pick badge; what you change stays yours when the AI suggests again. Changes are drafts like the menu. The new header is being rolled out: until it is turned on for your store, your storefront keeps its current header.

Open Footer menu in the left pane (under On every page, or Edit footer menu in the Footer settings). It works like the header menu, arranged as the footer's columns.

Columns: up to 4, each with a heading and up to 15 links. A standard heading (Quick links, Legal, My account) is translated for every shopper; type your own heading to replace it. A column without visible links is marked Empty · not shown and is left out of the store.
Links: a store page (Home, Shop, About, Contact, FAQ, Returns, Terms, Insights, Campaigns, My account, Cart, Cookie settings), one of your own pages, a category, a product or any link. Add to column picks where new links go; Column on a link moves it to another column. Drag to reorder, the eye hides, translation mode sets labels per language.
Until your first change the footer is the standard one; that change saves it as your own menu (a draft — Publish puts it live). Back to the standard footer returns to the default.
Always in the footer, outside the menu: your logo or store name with the description, the currency / theme / language pickers, the WhatsApp button and social icons. If no column offers Cookie settings, the bottom bar shows it, so shoppers can always change their consent.
Show in the footer on one of your own pages adds it to the footer menu (first column) or removes it.
Without a logo, the header and footer show your store name; without a name, a name made from your store address.

Build the Shop page

The Shop editor supports shared design variables and reusable blocks above the product grid. Available blocks include campaign carousel and campaign wall sections fed by active store campaigns.

Add blocks from the block library.
Row width is a percentage (100, 75, 66, 50, 33, 25 or any value from 10 to 100). Sections narrower than 100% sit side by side until the row is full — for example 66% + 34% or three times 33%; on phones they stack. On the About page, a width on the story section sets how it shares the row with the contact card. Without a chosen width the About story takes 66% and the contact card 34%, and the control shows that. Sections that the About, Contact, FAQ, Returns and Terms layouts place themselves say so instead of offering a width. Picking a section on any page scrolls the storefront preview to it and outlines it.
Configure each campaign wall independently, including columns and animation.
Use AI fill & import in the top bar to draft the shop header eyebrow, title, and subtitle.
Preview taxonomy filters and campaign content before saving.

Design studio: one look for the whole site

Design / change in the top bar of the Pages editor (owners and admins) saves your open edits and opens the Design studio page. Its Colours & fonts tab sets one design for the whole storefront — colours for light and dark mode, a heading and a body font, corner radius, button shape and card shadow — on one screen: the editor on the left, your real home page on the right (on a phone, the preview is below the editor).

The editor starts from your theme draft's design if there is one, else from the design in use. Changes to Colours (light and dark separately — Light / Dark above the preview chooses which), Fonts, Corner radius, Buttons and Card shadow are free and show in the preview at once. Home layout only changes the preview; your home page sections stay as they are. Reset goes back to where the editor started.
Propose 3 designs under Three proposals from AI runs AI once; the estimated cost in credits is shown below the button before anything runs. Opening the tab and the estimate cost nothing. Wishes (optional) opens a box where you describe the look you want. The same wishes again cost nothing (Free — these proposals were already made).
The three designs appear as cards in the same tab. Use this puts one into the editor and the preview — nothing is saved yet, and you can still adjust it. The button then reads Other proposals: a new set, charged again, with its estimate below it.
Save to draft puts the design into your theme draft — nothing changes on your live store yet. Publish in the Pages editor puts it live, together with your page drafts. The preview then shows that draft.

Pages and sections made with Design with AI use the theme colours and fonts, so they follow the design automatically.
While a design is active, Theme says so. Choosing colours there switches the design off once you publish; it stays under Earlier designs.
With no AI credits left, no proposals are made and the studio says so; editing colours and fonts yourself still works.
The Migrate website wizard ends with the same step, Design: Design my site opens the same tools in a window, where Apply to my store puts the design live right away and Use again on an earlier design brings it back after you confirm; Skip for now skips it. You can change the design any time under Pages.

Page designs (preview)

In stores that take part in the page design preview, the studio opens on Page designs: AI designs your whole home page plus one template each for the legal pages, blog articles and the About page, from your store data. Prices, products and texts stay live.

The list on the left shows each page with its state (Queued, Designing, Ready, Failed), the credits charged and its designs; the one on the page draft is marked In draft.
On the right is your real storefront with your drafts — Desktop or Mobile, Light or Dark.
Design all pages at the top shows its estimated cost first; credits are charged only when you click. The pages are designed one by one on our servers, so you can close the page and come back later. Get browser notifications tells you when they are ready.
Where it is switched on for your store, AI model next to that button picks who designs: Claude Opus 5.5 (best quality, the default), Claude Sonnet 5.5 (cheaper), ChatGPT (OpenAI) or Google Gemini. Each model shows its estimated cost for all pages. Later pages start with your home page's model so the whole site matches; you can change it. Every model gets the same quality check, and you pay only for designs that are saved.
Use this puts the chosen design on that page's draft — no AI, no credits. For legal pages, pick Terms, Shipping or Returns first. On the home page it also puts the design's colours and fonts on your theme draft (with Apply all too); Publish makes the page and those colours live together, and after that Undo leaves the colours as they are.
Where it is switched on for your store, Apply all puts every ready design the studio shows (also those from earlier runs) on its page draft in one go (the legal design on all three legal pages) — no AI, no credits. It asks first and lists the pages; designs that are not ready yet are skipped. A list then shows each page: put on the draft, already there, or why it could not be applied. When the home design's colours and fonts are also put on your store theme, the list says so.
Undo (next to Use this, and in that list) brings back what a page draft had before your last Use this or Apply all — one step per page, free. On the home page it also brings back your previous colours and fonts, unless you changed them since. If the page changed after that, Undo is not offered; pick an earlier design instead.
Open in new tab shows the storefront with your drafts in a new tab. Another design makes a new design for this page only (its estimate is next to it); a page that failed has Try again. Each page can have at most 10 designs; after that Another design is off and you pick one of the earlier designs. When the input is unchanged, the earlier design is shown again for free (the studio says so). If the home page design of a run does not finish, the other pages of that run are not started and nothing is charged for them.
On a phone the pages become chips at the top, Use this sits at the bottom and the other actions are under ⋯.
Nothing goes live until you publish the page in the Pages editor.
In the Pages editor, a page that uses one of these designs lists the design's own sections on the left: click one to jump to it in the preview (it lights up briefly); the eye hides or shows it on that page only — free, no AI; publish the page to make it live. The page's classic sections are folded under Classic sections — not used by this design.
On such a page, click a text, image or link in the preview to change it in place: plain text for the language you are editing, an image from your media library, a link to a page, a product, a web address, email, phone or your store's WhatsApp. Reset brings back the design's own content for the language you are editing (Reset all languages for every language). These edits apply to that page only, are saved as a draft (publish to make them live) and use no AI and no credits. If the design changes so that an edit no longer fits, the section list says so and Clean up removes it.
Where it is switched on for your store, you can also rearrange the sections of such a page: drag a section by its handle, or use Move up / Move down in its ⋯ menu. The ⋯ menu also has Duplicate, Copy to another page, Move to another page, Save to My sections and Delete; My sections under the list adds a saved section to any page with a studio design, at the position you choose (search, rename and delete saved sections there too). Your text and image edits go with the section. Each change applies to that page's draft at once, uses no AI and no credits, and Undo under the list takes it back. Sections that hold your legal text can only be moved up or down.

Design a page with AI

Design with AI sits next to the page title in the top bar on Home, About, Contact, FAQ, Returns, Terms and your own pages (owners and admins).

Choose From a brief (describe the page in at least 10 characters) or From a website (enter the Source page URL of a page whose look you want; notes are optional). You can add up to three Brand colours (optional) and a Tone (optional).
The window shows the estimated cost in credits; credits are charged only when you click Create. The same input again is free.
Create designs the page as styled sections around your live blocks (products, FAQ, contact cards, map) and adds them to the page as a draft, with a short quality-check summary. Regenerate (new variant) makes another version and is charged like Create. Before it is added, the page is also rendered at phone and desktop width in light and dark mode and checked for content wider than the screen, cut-off text, broken images, the number of main headings and text contrast. Layout, heading and colour problems are fixed automatically where possible (at most one extra AI fix, included in the estimate); broken images are only reported. Text that may be hard to read (low contrast) is shown as a warning, and anything that could not be fixed is listed with a count.
Check the preview, use Undo if you do not like it, and Publish when ready. Translations into your other languages are made when you publish, only for changed sections.

On a designed About, Contact, FAQ, Returns or Terms page, Use classic layout under Tools shows the page with its classic layout again; your sections are kept.
To change one designed section later, select it and use Edit HTML or Change with AI (see Edit a page above).

Theme: colours and page background

Open Theme in the left pane (under Design). Theme changes are drafts like any page edit and go live with Publish; the preview shows them right away.

Colour system: Colorswitch presets (you can set your own primary, secondary and accent) or the Accent palette (presets plus your own accent colours).
Colour mode: follow the shopper's device, always light or always dark.
Background colour: one plain page colour for light mode and one for dark mode. The panel shows the text contrast for each and warns below 4.5:1; without a dark colour, dark mode uses the light one. Gradients and patterns are under Gradient & pattern.
Page background: solid colour or gradient (with angle), opacity and an optional pattern with its own colour, set separately for light and dark mode; one click copies it to the other mode.

Choose store fonts

In Theme, pick a Heading font and a Body font from 14 curated Google fonts (sans-serif, serif and display) or the System font. Each option is shown in its own font, and the live preview updates right away.

The fonts apply to the whole storefront, My Account and checkout after you save.
Without a choice the store uses Inter; the heading font follows the body font unless you set it.
Only the fonts you pick are loaded, with text visible while they load. All fonts cover Latin, Turkish and Cyrillic letters; Arabic-script storefronts add an Arabic fallback font, and other scripts use the visitor's device fonts.
Bricolage Grotesque and Hanken Grotesk (the pair of the new storefront design) have no Cyrillic letters, the list says so; Russian text then uses the device font.

Backup coverage

Pages and Shop block configuration are included in Store settings → Backup & Restore. A full restore includes page block configuration and home blocks. Review the restore summary before applying it.

AI site import

Use AI import on Pages when you already have a public website and want a head start:

Preferences — images, design style, notes.
URL discovery — sitemap-first, then content pages only (Home, About, Contact, FAQ, policies, custom landings). Product pages (/shop/…), cart/account, brand archives, and docs/articles are excluded (Products and Knowledge steps handle those).
Trial crawl (when many pages) — sample a few URLs first, review Knowledge Base sources, optionally add instructions and re-run, then continue remaining. Copy URL icons help you inspect sources.
Crawl → Knowledge Base — selected pages save in small batches in the background. The import dock shows live progress (status, %, pages crawled, spinner) while the crawl runs. You can collapse the dock with the top-right icon — the crawl keeps running. Come back only to draft shop pages. Only Delete import cancels it.
Draft lean shop pages — Home / Shop / FAQ / legal. Review each step. Long docs stay in KB, not as menu clones.

Images: The image count (max 50) is for storefront design assets (hero, spotlight, etc.), not one image per crawled URL. We prefer main photos (the page's main share image or large photos) and skip tiny thumbs/icons.

HTML mimic (default design): Generate home builds many rich HTML sections (hero, products, how-it-works, business use-cases, FAQ, contact/CTA, …) with source brand colors and distinct photos. Prefer HTML mimic in import preferences; stronger models (such as Claude Opus) work best for pages.

Videos: Not downloaded during import (too large to import reliably). Keep YouTube/Vimeo as embeds/links, or upload files later via Media Library / Free HTML on the page you want.

Missing pages after import? Add their URLs anytime under Assistant → Knowledge Base (see Knowledge Base).

Notes

Footer description and brand text are managed mainly in Store Setup → Branding.
Legal company details for invoices and Terms should use the legal fields in Store Setup.
Campaign offers are managed in Marketing → Campaigns; Pages controls how campaign sections are laid out.