Shopifyの商品詳細ページに発売予告機能を追加できるアプリ「リテリア Coming Soon」について解説

株式会社リテリアのアイコン
株式会社リテリア

はじめに

今回の記事は、Shopify アプリである「商品ページ発売予告アプリ|リテリア Coming Soon」の解説記事になります。

Shopify とは、ざっくり説明すると EC サイトを簡単に構築することができるプラットフォームであり、Shopify アプリとはそのプラットフォームの拡張機能のようなものです。WordPress の拡張機能のようなもの、と認識頂いて大丈夫です。

そもそも、Coming Soon とは、「商品の発売予告」機能のことです。
「商品ページ発売予告アプリ|リテリア Coming Soon」は、Shopify ストアに上記の Coming Soon 機能を追加することができるアプリになります。

当アプリを導入することで、ユーザーの期待感・購買意欲を高め、売り上げ向上が期待できます。

興味のある方は、以下の URL よりアプリのインストールを行なってください。

https://apps.shopify.com/shopify-application-314?locale=ja&from=hp-guide

それでは、アプリをインストールすることでできること・インストール方法・使い方の解説を行なっていきます。

Shopify デフォルトの機能でも Coming Soon 表示は実装できる?!

設定

ざっくり説明すると、以下の通りです。

  1. 発売予定の商品をストアに登録する
  1. 発売予定の商品の在庫を「0」にする

まず、発売前の商品を管理画面に登録していきます。
管理画面のメニューから『商品管理』をクリックしてください。
商品管理ページが開いたら、『商品を追加する』をクリックします。
Image from Gyazo

商品を追加するための設定画面が開いたら、必要な情報を登録してください。
発売予告なので、説明に発売予定日時を書いておくなどの工夫が必要です。
Image from Gyazo

商品のステータスが『アクティブ』になっていることを確認してください。
Image from Gyazo

在庫設定で、「在庫数」を 0 に設定して、『在庫切れの場合でも販売を続ける』のチェックを外してください。
Image from Gyazo

保存』をクリックすることで、設定は完了です。

ストア上の表示

「売り切れ」と表示されているボタンですが、こちらはクリックできないため、顧客は商品を買えない状態となっています。
無事、Coming soon のような機能を実装することができました。

Image from Gyazo

ですが、この実装方法には以下のデメリットがあります。

  • 「売り切れ」という表示が、カスタマーに悪い印象を与えてしまう可能性がある
  • 公開までの残り時間が分かりづらい
  • 商品を発売するタイミングで、マーチャントが手動で商品の公開作業(在庫数の変更)をする必要がある

上記の痛みを解決してくれるのが弊社の『商品ページ発売予告アプリ|リテリア Coming Soon』になります。

「商品ページ発売予告アプリ|リテリア Coming Soon」でできること

Shopify アプリである、商品ページ発売予告アプリ | リテリア Coming Soon は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Image from Gyazo

発売予定の商品を Coming Soon 表示にしておくことで、カスタマーは発売予定商品の情報に事前に触れることが可能です。
発売日時、発売日時までの残り時間(随時カウントダウン)を表示することができるため、カスタマーはスムーズに発売日時に関する情報を入手することができます。
また、リテリア Coming Soon は豊富なカスタマイズ性を有しております。

  • カートボタンのテキストサイズ
  • カートボタンの文言(通常時、在庫なし、発売予定時)
  • ボタン配色
    • 背景色
    • テキスト色
  • ボタン URL
    • 発売予定日時前のカート追加ボタンに URL を埋め込むことができます。LINE 公式アカウントのリンクを埋め込無などして集客を促すことが可能です。
  • 発売日時表示設定
  • 発売日時までの残り時間の表示設定

商品詳細ページに魅力的な商品画像や訴求力のある文言を設定しておくことで、カスタマーの期待感・購買意欲の向上が期待できます。

アプリのインストール

それでは、実際にアプリのインストールを行なっていきましょう。

ストアの管理画面の『アプリ管理』画面に表示されている『ストアをカスタマイズ』にクリックして、Shopify app store に移動してください。

検索窓に、『商品ページ発売予告アプリ|リテリア Coming Soon』と入力してください。
以下の画像にて赤枠で囲っているアプリをクリックしてください。

アプリを追加する』をクリックして、ストアにアプリを追加しましょう。
Shopify パートナー用アカウント(通称:開発アカウント)にて開発ストアにインストールを行うと、全ての機能を無料でご利用いただくことができます。
マーチャント用のアカウント(実際に物販などで運用しているアカウント)ですと、月額$14.99 でご利用いただけます。7 日間は無料でご利用いただけます。

アプリを追加する』をクリックすると、以下の画面に遷移します。
右上の『アプリをインストール』をクリックして、アプリのインストールを行いましょう。

請求承認画面に移動します。
請求方法を登録して、右下の緑色の『承認』ボタンをクリックしてください。

請求の承認が完了すると、アプリの管理画面に遷移します。

以上で、アプリのインストールは完了です。

アプリ設定

