All Tutorials

Online store editor UI

All Tutorials

Online store editor UI

Online store editor UI

This partner beta allows you to explore and test new features and functionality. Some areas of the UI are not yet implemented; this will happen in stages. You may also experience errors as we continue to add more functionality. Features and functionality may change before the merchant release.

Learn more about the partner beta

When using a developer preview store with the "online store design experience" preview enabled, the online store area in the admin is updated. A merchant can hit the "Edit Store" button from the "Overview" page. This opens the online store editor. From the editor, a merchant is able to edit not only their theme, but all the pages of their online store. On the left hand side of the editor UI, all of the sections appear, just as they do today, in line with the preview on the right hand side of the editor UI. However, changes have been made to the UI and functionality of the theme editor for sections-compatible themes.

Enabling sections on a page

  1. Navigate to Online store > Pages
  2. Select Product pages
  3. Select a product page to open the online store editor
  4. On the left sidebar of the online store editor, click ... > page settings
  5. Click the “Enable sections” button.
  6. Click < Page editing button.
  7. You will now see “Product pages” added as a section, and an additional button with “Add section”:
  8. You now have the ability to add sections to a product page.
  9. Once you have made all the desired changes, hit “Publish” to save those changes.

When enabling sections, this occurs on a per page basis. Enabling sections on one page does not mean that all pages get sections added to them. To edit section enabled pages in bulk, see master pages.

Enabling sections on a page is only possible when the theme implements the sections architecture for that type of page.

UI changes

Top bar

  1. Exit: This will take you back to the admin.

  2. Undo and redo buttons: These buttons will undo or redo the last edits to your store.

  3. The search bar: You can navigate to various pages within your online store, rather than having to click through the preview options like today. When a merchant clicks on the product pages, for example, they would be presented with a list of all product pages in alphabetical order.

From here, you can go to product pages, custom pages, collection pages, blog posts, blog pages.

  1. To the right of the search bar is the device picker. A merchant can choose to view their store either in full screen mode, mobile view, or in a preview mode.

  2. The Summary tab. This will be a drop down that gives Merchants a resource-based summary of what has changed in their editing session.

Theme button

From the "Theme" button, a merchant is able to change their theme within the editor. It also allows them to configure colors, typefaces, social media links, the store’s favicon, checkout aesthetics, the theme style and font heading styles like they can do today. When a Merchant hits the theme button, they are presented with this:

Editing master pages

Within the editor, merchants are able to add a section to a single page, or they can add a section to multiple pages at once. If a merchant chooses to make a change to multiple pages at the same time, then they can select the "Master page" button in the bottom left of the editor. Doing this allows merchants to add one section that would be visible across all of their product pages as opposed to going to each product page and adding in the section individually. Merchants are notified at the top of the editor that they are editing the master page for their chosen content.

There are master pages for:

  • Product pages
  • Collection pages
  • Custom pages
  • Blogs posts

Adding and editing pages

Merchants have the ability to add a custom page to their store from within the online store editor. To do this they select the search bar, which has the option to create a custom page or a blog post.

When the "Create custom page" button is selected, the merchant is shown a blank page. On the left hand side of the online store editor, there are sections of header and footer, and the merchant has the ability to add in whatever sections they want to that page and order them as desired. The available sections can be predefined by the theme developer. To add the created page to their store menu, they will still need to add it in the admin through Online store > Navigation.

Creating blog posts

Merchants have the ability to add a blog post to their store from within the online store editor. To do this they select the search bar, which has the option to create a blog post.

A pre populated page appears in the online store editor with the "Blog post" and "Blog comments" sections. Blog posts now have a small, medium and full screen rich text editing experience. This gives merchants the ability to write quick form blog posts, as well as writing full page preview posts, within the online store editor. Merchants are also able to add images to the rich text online store editor so that they can write a post and paste a picture all within one place.

Draft changes

Merchants are able to make minor tweaks or ship major changes in drafts changes. This appears on the online store page. Drafts changes lets merchants edit and preview updates before publishing.

To begin editing drafts a merchant will go to Online Store > Overview in their admin. If there are no drafts saved, the merchant will be notified with a message letting them know there is no work in progress. Once a merchant hits the “start editing” button, they are taken into the online store editor. The top bar in the online store editor will let merchants know that the session they are in is a draft session with a label in the top left of the online store editor.

In drafts changes, a merchant can edit their pages, blog posts and theme. Once they are done with the changes, they have two choices on how to proceed:

Save

If a merchant saves draft changes, then their live store will be unaffected and the changes they have saved will remain in the draft area. The changes will only appear on their live store if the merchant goes back into the online store editor and publishes the changes.

After a merchant has saved their draft changes, when they exit the online store editor they are brought back to the online store page. The draft changes area on the Overview page will be updated to show their changes, and will look like this:

This shows the merchant what was changed in that saved session, and there is a “continue editing” button. If a merchant wants to publish their changes, they click on the continue editing button and then hit the Publish button (in the top right hand side of the online store editor). Once a merchant publishes their draft changes, the draft field is cleared and the merchant will be notified there is no work in progress.

Publish

A merchant can choose to make edits in the drafts changes and then make them live immediately. If a merchant wants to publish their changes, then they can click on the continue editing button and hit the Publish button in the top right of the online store editor. After this the summary tab will appear and inform Merchants of all changes made within their editing session.

Learn more about the online store design experience