This guide helps you add visuals such as images to your pages using a CSS file and access and display the image through its relative path.
Important
This guide demonstrates using CSS at the code level. The ability to add CSS files using the Instance Admin is under development.
Prerequisites
To follow the steps in this tutorial, you should be familiar with the required directory structure for your codebase. In addition, you must understand the concepts of pages, layouts, and assets. Please visit the following resources should you need a refresher:
Steps
Adding visuals to your pages using a CSS file is a three-step process:
- Step 1: Creating the 'styles' and 'images' directories
- Step 2: Creating a CSS file
- Step 3: Linking to the CSS file in your layout
Step 1: Creating the 'styles' and 'images' directories
If you are starting from scratch (without having created the codebase), create an directory inside , then a and an directory inside .
If you have already created the codebase, you can skip this step and locate your and directories.
Put an image in the images directory (e.g. ).
Step 2: Creating a CSS file
In the directory, create a file:
Here, in a static CSS file, you can't use the filter or liquid variable to get the URL of the image on the CDN, so you have to refer to it with its relative path.
On your computer, the CSS file is in the directory, so to point to the image file in the directory, you have to go one level up from () to the directory, and then write the path relative to there.
This directory structure corresponds to the directory structure on the CDN, so the relative path works the same way on your Instance.
Step 3: Linking to the CSS file in your layout
