Build variants

Build variants are a method for including site- or environment-specific changes in your theme.

A build variant file is defined with a suffix ending with ~variant, where variant indicates which build variant this file should be included for. This suffix goes before the file extension. The file will override any unsuffixed version, when built for the matching variant.

Which variant the theme is built for is controlled by the buildVariant setting in the salvo.config.js file.

Example

Build variant	Files		Output `dist/layout/example.liquid`
	static/layout/example.liquid	static/layout/example~alternate.liquid
undefined (default)	This is an example	This is a DIFFERENT example	This is an example
"alternate"	This is an example	This is a DIFFERENT example	This is a DIFFERENT example
"unmatched"	This is an example	This is a DIFFERENT example	This is an example

SCSS

In SCSS files, build variants in imports are ignored unless you opt-in by appending ~ to the end of your import string:

styles/theme.scss
scss
import "./variables~";
p {
    color: $font-color;
}

styles/theme.scss
scss
import "./variables~";
p {
    color: $font-color;
}

styles/variables~foo.scss
scss
$font-color: red;

styles/variables~foo.scss
scss
$font-color: red;

styles/variables~bar.scss
scss
$font-color: blue;

styles/variables~bar.scss
scss
$font-color: blue;