22 min read

Online store

Your online store is the website shoppers see. You choose how it looks with a theme, and you change what is on each page in the editor, section by section, without writing code.

What this is for

• Changing your home page banner before a Diwali sale.
• Adding a “Notify me” button to sold-out products, or a PIN code delivery checker.
• Trying a new look on a copy of your theme, then switching to it in one click.
• Adding simple pages such as “About us”, “Shipping policy” or “Bulk orders”.

How it works

Every store has one Live theme (what shoppers see) and can keep others in the theme library, marked Unpublished. Inside a theme, each page type (home, product, collection, cart and so on) has a template made of sections. Your edits are kept as a draft while you work, and only reach shoppers when you Publish: on the Live theme that saves your changes, on an Unpublished theme it makes that theme Live.

The chip next to the theme’s name tells you where you are: Unsaved changes while there is a draft, Live or Unpublished once it is saved. Nothing you do in the editor is visible to shoppers until you publish.

On Online Store → Themes, each theme shows a picture of its home page, when it was last saved and by whom, and an Unsaved changes label when the editor holds edits nobody has saved yet. The picture updates by itself each time you save the home page in the editor; a theme that has never been opened shows its colours until then. Above the list are Import Shopify theme (see Import a Shopify theme) and Add theme (start from a preset). Themes and Preferences are two tabs under the page title.

Edit your store step by step

The sections list

Each section in the list has, from left to right:

• a grip to drag it up or down (or use the arrow keys after pressing space on it);
• an arrow that shows the section’s blocks (its slides, columns, logos or questions), if it has any;
• its name;
• an eye to hide it from shoppers without deleting it. Hidden sections stay in the list, crossed out, so you can bring them back;
• a ⋯ menu with Duplicate, Rename and Remove.

Rename only changes the name you see in the list, for example “Diwali banner” instead of “Image banner”. Shoppers never see it. Double-click a name to rename it quickly. The header, the footer and a page’s main content can be renamed and hidden but not removed.

Under a section’s blocks, Add block adds another slide, column or question with starter text, ready to edit on the right. Hover a block and select × to remove it.

The bar above a block

Click a section or a block on the page and a small bar floats above it, with its name on the left. It follows the block as you scroll, and it stays inside the page for a block at the very top. It has:

• A grip (six dots) on the left: drag it to move the block.
• Move up and Move down. They are greyed out at the top and bottom of the page.
• Duplicate and Remove.
• ⋯ More: Hide on the page (or Show on the page) and Copy, so you can paste the block into another page.
• For a block inside another block (a button inside a group, say), Select the container. Select it to jump to the block around it.
• While you are typing in a paragraph: Bold, Italic, Underline, Link and Clear formatting. To add a link, select some words, press Link, then paste an address or type a path like /about.

Pointing at a block outlines it with a dashed line and shows just its name. A selected block has a solid outline.

Check the page for mistakes (Audit)

Open the Layers panel and switch from Sections to Audit. The number on the tab says how many things to fix on this page. It looks for:

• pictures with no description (shoppers who use screen readers hear nothing);
• buttons that have words but no link;
• sections hidden on both phones and computers;
• empty headings;
• theme colours that are hard to read.

Each row says what is wrong and how to fix it. Select a row and the page scrolls to that block, which is selected so you can fix it at once. A colour row opens Theme settings. Blocks you hid with the eye are not checked. When the page is fine it says Nothing to fix.

Pages, Media and Theme settings

The strip of icons on the left opens these panels:

• Pages lists the pages and templates you can edit. Select one to switch. For templates that have alternates it shows how many items use each one, with a ⋯ menu to rename, duplicate or delete it. Create template makes a new alternate.
• Media shows the pictures in your store. Search them, or press Upload. Click a picture to put it in the section you selected (it goes into the first empty picture setting). Or drag a picture onto the page and drop it on a block, which is outlined with a dashed line while you hover. If no section is selected, it says to select one first. Add or tidy pictures in Content → Files.
• Theme settings shows the everyday choices first: your five main colours (Brand, Accent, Background, Text, Buttons; click a square to pick, or type a colour code), the heading and body fonts with a size of S, M or L, and button corners (Square, Soft, Round) with Filled or Outline and a sample. All colours, More type settings and More button settings open the exact controls. Below: Presets, Logo & favicon, Layout, Product cards and Checkout branding (opens in a new tab). The round arrow at the top puts the preset back.
• Page settings, on the home page, edits the search listing (SEO title and SEO description, with a preview of how it can look on Google), the Social image and Visibility: Published, or Password to lock the whole store with a password. Press Save page settings to keep them; they are the same settings as Online store → Preferences. On a product, collection, page or blog template it explains that each item has its own listing and links to the one you are previewing.

Zoom

The top bar shows the page width and zoom, for example 1440 PX / 60 %. Select it to pick Fit (the default) or a fixed zoom from 25 % to 200 %, or use Zoom in and Zoom out. Zooming changes only how big the page looks while you edit; it never changes the store. The bar above a block, the + insert line and the outlines keep their size.

Section settings

Select a section, open the Advanced tab on the right, and you’ll find Section settings with four groups. Each group shows a short summary when it’s closed (for example “Normal · Center” or “Mobile only”), so you can see what’s set without opening it.

