Examples

<style>
  .fc-{{ section.id }} {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 16px;
  }

  .fc-{{ section.id }}__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .fc-{{ section.id }}__heading {
    font-size: 24px;
    margin: 0;
  }

  .fc-{{ section.id }}__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  @media screen and (min-width: 640px) {
    .fc-{{ section.id }}__grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
  }

  .fc-{{ section.id }}__product-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .fc-{{ section.id }}__product-title {
    font-size: 14px;
    margin: 8px 0 4px;
  }

  .fc-{{ section.id }}__product-price {
    font-size: 14px;
    opacity: 0.7;
  }
</style>

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

<section class="fc-{{ section.id }}">
  <div class="fc-{{ section.id }}__header">
    <h2 class="fc-{{ section.id }}__heading">
      {{ collection.title }}
    </h2>
  </div>

  <div class="fc-{{ section.id }}__grid">
    {% for product in collection.products limit: 8 %}
      <a href="{{ product.url | localized_url }}">
        {% if product.featured_image %}
          <img
            class="fc-{{ section.id }}__product-image"
            src="{{ product.featured_image | img_url: 'large' }}"
            alt="{{ product.title }}"
            loading="lazy"
          >
        {% endif %}
        <h3 class="fc-{{ section.id }}__product-title">{{ product.title }}</h3>
        <p class="fc-{{ section.id }}__product-price">{{ product.price | money }}</p>
      </a>
    {% endfor %}
  </div>
</section>

<style>
  .tiers-{{ section.id }} {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 16px;
  }

  .tiers-{{ section.id }}__heading {
    text-align: center;
    font-size: 28px;
    margin-bottom: 32px;
  }

  .tiers-{{ section.id }}__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  @media screen and (min-width: 640px) {
    .tiers-{{ section.id }}__grid {
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
  }

  .tiers-{{ section.id }}__card {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 32px 24px;
    text-align: center;
  }

  .tiers-{{ section.id }}__name {
    font-size: 20px;
    margin: 0 0 8px;
  }

  .tiers-{{ section.id }}__price {
    font-size: 16px;
    margin-bottom: 16px;
    opacity: 0.7;
  }

  .tiers-{{ section.id }}__features {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    text-align: left;
  }

  .tiers-{{ section.id }}__feature {
    padding: 4px 0;
  }

  .tiers-{{ section.id }}__cta {
    display: inline-block;
    padding: 12px 32px;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 16px;
  }

  .tiers-{{ section.id }}__annual {
    font-size: 13px;
    margin-top: 12px;
  }

  .tiers-{{ section.id }}__annual a {
    color: inherit;
  }
</style>

<section class="tiers-{{ section.id }}">
  <h2 class="tiers-{{ section.id }}__heading">Membership Tiers</h2>

  <div class="tiers-{{ section.id }}__grid">
    {% for tier in membership_tiers %}
      <div class="tiers-{{ section.id }}__card">
        {% if tier.type == 'Free' %}
          {% if tier.image_url %}
            <img
              src="{{ tier.image_url | img_url: 'medium' }}"
              alt="{{ tier.name }}"
              style="width: 80px; height: 80px; object-fit: cover; border-radius: 50%; margin-bottom: 12px;"
            >
          {% endif %}

          <h3 class="tiers-{{ section.id }}__name">{{ tier.name }}</h3>
          <p class="tiers-{{ section.id }}__price">Free</p>

          <a href="{{ tier.registration_url }}" class="tiers-{{ section.id }}__cta">
            Join now
          </a>

          {% if tier.perks.size > 0 %}
            <ul class="tiers-{{ section.id }}__features">
              {% for perk in tier.perks %}
                <li class="tiers-{{ section.id }}__feature">{{ perk }}</li>
              {% endfor %}
            </ul>
          {% endif %}

        {% elsif tier.type == 'Paid' %}
          {% if tier.image %}
            <img
              src="{{ tier.image | img_url: 'medium' }}"
              alt="{{ tier.name }}"
              style="width: 80px; height: 80px; object-fit: cover; border-radius: 50%; margin-bottom: 12px;"
            >
          {% endif %}

          <h3 class="tiers-{{ section.id }}__name">{{ tier.name }}</h3>

          <p class="tiers-{{ section.id }}__price">
            {% if tier.compare_at_monthly_price %}
              <s>{{ tier.monthly_price | money }}</s>
              {{ tier.compare_at_monthly_price | money }} first month
            {% else %}
              {{ tier.monthly_price | money }} / month
            {% endif %}
          </p>

          <a href="{{ tier.url }}" class="tiers-{{ section.id }}__cta">
            {% if tier.trial_enabled %}
              Start free trial
            {% else %}
              Join now
            {% endif %}
          </a>

          {% if tier.annual_price %}
            <p class="tiers-{{ section.id }}__annual">
              <a href="{{ tier.annual_url }}">
                Save {{ tier.annual_discount_percentage }}% annually
              </a>
            </p>
          {% endif %}

          {% if tier.features.size > 0 %}
            <ul class="tiers-{{ section.id }}__features">
              {% for feature in tier.features %}
                <li class="tiers-{{ section.id }}__feature">{{ feature }}</li>
              {% endfor %}
            </ul>
          {% endif %}
        {% endif %}
      </div>
    {% endfor %}
  </div>
</section>

<style>
  .iwt-{{ section.id }} {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 16px;
  }

  .iwt-{{ section.id }}__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
  }

  @media screen and (min-width: 640px) {
    .iwt-{{ section.id }}__grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .iwt-{{ section.id }}__image {
    width: 100%;
    height: auto;
  }

  .iwt-{{ section.id }}__heading {
    font-size: 28px;
    margin: 0 0 16px;
  }

  .iwt-{{ section.id }}__text {
    margin-bottom: 24px;
    line-height: 1.6;
  }

  .iwt-{{ section.id }}__cta {
    display: inline-block;
    padding: 12px 32px;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
  }
</style>

{%- assign collection = collections['featured'] -%}
{%- assign product = collection.products | first -%}

<section class="iwt-{{ section.id }}">
  <div class="iwt-{{ section.id }}__grid">
    {% if product.featured_image %}
      <div>
        <img
          class="iwt-{{ section.id }}__image"
          src="{{ product.featured_image | img_url: 'jumbo' }}"
          srcset="
            {{ product.featured_image | img_url: 'large' }} 480w,
            {{ product.featured_image | img_url: 'display' }} 720w,
            {{ product.featured_image | img_url: 'jumbo' }} 1024w
          "
          sizes="(max-width: 639px) 100vw, 50vw"
          alt="{{ product.title }}"
          loading="lazy"
        >
      </div>
    {% endif %}

    <div>
      <h2 class="iwt-{{ section.id }}__heading">{{ product.title }}</h2>

      {% if product.description != blank %}
        <div class="iwt-{{ section.id }}__text">
          {{ product.description }}
        </div>
      {% endif %}

      <a
        href="{{ product.url | localized_url }}"
        class="iwt-{{ section.id }}__cta"
      >
        View product — {{ product.price | money }}
      </a>
    </div>
  </div>
</section>