商品バリエーションを選択できるセレクトボックスをliquidで作りたいです

[nrk]

商品詳細ページにて下記のセクションをliquidで作成しています。
①商品情報を表示

②商品バリエーションを選択できるセレクトボックス

③購入数を変更できるボタン

④カートに追加するボタン

①、③、④は作成できたのですが②の作成方法がわかりません。
dawnテーマで存在しているので物理的には可能だと思っていますが、どのようなコードで実装できるでしょうか？

②の要件としては、各オプションをループで表示する、オプションの項目もループで表示する(select)、選択したバリエーションでカートへ追加できる。です。。。

以下は③、④箇所のコードです。

<div class="item-count">
  <form method="post" action="/cart/add" id="AddToCartForm">
  <input
    type="hidden"
    name="id"
    value="{{ product.variants[0].id }}" />
    <div class="product-quantity_wrapper">
      <p>購入数</p>
      <div class="product-quantity">
        <button type="button" id="minus" class="minus">ー</button>
        <input type="number" id="quantity" name="quantity" min="1" value="1">
        <button type="button" id="plus" class="plus">＋</button>
      </div>
    </div>
    <div class="cart-btn-wrapper">
      <button type="submit" class="cart-btn">カートに入れる</button>
    </div>
  </form>
</div> <!-- /.item-count -->

▼数量変更する仕組み(JS)

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    var quantityInput = document.getElementById('quantity');
    var minusButton = document.getElementById('minus');
    var plusButton = document.getElementById('plus');
    minusButton.addEventListener('click', function() {
      var currentVal = parseInt(quantityInput.value, 10);
      if (currentVal > 1) {
        quantityInput.value = currentVal - 1;
      }
    });
    plusButton.addEventListener('click', function() {
      var currentVal = parseInt(quantityInput.value, 10);
      quantityInput.value = currentVal + 1;
    });
  });
</script>

htmlで一度静的なサイトをコーディングしてからshopifyのDAWNテーマで使えるように組み直すやり方をしています。デフォルトのセクションを使用しないというのがややこしいポイントだと思うのですが、可能であればご教示のほどよろしくお願いします。