Section Structure

<!-- 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>

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

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

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

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

<style>
  .my-section-{{ section.id }} {
    padding-top: 36px;
  }

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

{% 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 %}

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

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