Skip to main content
Custom Code sections allow you to build fully custom sections for your Fourthwall shop using HTML combined with Liquid templating. You can add these sections to your shop through the theme editor.

​
What is Liquid?

Liquid is an open-source template language. It uses a combination of objects, tags, and filters to load dynamic content into templates. 
<!-- Objects output dynamic values -->
{{ product.title }}

<!-- Tags create logic and control flow -->
{% if product.available %}
  <p>In stock!</p>
{% endif %}

<!-- Filters modify output -->
{{ product.price | money }}

​
How it works

When you add a Custom Code section to your shop, you write an .html file that contains three parts:
  1. Styles — CSS scoped to the section
  2. Markup — HTML combined with Liquid logic
  3. Script — JavaScript scoped to the section instance

​
Available objects

In a Custom Code section, you have access to:
ObjectDescription
collectionsAll product collections in the shop
productIndividual product data (accessed through collections)
membership_tiersMembership tier information
sectionThe current section instance

​
Liquid reference guide

For comprehensive Liquid language documentation, refer to this resource: All standard Liquid features documented in this guide work in Fourthwall, including:
  • Tags: if/elsif/else, unless, case/when, for, assign, capture, increment, raw, comment
  • Filters: append, capitalize, downcase, upcase, replace, split, strip, truncate, size, sort, map, where, first, last, join, plus, minus, times, divided_by, modulo, round, abs, date, and more

​
Next steps

Section structure

Learn how to structure a section with styles, markup, and script.

Available objects

Explore the data objects available in your templates.

Filters

See all filters for formatting data.

Examples

Complete working examples of HTML sections.