> ## 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.

# Custom Code Sections

> Build custom storefront sections using HTML with Liquid templating

Custom Code sections allow you to build fully custom sections for your Fourthwall shop using HTML combined with [Liquid](https://shopify.github.io/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.

```liquid theme={null}
<!-- 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:

| 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](https://shopify.github.io/liquid/) — Official open-source Liquid documentation with basics, tags, and filters

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

<CardGroup cols={2}>
  <Card title="Section structure" icon="code" href="/html/section-structure">
    Learn how to structure a section with styles, markup, and script.
  </Card>

  <Card title="Available objects" icon="cube" href="/html/objects/overview">
    Explore the data objects available in your templates.
  </Card>

  <Card title="Filters" icon="filter" href="/html/filters/overview">
    See all filters for formatting data.
  </Card>

  <Card title="Examples" icon="book" href="/html/examples">
    Complete working examples of HTML sections.
  </Card>
</CardGroup>