The Storefront Studio is where you design your storefront and write its text, with your real store beside the controls. This article walks you round the screen, so you know where every control lives and how to see your store the way customers will.
Open the Studio
- In the sidebar, under Storefront, open Design. To land straight on the text instead, open Content.
The bar across the top holds everything that is not a design control:
| Control | What it does |
|---|---|
| The state under Storefront Studio | Says whether customers see what is on screen: Published, Unpublished changes or Not published yet. Before your first publish, while the setup list is not finished, Finish setup to publish takes its place, and until you use the link we emailed you at sign-up, Confirm your email to publish does. How each state works |
| ? beside the title | Opens the help article for the tab you are on, in a new browser tab: this article on Design, and Write your storefront text on Content. |
| Language switch (for example English and Arabic) | Shows the preview in another of your store’s languages. It appears only when your store sells in more than one. |
| Home and Product | Which page the preview shows. |
| The three device icons | Preview on a computer, a tablet or a phone. |
| The full-screen icon | Hides everything except the preview. |
| Generate with AI | Lets AI design the whole storefront and write its text from a short description. Generate your storefront with AI |
| Undo generation | Appears after an AI generation, until you leave or reload the Studio, and puts back the design you had just before it. |
| View store | Opens your live storefront in a new browser tab. |
| Save draft | Keeps your changes without showing them to customers. |
| Publish | Puts what is on screen live. |
Note
Before your store’s first publish, the Studio opens only once the setup list on your dashboard is done (connecting HyperPay can wait until you publish). Until then, opening it takes you back to the dashboard with the message Finish setting up your store before designing it. The list is on your dashboard. The setup list before your first publish
Design and Content
The control rail has two tabs at its top:
- Design holds everything about how the storefront looks: colours, fonts, spacing, buttons, product cards, the header, the order of the homepage sections, motion and the footer.
- Content holds the words: the announcement bar, the hero headline and buttons, the About section, the four trust badges, the reviews heading and the newsletter text. You write them for the language the preview is showing. Write your storefront text
Switching tabs keeps every unsaved change. The tab is part of the page address, so a refresh opens the same tab, and the sidebar’s Content link opens the Studio on that tab directly.
Every Design group, and where it is explained
The Design tab has twelve groups, in this order:
| Group | What it controls | Explained in |
|---|---|---|
| Theme preset | A complete starting look: palette, typeface, corners, shadows, density, and light or dark | Choose a theme, colours and fonts |
| Colour | Brand colour, accent colour and neutral tint | Choose a theme, colours and fonts |
| Typography | Typeface, heading and body faces, type scale and numerals | Choose a theme, colours and fonts |
| Layout & density | Product grid spacing, the space between sections, category tiles | Adjust spacing, buttons and product cards |
| Shape & elevation | Corners and shadows | Adjust spacing, buttons and product cards |
| Buttons | Button style and size, and the letter case of buttons and the storefront’s small labels | Adjust spacing, buttons and product cards |
| Product card | Image ratio, badges, colour swatches, quick add, star rating, auto-flip photos, low stock warning | Adjust spacing, buttons and product cards |
| Header | Your logo, the hero banner’s height, focus and photo, and three header switches | Set up your header and hero image |
| Homepage sections | Which sections show, and in what order | Arrange your homepage sections |
| About section | The About section’s height and picture | Arrange your homepage sections |
| Motion | How much the storefront animates | Adjust spacing, buttons and product cards |
| Footer | Payment methods and the WhatsApp button | Set up your footer and WhatsApp button |
The control rail: fold the groups, drag it wider
Twelve open groups make a long rail. Fold the ones you are not using:
- Click a group’s heading to fold it. Click it again to open it.
A folded group keeps its current setting on the right of its heading, so you can find what you want without opening each one. Homepage sections shows how many sections are showing out of the total, for example 8/8. The Studio remembers which groups you folded, in this browser.
To give the controls more room, drag the divider between the rail and the preview:
- Point at the thin divider between the rail and the preview.
- Drag it towards the preview to widen the rail, or back to narrow it. The rail goes from 280 to 640 pixels wide.
- Double-click the divider to put the rail back to its usual width.
The width is remembered in this browser too. On a screen narrower than 900 pixels, such as a small tablet, the rail sits above the preview instead and cannot be dragged.
The live preview
The preview is not a picture of a template. It is your real storefront, with your own products, categories, prices and reviews, showing your draft design. Every change you make appears in it at once, and none of it reaches customers until you publish.
You can scroll the preview and use it like the storefront: open the menu, look through the sections, try the storefront’s own language picker. If you pick another language there, the Studio’s language switch follows.
Preview on a tablet, on mobile or on a product page
Most customers will see your store on a phone, so check every change there before you publish.
- In the top bar, click the tablet icon (the middle of the three device icons).
- Click the phone icon to see the store at phone width.
The tablet preview is 820 pixels wide and the phone preview 390, so the storefront lays itself out exactly as it does on those devices. Click the computer icon to go back.
- To check the product page, click Product.
Product opens the page of your newest product, so you see your own catalogue rather than an example. If your store has no products yet, the preview stays on the home page. Click Home to go back.
Full screen
To see the storefront without the console around it:
- Click the full-screen icon, to the right of the device icons.
- To check a tablet or a phone at full size, click its icon in the small bar.
- Click Exit full screen to bring the controls back.
Preview another language
When your store sells in more than one language, the language switch at the start of the row of buttons in the top bar shows each of them. The Studio always opens in your store’s default language.
- In the top bar, click the language you want to see, for example Arabic.
Switching the preview language changes more than the preview:
- The Content tab now edits the text for that language.
- Typography lists the faces that suit that language’s script.
- Hero image focus, in the Header group, is set separately for each language.
Everything else on the Design tab, such as your colours, buttons and product cards, is shared by all your languages.
Stores that sell in one language
If your store sells in one language, the Studio has nothing to switch between:
- The language switch does not appear in the top bar.
- The Content tab has no Translate to other languages button.
- A store that sells only in English or French has no Numerals control in the Typography group. A store that sells only in Arabic keeps it.
You choose the languages your store sells in under Settings, and how many you can choose depends on your plan. Set your store’s languages and currency
View store: open your live storefront
View store opens your live storefront in a new browser tab, at your store’s NoqtaShop address. It shows what customers see right now: the published design, not the draft in the Studio. Use it after you publish to check the result.
Until your store’s first publish, customers, and View store, see an Opening soon page with your logo and store name instead of the storefront.
Draft, publish and what customers see
Your design moves through three stages:
- On screen. Every change shows in the preview at once and the state reads Unpublished changes. These edits are kept in this browser tab, even if you switch between Design and Content, reload or visit another page of the console, but closing the browser tab loses them.
- Saved as a draft. Save draft keeps your changes on our side, so you or a teammate can carry on later from any computer. Customers still see the old design.
- Published. Publish puts what is on screen live, and the state reads Published.
Read Save a draft and publish your storefront for every state, why Publish can be locked, and what to do when saving fails.
Next, give the storefront your look: Choose a theme, colours and fonts, or let AI build a first version for you with Generate your storefront with AI.