Shopify Implementing Sections Using JavaScript and Stylesheets in Sections

Example

Each section can can contain JavaScript and Stylesheets, these two languages are used within liquid tags: {% javascript %}{% endjavascript %} & {% stylesheet %}{% endstylesheet %}.

When placing code inside of these two tags, Shopify compiles each piece into shopify_compiled.js & shopify_compiled.css. This allows for greater readability within each section's code as you don't have to search through a long document to find each piece.

If you don't want to use CSS, you can alternatively use SCSS by using {% stylesheet 'scss' %} instead.

There are downfalls to using these, though. Liquid cannot be used in any of them, just as it can't be used in normal *.js, *.css, *.scss files without the .liquid extension.

Also, when using the SCSS stylesheet tag, this isn't a global stylesheet, so any variables defined within your theme's .scss document won't be accessible and will need to be redefined.

Usage Examples

JavaScript

{% javascript %}
    $( "p" ).click(function() {
      $( this ).slideUp();
    });
{% endjavascript %}

CSS

{% stylesheet %}
    .container {
        width: 100%;
    }
    .container p {
        color: #ff0000;
    }
{% endstylesheet %}

SASS

{% stylesheet 'scss' %}
    $red: #ff0000;
    .container {
        width: 100%;
        p {
            color: $red;
        }
    }
{% endstylesheet %}