1. トップページ
  2. コラム
  3. 【shopify】商品ページのカスタムフォーム追加方法をご紹介!

【shopify】商品ページのカスタムフォーム追加方法をご紹介!

はじめに

福岡市天神のソラリアプラザにお店を構える時計店『福岡天賞堂』。

ベンチュラーやジャズマスターで知られる『ハミルトン』の正規取扱店プレミアムショップとして、西日本最大級の品ぞろえを誇る腕時計専門店です。

ご縁がありまして福岡天賞堂様のECサイト制作を弊社にて担当させていただきました。

https://fukuoka-tenshodo.com/

福岡天賞堂様のECサイトはshopifyで制作し、今年7月にリリースしております。

今回は制作の中で行った商品ページにカスタムフォームを追加する方法についてご紹介します。

 

きっかけ

福岡天賞堂様のECサイト制作にあたり1つポイントになったのが金属ベルトの腕時計の在庫管理。

shopifyでは商品のサイズやカラーなどのオプションは「バリエーション」から設定を行い、在庫もバリエーション別で管理が行われます。

福岡天賞堂様は商品ページで金属ベルトのサイズをお客様で選べるようにしたいとのことでした。

しかし、金属ベルトはもともとワンサイズのみのものを調整して販売しているため、在庫管理をサイズ別にするのではなく、全てのサイズをまとめて一括で管理しなければなりません。

shopifyのデフォルトのバリエーションだと実現が厳しいため、「Shopify UI Elements Generator」を利用して独自のサイズ選択フォームの作成を試してみました。

 

「Shopify UI Elements Generator」とは

「Shopify UI Elements Generator」は条件を指定して入力フォーム等のUIを作成するshopify専用のツールです。

https://ui-elements-generator.myshopify.com/

実際に腕時計のベルトサイズの選択画面を作成する想定で作成手順をご紹介したいと思います。

※作成手順の画面は弊社のテスト用サイトを利用しております。

 

①「Shopify UI Elements Generator」にアクセスし「Line Item Property」を選択。

②「Set your form field」よりフォームを作成します。

Type of form field:入力フォームのタイプを選びます。今回はセレクトボックスを使用するので「Drop-down select」を選択します。

Your form field label:フォーム上に表示されるタイトルを入力。今回は「ベルトサイズ」とします。

Options if using radio buttons, a drop-down select, or checkbox group:セレクトボックスの中の値を設定します。値はカンマで区切ってください。

Required:必須項目にするか設定ができます。必須にする場合はチェックを入れてください。

Show at checkout:入力内容をカートに表示させるかの設定ができます。カートに表示させたい場合はチェックを入れてください。

 

入力が終わると設定したフォームのプレビューが表示されます。

 

④画面下にコードが生成されているのでコードをコピーします。

 

⑤shopifyの管理画面に移動し、サイドバーの「オンラインストア⇒テーマ」を選択後、「アクション⇒コードを編集」に移動します。

⑥左端の「Section」ディレクトリの「product-template.liquid」ファイルを開きます

⑦コード内で「button type=”submit”」の箇所の前に、先程コピーしたフォームのコードを貼り付けます。

これで商品ページにカスタムフォームを追加することができました。

実際に商品ページを見てみると追加されているのが確認できます。

あとは管理画面の商品管理より、オプションの設定を外すことでワンサイズのみの扱いになり、在庫管理がサイズ別ではなく一括でできるようになりました。

 

「Shopify UI Elements Generator」を使ってみて

今回の事例を通して「Shopify UI Elements Generator」について現時点でわかっていることをまとめてみました。

■入力フォームの種類

セレクトボックスだけでなく、ラジオボタンやチェックボックス、テキストボックスなど様々な入力フォームに対応が可能です。

今回はセレクトボックスを例に挙げましたが、テキストボックスを商品ページに追加することで刻印サービスを行うこともできそうですね。

また、1つの商品ページに複数のフォームを追加することも可能です。

■商品ごとでフォームの設定が可能

shopifyでは商品ページのテンプレートを作成できるため、商品ごとにフォームの形式の設定を変えることができます。

例えば、商品ページのセレクトボックスの中身を商品Aは「15~20」、商品Bでは「20~25」といった感じで設定が可能です。


shopifyはデフォルトでも十分使い勝手が良いですが、少しのカスタマイズをするだけでも一味違ったサイトを構築することができます。

ECサイト制作を検討されている方はもちろん、既存のサイトをお持ちでお悩みの方もぜひ弊社までお問い合わせください。

ホームページ・ECサイト運用に関する情報をメルマガで配信中!
WEB担当者様向けのお役立ち情報を無料でご案内しております。
登録は下記フォームから!

この記事を書いた人

窪田隆ノ介

Creative & Development Division