1. Top
  2. ブログ一覧
  3. Shopifyで商品追加フォームを任意の場所に設置する方法
Eコマース

Shopifyで商品追加フォームを任意の場所に設置する方法

公開日

2024.12.11

Shopifyで商品追加フォームを任意の場所に設置する方法のサムネイル

Shopifyで商品をカートに追加するフォームは、通常、商品詳細ページ(Product page)に配置されます。しかし、トップページ、コレクションページ、ブログ記事内、あるいはカスタムセクションなど、任意の場所に設置したいケースは多々あります。公式ドキュメントではformタグ(Shopify.dev: formタグShopify.dev: productテンプレートShopify.dev: variantセレクタ)の利用方法が紹介されていますが、その応用例はひと手間かかることがあります。

本記事では、これまで学んだ記事構成を参考に、「特定の場所に商品追加フォームを設置したい」 といったニーズ別にサンプルを示し、必要なコード例をもとに順序立てて解説します。さらに、selected_or_first_available_variantを活用して、初期表示時から在庫がある最適なバリアントを選択しておく方法もご紹介します。これにより、独自カスタマイズやレイアウトの自由度が増し、顧客体験の向上とストア運用の柔軟性向上に繋がります。

商品追加フォームを自由な場所へ配置する基本的な考え方

Shopifyのフォームタグ{% form 'product', product %}は、通常product.liquidテンプレート内で商品ページ生成時に利用されます。しかし、Liquid変数でproductオブジェクトを適切に参照できれば、他のテンプレート(index.liquidcollection.liquid、カスタムセクションなど)内でも同様に商品追加フォームを組み込むことが可能です。

selected_or_first_available_variantとは

product.selected_or_first_available_variantは、URLパラメータで特定のバリアントが指定されている場合はそのバリアントを、指定がなければ在庫がある最初のバリアントを返す便利なオブジェクトです。これを利用することで、顧客が商品ページ以外の場所でも適切なバリアントをあらかじめ選択した状態でカートに追加できるようになります。

実現のポイント

1.対象商品オブジェクトを用意:
カートに追加したいproductオブジェクトが利用可能なコンテキストである必要があります。トップページなど商品情報が直接ない場所では、all_productsとproduct handleの組み合わせを使って商品を指定したり、セクション設定で商品を選択可能にしたりします。

2.formタグによるフォーム生成:
{% form 'product', product %}タグを使うと、そのproductに紐づく「カート追加フォーム」が生成されます。フォーム内で、{{ product.title }}{{ product.variants }}などを使って必要な情報を表示し、<select>でバリアントを選択可能です。
ここで{% assign selected_variant = product.selected_or_first_available_variant %}として、初期バリアントを設定しておくことで、最適なバリアントが選択された状態で顧客に表示できます。

3.商品追加ボタンとバリアント選択:
バリアントがある商品は、バリアント選択用のselectタグやradioボタンなどを用意します。選択後、<button type="submit">でカートに追加できます。
selected_or_first_available_variantを使うことで、<select>タグ内でselected="selected"を付与するバリアントを簡単に特定できます。

以下では、よくある設置パターン別に必要なコード例を示します。

設置パターン

1. 任意のページ(トップページなど)に特定の商品追加フォームを設置

{% assign product = all_products['my-special-product'] %}
{% assign selected_variant = product.selected_or_first_available_variant %}
{% form 'product', product %}
  <h3>{{ product.title }}</h3>
  <select name="id">
    {% for variant in product.variants %}
      <option value="{{ variant.id }}" {% if variant.id == selected_variant.id %}selected="selected"{% endif %}>{{ variant.title }}</option>
    {% endfor %}
  </select>
  <button type="submit">カートに追加</button>
{% endform %}

この例では、selected_or_first_available_variantを用いて、初期状態で選択されるバリアントを自動的に決定しています。

実際にサイトに埋め込んでみました。

alt text

きちんとカートに追加されたことが確認できました。

alt text

2. コレクションページ(collection.liquid)で、一覧表示中の商品ごとに追加フォームを設置

{% for product in collection.products %}
  {% assign selected_variant = product.selected_or_first_available_variant %}
  {% form 'product', product %}
    <h3>{{ product.title }}</h3>
    {% if product.variants.size > 1 %}
      <select name="id">
        {% for variant in product.variants %}
          <option value="{{ variant.id }}" {% if variant.id == selected_variant.id %}selected="selected"{% endif %}>{{ variant.title }}</option>
        {% endfor %}
      </select>
    {% else %}
      <input type="hidden" name="id" value="{{ product.variants.first.id }}">
    {% endif %}
    <button type="submit">カートに追加</button>
  {% endform %}
{% endfor %}

ここでも、複数バリアントがある場合はselected_or_first_available_variantによって在庫がある最初のバリアントを自動で選択します。

3. ブログ記事など任意のセクションへ、特定商品をカスタムセクション設定で選択して表示

{% if section.settings.product %}
  {% assign product = all_products[section.settings.product] %}
  {% assign selected_variant = product.selected_or_first_available_variant %}
  {% form 'product', product %}
    <h4>{{ product.title }}</h4>
    <select name="id">
      {% for variant in product.variants %}
        <option value="{{ variant.id }}" {% if variant.id == selected_variant.id %}selected="selected"{% endif %}>{{ variant.title }}</option>
      {% endfor %}
    </select>
    <button type="submit">カートに追加</button>
  {% endform %}
{% endif %}

カスタムセクションで選んだ商品についても、適切なバリアントをあらかじめ選択した状態でフォームを表示できます。

運用のヒント

  • contextを確認: 商品オブジェクトproductが利用可能か事前に確認し、必要ならall_productsかセクション設定で呼び出します。
  • バリアント対応: バリアントがある場合はセレクター等で選択UIを用意し、selected_or_first_available_variantで初期選択を最適化します。
  • UI/UX向上: 任意ページへの設置、初期バリアントの自動選択により、顧客が商品一覧や記事内からスムーズに購入でき、購入導線を短縮できます。

まとめ

Liquidのformタグを使ってShopifyで商品追加フォームをより自由にカスタマイズできます。トップページやコレクションページ、カスタムセクションなど、商品詳細ページ以外からも適切なバリアントを初期表示してスムーズな購買体験を提供可能です。公式ドキュメントを参考に、コンテキストやデザインに合わせて、柔軟なストア運用を実現しましょう。

参考