Design your storefront103 min read

Site editor

Change how your site looks right on it: the theme (colours, saved palettes, fonts and your own uploaded fonts, corners and buttons, product shelves, the loading animation), arrange the home page sections (banners, galleries, product showcases, hand-picked products, text, reviews and more), the hero carousel, dragging its text and buttons on the page, the announcement bar (its messages, speed and edge fade), the header (logo, favicon, layout, size, language switcher), the menu (auto submenus, the mega menu, photos in the menu, the logo split, product search) and its labels, the footer (theme, brand, social links, the newsletter band, columns and badges), the product cards (your own layouts in a card designer, one layout everywhere, the favourites heart, ratings, quantity prices), the cookie banner layout, the newsletter pop-up, the contact details and call button (live), the empty cart and order confirmation layouts, the checkout notice, the order status animations, the FAQ, the About section and the two info pages, in a draft that saves itself - then publish by area, with a history to view or restore any version; a member without the publish key sends the draft for review instead.

The site editor shows your real site and lets you change how it looks right on it. Changes go to a draft: shoppers keep seeing the site as it is until you press "Publish". Open it from Online store › Site editor or from Content › Pages & sections.

The home page, the hero carousel, the theme (colours, fonts, style), the announcement bar, the header (the logo, the favicon and the language switcher), the navigation, the menu labels, the footer, the product cards, the common look of the categories and of all products, and how each category shows and its page sections are edited here. The old addresses of Landing page and Hero carousel open the editor right on the home page, Navigation on the menu, Footer section on the footer, the default category view on "All categories", and a single category's view and its page builder on its own page, in "This category".

What you see

  • At the top are the exit, your shop's name and the button that collapses the panel. Next to them is the address bar: back, forward, the page you are on, and a "Go to…" search for pages, categories and products a click does not reach. On the right are the "Preview" button (see below), Desktop / Mobile, the language, "History", the number of unpublished areas and "Publish".
  • On the right is the preview: your site, which you can browse. In the mobile view you also pick the phone width (360, 375, 390 or 430).
  • On the left is the panel. It follows the page in the preview: the "Scope" menu at the top says what you are editing and whether it holds a draft. The home page has "Home page"; every page has "Store" - the navigation, the footer and the other store-wide parts.
  • On a phone the preview fills the screen and the panel is a sheet at the bottom with three heights. Tapping a section in the preview opens the sheet half way, right on it. The "Preview" button is in the sheet's header, next to the "Scope" menu.
  • If you see "The site editor is not available yet" instead of the editor, a setting the preview needs is missing on our servers. It is not something you can change, and your site and its draft are not affected. If it stays like this, write to us.

Changes save to the draft on their own. If you set something back to the value on the live site, it leaves the draft and its “Draft” mark goes away.

If someone else, or this editor in another tab, changed something after you opened it, the editor asks instead of overwriting the newer version: “Show the new version” (your latest change is not saved) or “Save my version” (it replaces the other one).

“Undo” and “Redo” at the top (on a phone, in the ⋯ menu), or Cmd/Ctrl+Z and Cmd/Ctrl+Shift+Z, step through your draft changes while the page stays open. They don't cover what saves live (prices, products, contacts), and they start over after a publish. If someone changed the same thing in the meantime, the editor says so and shows the new version rather than overwriting it. While you type in a field, Cmd/Ctrl+Z undoes the field's text. The keys work after you click in the preview too, except in one of the store's own fields (the search box, for example), where they undo what you typed there.

Home page

The "Home page" scope shows the page in the order shoppers see it:

  • The hero carousel is pinned at the top (see below).
  • Below it are the sections. A row gives its room to the name, and the "⋯" menu at its end holds the rest: "Edit", "Hide", which hides a section without removing it, and "Remove". On a computer the ↑ ↓ arrows sit on the row itself; on a phone they are in the menu as "Move up" and "Move down", and it stays open so you can move several places. On a computer rows also drag, and pointing at a row brings up the pencil and the eye. "Remove" takes the section out of the draft: the store keeps showing it until you publish. Until then, "Discard" in the publish review brings it back (along with the other unpublished changes to the sections), and after publishing, "Restore" in the history does. On a phone, tap a row to open the section; hiding and removing also sit at the top of it.
  • "Add section" opens the window with the section types (see below). The new section shows in the preview at once.
  • The "Page" card sets the content width.

