Storefront14 min read

Storefront presentation

The Store menu controls how the storefront looks and behaves. Each screen edits one configuration block on the store record and revalidates the storefront when you save, so changes appear quickly. Colours, fonts, spacing, and button styles all come from the Design system, so these screens focus on layout and behaviour rather than raw styling.

Header

/admin/store/headersaved to headerConfig

The header starts from a layout preset and is then tuned for behaviour, icons, and mobile. It reads colours and fonts from your design system, so most of what you set here is arrangement rather than styling.

Layout preset: Eight arrangements of logo, menu, and icons, from logo left with a centred menu to a full width mega menu or a minimal transparent hero header.
Appearance: Light or dark colour scheme, background colour, border, corner radius, and a max width, all of which can differ on tablet and mobile.
Sticky behaviour: Off, normal (always pinned), or smart (hides on scroll down, reappears on scroll up).
Icons: Show or hide the mini cart, wishlist, account, and search icons, set their size and spacing, and optionally use a custom cart icon. Breadcrumbs can be turned on here too.
Announcement top bar: A thin bar above the header for a message, with optional currency and language selectors, dismissible option, and its own sticky and mobile settings.
Mobile menu: Whether the hamburger appears on mobile and tablet or always, and whether its search covers products only or everything.
Mobile bottom bar: An app style bar fixed to the bottom of the screen on phones, with toggles and icons for shop, search, wishlist, cart, and account.

Tip: Start by picking the preset closest to the look you want, then adjust icons and the top bar. The mobile bottom bar makes a store feel like an app on phones and is worth turning on.

Distributor arrangement: A layout that puts the menu on its own row beneath the logo and utilities, for sites with a lot of top level navigation.
Menu alignment: Where the menu sits within its row: left, centred or right.
Inline search: A real search field in the header rather than an icon that opens one, with its own placeholder and width.
Inner row padding: Vertical breathing room on the row holding the logo and utilities.

Layout preset, announcement bar, icons, sticky behaviour, and the mobile bottom bar.

Footer

/admin/store/footersaved to footerConfig

The footer is built from a chosen number of columns, each holding a widget, with a separate bottom bar underneath for the copyright line and payment badges.

Top bar: An optional strip above the columns, for a newsletter prompt or a promise line.
Rules: Horizontal dividers between the footer regions, on or off independently.
Mobile columns: How the columns stack on a phone, so a four column footer does not become four thin strips.

Columns: Choose a one to five column preset, then fill each column with a widget.
Column widgets: Text or about blurb, link list, product list, social icons, newsletter signup, or a static Instagram image grid.
Social links: URLs for Facebook, Instagram, TikTok, X, YouTube, Pinterest, LinkedIn, WhatsApp, and VK, shown wherever social icons appear.
Newsletter widget: Placeholder text, button label and style, full width option, and the success message shown after signup.
Bottom bar: Copyright line (with {year} and {storeName} placeholders), payment method badges you upload, extra links, and an option to repeat the social icons.
Spacing and colour: Padding, column gap, and background and text colours, with mobile overrides.

Column widgets, social links, and a bottom bar with payment badges.

Navigation

/admin/store/navigationsaved to Menu, MenuItem

Menus are managed separately from the header and footer, so the same menu can be reused and the layout screens simply reference it by location.

1Create a menu and give it a location, for example the primary (header) menu or a footer menu.
2Add items and nest them into dropdowns by dragging, linking each to a page, collection, product, or a custom URL.
3Save. The header and footer then display whichever menu is assigned to their location.

Build menus as nested items and assign them to locations such as primary and footer.

Popups

/admin/store/popupssaved to Popup

Each popup is its own record with its own content, trigger, and targeting, so you can run several at once, such as a newsletter capture and a promotion, without them clashing.

Content: The popup heading, body, image, and call to action.
Trigger: When it appears, for example after a delay, on scroll, or on exit intent.
Targeting and schedule: Which pages it shows on and an optional start and end date so a promotion popup switches itself off.

Create marketing and consent popups with their own triggers and targeting.

Cart drawer

/admin/store/cart-drawersaved to cartConfig

Coupon field: Show or hide a discount code field in the drawer.
Cross sell: Show suggested add on products inside the cart.
Free shipping progress: Set a free shipping threshold and the drawer shows a progress bar towards it.
Item image ratio: The aspect ratio used for the thumbnail of each cart line.
Trust badges: A row of reassurance badges (such as secure checkout, free returns, buyer protection), each with an icon and label you can edit or turn off.

