10mShop

The designer

How the visual designer is laid out, and the one rule that makes it safe to experiment.

Esta página aún no está traducida. Se muestra en inglés; todo lo que describe funciona igual en tu idioma.

Design in the sidebar opens the visual designer. It builds your storefront out of blocks — a header, a hero, product grids, text sections, a footer — which you add, replace, reorder and style without writing anything.

The one rule worth knowing first

The designer edits a draft. Your live shop does not change until you press Publish.

That means you can rebuild your landing page in the middle of a working day, try five hero variants, undo a week of work through Version History, and nobody visiting your shop sees any of it.

The layout

The block list, on the left

Every block of the current page, in order. The double-chevron in its header collapses it to a narrow rail that keeps the block count and the add-block button — useful on a small laptop screen. The state is remembered per browser.

Half-width blocks are marked ½. Blocks switched off — a product reviews block while reviews are off — are marked as such and stay reorderable.

The page dropdown, top-left

Switches pages, and opens Manage pages… to add, rename, reorder (drag and drop) or delete pages. See Pages and navigation.

Three width buttons

Desktop, tablet, phone — showing the preview at full width, 768 px or 390 px. This is your storefront's own responsive layout at that width, centred on the canvas. The phone preview also has a phone's height, 850 px (less on a small screen), and sits in the middle of the canvas, so a section that fills the screen shows exactly what a phone shows. Edit Mode works at every width.

The switch is offered from laptop width up, always starts on desktop when the designer opens, and changes nothing in the shop itself.

The toolbar

Edit Mode (pencil) for inline text and image editing, AI Assistant, Theme, a clock icon for Version History, Preview, and Publish. Once you have published, a green Online button appears at the end.

On a phone

The block list is hidden below tablet width, because reordering blocks needs a mouse. A phone offers the preview, the AI assistant and Publish — enough to approve or publish something, not enough to rebuild a page. Moving a block needs a tablet or a computer.

Where to go next

En esta página

The designer — 10mShop