Assets & Locales

Video lesson

Source: Coding with Robby

Serving Static Files

The assets/ folder holds CSS, JavaScript, images, and fonts. Shopify serves them from a global CDN with automatic cache invalidation when file content changes.

Asset tags in theme.liquid

{{ 'theme.css' | asset_url | stylesheet_tag }}
{{ 'component-product.css' | asset_url | stylesheet_tag: preload: true }}

{{ 'theme.js' | asset_url | script_tag: defer: true }}
{{ 'product-form.js' | asset_url | script_tag: defer: true }}

<img src="{{ 'logo.svg' | asset_url }}" alt="{{ shop.name | escape }}" width="120" height="40">

stylesheet_tag — generates <link rel="stylesheet">
script_tag: defer — non-blocking scripts at end of body
preload: true — hints browser to fetch critical CSS early
asset_url alone — use for images, fonts, JSON in snippets

Internationalization with locales/

JSON

{
  "general": {
    "accessibility": {
      "skip_to_content": "Skip to content"
    }
  },
  "products": {
    "add_to_cart": "Add to cart",
    "sold_out": "Sold out",
    "quantity": "Quantity"
  },
  "cart": {
    "title": "Your cart",
    "checkout": "Checkout",
    "empty": "Your cart is empty"
  }
}

Translation filter

{{ 'general.accessibility.skip_to_content' | t }}
{{ 'products.add_to_cart' | t }}

{% assign count = cart.item_count %}
{{ 'cart.item_count' | t: count: count }}

Note: Add locale files for each market language (fr.json, de.json). Schema translations go in locales/*.schema.json.