English

Slovenčina
Čeština

English

Slovenčina
Čeština

Appearance

Design ​

Path: Engage › Design

You edit the look in Canvas

You edit your store's look live in Canvas — a full-screen editor where you click an element in the preview and change it. This page is an overview: what the Design menu contains and where in Canvas the most-searched settings are.

The Design section is one home for everything about how your store looks — the editor, themes, custom code, menus and the footer.

What the Design menu contains ​

ItemWhat it covers
CanvasThe main editor for look and content — pages, product detail, product listing, header, footer, colours, fonts, widths, cart and checkout. More on the Canvas page.
ThemesReady-made themes: save your current storefront as a theme, install a different one, or roll back to a previous state.
Custom CodeCustom CSS and HTML for the page head and footer. For technically minded users — see Storefront CSS hooks.

In the same section, under the Navigation & layout divider:

ItemWhat it covers
Menu ManagementItems of the main menu, footer and category sidebar menu.
Footer BuilderComposing the footer from rows and blocks.
Listing ConfigurationProduct listing settings; the design parts are edited in Canvas.
Product listing bannerBanner above the product listing.

TIP

Items appear according to your permissions and enabled add-ons — if you don't see one, check the add-ons in System › Store features or the user's permissions.

After-add-to-cart behavior ​

Set it in Canvas › Basic settings (gear) › Cart behavior › After adding to cart:

  • Slide-out cart (default) — the cart panel slides out after a product is added.
  • Modal window — a window with recommended products opens.
  • No action — the customer stays on the page and only the cart count changes.

Checkout layout ​

Set it in Canvas › Basic settings › Checkout & cart › Checkout layout:

  • Everything on one page — the whole checkout on one screen.
  • Step by step (1 – 2 – 3) — 1 Shipping & payment (including the delivery country) → 2 Your details → 3 Summary. The next step unlocks for the customer only when the previous ones are filled in correctly. In the Canvas preview you can switch steps freely.

Shipping & payment at checkout ​

The shipping and payment method selector at checkout has two looks. Choose one in Canvas › Basic settings › Checkout & cart › Shipping & payment:

  • Pills — compact (default) — methods as small pill-shaped buttons.
  • Cards — detailed — full-width cards with the carrier logo, description, delivery time and price.

The pill colours (active and inactive state, border) are set in Canvas › Basic settings › Forms & toggles › Pill toggle buttons.

The same Checkout & cart section also holds Sign-in at checkout and the Preview as a guest shopper switch (for the preview only).

Smart checkout fields ​

The checkout has a few helpers that speed up filling in details and work automatically, with no configuration:

  • City suggestions with automatic postal code — as the customer types in the City field (delivery address), a list of cities appears after two characters. When the typed city matches exactly, the postal code field is filled with the most commonly used code for that city. If the customer typed the postal code themselves, it is never overwritten. Suggestions come from your own past orders (not an external service), so their quality grows with your order history; a brand-new shop with no orders simply shows no suggestions.
  • Native browser autofill — the checkout fields carry the correct system tokens (name, email, phone, street, city, postal code, company), so saved addresses and contacts from the browser fill in correctly and keep delivery and billing addresses separate.
  • Remembered details — an in-progress checkout is saved in the customer's browser (30 days), and a logged-in customer's address is prefilled from their last home-delivery order. It only ever fills empty fields — it never overwrites what the customer already typed.