Design Studio
On this page
Design Studio is where you shape what shoppers see. You work on a design: a saved version of your storefront made of sections, colours, fonts, a header and a footer. You can keep several designs side by side, try ideas freely, and choose which one is live.
Nothing you do in Design Studio reaches shoppers until you publish it.
Your designs#
Open Design Studio from your desk. Each design appears as a card with a snapshot of its home page. The design shoppers see now carries a Live badge.
Each card has these actions:
| Action | What it does |
|---|---|
| Open | Shows the site flow so you can pick a page to edit. |
| Preview | Opens the design as a full store in a new tab. Only you can see it. |
| Publish | Makes this design live for every shopper. |
| Unpublish | Takes a live design down. Shoppers see the plain base theme until you publish a design again. |
| Rename | Changes the design name. Shoppers never see it. |
| Delete | Removes the design for good. This cannot be undone. |
Create a design#
To start a new design:
- In Design Studio, click New design.
- Choose how to start:
- Redesign a template starts from one of Kartlo's ready-made looks.
- Start from scratch gives you a clean neutral base and a blank page to build section by section.
- Under Name your design, type a name, for example Summer look.
- If you chose a template, pick a look under Pick a look.
- Click Start designing.
Pick a page in the site flow#
When you open a design, the Site flow map shows every page of your storefront and how shoppers move between them. The main path runs from Home to Collection, Product, Cart, Checkout and Order status. Other pages hang off it: Search, Wishlist, All products, All collections, Content pages and Account.
Each page shows Designed once you have changed it, or Default look if it still uses the standard layout. Click Edit on a page to open it in the canvas editor.
Edit on the canvas#
The canvas editor shows your real storefront in the middle, a list of sections on the left and the settings of whatever you select on the right. Click any section on the canvas or in the list to edit it.
Along the top bar you will find:
- A page switcher, to move to another page of the same design.
- Undo and Redo. Keyboard shortcuts Ctrl+Z or Cmd+Z also work.
- Build and Preview, to switch between editing and seeing the page as a shopper would.
- Desktop, Tablet and Mobile, to check the page at each screen size.
- Files, to open your media files.
- Tour, a short guided walk through the editor.
- History, for earlier versions and Save as.
Add and arrange sections#
A page is a stack of sections such as a hero, collection tiles, a product row, image banners, rich text, video, a newsletter sign-up, a countdown or a featured product. Many sections come in several layouts, shown as small previews when you add them.
To add a section:
- In the left list, use Add a section above or Add a section below on an existing section.
- Pick a section type, then pick a layout.
- Fill in its text, images and links in the panel on the right.
In the list you can also drag sections to reorder them, move them up or down, duplicate them, hide them, or remove them. A hidden section stays in your design but shoppers do not see it.
Colours, fonts and store-wide settings#
Click Whole store in the right panel to change the colours and fonts used across your storefront. Tap a swatch to change a colour; a dot marks colours you changed. Below the colours you will find Fonts and Store-wide settings.
Each section also has its own settings, such as spacing above and below, heading size and colour overrides, so one section can stand out without changing the rest.
Header and footer#
Select the header or footer on the canvas to edit it. You can choose a header style, edit your logo, and set what the header shows, such as the menu, search and cart icons. In the footer you can arrange its blocks and add links to your social profiles. The menu items themselves come from your collections; see Navigation menu.
Payment icons in the footer#
Select the footer, open Footer in the settings panel and go to Payment icons. Switch on each card, wallet or payment option you want shoppers to see, such as Visa, Apple Pay or Tabby. The footer shows exactly the icons that are on, in the editor and on your live store after you publish. Until you change one, the footer shows the payment methods from your store settings.
Save, drafts and history#
While you edit, Design Studio keeps a draft of your changes automatically. If you close the editor and come back, a bar offers to Continue where you left off or Discard the unsaved changes.
- On a design that is not live, click Save to save your work.
- On the live design, click Save draft to keep your changes without touching your live store, and Publish changes when you want shoppers to see them.
Every save keeps the previous version under History. Click Restore next to a version to go back to it. To branch off, type a name under Save as a new design and click Save as; the original design stays untouched.
Make a design live#
To publish a design:
- In the editor, click Publish. You can also use Publish on the design card.
- Confirm. Unsaved changes are saved first.
Before a design goes live, Kartlo checks it. If something would leave shoppers stuck, you see Fix these before going live and must fix it first. For example:
- The home page is empty, or every section on it is hidden.
- Shoppers have no way to reach your products from the home page.
- A page lost the block it needs, such as the product details on the product page or the checkout form on the checkout page.
Smaller issues, such as a hero with no heading or image, show as A few things to check. You can fix them or click Make live anyway.
Design Studio on a phone#
You can open Design Studio on a phone to check designs and make small changes. The big edits, such as building pages section by section, work best on a laptop or desktop screen.