【Shopify】商品ページにオリジナルのプルダウンを追加する方法

2024年7月13日2024年9月14日

Shopifyで商品ページにカスタムのプルダウンを追加したいと思ったことはありませんか？
これはよく求められる機能の一つです。

標準的な設定だけでは実現が難しい場合もありますが、実はコードを少し編集することで、オリジナルのプルダウンを追加できる方法があります。

今回は、その実装方法をご紹介します。
この方法を使えば、あなたのShopifyストアの商品ページをより柔軟にカスタマイズできますのでぜひ参考にしてみてください。

実装イメージ

今回は、商品の号数を選択してもらいたい！アートサイトをイメージして下記のような実装をしていきます。

バリエーションで作ることも可能ですが全ての商品にバリエーションを追加する手間と、在庫の管理の手間を考えてこちらの方法で実装をしています。

カートに入れてもしっかりと情報が反映されています。

手順

手順①Shopify UI Elements Generatorでプルダウンを作る

Shopify UI Elements Generatorでプルダウンの項目を追加していきます。
Shopify UI Elements Generatorの「Line Item Property」ページでは、カートに追加された商品のカスタマイズ情報を収集するためのフォームフィールドを作成できます。
フォームフィールドの種類（短いテキスト、長いテキスト、ラジオボタン、ドロップダウンセレクト、チェックボックスなど）を選択し、フィールドラベルやオプションを設定します。
その後、生成されたコードを商品ページの<form>タグ内に貼り付けることで、カスタマイズ情報を収集できます。

まずは「Type of form field」の部分で、項目を選択します。
今回はプルダウンを作りたいので、「Drop-down select」を選択してください。

次に「Your form field label」の部分は今回は「号数」にします。
項目のタイトルになりますので、任意の名前にしてください。

右側のプレビューでも確認することができます！

次に「Options if using radio buttons, a drop-down select, or checkbox group」の項目で、プルダウンででてくる各項目をカンマ区切りで入力してください。

これで「Shopify UI Elements Generato 」での作業は終了になりますので、下にでてきているコードをコピーしておいてください。

手順②コードの編集

ここからはShopifyでの実装になります。

オンラインストアのコードを編集から「セクション」→「main.product.liquid」を編集します。

90行目あたりからwhen文で書かれているところを見つけてください

{%- when '@app' -%}
{% render block %}

上記の部分からcase・wehn文でブロックでの定義をしていますので、上記のコードの直下に下記のようにコードを追加してください。

{%- when 'number' -%}
<p class="line-item-property__field">
  <label>号数</label><br>
  <select id="" name="properties[号数]">
    <option value="1号">1号</option>
    <option value="2号">2号</option>
    <option value="3号">3号</option>
  </select>
</p>

このままではブロックで追加できないので、schemaで定義をしてブロックとして追加できるようにしていきます。

"type": "@app"と検索し、schemaでブロックの定義を探します。

今回は「number」とします。
nameも任意の名前で追加してください。

ストアのカスタマイズ画面を確認すると、号数が追加できるようになっています。
追加するとプルダウンが実装できていることがわかります。

手順③スタイルを整える

このままでは、見た目がHTMLデフォルトの表示になっているので、Shopifyでのデフォルトの見た目と合わせるためにクラスを追加していきます。

下記のようにlabelとselectにクラスを追加し、divタグとsvgで矢印を追加してください。

<p class="line-item-property__field">
  <label class="form__label">号数</label>
  <div class="select">
    <select class="select__select" name="properties[号数]">
      <option value="1号">1号</option>
      <option value="2号">2号</option>
      <option value="3号">3号</option>
    </select>
    <svg aria-hidden="true" focusable="false" class="icon icon-caret" viewBox="0 0 10 6">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"></path>
    </svg>
  </div>
</p>

手順④カートと連携する

見た目は完成しましたが、このままではカートや購入ページに反映されないので、連携していきます。

selectタグを下記のようにして、form属性とid属性追加してください。

<select class="select__select" id="number" name="properties[号数]" form="{{ product_form_id }}">

idは直接は関係していませんが、識別のために追加しています。

これでカートに追加したときに連携されるようになりました。

手順⑤条件分岐

このままでは「アート」以外の商品のときもプルダウンが追加されてしまうので、条件分岐を追加して「アート」のときのみプルダウンがでてくるようにします。

下記のようにif文を追加してください。

{% if product.type == 'アート' %}
  <p class="line-item-property__field">
    <label class="form__label">号数</label>
    <div class="select">
      <select class="select__select" id="number" name="properties[号数]" form="{{ product_form_id }}">
        <option value="1号">1号</option>
        <option value="2号">2号</option>
        <option value="3号">3号</option>
      </select>
      <svg aria-hidden="true" focusable="false" class="icon icon-caret" viewBox="0 0 10 6">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z" fill="currentColor"></path>
      </svg>
    </div>
  </p>
{% endif %}

これでアートのときのみ追加できるようになりました！
お疲れさまでした！