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.Documentation Index
Fetch the complete documentation index at: https://docs.fourthwall.com/llms.txt
Use this file to discover all available pages before exploring further.
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.How it works
When you add a Custom Code section to your shop, you write an.html file that contains three parts:
- Styles — CSS scoped to the section
- Markup — HTML combined with Liquid logic
- Script — JavaScript scoped to the section instance
Available objects
In a Custom Code section, you have access to:| Object | Description |
|---|---|
collections | All product collections in the shop |
product | Individual product data (accessed through collections) |
membership_tiers | Membership tier information |
section | The current section instance |
Liquid reference guide
For comprehensive Liquid language documentation, refer to this resource:- Liquid template language — Official open-source Liquid documentation with basics, tags, and filters
- 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.