Skip to main content
Version: next

Static files

Theme assets​

Theme assets are the templates, snippets, sections and such which make up the core of your theme. Most of these are copied directly from your project into the final theme with only minor changes by the compiler.

Theme assets are stored in static/ and follow roughly the same structure as a typical Shopify theme:

  • Directoryassets
    • …
  • Directorysrc
    • …
  • Directorystatic
    • Directoryassets Uncompiled assets (i.e. images)
      • my-font.woff2
      • ...
    • Directoryconfig Theme settings
      • settings_data.json
      • settings_schema.json
    • Directorylayout Layouts
      • theme.liquid
    • Directorylocales Translations
      • en.default.json
      • ...
    • Directorysections Sections
      • product-main.liquid
      • ...
    • Directorysnippets Snippets
      • contact-form.liquid
      • ...
    • Directorytemplates Templates
      • index.json
      • product.json
      • ...
  • package.json
  • salvo.config.js
  • ...

Nesting static files

Files inside static/assets/, static/snippets/, and static/sections/ can be nested to provide better organization.

Compiler macros​

The framework supports various macros in .liquid files including in static files and in component templates.

{! component !}​

Renders a component template snippet.

html
{! component 'SayHello', name: 'World' !}
html
{! component 'SayHello', name: 'World' !}

{! icon !}​

Renders a SVG icon snippet.

html
{! icon 'cart-lg', class: 'icon-cart' !}
html
{! icon 'cart-lg', class: 'icon-cart' !}

{{{ ... }}} (escape)​

Shorthand for {{ ... | escape }}, see escape filter liquid docs.

html
<img src="..." alt="{{{ image.alt }}}">
html
<img src="..." alt="{{{ image.alt }}}">

{# ... #} (comment)​

Shorthand for {% comment %}...{% endcomment %}, see comment tag liquid docs.

html
<span>Blue</span>
{# 
<span>Red</span>
#}
<span>Green</span>
html
<span>Blue</span>
{# 
<span>Red</span>
#}
<span>Green</span>

Deprecated macros​

{! schema_blocks !}​

Schema blocks allowed you to re-use common section settings schema between settings files. This is deprecated and should not be used in new themes. Existing themes making use of this macro should be updated to avoid it by simply duplicating the referenced 'schema block' into each instance where the macro was used.

Escaping​

The SALVO-TS compiler tries to promote proper handling of unsafe values in templates by enforcing the escaping of values in Liquid templates. This stance is the default in most sane templating languages, but differs from Liquid's usually behavior of outputting all values raw by default (unless you explicitly use the |escape filter.)

Here is basic example to illustrate the issue:

html
<div>Size:</div>
{% for value in size_option.values %}
<label>
    <input type="radio" value="{{ value }}" name="size">
    {{ value }}
</label>
{% endfor %}
html
<div>Size:</div>
{% for value in size_option.values %}
<label>
    <input type="radio" value="{{ value }}" name="size">
    {{ value }}
</label>
{% endfor %}

Escaping the values avoids the issue:

html
<div>Size:</div>
{% for value in size_option.values %}
<label>
    <input type="radio" value="{{ value|escape }}" name="size">
    {{ value|escape }}
</label>
{% endfor %}
html
<div>Size:</div>
{% for value in size_option.values %}
<label>
    <input type="radio" value="{{ value|escape }}" name="size">
    {{ value|escape }}
</label>
{% endfor %}

This is a minor example - it only gets worse when you start including values which unintentionally contain HTML code, user input, and values which need to be later parsed handled as JSON.

Any sane framework would default to doing the safe thing by default here, but Liquid is not sane. Therefore, the compiler will highlight possible issues and encourage you to add |escape and/or |json filters to the values as appropriate.