File structure

Overview

All SALVO-TS projects conform to the same directory structure described below. Expand folders to view more details.

• Directoryassets

  • Directoryicons SVG Icons (docs)

    • my-icon.svg
    • ...
  • Directorystyles Global styles

    • theme.scss
    • ...
• Directorydist Compiled theme output

  • Directoryassets

    • …
  • Directoryconfig

    • …
  • Directorylayout

    • …
  • Directorylocales

    • …
  • Directorysections

    • …
  • Directorysnippets

    • …
  • Directorytemplates

    • …
• Directorysrc

  • Directorycomponents Custom components (docs)

    • MyComponent.ts
    • MyComponent.scss Component styles (docs)
    • MyComponent.liquid Component template (docs)
    • ...
  • Directorytheme Services & base classes

    • Cart.ts Shopify cart service (docs)
    • ThemeComponent.ts Base component class
  • Directoryutils Utility functions

    • …
  • main.ts
• Directorystatic Static theme files (docs)

  • Directoryassets

    • …
  • Directoryconfig

    • …
  • Directorylayout

    • …
  • Directorylocales

    • …
  • Directorysections

    • …
  • Directorysnippets

    • …
  • Directorytemplates

    • …
• .eslintrc.js
• .gitignore
• package.json
• package-lock.json
• salvo.config.js SALVO-TS configuration file (docs)
• tsconfig.json

File nesting

Nesting in components

Component files under src/components/ can be nested, provided that they follow the rule that the filename must be prefixed to indicate the subpath (with path separators omitted).

• ...
• Directorysrc

  • Directorycomponents Nesting allowed

    • Accordion.ts
    • Accordion.liquid
    • Accordion.scss
    • DirectoryProduct

      • ProductForm.ts Must be prefixed with Product
      • ProductForm.liquid
      • ProductForm.scss
      • ProductOptions.ts
      • ProductOptions.liquid
      • ProductOptions.scss
      • ...
    • DirectorySponsor

      • SponsorGrid.ts
      • DirectoryQuote Supports multiple levels of nesting

        • SponsorQuote.ts
        • SponsorQuoteItem.ts
        • QuoteForm.ts Not allowed: is in Sponsor/Quote/, so must start with SponsorQuote
    • ...
  • Directoryservices

    • …
  • Directorytheme

    • …
  • Directoryutils

    • …
  • main.ts
• ...

Nesting in static assets

Files inside static/assets/, static/snippets/, and static/sections/ can be nested, provided they follow the rule that the filename must be prefixed to indicate the subpath (with an underscore used in place of the path separator).

• ...
• Directorystatic

  • Directoryassets Nesting allowed

    • Directoryfonts

      • fonts_inter.ttf
      • fonts_inter.woff2
    • Directoryimage

      • Directorysponsor

        • image_sponsor_google.svg Subpath is image/sponsor/, so prefix must be image_sponsor_
        • image_sponsor_microsoft.svg
        • ...
      • image_logo.svg
      • ...
    • image-screenshot1.png
    • image_screenshot2.png This isn't allowed: filename starts with image_, so it must be under image/
    • ...
  • Directoryconfig

    • …
  • Directorylayouts

    • …
  • Directorylocales

    • …
  • Directorysections Nesting allowed

    • product-main.liquid
    • Directorynewsletter

      • newsletter_signup.liquid
      • newsletter_opt-out.liquid
    • ...
  • Directorysnippets Nesting allowed

    • Directoryglobal

      • global_variables.liquid
      • ...
    • two-columns.liquid
  • Directorytemplates

    • Directorycustomers Nesting isn't allowed here, but customers/ is a regular template folder

      • account.json
      • ...
    • product.json
    • ...
• ...