The fields of each section type are described in [Sections one by one](#sections-one-by-one). Per-device choices follow the Desktop / Mobile switch at the top, and texts follow the preview's language.

In the preview itself, everything works as on the live site: product cards and links open their page, and buttons do their job. A click anywhere else in a section selects it. A section that is one big link, such as a banner, opens from the bar that appears when you point at it, or from the list. Above the selected section a bar has the arrows, edit, hide and remove, and the "+" between sections adds a new one in that place.

To see the page exactly as shoppers see it, press the "Preview" button (at the top next to the address; on a phone, in the sheet's header). The section labels and bars, the "+" between sections and the grey bands of hidden sections disappear, and the eye turns blue. The panel's fields still edit and the preview updates. Pressing the eye again or the Esc key brings the tools back; opening a section, the hero or a slide in the panel brings them back too. After a reload the editor always opens with the tools.

Adding sections

The “Add section” button (or the “+” between sections in the preview) opens a dialog that starts on a list of seven section types. Tapping a row slides into that type’s options, and a back button returns you to the list (like the storefront sign-in / register drawer). The “Text” row has only one layout, so it is added straight away with no second step - which is why it carries no arrow on the right. The seven types, in order:

  • Product sections - “Product Showcase” (editorial blocks with a photo, a panel and up to two buttons), “Handpicked products” (a hand-picked list shown with your store’s normal product cards) and “Shop the set” (one set with its photo, numbered pieces and a button for the whole set - it needs sets, the Pro plan and up). You can add several of each.
  • Banner sections - 12 layouts: single banners, strips, grids of 2–5 pictures, text cards, text bands and more.
  • Gallery sections - 8 layouts for browsing photos. You can place several galleries on the page.
  • Category sections - at the top is “Category circles”: chosen categories as round photos with their names (see below; you can add several). Under it, every catalogue category can stand as its own block with its products. Only categories not yet on the page are offered (with a search box).
  • Content sections - Blog, Testimonials, Reviews, About, Contact, FAQ, Promises. If a section needs an add-on, its card is locked with a chip. “FAQ” shows your questions as an accordion right on the landing page; the standalone FAQ page and its footer link stay unchanged whether or not you add it here - the two are independent. The Blog section has a Display choice in its editor - Grid (a card grid, one column on a phone) or Horizontal scroll (one swipeable row of posts on every screen, with arrows on desktop). The choice is per device (the Desktop/Mobile toggle at the top), so it can be a grid on desktop and a strip on a phone. New blog sections use Horizontal scroll by default.
  • Text - free text with headings, links and lists: a shop introduction, SEO copy, a delivery explainer. It is added straight from its row and is repeatable - you can have several text sections on the page.
  • Testimonials - the quotes you write in Content › Reviews; the section's view sets the "Section size" (small, regular or large), and the testimonial rows and "Manage the testimonials" open that screen.
  • Reviews - real reviews from customers with confirmed purchases. It lives under “Content sections”, beside Blog and Testimonials. Unlike those it is repeatable - you can place several on one page with different settings.
  • Promises - a strip of up to 5 short promises with an icon (free delivery, returns, secure payment). Also under “Content sections”, next to “Reviews”, and also repeatable (see below).

Sections one by one

Each section type with its fields. Open a section with the pencil in the list or with a click in the preview.

Banners

Each banner has a fixed layout with slots for pictures and text. The editor shows only the fields that layout supports - empty fields simply don’t render. A slot’s link can lead to a category, page, product or custom URL. Asymmetric layouts have a “Mirrored” switch that swaps the sides. With several banners, each is a card that folds, named by its content, for example "Banner 1 · Girls" (its title, else the linked category); the first starts open and the others open with a click.

Section height (in the Display card) controls how tall the banner is. Each step shows its approximate height in pixels ("Tall · ~250 px") and the list runs tallest to shortest, so you don't have to try them one by one.

There are two kinds of step. "Standard (layout ratio)", the taller ones - Tall, Extra tall - and the shorter ones - Medium, Short, Compact, Slim - follow the shape of the layout itself, and that shape is worked out from the section's width. The "Full screen", "Three-quarter screen" and "Half screen" steps are measured against the visitor's screen instead, so even a "Container" width section can fill the whole screen height. That is exactly why the two kinds interleave in the list: on desktop a "Single banner" is taller at Standard (~490 px) than at Half screen (~465 px), and on a phone it is shorter (~250 px against ~375 px). The pixel figure beside each step tells you where it lands. "Screen" here means the browser window, not the monitor: the browser's own bars take their share, so Half screen on a 1080 px monitor is about 465 px rather than 540.

Height is set separately for Desktop and Mobile (the switch at the top), and the same step deliberately gives a different height on each. The reason is in the layouts themselves: the grids keep their columns on a phone, so a "Three banners" tile there is about 125 px wide and Standard makes it only ~160 px tall, while the same tile is ~460 px on desktop. Tall therefore climbs further on a phone than on desktop - so that it means the same thing on both. If you set no step for Mobile, the phone follows your Desktop choice and works it out at phone scale.

The list only offers the steps that layout can carry on that device. A step that would make the section taller than the screen, or shred the tiles into a few pixels, simply isn't offered - which is why "Four banners" has a shorter list on a phone than "Single banner". A step you have already saved stays in the list even if it is one of those, so nothing changes itself.

The step sizes the whole section: on a phone, where the tiles stack, the imagery and the text share the chosen height, so the section stays as tall as the step - and in "Text + picture" long copy is never clipped (the section grows if it must). The exception is "Two/Three cards with text": the heading and text under each picture keep their natural height, so on a phone those sections come out slightly taller than the step. Only "Single banner" and "Strip" also offer Ribbon, a very wide, very short band (roughly 70–120 px on a wide screen), right for an announcement or a slim promo bar. The other layouts deliberately don't offer it: across a grid of 3–4 tiles it would shred every picture into an unrecognisable sliver.

Under each slot's upload button is the recommended size in pixels for that exact slot. It recalculates the moment you change the layout, the height or the section width, because all three change how large the picture renders. On upload the shop keeps your original and generates smaller WebP copies, sending each visitor the smallest one that fits their screen - but it never enlarges, so a file smaller than the recommendation will look soft, and nothing downstream can fix it. If you save a picture from another site, take care: what usually downloads is the small listing thumbnail (around 500 px), while a full-width banner needs over 2400 px.

Image display

Image display (only on "Single banner" and "Strip", once you add a picture) chooses how the image fills the slot. "Show whole image" shows the entire picture at its natural height, with no cropping, so a wide band of text or stats made as a single image stays whole on a phone too. "Crop to fill" crops the picture to a fixed shape (the previous behaviour, right for background photos). "Fit with backdrop" shows the whole picture in a fixed-height band over a blurred copy of itself. "Strip" defaults to showing the whole image, which is why a wide strip is no longer cut off at the sides on a phone, while "Single banner" defaults to cropping. When a whole-image option is chosen the "Section height" field drops away, because the height comes from the picture itself.

Text + picture

In the "Text + picture" layout the two sides are set independently from the "Text panel" card. "Text background" chooses the text side - Light (a bordered panel), Muted, Brand (dark) or Transparent (no panel, so the text sits directly on the page). "Image" chooses the picture - "Fills the frame" (cropped inside a rounded box) or "Cut-out (transparent)" (a transparent-background picture that floats beside the text, with no box). Every combination is now possible, for example text on the page beside a photo in a rounded box. When "Text background" is Light, a "Border" control appears: "Around the text" frames just the text panel (its corners round cleanly), while "Around the whole banner" wraps the picture and text in one border. A rounded border on a light panel used to vanish at the corners - now it follows the rounding.

Mobile image

Every banner picture can have a separate phone variant: switch the editor to Mobile (the Desktop/Mobile toggle at the top) and upload the picture into the same image field - for example a portrait crop, or one rearranged to read well on a narrow screen. Without a mobile variant the phone shows the main picture. The recommended size for the phone slot shows under the upload (for layouts that crop the picture) - and it follows the height you set for Mobile, not the Desktop one. Make the banner taller on the phone only and the figure grows at once: at a screen-relative step the phone slot becomes several times larger than the default, and a smaller file uploaded there will look soft. It is available on every banner layout. In the gallery, the slot layouts upload the mobile variant the same way - via the Desktop/Mobile toggle; the flow layouts (Grid/Strip) don't have this option, because their grid already reflows on a phone.

Background video

Any banner slot (except category cards) can carry a background video - just like the hero. A "Background video (optional)" field appears under the image picker with two tabs: YouTube / Vimeo (paste a link - available on every plan) and Upload file (an MP4, up to 15 MB, on the Business plan and above, hosted by us). It plays muted and looped behind the slot's content, and the slot's image is its poster (shown until the video loads and whenever it isn't playing), so an image is required either way. An uploaded video is not downloaded at all on phones, on Save-Data, or under reduced motion - only the poster image shows there, so mobile visitors aren't charged the data. Move to a lower plan and the uploaded video stops showing, falling back to the image; a YouTube/Vimeo link stays, because it's available on every plan. Banners on a category's page have the same field, with the same rules (see [This category's page](#this-categorys-page-business)).

Category cards

When you link a slot to a category, it can render as a category card - image, title and product count pulled automatically from the category. Every field defaults to the category's value and is individually overridable: leave a field empty and the category's current value is used (so you rename the category once and every card updates); fill it and your value wins. The image, with no override, uses the category's cover, or its first product's image when there is none (just like the HUB tiles).

  • Title / Subtitle / Product count - the title defaults to the category name; the subtitle is empty; the product count is shown (you can hide it). The count is as many products as the category's page lists: for a parent that includes the products in its subcategories, following its "Products shown" setting.
  • Card layout - choose how the card looks from 5 layouts: "Standard" (today's look), "Label" (a clean uppercase name with a chevron; on a narrow card, such as four in a row on a phone, the name shrinks to fit and the count is left out), "Spotlight" (a large centred title over a dim; on a narrow card, such as two in a row on a phone, the title shrinks to fit), "Count chip" (the count as a rounded badge) and "Caption bar" (a solid theme-colour bar behind the text; background: light, muted or brand/dark). The layout is a *skin* over the shared settings: position, darken and tone still apply to each. A new category link starts on "Caption bar" (brand).
  • Text position (Standard only) - on the "Two/Three cards with text" layouts you can place the text below the image (like a HUB tile) or over it; on the other layouts the text sits over the image (with the same position / darken / tone controls as an overlay).
  • The "Show as a category card" switch is on by default for a new category link. Turn it off and the slot goes back to a plain tile with your own image and text - so an existing category-linked banner stays unchanged.

Section title

The "Section title" card (at the top of the banner editor) adds an optional heading above the banners - for example "Street fashion for every day" over two category tiles. It is written per language (the language buttons at the top); an empty field means no title, so existing banners don't change. Once there is a title, "Alignment" appears: Center (the default) or Left. The title sits within the banner's own width.

Section background

The "Section background" card (before "Display") puts a photo behind the whole section, edge to edge across the screen, while the banners inside keep their own "Section width". The photo is per device, like slot pictures: upload it in Desktop mode, and for phones you can upload a separate (portrait) one in Mobile mode - without it the phone shows the desktop photo. Once there is a photo, three controls appear:

  • Text tone - Dark (over a light photo) or Light (over a dark photo). It applies to the text that sits straight on the background: the section title, a transparent "Text band" and the text under card pictures. Panels and buttons with their own fill keep their colours.
  • Photo position - Top, Centre (the default) or Bottom: which part of the photo stays on screen when the section crops it. The photo always covers the whole section, so a wide section over a tall (portrait) photo shows only a strip of it - Top keeps the faces in portrait photos. The choice applies on desktop and on phones (and to a separate phone photo).
  • Veil over the photo (on by default) - a see-through layer so the text reads: light behind dark text, in your brand colour behind light text.

On a "Text band" over a section photo, the "Background" choice also offers Transparent - the text sits straight on the photo and the button turns into an outline. That is how you build a story banner for a collection. Without a section photo the choice is as before. Remove the photo and the section looks exactly as it did. Available on every plan.

A background behind products. Category blocks and "Handpicked products" have the same "Section background" card - between the block's own settings and "Display". The photo sits behind the heading and the products, edge to edge, while the products keep their "Section width". The product cards sit on panels in your theme colours (white on a light theme) so they read over the photo; a card that already sits on a panel (such as "Standard") is unchanged. "Text tone" applies to the block's heading, its "See all" link and the "Show more" button - the text inside the cards keeps your theme colours.

The gallery is a repeatable section for browsing photos. Unlike a banner - a navigation tile with a link - a gallery only shows pictures (with captions and click-to-enlarge, no links). You can add several galleries to the page - up to 24 images total per gallery.

Layouts (8). Two are “flow” - Grid and Strip - and show a flat list of pictures all at once. The other six - Spotlight, Two, Three, Four, Feature + two, Mosaic 1+4 - have slots (1–5 per slide) and reuse the same geometry as the banners of the same name. Switching layout is a pure view change: the pictures stay, and missing slots become empty wells to fill.

Slides and slots. In the slot layouts the content is slides - each slide fills the layout’s slots. Slots are optional: an empty slot doesn’t render on the site, and in the editor it is an “add image” well. The wells sit in the shape of the layout itself (e.g. “Feature + two” = one big well on the left, two smaller ones stacked on the right). Each slot has an optional caption and alt text (tucked behind “Captions & alt text”): the caption shows over the photo, while the alt text describes it for search engines and screen readers. Flow layouts (Grid/Strip) use a single flat list of pictures instead of slides.

Rotation (slot layouts with at least 2 slides only):

  • Static - shows the first slide only.
  • Carousel - pages between slides (swipe, arrows, dots and a counter; autoplay can be turned off).
  • Cycle images - each slot crossfades to the picture from the next slide, on slightly staggered intervals (a “Fade” or “Pop” effect).

Flow layouts don’t rotate. For visitors with the system “reduced motion” setting on, rotation freezes.

Height (in the Display card) uses the same scale as banners - Extra tall, Tall, Standard, Medium, Short, Compact, Slim - with the approximate height in pixels beside each step, set separately for Desktop and Mobile. A gallery has no screen-relative steps: it is for browsing pictures, not a hero statement.

The list depends on the layout. "Feature + two" and "Mosaic 1+4" are tall by nature - on a wide screen "Feature + two" is about 960 px at Standard, and on a phone "Mosaic 1+4" is past the screen at Standard already - so the taller steps simply aren't offered for them. "Spotlight", "Strip" and "Grid" are short and get the full set. Standard is always present, even where the layout itself is taller than the screen: that is its natural shape, not a step you chose.

Enlarge. Clicking a picture opens it full-screen with arrow, keyboard and swipe navigation. An empty gallery hides the section.

Category blocks

Each block shows one category. Every category you add here shows on the site exactly as in the preview - including a copy made with Duplicate. A category with no products is not shown on the site; in the editor it stays as a grey container. Its settings are per device - the Desktop/Mobile toggle at the top switches which device you are editing, and each setting applies only to that device, so a block can look different on a phone and on a computer. The Display field picks the arrangement:

  • Automatic - follows the category's own list arrangement (grid or strip), set on the category page.
  • Grid - a fixed grid. You set rows × columns for this device; the number of products shown is their product (e.g. 2 × 4 on desktop = 8 products, while 2 × 2 on a phone shows the first 4). Leave a field "inherited" to follow the other device. The grid applies even if the category is set to a strip.
  • Horizontal scroll - a swipeable strip. You set Rows in the strip - one or two rows explicitly, or "Category default", which follows the rows set on the category's own page - and Cards per row - how many cards show at once; "Store default" follows the "Theme" › "Product shelves" setting.

The products themselves and their order are managed on the category page. The change shows in the preview straight away (the stage is the width of the device you are editing).

Block header has two switches: Title (the category name above the products) and "See all" link (the link on the right to the category's own page). Turn the title off when the banner directly above the block already names the category - otherwise the name reads twice. Turn both off and the header row disappears entirely, so the block starts straight at the products.

The "Section background" card puts a photo behind the block, and the product cards then sit on panels - see "A background behind products" under Banners.

Category circles

The section shows chosen categories as round photos with their names - each circle opens its category page. It suits “Shop by category” or “Shop by age” right under the hero. The section is repeatable - you can have several rows with different headings.

  • Categories - search by name and add up to 16. Drag the rows to reorder them: the list order is the order on the site. Only categories your shop shows are offered. If you later hide a category (or its parent), it gets a “Hidden” tag in the list and its circle disappears from the site; a deleted category simply drops out.
  • Heading (optional, per language) - shown above the circles in the same style as the product blocks' headings. Leave it empty and the section starts straight at the circles.
  • “Show the product count” (off by default) - the number of products under each name, e.g. “12 products”: as many as the category's page lists. A parent whose products sit in its subcategories counts those too, following the category's "Products shown" setting. An empty category shows no count.
  • The photo in each circle is the category's cover image - set it in the category editor. Without one, the photo of its first product is used, and without that, a circle in your theme colours. Give parent categories a cover in particular.

On a computer up to 8 circles sit in one centred row and fill its width (up to 128 px each). Pick more than 8 and the row scrolls sideways with arrows and a faded edge, like the product strips. On a phone the circles are smaller and swipe in one row - about three and a half show at once. The name under a circle wraps only between words, never in the middle of one. The coloured rings around the photos alternate between your theme colours (brand, accent and second accent), so they always follow your shop's look.

An empty section is not shown on the site; in the editor it stays as a grey container until you add categories.

Product Showcase

The showcase presents a small, hand-picked set of products as editorial blocks: a large photo beside a themed panel (light, dark or the photo itself under a scrim) with a name, price, a short pitch and up to two buttons. It suits “ready-made looks”, sets and highlights where a plain product card is not enough. The section is repeatable.

  • Layout - pick one of four arrangements, each with its own phone rendering: Rows (photo left + panel), Bands (a full-bleed photo with a floating panel), Tiles (cards in a grid or a horizontal row - see “Display”) and Spotlight (one big block + compact rows).
  • Display (Tiles only) - Grid lays the cards out in a grid (as before); Horizontal scroll shows them as one scrolling row on every screen.
  • Cards per row (Horizontal scroll only) - how many cards show at once, for the device you are editing; "Store default" follows the store-wide "Theme" › "Product shelves" setting - the same one the category shelves use.
  • Height & fit - “Section height” ("Standard (layout ratio)" / Medium / Short / Compact / Slim) sets how tall the blocks are, and “Fitting” chooses how the photo shows: “Fill the frame” (crops the edges) or “Show the whole photo” (uncropped, on a neutral surface - right for products shot on white). On phones the Rows blocks stack the photo full-width on top (instead of a narrow cropped column), so the product reads clearly. In Spotlight the panel sits beside the photo and never covers it: the big block is photo-beside-panel (the photo moves on top on phones), while the compact rows show a small photo beside the text - like a price list. The block shows up to 3 lines of the description (so “Height” takes effect and a block can’t balloon; the full text is on the product page).
  • Products - press “Add product” to open the search; every result shows the product’s photo, and the list closes after each pick (open it again for the next). Up to 8 blocks; unlike “Handpicked products”, the same product can be added more than once (say two colourways of one set). Drag to reorder.
  • Per block - every field defaults to the product’s value; fill one to override just that (name, eyebrow, description, price, image). Each field has an inline switch that shows or hides it. “Mirror sides” swaps the image and panel sides for that block (on “Bands” it only moves the panel; applies to every layout). The panel background is dark, light or a photo. When it is a photo, on the Business plan and above you can also upload a short background video over it (an MP4, up to 15 MB) - it plays muted and looped, with the photo as its poster; phones show just the photo.
  • Buttons - up to two per block. Each can be “View product”, “Add to cart” (with a variant picker) or a “Custom link”. If a variant sells out, the “Add” button falls back to “View product”.

An empty section is not shown on your site; in the editor it stays as a grey placeholder.

Handpicked products

This section shows hand-picked products in the exact order you choose - with the very same product cards as the rest of your store (badges, promo prices, the favourites heart, the buy button). It is a curated shelf: right for "Best sellers", "New in" or a seasonal edit. The section is repeatable - you can run several with different headings.

  • Products - search by name and add up to 24 products. Drag the rows to reorder: the list order is the storefront order. A deleted or archived product simply stops showing.
  • Heading (optional, per language) - renders above the cards. Leave it empty and the section starts straight at the products.
  • "View all" link (optional, off by default) - shows to the right of the heading and can lead to a category, page, product or custom URL.
  • Card style - pick a built-in card look (Standard, Editorial, Showcase, Portrait, Gallery) or one of your saved card layouts. A store-wide card override still wins.
  • Display (per device - the Desktop/Mobile toggle at the top) - Grid (rows × columns; on a phone you can set fewer columns, and with fewer rows, fewer products too) or Horizontal scroll - the products render as a single swipeable row. A new block defaults to a grid on desktop and a strip on the phone.
  • Rows in the strip and Cards per row (horizontal scroll only) - how many rows the strip has (one or two) and how many cards show at once, for the device you are editing; "Store default" follows the store-wide setting in "Theme" › "Product shelves".
  • Section background (optional) - a photo behind the whole section; the cards sit on panels so they read. See "A background behind products" under Banners.

An empty section doesn't render on the site; in the editor it stands as a grey well until you add products.

Shop the set

The section shows one set the way a shopper would wear or use it: the set's photo with the pieces' numbers on it, each piece with its own price, its own size or colour choice and an “Add” button, and then the price of the whole set, the pieces' separate total (struck through), the saving and the “Add the set” button. The set goes into the cart as one line at the set price - the same line the set's own page adds. The section is repeatable: two sets are two sections.

  • Set - pick from the shop's sets (with search). Under the choice you see the number of pieces, the price and whether the set is active, and an “Open the set” link. Everything else - pieces, prices, photos, points - comes from the set itself, so a change there updates the section.
  • Photo - which photo of the set shows; each one says how many points it carries. Points are placed in Products › Sets › Images. The photo shows only its own points, while the numbers in the list always cover every piece. A set without points shows without numbers.
  • Texts (per language) - Small line above (empty = “Shop the set”, which you can rename in Translations), Heading (empty = the set's name) and Description (empty = the set's description).
  • Layout - “Mirrored” puts the photo on the right on a computer. On a phone the photo is always on top, with the pieces under the text.

A paused or deleted set does not show on the site; the editor says so with a note in the preview and a warning in the panel. A set with a catalogue piece (Brand → Model) or a personalised product cannot be bought piece by piece, so it cannot be picked and a section showing it is not shown - the set's own page sells it. A new section with no set picked stands in the editor as a grey well with a “Choose a set” note.

Text

The “Text” section puts free text on the landing page: headings (H2 and H3), bold and italic, links and bullet or numbered lists. It suits a shop introduction, SEO copy or a delivery explainer - anywhere a picture won't do the job. The section is repeatable and has no heading of its own beyond what you write.

  • The text is per language - the language tabs at the top of the editor switch which language you are writing. Leave one empty and visitors see the text in your main language instead of an empty section.
  • The editor is deliberately limited - headings, bold, italic, links and lists only. No images, tables, colours or alignment: fonts and colours come from "Theme", and imagery from banners and galleries, so the page stays in one style.
  • “Collapse on phone” (on by default) - on a phone long text is shortened with a fade and a “Show more” button; on desktop it always shows in full. The whole text is always in the page, so search engines read all of it. Turn the switch off and the text stays expanded on phones too.

An empty section doesn't render on the site; in the editor it stands as a grey well until you write something.

Reviews

The “Reviews” section puts real customer reviews on your landing page - the same reviews that appear on your product pages. Every star comes from a rating a customer actually gave.

This is not the same as “Testimonials”. Testimonials are quotes *you* write - a kind word a customer sent you by email or in person. They carry no rating and show no stars. “Reviews” shows only reviews left by a customer after a confirmed order, which you then approved. Mixing the two is unlawful: a star rating nobody gave counts as a fake review under consumer-protection law.

  • Automatic (the default) - the section fills itself with the newest reviews that qualify. You configure nothing: drop it in and it works.
  • Minimum rating - 4 stars and up by default. You can lower it to “Any rating”.
  • Skip very short reviews - on by default. A one-word review persuades nobody in a row of cards. Turn it off to show every qualifying review.
  • Hand-picked - you choose exactly which reviews show, and in what order. The search finds by review text, customer name or product. Only approved reviews can be chosen - one still awaiting moderation, or rejected, is never offered.
  • How many to show - between 3 and 24.
  • Heading - per language. Leave it empty and the standard heading is used.

Above the cards sits your shop-wide rating (for example “4.6 · 115 reviews”) and one line stating that you publish reviews from confirmed purchases only. The count links to your Reviews page, which lists every published review with no rating filter, along with the star breakdown. That page is a legal requirement: if your landing page shows only the better reviews, the complete list has to be one click away.

If you don't yet have 3 qualifying reviews the section doesn't render on your site - a single card in a row built for several looks wrong. The section's row tells you how many more are needed rather than letting the section quietly disappear. Use “Testimonials” in the meantime.

Promises

The “Promises” section is a strip of up to 5 short promises to your customers - for example “Free delivery - on orders over €80” or “14-day returns - no questions asked”. Each promise is an icon, a title and an optional second line. On a computer the cards sit in one row, centred; on a phone they are a swipe row - the shopper sees one card and part of the next, and an arrow at the side (as on the category circles) shows there is more and scrolls the row. The colours come from your theme: the icon in the accent colour, the text in the text colour.

  • Copy from trust badges - an empty section offers to copy your trust badges (the icons under the buy buttons on the product page, "Product page" › "Trust badges" in this editor): the icon and the text in every language. It copies them once - after that the two lists are edited separately and a change in one does not touch the other. If you have no trust badges, the button is not there and you add the promises yourself.
  • Icon - tap the icon square and pick from the same list as the trust badges (search by English name).
  • Title and second line - for each language separately (the language buttons at the top of the editor). An empty field in another language shows the text from the default language. An empty second line simply does not show.
  • Order - drag a row; X deletes it. At 5 promises the “Add a promise” button disappears.
  • A promise with no title in any language does not show in your shop - the editor marks it in red. A section with no promises at all does not show either (in the editor it stays as a hatched band).

Trust badges and promises are two separate lists: trust badges sit on every product page, one line each; promises sit wherever you place them on the landing page, with a second line.

Animation and width

Every section has an “Entrance animation” - an effect on scroll (Fade in, Rise, Cascade and so on) with a fitting default per layout. While you edit, sections simply show, with no animation: it plays on your store, and on the home page in the preview without the editing tools (the eye icon). “Section width” controls how wide the section renders: Page default, Container, Wide, Full width (small inset) or Edge to edge. “Full width” spans the whole screen but keeps a thin side inset; “Edge to edge” has no inset at all - imagery touches the edge of the screen. With “Edge to edge” the corners that land on the screen’s left and right edges are squared off automatically (your theme's corner rounding stays on the inner corners only), because a rounded corner welded to the browser edge reads as a glitch. The overall “Content width” lives in the “Page” card at the bottom of the home page list and applies to every section with “Page default” width.

Width is per device too: the same section can run edge to edge on a phone and sit in a container on desktop - usually exactly what you want from a banner. Until you change the width for a specific device the field reads “Inherited from…” and the section looks the way it always did.

Several of a section's settings - rounding, spacing, height and visibility - are per device, like the text size: you edit the value for the device selected at the top (Desktop/Mobile). A field you haven't touched on the other device shows "Inferred from…" and follows the shared value; a changed one carries "Overriding…" and a "Reset" button. The "Show on desktop" / "Show on mobile" switch hides the section on one device only - say a desktop-only banner; hide it on both and the editor warns that the section is hidden everywhere.

“Corner rounding” overrides the rounding for this section alone - Inherited (follow the theme), None (square corners), Small, Medium or Large. Handy when one banner, image or the product cards look better with straight corners even though the theme is rounded. “Spacing” removes the gap above or below the section (the “No top spacing” / “No bottom spacing” toggles) so it sits flush against its neighbour - right when two sections should read as one block.

“Text size” (on banners, category blocks, “Handpicked products”, “Category circles”, “Text” and “Promises”) nudges the section’s heading and text down or up for the device you are editing - from “Extra small” to “Extra large”, with “Default” being the standard size. It is per device: shrink the type on the phone without shrinking it on desktop. It scales on top of the responsive sizes, so the text stays proportional on every screen - handy when a long banner heading wraps onto several lines on a narrow phone.

The hero is the large section at the top of your home page - one or more images or videos. With one visible slide it stands still; with two or more they rotate as a carousel (visitors move between them with the arrows and the slide indicator). It is the pinned first row of the home page: click it in the list, or click the hero in the preview.

On the preview

  • While the hero is open, its toolbar has Edit and Hide.
  • While a slide is open, the carousel holds still on that slide - it does not rotate away while you work on it. Its arrows and dots open the neighbouring slide in the panel instead. A slide that is hidden from the carousel shows on the preview while you edit it, so you can finish it before you switch it on.
  • With no visible slides yet, an "Add a hero" band stands where the hero goes: click it and your first hidden slide opens, or a new one if you have none (hidden until you switch it on). So repeated clicks never pile up empty hidden slides.
  • Slide indicator - how the carousel shows which slide is on screen: Dots (the default; dots in a translucent pill at the bottom centre), Lines (thin white lines at the bottom right, the current one longer - 16 px from the corner on a phone, 40 px on a computer) or None (the arrows and swipe still change slides).
  • Desktop frame and Mobile frame - the shape (aspect ratio) of the hero band on each device. The band is always full width, so you can run a slim banner on a computer over a taller phone hero, or the reverse.
  • Auto - matches your image (recommended; the default) - the frame takes the exact shape of the image, never cropped. In a carousel the shape comes from the first visible slide and the others fit into it (a different shape is cropped - the size recommendation under the upload warns you). Sanity bounds apply: desktop between 16:9 and 4:1, phone between 4:5 and 2:1; outside them the frame stops at the nearest bound and the image is cropped slightly.
  • Fixed frames - desktop 16:9 - standard, 21:9 - cinematic, 3:1 - slim banner; phone 4:5 - portrait, 1:1 - square, 16:9 - slim. The image fills the frame and is cropped when the shapes differ; the recommendation under the upload states the exact pixels for the chosen frame.
  • Every frame is the same shape on every screen, so the preview matches what visitors see: the same crop, the same text and button positions. For now the frames change the Classic Stacked layout; the other layouts keep their own hero design.
  • Slides - in the order they rotate; the first visible one leads. Open one with a click, hide it from the carousel with the eye, remove it with the bin, reorder with the arrows (on a computer you can also drag). "New slide" adds a slide that starts hidden from the carousel, so a half-made slide never goes live with your next Publish. It opens at once and shows on the preview while you edit it; when it is ready, switch it on with the eye in the slide list (on a phone, also at the top of the slide itself) and publish.
  • Show the hero - off, the hero is not shown in your store on any layout, and the home page opens with its sections. The slides are kept: switch it back on and they return. The pinned row is marked "hidden", and the preview shows a "The hero is hidden" band with Show.

Like every change here, these go into the draft; shoppers see them after you publish.

A slide

  • Title - an internal name, so you can tell slides apart; it is not shown on your site.
  • Background - an image or a video (see below). Upload the image at full size: the shop generates smaller WebP copies and sends each visitor the one that fits their screen, so a large hero never slows down phones.
  • A separate image for phones - an image that looks right on a computer can crop badly on a phone, so a slide can have its own mobile image, shown below 768 px. The upload follows the Desktop / Mobile switch at the top. It is optional: without one the desktop image shows on phones too (it reads Inferred from Desktop); with only a mobile image, it shows on both. Video slides keep the desktop image as their poster.
  • Linking the slide - make the whole slide clickable: Links to category opens that category's page; Custom link is an anchor (for example #contact) or a full address, ignored when a category is chosen. When the slide has buttons, they win and the whole-slide link is off (no links inside links); on a video slide it is off too - add a button for a call to action.

Text and buttons on the slide

"Text and buttons" adds freely placed text and buttons over the slide - the hero's only source of text (headings, subheadings, calls to action), with separate text per language. They show only on the Classic Stacked layout; on the others a slide is the image or video alone. (Your site's layout is set by the ZweiHost team - see [Store: theme](#store-theme).)

  • Add text / Add button create an element; each element's row opens its style panel. You hide one element with "Show on desktop" / "Show on mobile", or delete it.
  • Dark veil behind elements puts a semi-transparent dark filter between the image and the text - more reliable than lightening each caption when a photo is bright or busy.
  • Drag it on the preview. With the slide open, click an element on the preview to select it: a blue frame with grips appears. Drag the element's body to move it, and a grip to resize it; only the grips resize. A button's corners and edges grow its padding, so the box grows around the label without changing the text size (shrink it below the label and the font shrinks so it still fills); switch on "Scale text with the box" to grow the font instead. A text's corners scale the font and its side edges set the wrap width. Letters never distort. It works with a mouse and with touch, and desktop and mobile are placed separately - drag in the device chosen at the top.

The style panel has three parts:

  • Placement (for the active device) - "Show on desktop" / "Show on mobile", the Anchor (which point the element positions from) and X %, Y %, Width % for exact values; dragging and the numbers stay in sync.
  • Text style - colour, size, font, weight, alignment and line height. "Main heading (page H1)" marks the element as the page's main heading (SEO). "Soft shadow" adds a light halo for legibility over images. "Background chip" puts a coloured backing behind the text, with colour, opacity, X/Y padding and corner radius.
  • Button style - Solid, Outline or Text, and "Scale text with the box". For a transparent button with a border, choose "Outline" - or set Background opacity to 0 and give the border a colour and width.

Placement per language. Translations are rarely the same length, so placement and style are kept per device and language (desktop × Bulgarian, desktop × English, mobile × Bulgarian, mobile × English). The Desktop / Mobile and language switches at the top decide both which translation you write and which placement you adjust; a move or resize changes that language alone. A language you have not adjusted starts from your primary language's placement.

No translation, no element

An element with no text for a language is not shown on your site in that language - visitors see nothing in its place rather than another language's copy. In the panel such an element is faded and tagged Not translated.

With two or more visible slides the carousel paints its own arrows and indicator over the hero - check on the preview that no text or button sits under them.

Video slides

Choose Background → Video to make the slide a video. Paste a YouTube or Vimeo link (any plan) or upload your own MP4 (the Business plan and above, up to 15 MB, hosted by us). Either way it plays as an ambient background - muted and looped, with your slide text over it. Vimeo plays with no controls at all; YouTube shows a small play button in the centre, which cannot be removed.

The poster image shows before the video loads, on devices that do not autoplay and when a visitor prefers reduced motion - always set one. In a carousel only the active slide plays. On phones, on Save-Data and under reduced motion the video is not downloaded at all - only the poster shows. Move to a lower plan and an uploaded video stops showing; the slide falls back to its poster. Pick a calm, loop-friendly clip, and for a call to action add a button rather than a whole-slide link.

This product

On a product page the "This product" scope (the first in the scope menu) shows the product itself in a "Live" card. What you change there is saved to the store with "Save live" - it is not part of the draft and does not wait for "Publish". The preview goes to the product's title and price and briefly highlights them.

  • Visible in the store - switch it off to hide the product from shoppers (Hidden): they see it nowhere and its address does not open. In the editor a hidden product still shows, captioned "Hidden product - only you see it, in the editor" under the preview.
  • Images - opens the product's photos right in the panel: add, remove and order them; the first is its card photo. With no photo the row says "Upload at least one photo".
  • Title and Delivery line - in the language picked in "Content language". An empty delivery line means the store's line.
  • Price and Old price.
  • Stock - what is in stock and what is sold out. It is changed in the product's full editor.
  • Main category - the product is added to it too, if it is not there yet.
  • Labels - the store's labels. The pressed ones show on the product, in their own colours.

"Full editor" opens the product in Products in a new tab. If the card has unsaved changes and you head to another page or leave, the editor asks whether to save them. The card is only for members with access to Products - others see a short note in its place, and a hidden product is still marked in the preview. "What does the page look like?" at the bottom leads to "Product page": the gallery, the buttons and the sections are shared by every product.

New product

In "Go to…" pick "+ New product". Enter a title, a price and a category and choose "Hidden" (picked at first - only you see it, in the editor, until you show it) or "Visible now". "Create and open" creates the product in the store at once (it is not part of the draft) and opens the preview on it in "This product", where you add the photos and the rest. Hidden products are in "Go to…" too - marked "Hidden". Creating one needs access to Products › Categories, as the list's "New product" button does.

From the Products screen

"Edit in the store" at the top of a product's editor opens the site editor on that product, in "This product". The same button in the Products list opens it on "Product page". Only a member with the "Site editor" permission sees it.

Product page

On a product's page the "Product page" scope (the scope menu at the top of the panel) shows the template every product page follows - a change here changes the pages of all your products at once. It also opens from Content › Pages & sections › "Product page": the editor shows your newest product shoppers can see (with none, the "Products" page). The panel lists the parts of the page; each opens in its own view, and the preview goes to the part you are editing and briefly highlights it. Changes go into the draft like everything else and reach shoppers with "Publish".

  • Gallery on desktop - how the photos show on a computer: Slider (the default, exactly as before) - one photo at a time with thumbnails below; or Mosaic - every photo at once: the first full width in a square, then the rest two side by side, a thin line apart. Beside the mosaic the column with the name, price and order button stays on screen while the shopper scrolls down the photos (a taller column stops by its bottom edge, so the button never hides). In the mosaic the photos fill their cells, so their edges may be trimmed - a click opens each one whole. On a phone the gallery is always the slider.
  • Product image size - how much of the page the gallery takes on a computer: Small (~40% of the width), Medium (the default - half, exactly as before) or Large (~60%). Because the photo keeps its own proportions, wider is also taller: for 1080×1350 photos the gallery becomes roughly 544, 680 and 816 pixels tall. On a phone the setting does nothing - the gallery is already full width there. You never need to upload separate photos for phone and computer. The setting applies to bundle pages as well - they use the same gallery.
  • Zoom on hover - how far the photo magnifies when the shopper points at it with the mouse on a computer (the zoom follows the cursor, so they can look at a detail): None - the photo does not magnify, and a click still opens it whole; Small - a gentle zoom (1.4 times); or Large (the default, exactly as before - 1.8 times). Phones and tablets have no hover, so the photo never magnifies there - a tap opens it whole. It applies to bundle pages as well.
  • Change photos automatically - on (the default, exactly as before) the gallery moves to the next photo every 5 seconds. When the shopper changes the photo themselves - with a swipe, the arrows or a thumbnail - the count starts again, so the photo they picked stays in front of them for the full 5 seconds. While the mouse is over the photo, or the photo is open full screen, the gallery stops. Switch it off and the photos change only when the shopper changes them. It applies to bundle pages as well.

Variant picker

  • Variant selector layout - how the size/variant picker looks: chips, grid, dropdown, table, or list. With chips, values that do not fit on one row of the shopper's screen switch themselves to a dropdown - the same picker the catalogue selector uses, instead of a wall of chips. The decision follows the real screen width: 37 phone models are a dropdown everywhere, while 7 ring sizes can be chips on a computer and a dropdown on a phone. Past 8 values the dropdown also has a search box. Grid and list stay exactly as you chose them, and colours always stay swatches. In the grid every cell is as wide as the longest value, so a long size like 98 - 104 см / 3 - 4 год stays on one line: long values simply mean fewer cells per row.

The variants themselves (sizes, prices, stock) are product data and are edited in the product.

Description and sections

  • Description layout - how the description sections arrange under the product: Accordion, Tabs, Stacked, Two columns or Side rail.
  • Description sections - the sections in the order they show; reorder them with the ↑ ↓ arrows (on a computer you can also drag them). Each row shows its kind (Shared, Per product, Per category, Per bundle) or Hidden. "Specifications" (the product's attributes) always show second and are edited in Products › Attributes. "New section" adds one and opens it.
  • One section - the pencil opens it: Content type, an optional Icon, the title in the language picked in "Content language", and for a shared one its content in a rich-text editor (with Insert field). Also opens from the picker of (e.g. Size) shows a link to the section beside that picker on the product page. Show on product pages hides it without deleting it. Delete section asks first; content products and categories wrote for it stops showing with it. Bring the section back with "Restore" in "Publication history" and that content shows again. Change a shared section's kind and change it back, and its text stays. Sections on bundle pages show in the preview too, before you publish.
  • A section with no title in any language is not published.

Order button

  • Add to cart - how a shopper adds the product: With quantity (the default for every shop) - above the Add to cart button sits the Quantity field with − and +, where the number can also be typed; the button adds that many pieces and the field goes back to 1. If the typed number is more than is in stock, the field lowers it and says why, for example "Only 7 available"; one cart line holds up to 100 pieces (9,999 with quantity pricing). It does not show on a sold-out product, on a product with no price, or while the shopper edits the design of a personalised product already in the cart - the cart changes that quantity. Fast order and the phone bar order the same quantity. Button only - the look from before: just the button, adding 1 piece. A product with quantity pricing shows the field even with Button only - its rows depend on the quantity. Product cards and the home page's product showcase keep adding 1 piece.

The "Add to cart" bar on phones. Once a shopper scrolls past the order button, a bar appears at the foot of the screen with the product's photo, name and price and an Add to cart button - it adds exactly what the main button adds, in the same quantity - with more than one piece in the Quantity field the button reads, for example, Add 3. If no size or variant is chosen yet, the bar takes the shopper back to the picker; if the chosen variant is sold out, to the "Notify me" form. The bar is on for every shop and has no setting; it does not show on a computer, for a fully sold-out product, or for personalised and by-catalogue products. The call and chat buttons and the cookie banner rise above it, and the page gains room at the bottom, so the bar covers nothing.

Trust badges

Up to 6 trust badges under the order buttons (e.g. "Delivery 1-2 days", "Inspect & test", "14-day returns", "Secure payment"). Each is a row: an icon (the same picker as sections), its text in the language picked in "Content language", the ↑ ↓ arrows that move it (on a computer you can also drag it), an eye that shows or hides it, and a bin. "Add badge" adds a new one. If you have none yet, "Use the recommended set" fills a starter set from your enabled couriers and return policy - edit from there. "Inspect & test" is in it only when a courier really offers it - the At the customer's door card on its tab (Econt for now) is set to Review and test. A badge without text is not published, and with no badge shown the strip does not show at all. When you open it, the preview goes to the strip and briefly highlights it.

Sold and views

  • Show units sold - turn it on and an "X sold" count appears under the product title as social proof. It counts real sales (test and cancelled orders excluded). It stays hidden until the product reaches the minimum you set in the box under the toggle (5 by default), so very low numbers ("2 sold") never show. Large numbers are abbreviated (e.g. "1.2k"). The preview shows it only for real sales.
  • Show view count - turn it on and an "X views" count appears under the title. Views are counted always (anonymously, once per browser visit, no cookies) - this toggle only controls whether shoppers see the number, so the moment you switch it on it is already real. It is also hidden until the minimum you set under the toggle (10 by default) is reached.

Connected products

  • Connected products layout - how the linked "other variants" cards look in the info column beside the photo: Vertical cards (the default) - image on top with the name beneath, several per row (how many depends on the size setting below); or Horizontal cards - a small image beside the name, one per row.
  • Connected product card size - how big those cards are, independent of their layout: Small (the default) - compact thumbnails, three per row, so they never compete with the product itself; Medium; or Large - the older, chunkier look at two per row.

Which products are connected is set on each product - that is live data.

Delivery line

  • Delivery line - the sentence under the price of every product that says when you will send the order, one per shop language (you write in the language picked in "Content language"). An empty field shows the automatic sentence naming your first courier, e.g. "In stock - ships in 1-2 business days with Econt", which stays hidden until you switch a courier on. Write your own, e.g. "Made to order - ships within 9-15 working days.". Optionally use {days} (the "1-2 business days" window) and {courier} (your first courier's name); a sentence without {courier} shows even before you have a courier switched on. It is the same text as the products.delivery.line row in Online store › Translations. "Publish" changes only the languages you edited here; a line in another language changed in Translations meanwhile stays as it is. "Restore" on such a publication puts the line back as it was before it in every language - a line changed later in Translations included. A product with a different lead time gets its own line on its editor's Basics tab, and a sold-out product always shows the automatic sold-out line.

Page width

  • Page width - how wide the product page runs, with the same choices as the home page's Section width: Container (the default, exactly as before), Wide, Full width (small inset) and Edge to edge. With the two full widths the photos reach the screen edge - 8px from it, or right on it - while the text (the breadcrumb, the column with the price, the sections and the product strips) keeps its margin. On a phone the choices differ by the photo's margin. On a personalisable product the design area stays inside the margin.

Below the parts sit links to screens that shape the product page too but save at once: Fast order (Products › Fast order), Store campaign (the countdown and discount, in Products › Categories) and Low stock (below how many pieces "Only 3 left" shows, in Products › Inventory). Before taking you there, the editor saves what is waiting.

Store: theme

The first group in the "Store" scope, "Look", is your site's theme: "Colours", "Fonts", "Style and buttons", "Product shelves" and "Loading animation". Each row opens its own view and says what is chosen (e.g. "12 colours · palette «Noir»"). The "Draft" dot sits on the row whose settings you changed. When you publish, the five rows are one area, "Theme". The old address of the Appearance screen opens the editor right here, on the colours.

The theme applies to every page. For "Product shelves" the preview goes to the page's first shelf (or opens the home page if this page has none) and briefly highlights it, and for "Loading animation" it plays the animation.

Colours

  • Colour palettes - 18 ready-made palettes, each showing its three main colours and its name. A click loads the whole palette; a check sits on the palette that matches your colours.
  • Custom palette - the 12 colours one by one: the main colour and its hover shade, the accents, the background, the text and the borders, each with a colour and a code (e.g. #3b82f6). While you type a code that is not a colour yet, it is not applied and the line under the field says why; when you leave the field, the last valid colour comes back.
  • Saved palettes - "Save current palette" stores the current 12 colours under a name (e.g. "Standard" and "Black Friday") so you can switch the whole scheme in one click. Only the colours are saved. The palettes themselves save at once, outside the draft; "Apply" only loads the colours into the draft, and they go live when you publish. "Active" is the palette that matches the published colours, "Loaded" the one in the draft. Each saved palette can be renamed or deleted.
  • "Reset to the template default" (at the bottom) brings the colours, fonts and style back to your layout's standard ones. It asks first and writes into the draft: preview it, then publish or discard it like any change.

Fonts

  • Ready-made pairings - a heading font and a body font in one click. The nine pairings are tiles: each shows a Cyrillic sample and the names of its two fonts (e.g. "Playfair + Inter"), and the pairing that matches your current fonts is marked. Hover a tile for its description. There are six ready-made fonts, all with Cyrillic: Inter, Montserrat, Nunito, Playfair Display, Oswald and Jost. Visitors only download the fonts your site actually uses.
  • Choose fonts individually - the Heading font and the Body font independently.
  • Upload your own font - up to 10 of your own files (.woff2, .ttf or .otf, up to 2 MB), after confirming you have the right to use the font. Every uploaded font carries a Cyrillic / No Cyrillic pill and buttons that assign it to headings or body text. Uploads and deletes save at once; choosing a font is in the draft. A font the site or the draft uses cannot be deleted - choose another one first.

Style and buttons

  • Ready-made styles set the corner rounding, border thickness, button shape and shadow at once; you can then adjust each.
  • "View all" button - how the link looks in category section headings and showcases: text with an arrow (the default), an outline button, a solid button, or underlined text. Banner buttons keep their own look.
  • Cart button - how it fills the storefront's top bar: Full height (the default), Inset button or Compact pill (always 44 px). The difference shows most with a large logo, when the bar is taller.

Product shelves

  • How many products a swipeable row shows at once (category shelves, "Handpicked products", the category list on /products) - separately for phone and desktop. On a phone half a card can peek in (e.g. 2.5) to show there is more.
  • Edge fade - Off, Small, Medium or Large (the default).
  • The setting applies to every shelf; a single home page section can change the count just for itself.

Loading animation

What visitors see while a page loads: a spinner, a top line, skeleton cards, a pulsing logo, bouncing dots, or a top line with blur. The same animation shows while an order is being placed at checkout. While the view is open, the preview plays the animation once after every change.

Where to start

If you are starting from scratch: a ready-made style first, then the colours (one main colour and one accent look the most professional), then a font pairing that reads well on a phone. Check the site on a phone and on a computer (Desktop / Mobile at the top) before you publish.

The layout itself (how the sections are arranged) is set by the ZweiHost team; write to us if you want a different one. On a shop with a theme (theme code), the colours and fonts set here apply to it too.

Store: navigation

The "Store" scope is the same on every page: it holds the parts that apply to the whole site. Pick it from the "Scope" menu at the top of the panel. For now it holds "Theme" (see above), "Product cards", "Announcement bar", "Header", "Navigation" - the menu at the top of your site, "Menu labels", "Footer", "Cookie banner", "Newsletter pop-up" and "Contacts" (see below). When you open the navigation, the preview briefly highlights the menu. The old address of the Navigation screen opens the editor right here.

  • Dropdown style - "List" (a classic vertical menu under the item) or "Panel - mega menu" (a full-width menu with the subcategories in columns).
  • Auto submenus - each category item fills itself from its subcategories. With "List" that gives one level. With "Panel" each subcategory that has subcategories of its own becomes a column with a heading, and its subcategories under it. A subcategory with none is a plain link, so a mixed menu looks right.
  • Links per column (1 to 50) - how many subcategories one column shows. If there are more, "View all" is added at the bottom. The first ones in your order in Products › Categories show. It applies only to "Panel" with auto submenus on.
  • Menu width - Narrow (default), Medium or Wide. It is not the spacing between links but how many links stay on the row before the rest move into "More".
  • When the navbar is full - "More" menu (what does not fit goes into a "More" dropdown), Horizontal scroll, or Collapse to hamburger at every width.
  • Product search - Search icon (default, a magnifier that opens a panel) or Search bar, always visible on a computer. On a phone search is always an icon.
  • Photos in the phone menu - on a phone, a submenu where every category has an image shows as photo tiles, two per row. If even one category has no image, it stays a list. Off by default.

The menu

  • Until you add an item, your site shows an automatic menu - your categories and pages in their current order. The first item you add replaces it with yours.
  • "Add an item" adds a category, a page, "All products", "All bundles", a custom link or the logo position.
  • Drag to reorder. On a phone, use the ↑↓ arrows beside each row.
  • Each row says briefly what the item does ("4 columns · auto from categories", "No submenu"). Press the row to open it.

One item

  • Label - for the language picked at the top of the panel. Leave it blank to show the linked thing's name, already translated.
  • Link address - for a custom link only.
  • When the navbar is full - "Auto" (collapses into "More" when needed), "Always show" or "Always in More".
  • Submenu - add sub-items to make a dropdown. Leave it empty and the submenu fills itself from the subcategories (with auto submenus on).
  • Photos in the dropdown panel - with the "Panel" style and an item with a submenu: up to 2 photos on the right of the panel. For each, set a portrait image (4:5), a title and an optional second line per language, and where it leads. While a photo has no image or no destination, the menu change waits and the line under the panel says what is missing.
  • "Remove from menu" takes the item out of the draft; it stays on your site until you publish.

Logo in the middle. If your header layout is "Logo centered" ("Store" › "Header"), add the logo position and move it where you want the logo: items before it sit on the left, items after it on the right. Computer only.

Store: menu labels

"Menu labels" are the coloured tags beside categories in the menu - e.g. "NEW" beside a new model, "-50%" beside a sale. The row sits in the "Top of the page" group of the "Store" scope (shown for a shop with a catalogue) and says how many labels you have. When you open it, the preview briefly highlights the menu.

  • Each card shows the label's text, its two colours and the categories that wear it. "Edit" opens the label in the panel: text, background colour, text colour (with a preview) and the categories - with a search box, because catalogues with many models get long.
  • A category wears at most one label. Switching on a category that already wears another one moves it - the row tells you which label it shows now before you do it.
  • "New menu label" adds a label once you give it a text; "Delete the label" inside it removes it.
  • Everything - texts, colours and categories - is in the draft: shoppers see the change once you publish it. The old Products › Badges › Category navigation tab is gone; the badges on products stay there.

For the labels to appear, your menu has to show your categories (see "Navigation" above).

Store: announcement bar

"Announcement bar" is the first row of the "Top of the page" group of the "Store" scope: the moving strip of short messages above every page of your site. When you open it, the preview briefly highlights the bar.

  • "Show the announcement bar" turns it on and off. A bar that is off keeps its messages, so they are there when you turn it back on.
  • Messages - up to 4, each with a text in every language of the site: switch the language under "Content language". "Delete" removes a message, "Add message" adds one.
  • "Scroll speed (seconds per loop)" - 10 to 120 seconds for one loop; an empty field goes back to 30.
  • "Spacing between messages" - 0 to 8 rem; an empty field goes back to 2.
  • "Fade the bar edges" - the messages fade in and out at both ends.

A single category can hide the bar on its own page. The note above the checkout form is edited on the "Checkout" page (see [Cart, checkout and order placed](#cart-checkout-and-order-placed)).

Store: header

"Header" is in the "Top of the page" group of the "Store" scope, between the announcement bar and the navigation. It holds the logo, the favicon and how your site's top bar looks - until now on Settings › General (the "Logos" and "Language switcher" cards). The "Edit in the store" button on Settings › General opens the editor right here. When you open the header, the preview briefly highlights it.

  • Logo - the logo in your site's top bar. Use a PNG or SVG with a transparent background. Until you have a separate logo, the store shows the image from "Favicon" as its logo: the field shows it and says so, and uploading a logo here keeps the two apart.
  • Favicon - the icon in the browser tab and when your site is shared. A square image works best - PNG or SVG. The editor's preview cannot show it (it has no browser tab), so check it by the image in the panel. If the store also uses it as its logo, removing it removes the logo too, so the editor asks first.
  • Logo placement - left of the name, right of the name, or logo only (hides the name).
  • Header layout - where the logo sits in the bar: Logo left (default), Logo centered, Logo centered with the menu below, or Logo right. "Logo centered, menu below" gives the logo its own row with the menu centered on a second row beneath it (on phones it collapses like "Logo centered"). This is separate from "Logo placement", which arranges the logo next to your business name.
  • Logo size - Small, Medium, Large or Extra large. Every size fits the header without reshaping it.
  • Header over the home banner - Off (default), Light text or Dark text. When it is on, the header on your home page sits see-through over the banner and turns solid on the first scroll. It works only with the "Classic Stacked" layout and only when the hero has at least one active slide. Pick Light text for dark photos and Dark text for light ones.
  • Logo over the photo (optional) - a light version of your logo, shown while the header is see-through. Without it your regular logo stays, on a soft dark shade.
  • Language switcher - how visitors switch the language: a dropdown, links with the language names, flags only, or codes (EN / BG). It shows only when your site has more than one language.
  • Call button - opens "Contacts" (see below): the floating button is part of your contact details and saves live.

Every change goes into the draft and the preview shows the header at once; shoppers see it after "Publish". "Header over the home banner" and "Logo over the photo" belong to the home page's hero, so at publishing they are in the hero carousel's row; the rest are in the "Store · Header" row.

With a theme. If your shop's theme draws its own header, the top of the panel says so: the logo, the favicon and the language switcher apply, while the placement, layout, size and the header over the banner do not. A shop with a theme never shows the header over the banner.

"Footer" is in the "Bottom of the page" group of the "Store" scope. The footer builds itself from your shop's data - the links, the contact details and the payment and delivery badges; here you choose how it looks and what it shows. When you open the footer, the preview scrolls to it and briefly highlights it. The old address of the Footer section screen opens the editor right here.

Social networks

Links to Instagram, Facebook, TikTok and YouTube. An empty field hides that icon. An address without https:// gets it on its own.

Appearance & brand

  • Footer theme - Dark or Light. Colours come from your theme, so the footer always matches the rest of your site.
  • Logo (optional) - an image that replaces the title text (e.g. a wide wordmark instead of your shop name). Use a wide logo that reads on the footer background.
  • Brand title (optional) - shown in place of your shop name. Leave it empty for the shop name; it does not show when there is a logo.
  • Description - a short blurb under the logo, with formatting (bold, italic, links and lists).

The title, the description and the newsletter's custom headline are for the language picked in "Content language"; the logo and the switches apply to every language.

Newsletter form

A signup band at the top of the footer. "Show the newsletter form" turns it on or off entirely. The headline automatically shows your welcome discount (e.g. "Get 10% off your first order"); without one it shows a general invitation. Set the discount up under Settings › Emails. "Custom headline" replaces the automatic headline with your own text. The band hides itself once a visitor subscribes or a signed-in customer already gets your emails.

The "Information" and "Customer service" columns fill automatically with the links that exist (About, blog, FAQ, delivery, returns, contact, order tracking). Each has a switch to hide it; a column with no links hides itself anyway.

Contact & badges

  • Contact - phone, email and address from Settings › General, and the working hours from the business's weekly schedule, grouped by day ("Mon - Fri 10:00 - 19:00", closed days as "Closed"). You set them in Settings › General › Opening hours; an online shop shows them only with "Show the opening hours on my site" on, a salon that takes bookings always. "Show contact details" hides the block entirely.
  • Badges - your payment methods and enabled couriers, with their real logos. Only what your shop actually offers shows; "Show payment & delivery badges" hides them entirely.

"Cookie banner" sits in the "Pop-ups" group of the "Store" scope and names the layout in use. Here you choose how the cookie consent banner looks on your site:

  • Corner card - a compact card in the bottom-left corner.
  • Bottom bar - a full-width bar across the bottom of the page.
  • Centered modal - a dialog in the middle of the screen over a dimmed backdrop.

While the area is open, the preview shows the banner on every page and keeps it open - its buttons neither close it nor record a choice. The home page's preview shows no pop-ups, so from there it opens the all-products page. The layout is the only setting: the banner always asks for analytics and marketing consent (strictly necessary cookies are always on), and its texts are the platform's. What loads after consent depends on Marketing › Tracking: the "Texts and categories" card opens that screen in a new tab. The layout uses your shop's colours, fonts and style.

Store: newsletter pop-up

"Newsletter pop-up" sits next to the banner in the "Pop-ups" group and names its layout and delay (e.g. "Image overlay · after 12 sec") or says "Off". It is the pop-up your visitors subscribe to your newsletter through:

  • "Pop-up" turns it on and off; it shows once per visitor.
  • "Layout" - Split image, Compact or Image overlay, with its image (and the image side for the split one, a portrait mobile image for the overlay).
  • The texts for each language of the site ("Content language"): eyebrow, heading, text, button label, email placeholder and success message.
  • "Delay before showing" (0-120 seconds) and "Show close (X) button".

While the area is open, the preview shows the pop-up at once on every page and keeps it open (from the home page it opens the all-products page); a signup on the preview only shows the success message - no one is subscribed. A subscriber gets the welcome code if you have it on: the "The subscription discount" card opens Settings › Emails (the "Automated codes" tab) in a new tab. The recommended image sizes are in Newsletter. On a plan without the newsletter the area is locked and points to the plans.

Store: product cards

"Product cards" sits in the "Look" group of the "Store" scope and says how many layouts there are (e.g. "5 built-in · 1 design of your own"). Here you decide how every product card on your site looks: on category pages, Products, search, a customer's saved products and the strips on product pages. It holds the card layouts, the favourites button, the rating, quantity prices and the cards in search and in the account. When you open the area, the preview goes to the first card on the page and briefly highlights it; if the page has no cards, it opens all products. The "Product cards" card on "Pages & sections" and the old addresses (the Products › Product cards tab and the card layout editor) open the area on "All products", where cards always show.

  • Changes go to the draft like any other. On publishing, the "Store · Product cards" row says what changed: how many layouts there are ("Card designs: 1 → 2"), that the layouts were edited, which switch changed, or that other card settings changed.
  • A draft that adds a layout past your plan's limit (see below) is not saved, and such a publish is refused with "Your plan allows no more card designs of your own."

Product card layouts

  • Predefined - Standard, Editorial, Showcase, Portrait and Gallery. We maintain them and they never change. Under each, it says how many categories use it. The pencil beside it makes your own copy ("… - my version"), exactly as it looks right now, and opens it in the designer; the original stays untouched.
  • My layouts - your own. Under each, it says which category uses it (and how many more). Press it to open it in the designer.
  • "New layout" makes a copy of "Standard" and opens it in the designer.
  • How many of your own you can have depends on your plan: Solo 1, Pro 3, Business 10, Enterprise unlimited. The predefined ones never count. Under the list it says how many you have used. At the limit the pencils, "New layout" and "Duplicate" stop and "See plans" appears, opening the plans in a new tab. If you have more than your plan allows after changing plans, you keep them - you can change and delete them, but not add new ones.
  • Gallery - the predefined layout where the photo is the card. On a computer the card shows just its photo (tall, 4:5). When a shopper points at the card (or reaches it with the keyboard) the product's second photo appears, and a caption rises over the bottom of it with the name, the short description on one line, the price and a button. A phone has nothing to point with, so the name and price sit under the photo and the description and button are not shown. A product without a second photo simply keeps its first.
  • You can pick a new layout of your own straight away in "This category" or in a "Handpicked products" section, before it is published. When publishing, ticking that area then ticks "Product cards" too, because without them the layout does not exist yet, and unticking "Product cards" unticks the area. "Product cards" can also go live on their own.

The card designer

Press one of your layouts (or the pencil on a predefined one) and the panel shows the designer. Every change saves itself into the draft and rearranges the real cards in the preview - there is no separate card preview any more.

  • Layout name - the name you pick it by everywhere. Two of your layouts cannot share a name.
  • Product state - In stock, Low, Sold out or Not tracked shows the cards of the category or of all products in that state, so you can see how a sold-out product or "Only 3 left" looks. Preview only - nothing is saved and shoppers never see it. It shows while the preview is on a category or on "All products".
  • Photo - Image shape (1:1, 4:5, 3:4, 2:3, 4:3, 3:2), separately for desktop and phone, plus Fitting. When the shape matches your photos nothing is cropped; "Show the whole photo" pads it instead of cutting the edges. Show the second photo on hover swaps the photo for the product's second photo while a shopper points at the card (computer only). The shape does not change how wide the card is - it decides how tall the image is.
  • Shape - framed or not, shadow, and the spacing between cards in the grid. Minimal spacing is about 4 px.
  • Content and order - first Spacing: with Aligned every shown part keeps its place, so the prices and buttons in a row line up; with Compact each part sits right under the one above, and the buttons still line up at the bottom. Then you arrange the parts - title, short description, price, stock and button. Below the photo they sit in rows: each row holds one or two parts and has its own alignment (Left, Centered, Right, and for two parts also Both ends). + Add beside puts a second part next to the first (only the pairs that fit), + New row adds a row, and you reorder rows with the up and down arrows. Below them are the On the photo and On hover lists. Title lines (1, 2, 3 or Full) and Description lines (1 or 2) set how many lines show. Button - compact next to the price, full width below, on hover over the image, or no button; if you remove the button, a heart "next to the button" moves to the top right of the photo and the designer tells you so. Favourites heart - where the heart sits on this card.
  • Stock - Show: Always ("In stock" or "Only 3 left"), When low (only "Only 3 left") or Hide; Where: below the photo, or on the photo as a badge (there only "When low").
  • Sold-out products - the look from five tiles, each showing this card sold out: Corner tag, Diagonal ribbon, Bar across the photo, Dimmed card or No change to the design. A sold-out product's button always says "Out of stock". The look always applies - moving sold-out products to the end is in "All categories". The predefined layouts show the look your shop showed until now.
  • Text size - separately for desktop and phone.
  • "Duplicate" makes a copy next to the layout ("… (copy)"). "Delete" asks first; if categories use the layout, it says how many - after publishing they show their built-in layout, and your shop keeps working.

Everywhere in the store

  • Use one layout everywhere - turn it on and pick a layout (predefined or your own), and every product card on your site looks the same. While it is on it replaces each category's layout - which is why the "Card look" row in "This category" shows that card and cannot change it, and "Account favourites card" and "Search results card" say it applies. Turning it off keeps your choice.
  • Favorites button - where the "save to favorites" heart sits: off, an icon in the top-right or bottom-right of the image, or next to the "Choose options" button. Shown only when the Customer Accounts add-on is enabled. Favorites button background - No background, White background or White circle, for the "icon over image" placements only. Custom colours replaces the default white with a Heart colour and a Background colour; a saved (filled) heart keeps your brand colour.
  • Show the rating - the star rating and review count under the title of every card (e.g. "4.7 · 3"), wherever a product card shows. Minimum number of reviews (3 by default) is the floor below which a product shows no rating; only approved reviews count.
  • Show quantity prices on the cards (Pro plan and above) - under the price of a product with quantity pricing, the lowest price per piece at a large quantity, for example "from €3.00/pc at 31+ pcs". See Quantity pricing.
  • Account favourites card and Search results card - which layout a customer's saved products and the search results page use. They mix products from every category, so they have their own choice - a predefined layout or one of your own. Saved products exist only with the Customer Accounts add-on - without it, the account favourites card says so.

Store: contacts

"Contacts" is in the "Store data" group of the "Store" scope and is "Live": the business name, the display name, the phone, the contact email, the address (for each of your site's languages - switch with "Content language"), "Show the location on Google Maps" and "Show a call button on your storefront". They are used in the footer, on the Contact page and by the floating call button, which shows only once there is a phone. They are not in the draft: "Save live" saves them to the store at once, and if you leave with unsaved changes the editor asks first. The same details stay on Settings › General too (the "Full editor" link), together with the bank transfer details. The row shows only for members with access to Settings › General.

All categories

On any category's page the "All categories" scope shows what every category follows, except where a category has its own value. It also opens from All products › Look and filters and from the "Categories" card in Pages & sections.

  • Grid and paging - Columns, Columns - on a phone, Rows per page, "When more products" (a "Show more" button or numbered pages) and "Width" (the same values as the home page sections).
  • Sorting and subcategories - the sort a page opens on, how subcategories show (grid, list, band, chips, as a filter or hidden) and which products show (only this category, only the subcategories, or both). Subcategories "as a filter" need the subcategories' products, so "Only this category's products" is not offered with them.
  • Prices and sold out - "Price display" (standard or compact) and "Move sold-out products to the end" of every list in the store (categories, all products, related products, search, favourites). How a sold-out card looks is set in the card's design.

Each field shows what the store does when you set nothing (say "Auto (responsive)") - pick it again to remove the setting. The categories with their own values are listed under the settings; each name opens that category's page. A change shows in the preview at once for every category that follows the store, new ones included.

Width

"Width" (the last field in "Grid and paging") decides how far the products and the filter sidebar reach. The options are the same as for the home page sections:

  • "Container" and "Wide" - a centred column (about 1150 and 1400 pixels on a wide screen); the breadcrumb and the title line up with it.
  • "Full width (small inset)" - the products run almost to the screen edges, 8 pixels from them.
  • "Edge to edge" - the products reach the very edges, while the title and the filter bar keep a small margin so they never touch the edge.

"Automatic" keeps the page as it was. On a phone "Container" and "Wide" look the same, "Full width" leaves an 8-pixel margin and "Edge to edge" removes the side margin completely. With a sidebar, the filters keep their margin on the left; it is the products that reach the edge.

Filters

"Filters" decides how shoppers move between categories and how each filter looks:

  • Category view - "Sidebar rail", "Sidebar with thumbnails", "Editorial list" (the filters sit beside the products), "Visual tiles", "Tab bar", "Thumbnail chips" (a strip above the products, the filters in a drawer).
  • Category image tiles - the frame of the category image tiles, for computer and phone separately. "Auto" keeps the shapes they had.
  • Price filter, Colour filter, Option filters and Availability filter - how each one looks. The price ranges and histogram are worked out from your real prices.
  • "Show the filters" and "Filters on a computer" - switch the filters off and only "Sort" stays; "Button and drawer" removes the sidebar and opens the filters from the right. On a phone the filters are always in a drawer.
  • Price filter and Availability filter - whether they are there.
  • "Quick buttons above the products" - one of your filters' values as a row of buttons under "Sort". They show where the filter has 2 to 8 values.
  • Catalogue filter - if the shop has option catalogues: which catalogue, the filter's heading and its style ("Brand, then model", "Expandable list", "Dependent dropdowns").

How the filters look is one for the whole store. Whether they show, and where they sit on a computer, can differ for a single category - that is its own value. Which attributes show as filters is chosen in Products › Attributes.

Filters in a sidebar, a drawer, or hidden

  • "Show the filters" - switch it off and the category page has no filters at all: no sidebar, no "Filters" button, no chips for picked filters. Only "Sort" stays - on a phone the bar above the products shows just that. Subcategories shown "As a filter" are hidden too, since they are a filter as well.
  • "Filters on a computer" - "Sidebar" (the filters sit on the left, beside the products) or "Button and drawer". With the second, the sidebar goes and the products take the full width; above them one bar stays pinned under the header while the shopper scrolls: subcategory tabs on the left, "Sort" and the "Filters" button on the right, which opens the filters in a drawer from the right. Picked filters show as chips under the bar.

The tabs ("All 32 · Engagement 12 · …") appear when the category presents its subcategories as "Chips": in "Button and drawer" mode the chips become tabs. On a subcategory's own page the tabs list the subcategories beside it, and "All" leads back to the category above. With the other layouts (tiles, "As a filter", "Hidden") there are no tabs.

On a phone the filters are always in a drawer, whatever you choose for a computer. The "Filters / Sort" bar stays pinned under the header while the shopper browses the products - in every shop, with no setting.

Both settings can be set differently for one category - in its "This category".

Quick buttons above the products

"Quick buttons above the products" shows the values of one of your filters as a row of buttons right under "Sort" - ages 2-4 г., 4-6 г., 6-8 г., say, or sizes S, M, L. One tap filters the products without the shopper opening the filters.

  • The list holds the attributes with "Show as a filter" in Products › Attributes. "No quick buttons" shows no row.
  • The buttons are the same filter as in the sidebar and the drawer: a picked button shows there too and as a chip above the products, works together with the other filters, and goes into the page address.
  • Text values are buttons; colours are swatches with the colour's name.
  • The row shows on every category where the chosen filter has 2 to 8 values among its products. With one value there is nothing to choose, and past 8 the row is no longer a shortcut but the whole filter a second time - there the values stay in the filters. To get quick buttons for something with many values (20 sizes, say), make a separate attribute with fewer, broader values (age groups, for example) and pick that one.
  • On a phone the buttons stay on one row that scrolls sideways, so they never push the products down. On a computer they wrap onto a second line when they do not fit.

All products

On the /products page the "All products" scope holds "Merged catalogue": on, "All" shows one grid of every product and the shopper sorts the whole catalogue (most sold, price, discount); off, each category is a section of its own. "Look and filters" opens "All categories" - the page follows the same columns, filters and prices. "Store campaign" (the countdown banner) saves at once and opens on its own screen.

This category

On a category's page the "This category" scope shows its own settings. At the top are its name and how many products it holds (or that it is a smart category, picked by a rule).

At the top is the "Live" card: whether the category is "Visible in the store", its name in each language, its image and its parent category. It saves to the store at once with "Save live" and is not part of the draft; leave the page or the editor with unsaved changes in it and the editor asks first. To change it your access level must include Products › Categories as well - without it the card is read-only. "Full editor" opens the category in a new tab.

A hidden category shows in the preview with the note "Hidden category - only you see it, in the editor", in every scope of its page. Shoppers do not see it, and its products stay in the store (see Categories). A subcategory of a hidden category carries the same note.

"Display" says how the category shows, row by row:

  • A row that follows the store shows the store's value with "· from the store" (say "Auto (responsive) · from the store"). Change it in "All categories" and this category follows.
  • Pick another value and the row becomes "only here" - it applies to this category alone. "Revert" hands it back to the store.
  • Columns, Columns - on a phone, Rows per page, "When more products" (only while the rows are limited), Width, "Opens sorted by", "Show the filters" and "Filters on a computer".
  • When the category has subcategories: "Child category layout", "Products shown" and "Include smart subcategories" (the last only while the subcategories' products show too). Subcategories as a filter need the subcategories' products, so "Only this category's products" is not offered with them.
  • "In lists" - a grid or a horizontal strip, when the category is a block on the home page or on "All products". Its own page is always a grid.
  • "Card look" - one of the built-in layouts or one of your card designs (designed in "Store" › "Product cards"). When one card for the whole store is turned on there, the row shows it and it cannot be changed here.

"Include smart subcategories", "In lists" and "Card look" have no store-wide value behind them: they read "default" until you change them.

Changes go to the draft and show in the preview at once. On "Publish" the review lists them as "Categories · Display" with how many categories changed. The "Edit in the store" button in the category editor and the old address of a single category's view open the editor right here.

New category

In "Go to…" pick "+ New category". Enter a name, pick a parent category (or "None (top-level category)") and whether its products are handpicked or picked by a rule ("Smart (auto-selected)"), and choose "Hidden" (picked at first - it stays out of the menu, /products, search, the sitemap and the feeds until you show it) or "Visible now". "Create and open" creates the category in the store at once (it is not part of the draft) and opens the preview on it in "This category", where you set up how it shows and its sections. Hidden categories are in "Go to…" too - marked "Hidden category". Creating one needs access to Products › Categories, as the list's "New category" button does.

This category's page (Business)

Under "Live" is the "This category's page" block - the category's own sections, in the order the site shows them:

  • "Above the products" - the promo banner from the category's Campaign tab (a locked row: it is set up there), then your sections and "Add section".
  • "Products grid" - always there; it opens "In the grid": the banners among the products, each with its row, shape and side. "Add a banner to the grid" adds one cell in product row 2 (the next goes two rows after the last banner) and opens it. At the top of the banner, the "Place in the grid" card picks the "Shape" ("Cell" - the size of one product card, a "Band" across the whole grid, or "Tall" - two columns by two rows, and the full width on a phone), the "Product row" and the "Side" (at the start or the end of the row; a band has no side). The place is a row, not a cell, because a phone and a computer have different columns; a row the page does not reach does not show.
  • "Below the products" - the sections after the grid and "Add section".

The section types are Banner, Text, Handpicked products and Shop the set (on a plan with sets), with the same fields as on the home page (see [Sections one by one](#sections-one-by-one)). The product picker offers the category's own products first. A row opens its section; the arrows move it within its zone and the eye hides it (the row reads "hidden"). In an open section the eye and the bin are at the top, and the bin asks first. Per-device choices follow the Desktop / Mobile toggle at the top, and texts follow the preview's language. Banners in the grid have no section title or background.

While a banner sits above the products, the "Hide the category title" switch removes the visible title - turn it on when the banner already says the category's name. The name stays on the page as a hidden heading (h1) for Google and screen readers.

Changes go to the draft; on "Publish" the review lists them as "Categories · Page sections" with how many categories changed. Below the Business plan the block is locked with a "Business and up" chip, while "Display" keeps working; on a lower plan the sections are kept but do not show on the site (the SEO text included), and they come back when you return to Business. The old "Page builder" address opens the editor right here.

Pages & sections

Content › Pages & sections shows everything the editor can open, as cards: the pages ("Home page", with how many sections it has, "Categories", "All products", ["Product page"](#product-page), ["Cart", "Checkout" and "Order placed"](#cart-checkout-and-order-placed), ["FAQ"](#faq), ["About us"](#about-us), the [two info pages](#delivery-and-returns-pages) and the [pages with live data](#pages-with-live-data)) and the parts of the whole store ("Navigation", with how many items the menu has, "Announcement bar", with how many messages it has, "Footer", "Product cards", "Cookie banner", with its layout, and "Newsletter pop-up", with its layout and delay). A card's "Edit" opens the editor on that page (for "Categories", on the all-products page; for "Product page", on your newest product shoppers can see), or, for a part of the store, in the "Store" scope on it. A page or part an add-on or a higher plan unlocks shows locked with its label ("Add-on", "Pro and up", "Not in your plan") and leads to the plans; another kind of business's pages do not show. "Open the editor" at the top right opens it on the home page. The section and item counts are the draft's.

As more pages and parts join the editor, their cards appear here. The page is part of the "Site editor" permission - a member without it does not see it.

Pages with live data

"Reviews", "Blog", "Bundles", "Contact", the legal pages and "Withdrawal from the contract" have no look settings of their own: they show data that saves live. Their scope in the editor is "Live" and holds links to the screens where they are edited (for example "Edit in Legal" or "All posts"). The links open in a new tab, so the editor stays open. The buyer's account (with its sign-in) and the missing page (404) follow the "Store" scope - a short note above its list says so, and on the 404 a link leads to its texts (Online store › Translations).

Cart, checkout and order placed

On the "Cart" page the scope of the same name picks the empty cart's layout: Centered, Editorial or Card. Below it, "Related settings (live)" lead to free delivery (with the couriers) and to the promotions. The full cart shows once you add a product in the preview - the editor's cart is separate from your shoppers'.

On the "Checkout" page the "Checkout" scope edits the notice above the checkout form - a short message with an icon for campaigns, promotions or important info: "Show the checkout notice", "Icon" and a text per language (up to 300 characters). A notice that is on with no text in any language does not show, and the field says so. Under it, "Related settings (live)" lead to the couriers, card payments, the bank transfer details and the terms and conditions. With an empty cart the checkout shows the empty cart (in the preview too) - add a product in the preview to see the form with the notice.

On the "Order placed" page the scope of the same name picks the order confirmation's layout - Summary (number and totals with delivery), Line items (the full list of ordered products) or Minimal (a clean confirmation with no amounts) - and the order status animations - the scene shown beside every order's status on the order tracking in the buyer's account:

  • Flat (built-in) - clean flat illustrations drawn entirely in your brand colours.
  • Postman - a friendly postman character with his uniform in your accent colour.
  • Delivery crew - rich delivery-team scenes: loading the van, handing over parcels.
  • No animation - no illustration at all. Only the progress bar remains, and it stretches across the full width of the card.

The Postman and Delivery crew sets use free Freepik artwork, so with them the tracker shows a small "Illustrations: Freepik" credit. The animation shows on the account, so "See on the sample profile" opens the [sample buyer's](#sample-order-and-sample-buyer) account, where it plays with your draft. Once published, the change applies to every order, including ones already placed. The tracking itself - the steps and the progress - does not change.

FAQ

On the "FAQ" page the "FAQ" scope holds your questions and answers - the same ones the home page's FAQ section shows. Visitors see them as an accordion: they click a question to expand its answer. A link to the page sits in the footer as soon as at least one question is visible.

  • The questions are listed in the site's order. On a computer you drag them up and down; on a phone you move them with the arrows.
  • Click a question (or the pencil) to open it: "Question", "Answer" and "Visible on the site". The eye on the row hides or shows it quickly without deleting it. "Delete" takes it out of the draft.
  • At the top you pick the language of the texts. When a language has no question, visitors in that language see the default language's.
  • The first five questions show at once, and "+ N more questions" shows the rest. "New question" adds one at the end.

Like everything in the editor, the changes go into the draft and reach shoppers when you publish.

About us

The "About us" section tells the story behind the shop - who you are, why you do it and what you stand for. It shows on the home page, as its own page at /about, or both. Turn both off and it shows nowhere, but the content is kept.

  • The content is edited in the home page's "About us" section: "Layout" (Story + numbers, Focused story or Magazine), "Emphasis band" (the colour of the highlighted band - dark, accent or light grey; it only shows when the layout has something to tint), "On the home page" and "As its own page". Below them come the intro and a row per part of the layout (story, numbers, values, lead photo, gallery, closing band) that opens it.
  • On the "About us" page, the scope of the same name turns the separate page on or off; the "The content" row takes you to the home page's section. While the page is off, the preview shows the 404 page a shopper would see.
  • Changing the layout deletes nothing: parts the new layout does not show are kept and come back if you switch back. Empty fields simply do not show.
  • Texts are entered per language; photos, links and the layout are shared. Anything untranslated shows the default language's text.

Delivery and returns pages

The two customer-service info pages - "Delivery & payment" (/delivery) and "Returns & exchanges" (/returns) - are linked from the footer. On each, the scope of the same name holds its "Page title" and its content in a rich-text editor (headings, images, links, lists and tables), per language; an empty title uses the footer link's name. The row at the bottom opens the other page.

A page with no content is not in the shop: its footer link does not show and its address returns 404 - in the preview too, until you write it. Once it has content, it appears on "Publish".

Sample order and sample buyer

Some pages only have something to show after a purchase. In the editor's preview they show sample data, so you can see how they look. In "Go to…" they are "Order placed (sample)" and "Account (sample buyer)":

  • "Order placed" shows a sample order: the first two products a shopper can buy, in the order of the products page (1 and 2 pieces), to an office of the courier your checkout offers first, cash on delivery. Where the order number goes it says "Sample order".
  • The account (the account icon at the top) shows the sample buyer "Ivaylo Ivanov, Sofia" on every tab: two orders (one on its way to the office - it shows the order status animation - and one delivered), an address and a few favourite products.

The sample data exists only in the preview: shoppers never see it, nothing is saved and nothing counts as a purchase. Changes on the sample buyer's account are not saved.

The draft saves itself

  • There is no "Save" button: every change goes into the draft a moment after you stop typing. Under the panel it says "Saved in the draft · N s ago".
  • The preview shows the change at once.
  • If a section has a link type picked but no destination (for example "Category" with no category chosen), the change waits and the field is marked - choose the destination and it saves. If a save fails, press "Try again". While such a change is not in the draft, "Publish" waits, and leaving the editor asks before it drops the change.
  • The draft is one for the whole shop: everyone on the team writes to it. When two people change the same setting, the last change stays.

The preview follows without reloading: the page updates in place and stays where you scrolled, so you can make many changes in a row. A switch or a dropdown saves at once, text saves when you pause typing, and theme colours change on the page straight away.

Publishing

"Publish" opens a review of the changes by area (for example "Home page · Sections" and "Home page · Hero carousel"), all ticked. Each row says who changed the area last and when: "You" for your own changes, the member's name, or their email if they have no name. You can untick one, name the publication, "Discard" the changes in one area or "Clear the draft". The preview on the right shows the site with exactly the ticked areas. "Publish all" makes the changes visible to shoppers at once. The message after it has "Undo" - if you got something wrong, it takes back exactly that publication.

History

"Publication history" (the clock at the top) lists every publication - who, when and what it changed. "View" shows the site as it was right after it. "Restore" (or "Restore this version" while you view it) brings that back through the same review and says which later publications it takes back. The last 50 publications or the last 12 months are kept - whichever is more.

Sending for review

A member without the "Publish the site" key sees "Send for review" (on a phone "Send") in place of "Publish". It opens the same list of areas; your own changes read "You". Untick an area that is not ready yet, write a note if you like and press "Send". Nothing in the store changes until someone with the key publishes. The draft stays shared and you can keep editing. While your request waits, the panel says when it was sent, and sending again replaces it (the areas and the note).

Whoever can publish sees the bell at the top and a card "Maria sent this for review" at the top of the panel (on a phone, in the lowered bottom part). "Review" opens the publish review with the request's areas ticked, and the note becomes the name of the change. Publish all of them or only some, or "Discard" an area. An area changed after the request was sent says so ("Changed after it was sent · Ivan, today 12:10"): what goes live is the draft as it is now. The request closes by itself once its areas are published or discarded. "Close the request" closes it without publishing, and the draft stays. The request shows only in the editor - no email is sent.

Who can do what

  • The "Site editor" permission (in Users & access) gives the editor, the draft and the "Pages & sections" page. A member whose level had "Landing page", "Hero carousel", "Navigation", "Footer section", "Announcement bar" ("Checkout notice"), "Badges", "Appearance", "Newsletter", "FAQ", "About page" or "Info pages" already has it, unless their level explicitly says no to the editor.
  • The "Publish the site" key gives publishing, discarding, the history and "Undo". Without it, "Send for review" takes the place of "Publish" (see above), and the history and "Undo" are not shown.
  • In your shop's guided setup, the hero step uploads and orders slides straight on the site. Once the hero is edited here, the step points to the editor.
  • A member whose level has the Products screen gets the editor too, to set up the product page and the product cards that used to be tabs of that screen.
  • A member whose level has the Products › Categories screen gets the editor too, to set up how all categories look, the all-products page and each category's own page, which used to be on that screen. The "Publish the site" key does not come with it.

What is not here yet

Everything that shapes how your shop looks is now edited here. The data - products, prices, stock, categories, couriers, payments and legal texts - stays on its own screens and saves live; where a screen has the "Edit in the store" button, it leads to the same place in the editor.

All guides

Try all of this in a shop of your own

Every feature in these guides is in the shop from day one - nothing to install and nothing to develop.

Start your site