フリーページ上でカートへ遷移せずに商品を追加する方法は？

「ショップ管理 > ページ管理」で作成できるページ上で、特定の商品をカートに追加するボタンを設置することができます。

以下に設置する方法をご紹介します。

フリーページ上でカートへ遷移せずに商品を追加するボタン

以下、サンプルコードです。

<div id="add_product_async_view">
  <div id="cart-addition-success" style="display:none;">カートに商品を追加しました。</div>
  <div id="cart-addition-failure" style="display:none;">
    <div id="addition-failure-message"></div>
    <div id="btn-show-addition-failure-details" style="display:none;">さらに詳しく</div>
    <div id="addition-failure-details" style="display:none;"></div>
    <div id="btn-hide-addition-failure-details" style="display:none;">閉じる</div>
  </div>
  <button class="btn-add-async" data-variant-id="123" data-quantity="1">カートに商品を追加</button>
</div>

追加する商品を変更する方法

上記サンプルコード内の、「data-variant-id」を「商品管理 > 詳細 > SKU管理」に表示されているIDに変更することで、任意の商品を追加することができます。