Theme structure
ShopWired themes use the following directory structure. Required Twig templates and files are also included.
.
├── root
| └── settings.json
| └── theme.json
├── assets
| └── fonts
| └── images
| └── js
| └── scss
| | └── theme.scss
├── views
| └── macros
| └── partials
| └── sections
| └── templates
| └── home.twig
| └── master.twig
root
The root directory contains the settings.json and theme.json files, the theme's configurations.
assets/fonts
The fonts directory contains any fonts used by the theme. Newer versions of ShopWired themes use Google Fonts for typography but still retain other font files for icons.
sw_account font files serve icons on the customer account pages of the website.
Each theme will have a set of font files for icons used throughout the rest of the website.
assets/images
The images directory contains all of the images used by the theme. Use the to reference an image file within your theme.
assets/js
The js directory contains any JS files in use by your theme.
ShopWired themes also use a shared, centrally hosted plugins.js file at https://s3-eu-west-1.amazonaws.com/shopwired-theme-assets/v3/js/plugins.js which can be hosted directly within theme files if required.
assets/scss
The scss directory contains any SCSS files to be compiled via the theme.scss file into a single theme.css file for your theme.
You can host CSS files in this directory too.
views
The views directory contains the Twig files for each page on the theme. Any Twig file can be created in this directory to render on the website, but certain file names are reserved for platform use (such as product.twig for rendering product pages).
views/macros
The macros directory contains two separate macro Twig files. are imported into themes in the master.twig Twig file, and then used throughout the theme.
- html macros for common HTML elements such as buttons or select lists
- theme macros for common theme code such as menus and forms
views/partials
The partials directory contains Twig files that host smaller reusable snippets of code. These files can be referenced throughout a theme using the
views/sections
The sections directory contains a theme's Twig files responsible for rendering sections on Version 5 themes (earlier theme versions don't use a sections directory).
views/templates
The templates directory contains a theme's . They control what's rendered on each type of page.
ShopWired expects a theme to have a master.twig file which sets the overall layout and configuration of the theme, including the <head> and <body> sections.
