Intro to the Editor

The Nyla Editor allows you to set up your site structure, configure its look and feel, add interactions, integrate with apps, and manage content to create a fully functioning, best in class ecommerce website.

In the Editor you can visually edit your site and add customized interactions without writing any HTML, CSS, or Javascript, and Nyla will generate fast, converting experiences.

Accessing the Editor

Nyla can be accessed by going to your Shopify Admin → Apps and locating Nyla in the list. Clicking on the Nyla app will launch the Nyla Editor.
Editor requirements: supported browsers
Nyla officially supports the Editor in the latest version of Google Chrome. Please ensure your browser is up to date when using the Editor.
Screen resolutions
The Editor requires a screen width of at least 700px, though we suggest a minimum width of 1200px for a good editing experience. This requirement allows for enough space to see both the sidebar and the preview.

The main menu

The main menu of Nyla is located on the left side of the Editor and allows you to navigate to Pages, Media, Design, Apps, A/B Tests, Settings, and Publish.
Main menu.png
  • Pages: This opens the pages panel where you can organize and manage all the pages of your site, including your home page, product pages, collection pages, account pages, other content pages, folders and more. 
  • Media: Media is where you can manage all the images and videos you’ve uploaded throughout your website. 
  • Design: The design panel is where you can manage the global design styles used throughout your website. 
  • Apps: Apps is where you manage the app integrations that are active on your site. Add or remove apps, and access app settings.
  • A/B Tests: The A/B Tests area lets you create variants of your website to test for ideal user flows or conversion improvements.
  • Settings: Settings is where you can manage central Nyla settings. This section is for advanced users only.
  • Publish: This opens the Publish flow, which gives you access to site changes, and allows you to selectively publish changes and updates to your site.

Anatomy of the Editor

The Editor consists of the main preview, a left toolbar, and a top status bar. Below is an overview of the following:
  1. Left panel
  2. Status bar
  3. Preview
 
Left panel
Left panel.png
The left Panel enables you to browse to different parts of the Editor.
 
Status bar
Status bar.png
The status bar enables you to see the publish status of your content.
 
Preview
Live preview.png
The preview allows you to see updates in real time and preview the draft version of your pages and templates.