Shopifyの商品ページに記念日や希望日等の日付入力欄を表示できるアプリについて徹底解説｜ご利用ガイド
はじめに
今回の記事は、Shopify アプリである「シンプル記念日入力｜お手軽日付セレクター表示」の解説記事です。
Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームを拡張する機能のようなものです。WordPress のプラグインのようなもの、とご認識頂いて大丈夫です。
「シンプル記念日入力｜お手軽日付セレクター表示」は、商品ごとに記念日や希望日を入力できる日付セレクターを追加できるアプリです。
月額 $6.99（1 週間の無料期間あり） で利用可能となっており、入力された日付は注文時の商品詳細に自動保存されるため、注文管理をより効率化し、お客様へのパーソナライズ体験を手軽に提供できます。
ご興味のある方は、以下の URL からインストールしてみてください。
「シンプル記念日入力｜お手軽日付セレクター表示」でできること
Shopify アプリである「シンプル記念日入力｜お手軽日付セレクター表示」は、以下のように店舗内の商品ごとにカレンダー形式で日付を入力できるようにするアプリです。
主な特徴は次のとおりです。
- 商品ごとに日付セレクターを表示
コード不要で簡単に商品ページへ日付セレクターを追加できます。
- 入力された日付は商品プロパティに自動保存
選択された日付は注文情報と紐付いて管理でき、入力ミスを最小限に抑えられます。
- プロパティ名の自由カスタマイズ
カートや注文に表示されるプロパティ名を自由に設定できます。
- ノーコードで細かくスタイルを設定可能
日付入力欄の色やサイズなども直感的に変更できます。
- 1 クリックでテーマに追加できる
難しいコード編集なしで、すぐにテーマへ組み込めます。
アプリのインストール
それでは、実際にアプリのインストールを行っていきましょう。
ストア管理画面左下の「設定」をクリックします。
ストアの管理画面の「アプリと販売チャネル」画面に表示されている「Shopify App Store」をクリックして、Shopify App Store に移動してください。
検索窓に、「シンプル記念日入力｜お手軽日付セレクター表示」と入力してください。
以下の画像のアプリをクリックしてください。
「インストール」ボタンをクリックして、ストアにアプリを追加しましょう。月額 6.99 でご利用いただけます。またインストール後、7 日間は無料でご利用いただけます。
「インストール」ボタンをクリックすると以下の画面に遷移します。右下の「インストール」ボタンをクリックして、アプリのインストールを行いましょう。
以下の管理画面が表示されます。
アプリをテーマに追加
次に、アプリの日付セレクター機能をテーマに追加します。
自動でアプリをテーマに追加
アプリ管理画面の下記セクションでテーマを選択して「テーマに追加」をクリックします。
テーマ編集画面が自動的に開き、アプリブロックが追加されます。
ここでエラーとなる場合、次の「手動でアプリをテーマに追加」に進んでください。
「保存する」ボタンをクリックして、有効化を確定します。
以上で、テーマへの自動追加は完了です。
手動でアプリをテーマに追加
自動追加がうまくいかない場合は以下の手順を行ってください。
アプリ管理画面を開き、「テーマを選択」でアプリブロックを設置したいテーマを選び、「テーマをプレビュー」ボタンをクリックします。
商品ページのテーマエディタが開くので、画面左のセクション一覧の「商品情報」セクション内で「ブロックを追加」をクリックしてください。（セクション内のブロック同士の間にマウスを移動すると「ブロックを追加」が表示されます）
「アプリ」のタブにシンプル記念日入力のアプリブロックが表示されるので、クリックして追加します。
これでアプリブロックが追加されるので「保存する」ボタンをクリックします。
以上で、手動でのブロック追加は完了です。
アプリのカスタマイズ
アプリをテーマに追加したら、日付セレクターをカスタマイズしていきましょう。
カスタマイズ画面を開いて、左側のセクション一覧から「シンプル記念日入力｜お手軽日付セレクター表示」をクリックします。
すると、以下のような設定項目が表示されるので、ここでカスタマイズを行なっていきます。
対象商品・コレクションの設定
- 日付セレクターを表示したい商品を選択
- 日付セレクターを表示したいコレクションを選択
個別の商品やコレクション単位で日付セレクターを有効化できます。
ラベルの設定
- ラベルの文言
- ラベルの文字色 / 文字サイズ / 太さ
ラベルとは、日付入力欄の上に表示されるタイトルのような部分です。
例）「記念日」「希望日」など
商品プロパティ名
- 商品プロパティ名
ここで設定した名称が、カートや注文管理画面で表示される商品プロパティ名になります。
日付入力欄のスタイル設定
- カレンダーの言語（English / Japanese）
- プレースホルダー（例：「Select your date」など）
- 入力文字色 / 背景色 / 文字サイズ
- 入力欄の枠線色 / 枠線太さ / 角丸
- 入力欄の内側余白 / フォーカス時のアウトライン色
日付入力フォームのデザインをノーコードで自由に変更できるのが特徴です。
余白設定
- 上の余白 / 下の余白（PC / スマホ）
アプリブロック全体の上下余白をピクセル単位で調整できます。
追加 CSS
- 追加の CSS コードを入力
さらに細かいデザインを調整したい場合は、直接 CSS を入力してカスタマイズ可能です。
おわりに
今回は「シンプル記念日入力｜お手軽日付セレクター表示」の解説を行いました。
- 商品ごとに日付入力欄を追加し、記念日や希望日などをお客様に指定してもらえる
- 選択された日付は商品プロパティに自動保存され、注文管理がスムーズ
- ノーコードで柔軟にカスタマイズでき、1 クリックでテーマに追加可能
- 月額 $6.99（1 週間の無料期間つき） で利用可能
お客様ごとの特別な日を確認しやすくなり、特別感のある体験を提供することで、ストアの魅力をより高めることができます。
ここまでお読みいただき、誠にありがとうございました。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
