Adding Visuals to Pages: Liquid

Last edit: Jul 08, 2019
  • Contributors:
  • pavelloz

This guide will help you add visuals (images) to your pages using a Liquid page with the format CSS.


To follow the steps in this tutorial, you should be familiar with the required directory structure for your codebase, understand the concepts of pages, layouts, and assets, and know how to create a page.


Adding visuals to your pages using Liquid is a three-step process:

Step 1: Prepare an image

Put an image into the app/assets/images directory, e.g. logo.svg.

Step 2: Create page logo.css.liquid

Create a page with the format CSS in your app/pages directory. To define which format the endpoint will be available in (CSS in this case), place . before the file extension, for example name your file logo.css.liquid:

slug: logo

.logo {
  background-image: url({{ 'images/logo.svg' | asset_url }});

Use the {{ asset_url }} filter: it takes a string as an argument, and returns a string representing the URL to this asset served by our CDN.

Step 3: Link to the logo.css.liquid page in your layout

  <link rel="stylesheet" href="/logo.css">
<div class="logo"></div>

Sync or deploy. You should see the image displayed on your page.

Next steps

Congratulations! You have learned how to add an image to your pages using Liquid. You can also learn about adding visuals to your pages using CSS or Javascript.


We are always happy to help with any questions you may have.