Skip to main content

Theme Assets

Theme assets are the frontend files that define your theme's appearance and behavior. This includes CSS stylesheets, JavaScript files, images, and fonts. SitePack automatically manages these assets and serves them through a Global Content Delivery Network (CDN) to ensure your store loads lightning-fast for users everywhere.

Asset Location​

All theme assets must be placed within the /assets directory in your theme's root:

/assets
├── css/      # Stylesheets (.css, .scss)
├── js/       # JavaScript files (.js)
├── img/      # Images (.jpg, .png, .svg)
└── fonts/    # Font files (.woff, .woff2)

How Assets are Served​

When you deploy your theme to SitePack, the platform performs several optimizations:

  1. Uploading to CDN: All files in /assets are uploaded to the SitePack CDN.
  2. Versioning: SitePack adds versioning information to your asset URLs. This ensures that when you update your theme, users immediately see the latest changes without clearing their browser cache.
  3. Compression: Text-based assets like CSS and JS are automatically compressed (using Gzip or Brotli) before being served.

Linking to Assets in Twig​

You should never hardcode asset URLs in your templates. Instead, use the asset() function provided by the SitePack engine. This function generates the correct, versioned CDN URL for your assets.

Examples​

Linking a stylesheet:

<link rel="stylesheet" href="{{ asset('css/styles.css') }}">

Linking a JavaScript file:

<script src="{{ asset('js/main.js') }}" defer></script>

Displaying an image:

<img src="{{ asset('img/logo.svg') }}" alt="{{ shop.name }}">

CSS Preprocessors​

SitePack natively supports SCSS (Sass). If you include .scss files in your /assets/css directory, SitePack will automatically compile them into standard CSS during the build process.

Tip

Using SCSS allows you to use variables, nesting, and mixins, making your theme's styles much easier to maintain.

Best Practices​

  • Optimize Images: Always compress your images before adding them to your theme. Use formats like WebP where possible for superior performance.
  • Minify Code: While SitePack provides compression, it's a good practice to minify your CSS and JS files before deployment to further reduce their size. You can automate this process with custom build tools before running sitepack theme:publish.
  • Use CDN for External Libraries: If you're using a large third-party library (like jQuery or a specific icon font), consider using a public CDN or a SitePack App instead of bundling it directly in your theme assets.