次に、アプリの設定を行いましょう。
基本的な設定はアプリのトップページにて行います。
『テーマに反映』という項目の設定を行うことで、テーマのお好きなページに LINE 誘導ボタンを導入いただけます。
アプリをインストールするテーマを選択』のセレクターから、LINE 誘導ボタンを導入したいテーマを選択してください。
デフォルトで、公開中のテーマが選択されています。
この例では、公開中の「Dawn」というテーマを選択しています。

以上の設定が完了したら、『有効化』をクリックしてください。
こちらをクリックすることで、LINE 誘導ボタンがテーマ内の選択されたページに挿入されます。

有効化が完了すると、画面下部より『アプリを有効化しました』という表示が出力されます。

有効化が済んだら、『プレビュー』をクリックします。
こちらのボタンをクリックすることで、有効化したテーマに移動することができます。

以下の画像の通り、『リテリア Coming Soon』のトグルボタンが ON になっていればアプリは有効化されています。

発売日時設定

それでは、早速商品の発売日時を設定していきましょう。
先程のアプリ設定にて操作していたアプリのトップページを開いてください。
左側に表示されているメニューの『発売日時管理』を選択してください。

発売日時確認画面が開きます。
こちらの画面では、発売日時を指定した商品の一覧を確認することが可能です。
それでは、右上の『発売日時を設定』ボタンをクリックしてください。

以下の画像に示す発売日時設定画面が開きます。
この画面にて、発売日時の設定を行います。
以下の手順に沿ってご設定ください。

  1. 商品を選択(発売日時を設定したい商品を選択してください。)
  2. 予定日(カレンダー上から発売予定日を選択してください。)
  3. 予定時刻(こちたで発売予定時刻を設定いただけます。一番右に表示されている時計のマークをクリックすると、時刻の選択肢が表示されます。)

上記の内容の設定が完了したら、右上の『変更保存』ボタンをクリックしてください。
こちらをクリックすることで、発売日時が保存されます。
以上で、発売日時の設定は完了です。

発売日時確認画面に戻ってみましょう。
先ほど設定した商品ですが、ステータスが『発売前』となっております。
発売予定日時をすぎることで、ステータスが『公開中』となります。

オンラインストア側の見た目は以下のようになります。
カートボタンはクリックできないようになり、発売日時と残り時間(毎秒、カウントダウンする)が表示されます。

発売日時を削除

誤った商品に発売日時を設定してしまったシチュエーションを想定してみます。
商品の発売日時設定を削除する必要があります。
このような場合、どのような操作が必要なのかご説明いたします。

発売日時確認画面を開いてください。

発売日時設定済み商品一覧から、設定を削除したい商品の『削除』ボタンをクリックしてください。

削除後、以下のようにステータスに『設定なし』と表示されていれば削除が完了しております。

カスタマイズ方法

カスタマイズは、テーマエディタ(『テーマのカスタマイズ』を選択することで開く画面)にて、行います。
テーマ設定』>『アプリを埋め込む』を選択すると、以下のような画面が表示されます。

ボタンテキストサイズ

ボタンのテキストサイズを変更することが可能です。

ボタン設定(発売日時後)

発売日時後に表示されるカートボタンの表示に関する設定です。

  • テキスト(カートボタンに表示するためのテキスト)
  • 在庫がない場合のボタンのテキスト

● カート追加ボタンのテキスト

● 売り切れ

ボタン設定(発売日時前)

発売日時後に表示されるカートボタンの表示に関する設定です。

発売前にもボタンを表示する(チェックボックス)

発売前にカートボタン(クリック不可能 or リンクが挿入されている場合にはクリック可能)を表示する場合は、こちらにチェックを入れてください。

チェックを入れない場合は、以下のようにカートボタンが非表示化されます。

テキスト

発売前のカートボタンの文言を変更することが可能です。
発売日時前には、こちらで設定したテキストが適用されます。
以下のような文言を設定します。

例)

  • 近日公開
  • Coming Soon
  • 発売予定

配色

  • 背景色(ボタンの背景色)
  • テキストの色(ボタンのテキストカラー)

● 設定画面

● ボタンの見た目

ボタン URL

ボタンに URL を埋め込むことが可能です。
こちらを設定すると、ボタンがクリック可能になります。ボタンをクリックすると、設定した URL のページの遷移します。
LINE 公式アカウントのリンクなどを設定することで集客効果が見込めます。

LINE 友達追加ボタンを表示する(チェックボックス)

上記の『ボタン URL』を設定しているという前提の上、こちらのチェックボックスを有効化すると以下のようなボタンが表示されます。

発売日時の表示設定

発売日時の表示は以下の画像の青枠の部分になります。

発売日時の表示する(チェックボックス)

発売日時を表示する場合には、こちらのチェックボックスにチェックを入れてください。

発売日時フォーマット

発売日時のフォーマットを選択いただけます。
フォーマットは以下の通りです。

  • 2022年1月1日
  • 2022/1/1
  • 1月1日
  • 1/1

発売日時の表示

発売日時の文言を設定することが可能です。
以下のように設定すると、添付画像のように発売日時の文言が表示されます。

発売予定日時は、[publishdate]です!

発売日時だけ表示したい場合には、以下のように設定してください。

