Adding Visuals to Pages: Liquid

Last edit: 

Contributors: 

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

Requirements

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.

Steps

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

  1. Prepare an image
  2. Create page logo.css.liquid
  3. Link to the logo.css.liquid page in your layout

Step 1: Prepare an image

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

Step 2: Create page logo.css.liquid

Create a page with the format CSS in your marketplace_builder/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


<head>
  <link rel="stylesheet" href="/logo.css">
</head>
...
<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.

Questions?

We are always happy to help with any questions you may have. Check out our Help page, or contact us.