Shopify Theme Lab

Assets

Static files

Place your static files inside the shopify/assets/ directory and add the static keyword to their filename. All files inside this directory are ignored by git except for files with static in their filename. Since this directory is also shared with the files generated by webpack, it's cleaned on every consecutive build except for static files.

shopify-theme-lab/
└─ shopify/
   └─ assets/
      └─ my-file.static.jpg
1
2
3
4

Local fonts

  1. Add your fonts to the shopify/assets/ directory with the static keyword.
shopify-theme-lab/
└─ shopify/
   └─ assets/
      ├─ open-sans-regular.static.woff
      └─ open-sans-regular.static.woff2
1
2
3
4
5
  1. Create a Shopify snippet shopify/snippets/fonts.liquid with the following content:
{% style %}
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('{{ 'open-sans-regular.static.woff2' | asset_url }}') format('woff2'),
         url('{{ 'open-sans-regular.static.woff' | asset_url }}') format('woff');
  }
{% endstyle %}
1
2
3
4
5
6
7
8
9
  1. Render the fonts snippet below bundle.css.
<!-- shopify/layout/theme.liquid -->

...
{{ 'bundle.css' | asset_url | stylesheet_tag }}
{% render 'fonts' %}
...
1
2
3
4
5
6
  1. Create a CSS file and import it into src/css/main.css.
body {
  font-family: 'Open Sans', sans-serif;
}
1
2
3