Link to stylesheet and other files in your theme
Guide to linking to stylesheets, JavaScript and other files from your Shoporama theme.
Reading time: approx. {eight} minutes
Developer
When linking to stylesheets, JavaScript files or images in your Shoporama theme, it's important to use the correct paths. Here we'll walk you through how to do it right.
Use $theme_url
The {$theme_url} variable points to your theme's root directory. Use it to link to all files in your theme:
<!-- Stylesheet --> <link rel="stylesheet" href="<{$theme_url}>/css/style.css"> <!-- JavaScript --> <script src="<{$theme_url}>/js/main.js"></script> <!-- Image --> <img src="<{$theme_url}>/img/logo.png" alt="Logo">Why $theme_url?
The reason to use {$theme_url} instead of a hardcoded path:
- Portability - the theme works wherever it is installed
- CDN support - the URL can automatically point to a CDN
- Flexibility - the theme folder can be moved without changing code
Other useful URL variables
| Variable | Variable Description |
|---|---|
{$theme_url} | Theme root directory (for CSS, JS, images) |
{$domain} | The domain of the shop |
{$webshop} | The webshop object with all settings |
Important to note
Never use absolute paths like /user_templates/4/mittema/css/style.css. It will break if the theme is moved or installed on another shop.
Need help with theme development? Contact us at support@shoporama.dk.