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

# Section Structure

> How to structure a Custom Code section with styles, markup, and script

Every Custom Code section consists of three parts: **styles**, **markup**, and **script**. Together, these give you full control over appearance, content, and behavior.

## Basic structure

```liquid theme={null}
<!-- 1. STYLES — Section-specific CSS -->
<style>
  .my-section-{{ section.id }} {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 16px;
  }
</style>

<!-- 2. MARKUP — HTML with Liquid logic -->
<section class="my-section-{{ section.id }}">
  <h2>My Custom Section</h2>

  {%- assign collection = collections['all'] -%}

  {% for product in collection.products limit: 4 %}
    <div>
      <h3>{{ product.title }}</h3>
      <p>{{ product.price | money }}</p>
    </div>
  {% endfor %}
</section>

<!-- 3. SCRIPT — JavaScript scoped to the section -->
<script>
  (function() {
    const section = document.querySelector('.my-section-{{ section.id }}');
    if (!section) return;

    // Your JavaScript logic here
  })();
</script>
```

## Styles

Place your CSS inside a `<style>` tag at the top of the section. Always scope styles to `section.id` to prevent conflicts when multiple instances of the same section exist on a page.

```liquid theme={null}
<style>
  .my-section-{{ section.id }} {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  @media screen and (min-width: 640px) {
    .my-section-{{ section.id }} {
      padding-top: 48px;
      padding-bottom: 48px;
    }
  }
</style>
```

<Warning>
  Always use `section.id` in your CSS selectors. Without it, styles from one section instance will leak into others.
</Warning>

## Markup

The markup section contains HTML mixed with Liquid tags and objects. This is where you define the visual structure and dynamic content of your section.

```liquid theme={null}
<section class="my-section-{{ section.id }}">
  <div class="container">
    <h2>Featured Products</h2>

    {%- assign collection = collections['all'] -%}

    {% for product in collection.products limit: 8 %}
      <div class="product-card">
        <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}">
        <h3>{{ product.title }}</h3>
        <p>{{ product.price | money }}</p>
        <a href="{{ product.url | localized_url }}">View product</a>
      </div>
    {% endfor %}
  </div>
</section>
```

### Key objects in markup

| Object             | Description                                  |
| ------------------ | -------------------------------------------- |
| `section`          | The current section instance                 |
| `section.id`       | Unique identifier for this section instance  |
| `collections`      | All product collections (accessed by handle) |
| `membership_tiers` | All membership tiers                         |

## Script

Place your JavaScript inside a `<script>` tag. Scope DOM queries to the section root so multiple instances of the same section don't interfere with each other, and wrap your code in an IIFE to avoid leaking variables into the global scope.

```liquid theme={null}
<script>
  (function() {
    const section = document.querySelector('.my-section-{{ section.id }}');
    if (!section) return;

    const button = section.querySelector('.toggle');
    const panel = section.querySelector('.panel');

    button.addEventListener('click', function() {
      panel.classList.toggle('is-open');
    });
  })();
</script>
```

<Warning>
  Always scope DOM queries to the section instance. Using `document.querySelector('.toggle')` without a section root will match elements across every instance of the section on the page.
</Warning>

## Best practices

### Scope CSS with section.id

Always include `section.id` in class names to prevent style conflicts:

```liquid theme={null}
<style>
  .my-section-{{ section.id }} .title {
    font-size: 24px;
  }
</style>
<section class="my-section-{{ section.id }}">
  <h2 class="title">Featured Products</h2>
</section>
```

### Use responsive design

Apply mobile-first styles with media queries:

```liquid theme={null}
<style>
  .my-section-{{ section.id }} {
    padding-top: 36px;
  }

  @media screen and (min-width: 640px) {
    .my-section-{{ section.id }} {
      padding-top: 48px;
    }
  }
</style>
```

### Check for blank values

Always check if values exist before rendering:

```liquid theme={null}
{% if product.featured_image %}
  <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}">
{% endif %}

{% if product.compare_at_price %}
  <s>{{ product.compare_at_price | money }}</s>
{% endif %}
```

### Limit product iterations

Always use the `limit` filter when iterating over product collections to control performance:

```liquid theme={null}
{%- assign collection = collections['all'] -%}

{% for product in collection.products limit: 8 %}
  <div class="product">{{ product.title }}</div>
{% endfor %}
```