Directory structure

src

src is where your main javascript files live, including all of your components.

src/
  components/      This folder contain the components used in the theme
  theme/           This folder contains some common theme service classes such as the Cart
  utils/           This folder should contain any small, standalone utility functions
  main.ts          This is the main entry point for your theme javascript

src/
  components/      This folder contain the components used in the theme
  theme/           This folder contains some common theme service classes such as the Cart
  utils/           This folder should contain any small, standalone utility functions
  main.ts          This is the main entry point for your theme javascript

assets

assets contains other theme assets which need compiling, such as SCSS stylesheets.

assets/
  styles/           Your SCSS files should live in this directory
    theme.scss      This is the main entry point for your theme stylesheet

assets/
  styles/           Your SCSS files should live in this directory
    theme.scss      This is the main entry point for your theme stylesheet

static

static contains the rest of your theme files, like template and layouts. These files are mostly copied as-is into your final theme, which is why they're referring to as static.

static/             These folders corrospond to the standard Shopify theme folders
  assets/
  config/
  layout/
  locales/
  sections/
  snippets/
  templates/

static/             These folders corrospond to the standard Shopify theme folders
  assets/
  config/
  layout/
  locales/
  sections/
  snippets/
  templates/

tip

Compiler macros are still run on some files in static, so they aren't totally static in the traditional sense. These macros do things such as provide features which make writing Liquid more convenient.

dist

dist is the location that the compiler will output your built theme to when you run npm run dev/npm run prod.

salvo.config.js

Your salvo.config.js file (also referred to as your project config) is the main config file which controls how SALVO-TS builds your theme. The default salvo.config.js will already have everything set up for you. If you need to, you can customize your project config to enable or disable features, or to customize some of the default settings. See the project config docs for details.

tip

Your salvo.config.js will allow you to customize some common path and filenames. While it's tempting to customize all of the paths to your liking, there's a benefit to consistency - we recommend trying to keep your config as close as possible to the default, as it'll help you follow along with the docs and help others get familiar with your project.

Next steps

Learn how to create your first component with SALVO-TS.