Theme editor

Open it from Online Store › Themes and choose Customize. The editor fills the window: your settings on the left, a live preview of your store on the right. The preview shows your own products, collections, menus and pages, with your unsaved changes; the line under it says so. Sample products stand in only when your store has nothing of that kind yet. Preview in market, beside the page, shows it as shoppers in that market’s first country see it: your products at the market’s prices, in its currency, with the changes made for that market.

The top bar

• Themes goes back to your themes.
• The theme’s name, with Live when it is the theme shoppers see. The ⋯ menu holds the theme’s own actions.
• Page to customize chooses the page you edit: the home page, a product page, a collection, the cart and others, including templates you made. On a product, collection, page, blog or post template, Show in the preview under the list finds one of your own by name (the same search box) and draws the page with it. At the list’s foot, Checkout and gift card pages leads to their look: they are not theme pages and take your checkout’s colours and logo.
• The computer and phone buttons switch the preview, in a short dissolve; your page stays loaded and where it was. On phone, your store is shown in an iPhone (the width of an iPhone 16, 17 and 18 Pro Max, with the iPhone 18 Pro’s Dynamic Island and the status bar), always fitted to the editor when you turn it on. Safari chooses where Safari’s bars sit, as on your iPhone (Settings › Apps › Safari): Compact, Bottom or Top.
• On phone, the size control at the bottom right of the preview changes the phone’s size: − and + by one percent (ten with Shift), or choose Fit, 50 %, 67 %, 75 %, 90 % or Real size, the size of the phone in your hand (163 mm tall with its frame). A phone taller than the editor scrolls: scroll beside it to see the rest. Match my screen… makes Real size exact on your computer: hold a bank card against the outline and drag until they are the same size; it is remembered on that computer.
• The inspector button: when on, pointing at the preview outlines a section and clicking it opens its settings, in every browser including Safari. On a phone, tap a section in Preview and its settings open. With the inspector off, links in the preview open their page in the editor. Either way the page’s own controls work in the preview: the menu button, accordions and option choices.
• The buttons from the inspector to Save stay at the right edge of the bar, so switching between computer and phone never moves them. The editor wears your admin colour, as the rest of the admin does (Settings › General › Admin colour).
• Undo and Redo step through your changes.
• Hide sidebar (the panel icon next to Undo and Redo, for a full-width preview), Keyboard shortcuts and the Assistant, which can make changes for you when you ask in plain words.
• On your live theme the button reads Save and publish, beside a Live badge (at every width): it publishes your changes as a new version of the theme. Earlier versions are kept, so you can go back.
• A theme from the Theme library opens marked Unpublished: Save keeps your changes in that theme without changing your store, and Publish makes it live (see Themes): it asks first, naming the home page’s sections that still show sample words or pictures. A picture you choose here is described for screen readers only by the description it has in Files; write one under Description for screen readers when the picture says something. The assistant and Theme options work on the live theme, so they are not shown there.
• A theme a market uses opens marked Live in and the market’s name, as it is live for that market’s shoppers: the button reads Save and publish, it takes permission to publish, and they see your changes at once. Without that permission the editor says so and nothing is saved; duplicate the theme and work on the copy.

Sections

The Sections tab lists the page’s parts from top to bottom: the Header group, the page’s own sections, and the Footer group.

• Drag a section by its handle to move it.
• Each row has Duplicate, Remove and Hide, shown when you point at the row or move to it with the keyboard, and always on a touch screen and on the section you have open (hidden sections stay in the list, with their crossed-out eye, but shoppers don’t see them).
• Add section opens a list you can search, such as Image banner, Rich text, Featured collection, Collection tabs, Logos or Reviews. The search also knows the everyday words for them: newsletter, subscribe or sign up finds Email signup, contact finds Contact form, banner the banners and heroes, logo Large logo. A section added from one of these kinds keeps its kind’s name in the list (Hero, Large logo, Email signup), as its Name in the editor, which you can change.

Click a section to open its settings. What you change shows in the preview at once. The page’s sections show their blocks under them, indented, including the blocks a section places itself, such as Product card in Featured collection, with the card’s own blocks under it; the arrow beside a section hides or shows them. The header’s and footer’s sections keep theirs closed until you open them or choose one. A section can have blocks (a heading, text, a button and so on): add, drag and remove them in its Blocks list, and click one to open its settings.