Where to find it: Customize → select a section → Advanced. What to do: change the setting. What you’ll see: the page changes straight away; shoppers see it after you save.

• Layout
  • Content width: Narrow, Normal, Wide or Full. Pick one of the four buttons.
  • Alignment: Left, Center or Right.
  • Gap: the space between the items inside the section.
• Spacing (the space above and below the section)
  • Choose the screen under Editing: desktop, tablet or mobile. A section can be tighter on a phone than on a wide screen.
  • The box shows a Section block with a number above it (top) and below it (bottom). Type a number, or press − and +. Each press moves 4 px; hold Shift to move 40 px.
  • Quick sizes set top and bottom together for that screen: None, S, M, L or XL.
• Style
  • Colour scheme: small coloured chips named after your theme’s schemes. Pick one.
  • Background: switch between Colour and Image. Colour offers None, Text, Brand, Background, White and Custom (opens a colour picker). The theme colours follow your colour scheme and dark mode; a line named Current says which colour is on. For Image, pick a picture and set how dark the shade over it is.
  • Corner radius: None, Small, Med or Large. Border on or off. Shadow: None, Small or Medium.
• Advanced
  • Show on mobile and Show on desktop: hide the section on one of them.
  • Entrance animation: None, Fade, Slide up or Zoom, played as the section scrolls into view. A Preview label next to it plays the effect so you can see it without saving. Shoppers whose device is set to reduce motion see the section plain.
  • Anchor ID: a name for linking straight to the section, such as reviews.

Sections you edited before this panel existed keep looking exactly the same. Their old colour scheme and padding are carried into these groups the first time you open them.

A few sections show fewer settings, because their design decides the rest:

Blocks you build yourself (Group, Tabs and so on) keep their own Style panel.

Images

Every image setting works the same way:

1. Add the picture. Drag a photo from your computer straight onto the image box, or select Select to open your files. There you can search, pick from Recently used, or upload new photos (you’ll see each one’s progress). Use the arrow keys to move between photos and Enter to pick one.
2. Write the alt text in the box under the picture. It describes the picture for shoppers who use screen readers, and helps search engines. For example “Black mechanical keyboard on a wooden desk”.
3. Set the focal point. Click the part of the picture that must always stay in view, such as a face or the product. When a banner crops the photo to fit a phone screen, that spot is kept in the frame. You can also move the point with the arrow keys.

The ⋯ menu next to Change has Replace, Reset focal point and Remove. A new picture starts with its focal point in the middle again.

Links

Every link in a section’s settings (a button, a banner, a logo) uses the same picker:

• Search for anything in your store: products, collections, pages, blog posts and policies all show up together as you type.
• Browse a kind instead: select Products, Collections, Pages, Blog posts or Policies to see the whole list with its own search. Select ← to go back.
• Recent shows the last few links you picked, and Home page is always one click away.
• Paste a link at the bottom takes any web address, such as your Instagram page. It’s checked before it’s used, so a typo like htps// is caught.
• Open in a new tab, for buttons and banners, opens the link in a new browser tab. Use it for links that leave your store.

The link then shows as a small tag with what it points at, for example Glass mouse pad · Product, not a web address. Select × to remove the link.

Zero Drift theme sections

The sections that come with the Zero Drift theme are listed in Themes.

New sections

These sections are in the Add list alongside the originals:

Each one works in light and dark mode, has a phone layout, and uses the same Section settings as every other section. Sections based on outside design libraries say so under their name, for example “by Magic UI”. Moving effects pause for shoppers whose device is set to reduce motion, and so do the editor’s own small animations.

Version history

Every time a theme goes live (you publish it, or publish changes to the live theme) a version is kept: the newest 20 of each page. On Online Store → Themes open the theme’s ⋯ menu and select Versions. Preview shows the page as that version had it. Restore brings that version back as unsaved changes in the editor; shoppers see nothing new until you publish.

Fill a list from your content

Sections with rows (FAQ questions, quotes, logos, team members, photos) can take their rows from your store instead of typing each one. Under the rows select Use content from…, choose a content type (Content › Content types) or a collection’s products, how many rows to show (up to 50), and what each row shows. The rows on the page update by themselves when that content changes. While a list is linked you edit its rows where the content lives; Unlink puts back the rows you had typed. If the content is empty, your typed rows show instead.

Show your store’s own data in a section

Instead of typing a heading, a price or a picture into a section, you can connect the setting to something your store already knows. The section then shows the real value on every page, and keeps up by itself when you change it. On a product page, one banner can show each product’s own material, size chart image or price, without a separate template per product. Shopify calls this “dynamic sources”; it works the same way here.

App blocks

The Add panel’s Blocks side lists, under Apps, the blocks that installed apps give you. The core platform always adds Pre-order countdown (a launch countdown for a pre-order product). Installed apps add more:

If no app that adds blocks is installed yet, the tab says which ones do, with a link to install them. Uninstalling an app never breaks a page: its block stays in place but shows nothing to shoppers until you reinstall the app.

Pages

Your pages are listed under Content → Pages. See Pages.

Preferences

Store-wide site settings are under Online Store → Preferences. See Preferences.

Common problems and fixes

FAQ

Related guides