Coupon field, cross sell, free shipping progress, and trust badges.

Shop and catalog pages

/admin/store/shop-catalogsaved to shopCatalogConfig

This controls the shop and collection listing pages: how the grid is laid out, what customers can sort and filter by, and what shows on each product card. The card visual style itself comes from the design system; here you pick which card preset the shop uses.

Grid layout: With a filter sidebar, a full width grid, or a masonry (variable height) grid.
Density: Products per row on desktop (2 to 5) and mobile (1 to 3), products per page, and the gap between cards.
Pagination: Numbered pages or infinite scroll, plus top and bottom page padding.
Sorting: The default order (best selling, newest, price, or rating) and whether shoppers get a sort dropdown.
Filters: Toggle a price range, category, colour, size, rating, and availability filter each on or off.
Card style: Which design system card preset the shop uses (see the Design system page).
Badges: The wording for sale, new, and sold out badges, and how many days a product counts as new.
Card toggles: Show or hide rating stars, the category label, colour swatches, the sale badge, quick view, wishlist, and add to cart (including a separate add to cart on mobile option).

Grid layout, filters, sorting, pagination, and product card toggles.

Product page

/admin/store/single-productsaved to singleProductConfig, pdpTemplatePageId

The product page is the most configurable screen on the storefront. Settings are grouped so you can shape the layout, the gallery, the buy box, and the sections that sit below it. You can also point the page at a fully custom template built in the page builder.

Layout preset: Classic two column, gallery focus, magazine, minimal, full width, or right stack.
Gallery: Thumbnails below or left, full width, sticky, or stacked, plus zoom, video embed, and a 360 view option.
Variations: Show options as a dropdown or visual swatches, with colour, image, or label swatches.
Info elements: Show or hide the short description, SKU, categories, tags, and share buttons.
Tabs: A tab style plus toggles for description, additional info, reviews, human Q&A, specifications, and a shipping info tab you can fill with your own content.
Recommendations: Related products, recently viewed, frequently bought together, customers also viewed, and complete the look, each with its own count and layout.
Urgency: A low stock scarcity badge with a threshold, a countdown timer, and a back in stock notification button.
Buy box: Add to cart and optional buy now buttons (styled from the design system), AJAX add to cart, quick view, a sticky add to cart bar, wishlist and compare toggles, and a size guide.
Reassurance: A guaranteed safe checkout block with your own badge image, and an optional AI "ask about this product" widget.
Text and spacing: Which type styles and colours the category, name, price, and description use, plus the gaps and page padding.

Note: The "ask about this product" widget and the human Q&A tab are different things. The widget answers instantly from the product data and needs its AI feature flag and an AI key; the Q&A tab shows questions real customers have asked.

Tip: To go beyond these options, build a product template in the page builder and select it here. The storefront then renders your custom template as the live product page.

Layout, gallery, tabs, recommendations, urgency, and the buy box.

Customer account and programs

/admin/store/customer-accountsaved to accountConfig

Despite the name, this screen is where the customer facing programs are tuned. The numbers set here drive the loyalty balances, referral rewards, and automated discounts customers see in their account and emails.

Loyalty points: The earn rate per spend and the threshold at which points can be redeemed, plus a switch for VIP tiers.
Referrals: Points awarded to the referrer and the discount the new customer receives.
Subscribe and save: The recurring order discount and the interval options offered (for example every 30, 60, or 90 days).
Lifecycle discounts: Birthday and anniversary discount percentage and validity, and a win back offer for lapsed customers after a set number of inactive days.
Registration: Whether phone is required at signup, whether the marketing opt in shows, and whether customers can share a wishlist.

Note: The matching lifecycle emails (birthday, win back) are sent by the scheduled background jobs, and these percentages are what those emails offer. See the Customers and loyalty page for the customer side.

Loyalty, referrals, subscribe and save, lifecycle discounts, and registration.

Maintenance mode

/admin/store/maintenancesaved to maintenanceConfig

Enable: Switch the public storefront to a holding page. The admin stays reachable so you can keep working.
Heading and message: The text shown to visitors on the holding page.
Bypass password: An optional password that lets you and colleagues view the live storefront while everyone else sees the holding page.

Tip: Set a bypass password before a launch so your team can preview the finished storefront while the public still sees the holding page. Switch maintenance off to go live.

Turn the public storefront off with a branded holding page while admin stays open.