Site Architecture Overview
Describes the directory structure of a Square Online site.
A Square Online site has two top-level directories: site and theme.
Site
The files in the site directory represent site pages and settings. Page files can reference site catalog resources, such as item and category IDs.
site
├── pages
│ ├── page1.json
│ ├── page2.json
│ └── ...
├── settings
│ └── settings.json
└── store
└── store.json
Pages in the site/pages directory always have a corresponding page template in the theme/templates/pages directory.
Theme
The files in the theme directory define the theme, which determines the look and feel of the site. Each site can have one theme that applies to all site pages. A theme consists of template files in a specific directory structure.
Templates in the templates/pages/store directory are System Page Templates, meaning they override existing Square Online pages.
An example
theme
├── assets
│ ├── css
│ ├── javascript
│ ├── images
│ └── fonts
├── config
│ |── theme.json
│ |── header.json
│ └── ...
├── layouts
│ ├── layout1.html.twig
│ ├── layout2.html.twig
│ └── ...
├── partials
│ ├── components
│ │ ├── banner.html.twig
│ │ └── ...
├── templates
│ ├── pages
│ │ ├── default.html.twig
│ │ ├── page-type1.html.twig
│ │ ├── page-type2.html.twig
│ │ └── ...
│ ├── store
│ │ ├── item.html.twig
│ │ ├── category.html.twig
│ │ ├── shop.html.twig
│ │ ├── order.html.twig
│ │ ├── search.html.twig
│ ├── stories
│ │ ├── stories-index.html.twig
│ │ ├── post-default.html.twig
│ │ ├── post-type1.html.twig
│ │ ├── post-type2.html.twig
│ │ └── ...
│ ├── account
│ │ ├── account.html.twig
│ │ ├── login.html.twig
│ │ ├── register.html.twig
│ │ ├── payments.html.twig
│ │ └── orders.html.twig
│ ├── components
| │ ├── dialogs
| │ │ ├── gallery-content.html.twig
| │ │ └── ...
│ └── utility
│ ├── robots.txt.html.twig
│ └── 404.html.twig
└── translations