[publishdate]

曜日の表示設定

  • 曜日の表示(チェックボックスにチェックを入れると曜日が表示されます)
  • 曜日の表示スタイル(以下のようなスタイルがございます。)
    • (日)
    • 日曜日
    • Sun
    • Sunday

発売時刻を表示する(チェックボックス)

発売時刻を表示したい場合には、こちらのチェックボックスにチェックを入れてください。
チェックを外すと以下のような表示になります。

発売までの残り時間の表示設定

残り時間の表示は、以下の画像の青枠の部分になります。

残り時間を表示する(チェックボックス)

残り時間を表示したい場合には、こちらのチェックボックスにチェックを入れてください。

残り時間表示

残り時間の文言を設定することが可能です。
以下のように設定すると、添付画像のような表示になります。

発売まで[resttime]です!

Image from Gyazo

[resttime]

Image from Gyazo

テキストの整列位置設定

左揃えにする(チェックボックス)

こちらのチェックボックスにチェックを入れると、発売日時と残り時間が左揃えになります。
チェックボックスを外すと、中央揃えとなります。

(左揃え)

(中央揃え)

終わりに

今回は、「商品ページ発売予告アプリ|リテリア Coming Soon」の解説を行いました。

少しでも興味があれば、以下のリンクよりアプリをインストール頂けるとありがたいです。

ここまでお付き合い頂き、誠にありがとうございました。

https://apps.shopify.com/shopify-application-314?locale=ja&from=hp-guide

recommendおすすめ記事

らくらくお気に入りリスト | リテリア wishlistのアイコン
アプリ解説

Shopifyでお気に入り機能を実装するアプリ『リテリア wishlist』を解説

セット売り|リテリア セット販売のアイコン
アプリ解説

日本語に完全対応したセット販売アプリ「セット売り|リテリア セット販売」について徹底解説

らくらく見出し挿入アプリ|リテリア Titleのアイコン
アプリ解説

Shopifyで高スタマイズタイトルを簡単に導入できるアプリ「リテリア Title」について解説

スマホナビゲーション|リテリア Navigationのアイコン
アプリ解説

Shopify ECサイトをスマホで利用しているユーザーのためのアプリ「スマホナビゲーション|リテリア Navigation」解説

よくある質問どこでも挿入|リテリア FAQのアイコン
アプリ解説

ShopifyストアにFAQ(よくある質問)を挿入できるアプリ『リテリア FAQ』の使い方を徹底解説

どこでもYouTube動画埋め込み|リテリア Videoのアイコン
アプリ解説

ShopifyストアにYouTube動画を埋め込む方法を徹底解説!

らくらくバナー設置アプリ|リテリア Bannerのアイコン
アプリ解説

Shopifyでリンク付き画像を簡単に設置できる「リテリア Banner」に付いて解説

追従購入ボタンらくらく挿入|リテリア Buy Buttonのアイコン
アプリ解説

商品ページに追従ボタンを簡単に導入できるShopifyアプリ | リテリア Buy Button について解説

送料無料キャンペーン|リテリア 告知のアイコン
アプリ解説

【公式解説】簡単に送料無料バーを設定できる Shopify アプリ「リテリア 告知」について解説!

スライドショー挿入アプリ|リテリア スライドショーのアイコン
アプリ解説

高カスタマイズ画像スライドショーを挿入できるShopifyアプリ「リテリア スライドショー」の使い方を徹底解説

クーポンコード 1クリックでコピー|リテリア Couponのアイコン
アプリ解説

画像をクリックするだけでクーポンコードをコピーできるShopifyアプリ「リテリア Coupon」の解説

離脱防止ポップアップバナー挿入アプリ|リテリア Popupのアイコン
アプリ解説

Shopifyで離脱防止ポップアップを設置できる「リテリア Popup」について徹底解説

らくらく日本語フォント設定|リテリア Font Pickerのアイコン
アプリ解説

Shopifyで日本語フォントを使えるアプリ『リテリア Font Picker』について徹底解説

どこでもカートに追加|リテリア ぽんぽんカートのアイコン
アプリ解説

【Shopifyアプリ】トップページやコレクションページから1クリックでカートに追加出来るアプリについての解説

らくらく商品レビュー|リテリア Reviewのアイコン
アプリ解説

日本製商品レビューShopifyアプリ「リテリア Review」の使い方を徹底解説

らくらくランキング表示アプリ|リテリア Rankingのアイコン
アプリ解説

Shopifyでコレクションをランキング表示するアプリ『リテリア Ranking』を徹底解説

らくらく余白調整|リテリア Marginのアイコン
アプリ解説

簡単に余白を調整できるShopifyアプリ「リテリア Margin」を使ってストアのデザイン性を向上させよう

Aboutページらくらく作成|リテリア About Usのアイコン
アプリ解説

ShopifyストアのAboutページに表を埋め込むことができるアプリ「リテリア About Us」を解説

LINE誘導ボタンらくらく設置|リテリア LINE誘導のアイコン
アプリ解説

LINE誘導ボタンを簡単に設置できるShopifyアプリ「リテリア LINE誘導」について徹底解説