Themes

Open Online Store › Themes.

The live theme

A preview of your home page, with your own products, on a computer and on an iPhone, with your store’s address. While your store is closed with a password, Closed to visitors shows beside Live; choose it to open Preferences. From here:

• Customize opens the theme editor.
• Code editor opens the theme’s files.
• Restyle with the assistant: describe the look you want in a few words and the assistant proposes a restyle for you to review before anything changes. It designs to the same standards as Storeloom’s own pages: readable type and contrast, steady spacing, nothing added just for decoration, and no scripts in your theme.
• Add your own domain or Manage domains.

Theme library

Themes you can change and preview without changing your store, unless a market uses them. Each shows a small picture of its look (its page colour, text and buttons), so drafts are easy to tell apart. New theme adds a fresh copy of the default theme, design and code, whatever your live theme has become. Upload theme brings back a theme you downloaded from Storeloom (its .zip file) as a new unpublished theme; the whole theme is checked first, and a file from another platform belongs in Import and export instead. Duplicate live theme makes a copy named “Copy of” your theme (“Copy of” your theme 2, 3 and so on when that name is taken). To rename a theme, tap its name (the pencil beside it shows it can change), type, and press Enter; Escape keeps the old name. A name has at most 50 characters: as you near that, the field shows how many you have used (such as 46/50). No two themes of a store have the same name, whatever the capitals: a name another theme already has is refused, so choose another. For each theme in the library:

• Customize opens it in the theme editor, marked Unpublished. Its preview shows your changes, and the editor’s Save keeps them in that theme; your store is unchanged, unless a market uses that theme.
• Publish makes it your live theme after you confirm. When its home page still shows sample words or pictures (a section’s starting text, or an empty picture shown as a placeholder), the question names those sections first. The theme that was live stays in the library.
• ⋯ holds Preview (your store with that theme in a new tab, for an hour, only for you), Duplicate, Edit code and Theme text (that theme’s own files and words: saving keeps them in it, and your store shows them once you publish the theme), Download theme (.zip) and Delete (after you confirm). The live theme cannot be deleted, nor a theme a running or paused A/B test shows: the message names the test.

A theme a market uses (see Market settings) is live there, even though it is marked Unpublished here. Saving it takes permission to publish, and shoppers in that market see your changes at once. To work on it in peace, duplicate it and save the copy.

A store keeps up to 20 themes. Designers can customize, rename and duplicate themes, and save them unless a market uses them; owners and admins publish and delete them.

All pages at once

All pages in a theme’s menu, or under More beside your live theme, shows every page of the theme on one board: home, product, collection, cart, search and the rest, each a live preview. Drag to move around, use + and − or the wheel with Ctrl to zoom, Jump to finds a page, and As on a phone shows them at a phone’s width. Choosing a page’s name opens it in the theme editor.

Start from a look

Under Theme library, Start from a look adds a draft in one of the ready looks: Classic, Editorial, Bold, Soft, Minimal, Workshop or Meadow. Each sets its own colours, fonts and corners. Workshop is a light page with a near-black footer, red buttons and bold upper-case headings, made for shops that sell gear, tools and parts. Your live store does not change; customize the draft and publish it when you like it.

Meadow starts with a swipeable slideshow, collection tiles and a product shelf. Story, extra product and service sections are ready to fill and enable in the editor. It uses your store’s products and name; it brings no other merchant’s logo, photos, products or delivery promises. Choose your own pictures, products and collections in Customize, and set your logo, colours and fonts in Theme settings. Theme settings › Layout › Layout style switches its presentation between Classic and Meadow without replacing the page you have built. Starting a new theme from Meadow also gives it a wider page, the cart as its own page and Meadow’s home page; applying Meadow to a theme you already have (Theme settings › Theme styles) changes its colours, fonts, corners and layout only, and your pages stay as they are.

The draft uses the same current theme code as the other looks and receives the same offered theme updates. Your products, stock, payment methods and courier settings are separate from the theme.

Version history

Version history lists the versions of your live theme, and only its own: a theme in the library keeps its versions with it, and adding a look or a copy adds nothing here. Every save makes a new version, marked with where it came from: the theme editor, the code editor, the assistant, an import, a theme update, a landing page or an A/B test (a theme added from a look, copied, or kept when another theme was published starts with one too). To go back, choose Publish on an earlier one: the question names the theme and the version your store will show, and a notice says when it is live. To go back to another theme altogether, publish it from the library.

In the library, a theme says when it was last saved; one nobody has changed since it was added, copied or kept says only Unpublished.

Theme updates

When Storeloom improves the theme your store started from, a Theme update card shows what changed:

• New files and files Updated, untouched by you come in as they are.
• Your settings and page layouts, kept as they are: your theme settings (colours, fonts, logo), your page templates and your header and footer always stay yours. An update never replaces them.
• Code changed by you: your own code changes stay. Tick a file to take the new one instead (your changes to that file are not in the copy).

The new, updated and kept files are listed under their headings, folded: choose a heading to see its files. Make an updated copy puts the update in a new theme in your Theme library, named “(updated)”, with your settings and layouts. Your store does not change: preview or customize the copy, then Publish it when you are happy.

Motion, photos and menus

In the theme editor:

• Product information has Open photos full screen: shoppers open a photo, zoom in and look around. It is on at first.
• Image banner has Video behind the words: silent and looping, with the picture as its first frame. Shoppers who ask their device for less motion see the picture.
• Theme settings › Animations has Fade between pages, off at first.
• The header takes Menu panel blocks: choose the menu item by its name in your main language, then a picture with a link, or a collection whose first two products show under that menu. The panel stays under that item in every language, whatever its label there.
• The Calculator section gives shoppers a sum to work out: up to six numbers, and a Sum such as (a + b) / c.

Search on your store

The search icon in your store’s header opens a search box on the page the shopper is on. As they type, it suggests products, then collections, pages and articles by title, in the shopper’s language. There is nothing to set up.