{% for product in products %}
  <a href="{{ ('/product/' ~ product.slug) | shopUrl }}">
    {{ product.name }} — {{ product.minPrice | formatPrice(currency) }}
  </a>
{% endfor %}

{% set featured = helpers.components.products.getItemsByIds(products, ['slug-a', 'id-b']) %}

{% for item in catalogItems %}
  {% if item.kind == 'group' %}
    <h2>{{ item.group.name }}</h2>
  {% else %}
    <a href="{{ ('/product/' ~ item.product.slug) | shopUrl }}">
      {{ item.product.name }}
    </a>
  {% endif %}
{% endfor %}

import {
  fetchStorefront,
  getProductBySlug,
  getProductPriceRange,
} from '@/lib/storefront-api'

const payload = await fetchStorefront()
const product = getProductBySlug(payload?.products ?? [], slug)
const { min, max } = product ? getProductPriceRange(product) : { min: 0, max: 0 }