The store designer

The store designer is where you build your storefront — you edit sections, change colours and type, preview at different sizes, and publish your changes live.

বাংলায়: স্টোর ডিজাইনার খুলুন Store পেজ থেকে Customise বাটনে ক্লিক করে। এখানে আপনার দোকানের সকল পেজ (হোম, পণ্য সংগ্রহ, খোঁজা) এক জায়গায় কাস্টমাইজ করতে পারবেন। বাঁ দিকে বিভাগ তালিকা, মাঝে প্রিভিউ, ডান দিকে সেটিংস দেখা যায়। যা করছেন সেটা সংরক্ষণ না করলে বন্ধ করতে পারবেন না।

Where to find it: Sidebar › Store › Customise Who can do it: Anyone who can manage your storefront

Opening the designer

Click Store in the sidebar, then click Customise on the theme you want to edit. The designer opens in full screen.

You can also jump to a specific landing page's editor by opening Pages on the Store page and clicking Open.

The designer reads the live theme's draft (the unsaved version). If you open the designer on a theme that has never been published, you start with an empty canvas.

Permission and error notices

If you do not have permission to edit this storefront, you see "Sign in with an account that can manage this storefront."

If the theme has no design yet, you see "Create a theme from the store page, or ask OmniAI to create one, then open the designer again."

Exiting with unsaved changes

Click the back arrow in the top left to exit. If you have unsaved changes, a dialog appears asking "Your edits have not been saved. If you leave without saving, they will be lost."

• Keep editing — stay in the designer
• Leave without saving — close the designer and discard your changes
• Save and leave — save first, then exit

Refreshing the browser tab or closing it also prompts you to save.

The designer workspace

The designer has four zones: a top bar, a left sidebar, a centre preview, and a right settings panel.

Top bar (left to right):

• Exit (back arrow) — leave the designer
• Sections / Theme settings / Offers toggle buttons — switch the sidebar mode, or hide it
• Store menu and theme (centre) — jump to version history, menus, pages, custom sections, or offers
• Save state badge — shows Saved, Unsaved changes, Saving…, Edited elsewhere, Offline, or Not saved
• Page template selector — pick which page you are editing (Home, Product, Collection, etc.)
• Device switcher — Desktop or Mobile preview
• Zoom — scale the preview in or out
• Undo / Redo buttons
• Check page button (red if problems found)
• Save button — manually save your work
• Publish button — make your changes live

Left sidebar — starts in Sections mode, showing the page as a tree:

• Header band (top)
• Home page or the page you are editing (middle, expandable sections)
• Footer band (bottom)

Click the Sections, Theme settings, or Offers buttons to switch modes, or click the active one again to hide the sidebar.

Centre — a live preview of your storefront. Click on any element to select it for editing. Right-click to see move, duplicate, hide and delete options.

Right settings panel — appears when you select a section or block. Edit its name, colours, text, images, and layout here. Closes when you deselect or click the X.

Previewing the store

Device switcher

Choose Desktop (1,440 pixels wide) or Mobile (390 pixels wide) to see how your store looks on each device. The preview reflows in real time.

Zoom

Click the − or + buttons to zoom in and out. The zoom steps are 50%, 65%, 80%, 90%, 100%, 110%, 125%, 150%. Click the percentage to reset to 100%.

Click to select

Click any section or block in the preview to select it. The outline tree on the left highlights it, and the settings panel on the right opens so you can edit it.

In-frame toolbar

When you hover over a section or block, a floating toolbar appears with buttons to:

• Move up / Move down — change the order
• Duplicate — copy it
• Hide / Show — toggle visibility
• Delete — remove it (destructive)
• Ask AI — rewrite or redesign it (when AI is enabled)

Right-click anywhere in the preview to open a menu with the same options.

Scroll sync

When you select a node in the outline tree or inspector, the preview scrolls to show it — unless you are scrolling manually in the preview.

Shortcuts and limits

Keyboard shortcuts work everywhere in the designer except inside text fields (except Ctrl/Cmd+K for the AI bar).

In the outline tree (left sidebar):

• Arrow keys — navigate the tree
• Enter — select the node
• F2 — rename the node
• Space — drag to reorder

Limits:

• Undo history — 100 steps
• Block nesting depth — 8 levels
• Per-page custom CSS — 20,000 characters
• Node name — 120 characters
• Typing coalesce — edits within 700 ms of each other count as one undo step

Questions people ask

Why can't I close the designer without saving?

Saving is mandatory before you can exit — the designer wants to make sure you do not lose work by accident. If you want to discard your changes, click Leave without saving.

Can I undo a publish?

No. Publishing is permanent — your changes go live right away. You can revert to an older version from the Version history dialog (top-bar store menu). Undo (Ctrl+Z) only affects unsaved edits in the current session.

What if I make a mistake?

Use Undo (Ctrl/Cmd+Z) to step backward one edit at a time. You can undo 100 steps. If you have already saved and closed the designer, you can restore an older version from Version history.

Other ways people ask this

• designer kothay
• store design korbo kivabe
• preview dekh desktop mobile te
• designer save korbo kivabe
• zoom in out designer te
• undo redo designer
• storefront design korbo
• থিম কাস্টমাইজ করব কীভাবে
• customize theme interface
• where is the save button designer
• keyboard shortcuts designer
• preview my store design
• exit without saving

Related pages

• Add, arrange and edit sections and blocks — how to work with the outline tree and settings panel
• Save, publish and restore versions — how saving and publishing work
• Choose a theme — how to pick and switch themes before you enter the designer

Checked against the product on 2026-10-02.