A Text block and the Rich text section take formatting: choose a paragraph’s style (paragraph or heading), Bold, Italic, Underline, a Link, bulleted and numbered lists, and Clear formatting. Your store keeps only safe formatting; text written before formatting existed still shows a paragraph per line. A theme gets this with a theme update.

Choose an image opens your store’s pictures: every image you have uploaded, with a search. Click one and Use picture (or double-click it). To add your own, drag pictures from your computer onto the window, or choose Upload from this device; an uploaded picture is used at once and kept in Content › Files. Then set the picture’s description for screen readers and its focal point. The red bin in the picture’s top right corner removes it from the setting (it stays in Content › Files); a video has the same bin. Edit opens the picture tool (turn, crop to a shape, or trim empty edges); the result is kept as a new file in Content › Files, the original stays.

A section’s Colour scheme chooses its colours from the theme’s schemes. Create a colour scheme makes a new one from the scheme you are on, chooses it for the section and opens its colours: background, text, buttons and button text, each picked or typed as a hex code (#102a43). Text and buttons must stay readable (4.5:1); the ratio shows as you change them. Edit changes a scheme for every section that uses it. All schemes are in Theme settings › Colors.

Featured collection and Collection list can be a Carousel (Layout › Carousel), a row that scrolls sideways on phones and computers. On a computer with a mouse, Chrome and Edge show previous and next arrows; other browsers scroll it by trackpad and keyboard. Your store gets the arrows with a theme update.

A Collection list chooses the shape of its tiles and how the pictures sit in them; so does the page of all your collections (Page to customize › All collections, its Collections list page section):

• Picture shape: Wide (16:10), as before, Landscape (4:3), Square, Portrait (4:5), or Same as the first picture: every tile takes the shape of the first collection picture you uploaded to Storeloom (a picture from a web address has no known size, so the tiles stay wide), kept between 2:3 and 3:1. Every tile has the same shape, so a row stays level. The Bento and Editorial layouts keep their own shapes.
• Pictures in their tiles: Fill crops the picture to the tile, Fit shows the whole picture with space around it, Stretch and Original size; As in Theme settings follows Theme settings › Images › Collection pictures on tiles. A collection whose picture has its own framing (on the collection’s page in the admin) keeps it; one set to Automatic follows this.

In a Collection list, untick Show each collection’s name and Show how many products each has when your pictures carry the names themselves, such as brand logos; screen readers still read each name. A collection you add as a block can have its own Picture, on this tile only.

The collection page’s Product grid section can show Category links beside the products: choose one of your menus and its links sit above the filters on a computer, and in the filter sheet on a phone, under Heading over the links (Collections when you leave it empty). The links go three levels deep; the branch of the page being shown opens, the others show their first level. On phones chooses one or two products per row, or leaves it to the grid, and Show the collection’s picture beside the text below puts the collection’s picture next to its description when the description sits below the products. A filter with more than eight values shows the first eight and the rest under View all, already open when one of them is chosen.

A Custom section's Width can be Page width, Text width (narrower, for reading) or Full width. A Rich text section’s Button can be Outlined or Filled.

Every section also has:

• Spacing: the space above, below, left and right of the section, each on its own, and the space between its elements, in pixels. Leave a field empty to follow the theme.
• Corners: square, or rounded by 4, 8, 12 or 16 pixels; pictures in the section follow the rounded edge. Not on the header and footer, whose menus open past their edge.
• Custom CSS: style rules for this section only.
• Move to another area, for example from the page into the footer.

Headings and text

A Heading block chooses its Text style (Heading 1 to 6, body text, small text or the line above headings) apart from its Heading level (H2 to H6, for search engines and screen readers), so a heading can look large without confusing search engines. Heading and Text blocks can have their own size in pixels and font.

Beside a text field’s name are two small buttons. Fill in from your store (the stack icon) adds something the store fills in on each page: the store’s name everywhere, and the product’s title, subtitle, brand or description on a product page, or the collection’s title or description on a collection page. The field shows it as a short code such as {{ shop.name }}, and the preview shows sample values. Write with the assistant (the sparkle) proposes a text for the field; you see it before you use it, and each proposal costs AI credits.

A section’s own heading has a Heading style: Heading 1 to 6, Body text, Small text or Line above headings, with each style’s size in Theme settings › Typography. It changes the look only; what search engines and screen readers read as a heading stays the same.

On a computer, moving the pointer over a section in Add section shows an example of it beside the list, at once, so you can see what it looks like before you add it.

The same Fill in from your store button sits beside image and video settings when your products or collections have image or video fields in Settings › Custom data. Choosing one shows the field’s name in place of a picture, with Remove to go back. Every image setting offers Upload image and Choose image.

The product page

On a product page, the Product information section’s blocks are the product’s details: Product title, Language switch, Price, Choices and stock, Buy buttons and Product description, and Specifications, Delivery estimate and Review stars when you add them. Drag them into any order and put any other block between them, such as text, a group, an image, an accordion, a badge, a notice or a trust line.

Product bar is a section to put above the product: the product’s name, links to the page’s chapters, and a Buy button that takes shoppers to the buy box, kept at the top of the screen while the header scrolls away. Give the sections below an Anchor name in their settings (such as design or specs), then add a Chapter link to the bar for each; on phones the links open from the product’s name.

Compare models puts two or three of your products side by side: their pictures, colours, prices and a Buy button, then their Specifications in rows, matched by name. List the specifications to compare, one per line, by their names in your main language, or leave it empty to show all of them; in another language the rows take the names you translated. A product without one shows a dash. On phones the table scrolls sideways.

Photo layout in the section’s settings chooses how a product’s photos show: a large photo with thumbnails, every photo one under another (the details then stay in view as shoppers scroll), a mosaic with one wide photo and then two, or a row to swipe with thumbnails that take shoppers to each photo. On phones every layout but the first is a row to swipe, with the photo’s number on it. A product with one photo shows it the usual way.

The product blocks work in the other sections of a product page too, showing the same product. Where there is no product (the home page), shoppers see nothing and the editor shows a note. Review stars show only the product’s own published reviews; the Rating block shows stars and words you type yourself.

Recently viewed is a section that shows what the shopper looked at during this visit. It stays hidden until there is something to show, and the list stays in their browser. No cookie is set.

The buy block lists where the chosen variant can be picked up, once a location has pickup on. With stock per location on, only the places that hold it show.

Order several is a block for the product page: a row and a quantity for each variant, added to the cart together. Rows left at 0 add nothing.

Product cards

The Featured collection and the collection page lay out their product cards once: open the section and choose Product card under its fixed blocks. Its blocks are Brand, Title, Detail line, Price, Colours, Review stars, Caption and Text; add, drag and remove them, and every card in that list follows, each with its own product. A card’s picture, sale and sold-out badges, second picture on hover and quick add stay as Theme settings › Product cards set them. With no blocks, a card shows its title, price and colours.

Slideshows

A slide can have a Picture on top, such as a product with a clear background, over its main picture. Set Its width and where it sits with Across and Down.

The header

The Header section chooses the logo’s place on computers (left, centred on its own line above the menu, or right), what happens to a menu too long for its line (the rest under More, or a second line), the menu’s alignment, its Menu letters (As written or Capitals), how The current menu item shows (On a soft background or In the accent colour), the language switch, and an optional row of links under the header on phones: every link of the header’s menu, the links in its dropdowns after their parent, or another menu you choose for it.

Over the first banner on the home page lays the header over an image banner or slideshow that opens your home page. Choose light or dark words to suit your picture. The header then scrolls away with the page, even with Stay at the top when scrolling on.

Right-click a section to Duplicate section, Hide section or Remove section.

Work on what you clicked

Click a section or block in the preview and a small bar appears beside it with its name. It sits just above what you chose, and never over your store’s header: for a section right under the header, it sits inside the section’s top, so the header’s search and cart stay in view. Ask opens a box there: type what you want changed and press Send, and the assistant opens with your message, which names that section or block. The box also holds its main settings, so you can change them with the sidebar hidden or on a phone, and All settings opens the rest. Press Esc to close it. The assistant works on the saved theme, so save your changes first.

Theme settings

The Theme settings tab holds what applies to the whole store, from your colours and fonts to corners and animations. It has its own page in these docs.

Saving and leaving

While you have changes, the preview’s foot counts the unsaved files. They are also kept in this browser: if the tab or the computer closes before you save, the editor offers them back the next time (Restore them or Discard them), for every file nobody has saved since. Save and publish publishes them (Save on a draft keeps them in it). If you leave with changes, Storeloom asks whether to Save changes or Discard changes.

If the theme changes elsewhere while you edit (the assistant, the Code page or a colleague), your edits stay and so does Save. Only a page or setting you edited that also changed elsewhere is held back: a note names it, your other changes still save, and Load the latest version takes the newer one in place of your edits there.