Overview of the Code Editor in the Square Online Dashboard

Describes the code editor features available in the Square Online dashboard.

The site editor in the Square Online dashboard includes a code editor that provides read and write access to the site’s underlying code, except cart and checkout pages. You can use the code editor to:

  • Add, remove, and organize site files
  • Modify file content
  • Preview your changes
  • Publish your site

Use the </> button in the site editor to open the code editor.

Developers who prefer to customize site code from their local development environment can use the Square Online CLI for file management.

If you don’t see this button for your new site, see Prerequisites to learn how to get the User ID and provide it to the Square team.

Code editor features

The code editor is a full-featured integrated development environment that allows you to author and deploy site code.

Top bar

  • Undo and Redo - Undo or redo your changes in the editor. Note that keyboard shortcuts are also supported.
  • Resources - Opens Resource Explorer where you can get information about site resources.
  • Publish - Publishes your site.

Top bar controls in the code editor.

  • Search - Searches file names and directories.
  • Site code - Directory tree explorer where you can browse files. Depending where you are in the tree, lets you add, rename, delete, cut, copy, or duplicate files and directories.
  • Add new page - When you add a new page in the site directory, a modal opens where you provide the page name, page URL, and associate the page with a new or existing template.

Side bar controls in the code editor.

Editor pane

  • Editor - Pane with a tabbed interface where you can view and edit the content of your site files. Has a context menu with editing commands and access to the Command Palette with formatting, navigation, and other commands.
  • ••• - Lets you share a draft that expires in 7 days.
  • Save - Lets you save your changes or indicates a Saving or Saved status.
  • Preview - Generates a preview of your site where you can view your changes.

Editing pane controls in the code editor.

Resource Explorer

The Resources button opens the Resource Explorer where you can select resource types (such as Item/Products, Categories, and Locations) to get resource IDs and view resource definitions.

The Resource Explorer.

Access the code editor

To open the seller’s Square Online dashboard:

  1. Sign into the Weebly for Web Designers portal using your Weebly for Web Designers account credentials.
  2. Open the Square clients page.

  3. In the corresponding entry for the seller, from the Actions column, choose Login to edit.

    The Square Online dashboard opens. Although you’re signed in under the seller’s account, your access is limited to features that are available on Online pages.

To open the code editor in the Square Online dashboard:

  1. If needed, choose the target site from the site switcher dropdown menu.

    The site switcher dropdown menu.

  2. Choose Edit site to open the site editor.

    The Edit site button.

  3. Choose </> to open the code editor.

    The Open code editor button.

  4. Expand the site and theme directories. If the theme directory doesn’t exist, use the theme install command in the Square Online CLI to create it. For steps, see Get Started.

    The code editor with the site and theme directories expanded.

Note:

Currently, the code editor can only be accessed for new sites. In addition, the code editor only supports editing of page, template, and other files that are added to the site or theme directory using the code editor or Square Online CLI. If you try to edit a page created using the site editor, you’ll see the message: “This page was built in the design editor. It cannot be edited in the code editor.”