Menu Close

Get Support From ShopWired Close

All systems fully operational

Subscribe To Updates
Prefer To Live Chat? Chat directly with ShopWired support Available from 9.00am to 10.00pm Monday to Friday Quickest response time
Send A Message
Response within 24 hours

Menu Close


Theme structure and views

Our themes are comprised of Twig view files. Each view file (like product.twig) has its own purpose. For example, product.twig renders a product page.

Also included is a settings.json file where the theme's settings are stipulated.

Themes also use regular CSS and Javascript files.

The theme structure

A theme comprises of directories for

views (including subdirectories for macros, partials and templates)
assets (including subdirectories for scripts, stylesheets and images)

In normal mode, the theme editor will display a stylised version of a theme's directory structure by organising views into directories like 'checkout pages' to make it easy to find the view you want to edit.

In advanced mode, the editor will display the true structure of a theme's directories.

Views directory

The views directory contains all of the view files for the theme.

View files are split into subdirectories. The base directory contains most of the view files but other sub-directories contain other files

macros contains html.twig and shopwired.twig
partials contains the partial files which can be referenced in other files
templates contains the blog_page, collection and master view files

Assets directory

The assets directory contains all of the assets used in the theme, including images, stylesheets and javascript files.

Assets are split into subdirectories like images and css.

You can reference an asset in your theme using the {{ asset_url('') }} tag, e.g.

JSON Files

Themes can also contain JSON files.

assets.json which provides the path for CSS and Javascript files (only used by earlier themes)

settings.json which stipulates the theme settings available to be customised by a theme's end user through the theme settings/advanced settings feature.


There are many different view files available.

You can read more about the different views here.