目次
Shopifyアプリについて
ShopifyではShopifyアプリというシステムによりストアの機能を拡張できるようになっています。
ちょうどスマートフォンにアプリをインストールしてできることを増やすというのとかわりません。電話やメールといった基本的な機能はそのままの状態でできるけど、LINEを使いたいとなったときにアプリをインストールするようなものです。
Shopifyではベーシックプランで、商品の登録・販売といったオンラインストアに基本的に必要なものは最初から揃っています。ですが、Shopifyアプリを使用することにより、Shopifyでできることを増やすことができます。
さまざまなShopifyアプリ
Shopifyアプリは多くの種類があります。例えば
- オンラインストア上でインスタグラムの画像を表示するようなオンラインストアの見た目をカスタマイズするもの。
- メールやSNSによって集客やマーケティングを行うもの。
- 注文データに基づいた発送用のラベルなどを出力するもの
- Shopifyを使ったPOSシステムを構築するもの。
などなどShopifyのアプリの機能は多種多様です。
無料アプリと有料アプリ
Shopifyアプリには無料で使えるもの・有料のものがあります。
有料のものは、ほとんどが月額制となっています。
有料のものである一定以上の使用から有料と、お試しで使えるものもたくさんあります。
Shopifyアプリの選択
もちろん、Shopifyアプリを使わずにストアを運営することもできます。ですがShopifyアプリを使用することで、Shopifyストアをより快適なものにすることができます。
ご自身の商品やサービスに合うShopifyアプリを選ぶことは非常に大切なストア構築のプロセスです。
例えば、商品がギフト(贈り物)に向いている商品であれば、LINEやSNSを通じてギフトとして発送が可能なアプリを検討してみるというのも良いでしょう。
Shopifyアプリストアへ
ShopifyアプリのインストールはShopifyアプリストアから行います。
まずはShopifyアプリストアを開きます。
ストアの管理画面にある｢アプリを追加｣からShopifyアプリストアに移行できます。
ポップアップが現れます。
Shopifyアプリストア
Shopifyアプリストアには数多くのアプリがあります。
商品レビューのためのShopifyアプリの追加
下記は商品レビューを追加した『MISEル』テーマの｢商品｣ページです。
このレビュー機能の追加はShopifyアプリを使うことにより実現できます。
上記の例ではこれから紹介する｢Product Rewviews｣という無料で使えるShopifyアプリを利用しています。
Product Reviews
Shopifyストアに商品レビューを追加するアプリにもたくさんの種類があります。
今回はShopify公式による無料で利用できる｢Product Reviews｣というアプリを追加します。
Shopifyアプリストアの一覧に見当たらない場合は、Shopifyアプリストア上部にある検索インプットなどを利用してみてください。
Product Reviews のインストール
｢Product Reviews｣の詳細を開き確認したら｢アプリを追加する｣ボタンを押してストアにアプリをインストールします。
インストール注意事項
下記のようにインストールにおいて注意事項がありますので確認して｢アプリをインストール｣をクリックしてインストールを行います。
ご注意アプリによって注意事項が異なりますのでご注意ください。またインストール中はブラウザを閉じたりしないようにしてください。
アプリの設定画面
アプリの管理画面へアクセス
アプリの設定は各アプリの管理画面から行います。｢アプリ｣項目から設定を行いたいアプリをクリックして開きます。
サイドバーの｢アプリ｣をクリックすると、インストール済みのアプリ一覧が表示されます。
ヒント:よく設定を行うアプリはピン留めしておくと便利です。
ヒント: アプリの設定画面の構成はそのアプリによって様々です。
補足:さまざまなアプリ
アプリには様々なタイプがあります。
ストアデザインに影響をあたえないもの
例えば、メールマーケティングを行うようなアプリはShopifyの実際のストア表示に影響は与えることはなく、ストアの管理画面 “バックエンド”で完結するものです。
ストアデザインに影響をあたえるもの
逆に、中にはストア表示のデザインに影響を与えるものもあります。例えば、カレンダーをストアに表示させるようなアプリなどです。
｢Product Reviews｣のアプリも訪問者からの書き込み欄が必要ですのでデザインに影響を与えるアプリの一つと言えます。
ストアのデザインに影響を与えるようなアプリ、いわばShopifyテーマと連動するようなアプリにはアプリのShopifyテーマへのインストール(埋め込み)がストアのインストールとは別途必要になります。
Shopifyアプリ｢Product Reviews｣の表示
『MISEル』テーマにこの｢Product Reviews｣を表示させるには二通りの方法があります。
『MISEル』デフォルトの表示 (タブ内に表示)
｢Product Reviews｣のアプリは非常によく使われるアプリですので、『MISEル』テーマにはデフォルトで『MISEル』テーマのデザインに沿った組み込みができるようになっています。具体的には｢商品｣テンプレートのタブ内に表示させる方法です。
ではその設定を見ていきましょう
①テーマ設定のレビュー設定
テーマ設定内にある｢レビュー｣の項目から｢レビューのタイプ｣をデフォルト(Shopify Product Reviews)に設定します。
②商品ページセクション
商品レビューはその商品のページに表示されます。
テンプレートを｢商品｣テンプレートに切り替え、｢商品ページ｣セクションの設定を開きます。
｢レビューのタブを表示にチェック｣にチェック入れます。(保存)を忘れず。
③カスタマーレビューのタブの確認
では実際の商品ページを見てください。
これまで作成したタブの中に｢カスタマーレビュー｣というタブが追加されているのが確認できると思います。このタブ中に商品レビューなどが表示されることになります。
｢Product Reviews｣のアプリは初期状態では英語のままです。
このままでは日本のお客様にはわかりにくいので翻訳などの設定を行っていきます。
アプリブロックを使用する方法
『MISEル』テーマは｢アプリブロック｣という機能に対応しています。
この｢アプリブロック｣はアプリによるセクションを表示するための特別なセクションです。
｢セクションを追加｣をクリックすると、セクション選択の下部の方に ｢アプリ｣という項目が現れます。
ご注意: アプリがあらかじめインストールしてある必要があります。
このアプリブロックによる｢Product Reviews｣の表示も可能です。
下記はアプリブロックで表示した例です。 『MISEル』テーマのタブ内ではなく一つのセクションとして表示されています。
アプリブロックを利用した表示を紹介しましたが、今回の例では｢Product Reviews｣は『MISEル』のタブを利用した表示を行います。
ご注意: ｢Product Reviews｣をアプリブロックとして挿入する場合は、｢商品ページ｣セクションによる｢Product Reviews｣での表示と併用しないようにしてください。二重に挿入されアプリの仕様上、不具合が起こります。
補足:アプリブロックの利用
アプリブロック機能は、｢Product Reviews｣だけでなく他のアプリでも利用できます。
ただしそのShopifyアプリが｢アプリブロック｣に対応している必要があります。
また、アプリブロックの挿入はそのアプリに対応しているテンプレートである必要がります。例えば、商品レビューはその商品に対してなので、｢商品｣のテンプレートである必要があります。言い換えれば、｢ページ｣のテンプレートには商品レビューは表示できません。
アプリがテーマ全体・ストア全体に対するもの場合、テーマ設定の下部にある ｢埋め込みアプリ｣から行います。
｢Product Reviews｣は特定の商品に依存する情報なので、現れません。
アプリの利用方法のご注意
Shopifyアプリは多種多様で中には、テーマへのインストールを特殊な方法で行わないといけないものもあります。(大半はアプリブロックに対応しているようですが)
各アプリの説明をしっかり読んで操作等を行ってください。Shopifyテーマはバックアップなどをとって置くとより安心です。
不明な点があれば、アプリの提供元のサポートなどに問い合わせるのも良いでしょう。
Shopifyアプリ｢Product Reviews｣の設定
アプリの設定
もう一度｢Product Reviews｣のアプリ画面を開きます。
｢settings｣のボタンを押すとこの｢Product Reviews｣のアプリの細かい設定が行えます。
Auto Publish
｢Auto Publish｣の項目では お客様がレビューを書き込んだ際自動的に反映されるかどうかを設定します。 ｢Enable｣にした場合は自動的に反映されます。(Shopifyによるスパム判定後)
｢Disable｣にした場合は、こちらでレビューを確認し承認した後はじめて、レビューがストアに反映されるようになります。
Email Settings
こちらにチェックをいれておくとレビューが書き込まれた時に通知のメールが来るようになります。
表示テキストの翻訳
先程確認したとき、タブ内の商品レビューの案内項目などが英語でした。(｢Product Reviews｣の初期状態では英語での表記となっています。｣)
その翻訳もこちらの設定画面から行います。
ヒント: より詳しい翻訳や翻訳内にあるコードについてはこちらの記事でもご紹介しています。後ほどご覧ください。
Review listing text
こちらで行った翻訳例を載せておきます。翻訳の内容は自由に行なえますが、最後に一覧を載せておきますので、そのまま使用したい場合はコピー&ペーストなどでご利用ください。
では確認してみましょう。日本語に翻訳されているのが確認できると思います。
Reviews form text
レビューの項目には他にも書き込むための投稿フォームがあり、そこも英語のままなので翻訳していきます。
翻訳一覧
| 項目 | 翻訳サンプル |
|---|---|
| Review headline | お客様レビュー |
| Write a review link | レビューを書く |
| Review summary with no reviews | レビューはまだありません。 |
| Review summary with 1 or more reviews | {{ product.reviews_counts }}件のレビュー |
| Pagination ‘next’ label | 次へ » |
| Pagination ‘previous’ label | « 前へ |
| Report as inappropriate | 不適切なレビューとして報告。 |
| Report as inappropriate message | 報告されました。 |
| Author information | <strong>{{ review.author }}</strong> on <strong>{{ review.created_at | date: ‘%b %d, %Y’ }}</strong> |
| 項目 | 翻訳サンプル |
|---|---|
| Author’s email | Eメール |
| Help message | example@example.com |
| Author’s name | おなまえ |
| Help message | なまえを入力 |
| Author’s location | お住まいの地域 |
| Help message | 東京都渋谷区 |
| Review form title | レビューを書く |
| Review rating | 評価 |
| Review title | レビューのタイトル |
| Help message | レビューのタイトルを入力 |
| Review Body | レビューの内容 |
| Help message | レビューの内容を記載 |
| Submit button | レビューを投稿 |
| Success message | レビュー投稿ありがとうございました。 |
| Error message | 必要な項目を記載してください。 |
確認
投稿欄を確認してみましょう。
日本語に翻訳されていることが確認できます。
｢Product Reviews｣アプリのテスト
『MISEル』テーマに｢Product Reviews｣アプリ埋め込みが終わりましたので、アプリのテストを行っていきましょう。
テスト投稿
では、ユーザーになったつもりで早速テストの投稿を行ってみましょう。
実際に書き込みを行い投稿します。
｢Product Reviews｣アプリの設定は自動反映は無効にしています。
ヒント: テストの投稿はあとから削除できますのでご安心ください。
アプリ管理画面内で投稿を確認
｢Product Reviews｣のアプリ画面を開いてみましょう。先程のテスト投稿により下記のようにレビューが表示されていると思います。
今回テストでは投稿の自動反映は無効にしてあったので｢Unpublished｣となっており投稿はまだ公開されていません。
ヒント: 投稿を自動反映させるかどうかは｢settings｣のAuto Publish の設定項目から選べます。｢Enabled(有効)｣で自動反映、｢Disable(無効)｣で承認してから公開の設定になります。
投稿を公開
投稿をクリックすると下記のような個別に投稿が確認できる画面に移ります。
投稿に問題がなければ ｢Publish｣を押して公開してみましょう。
先程のステータスが｢Unpublished ｣から｢Published｣に変わります。
Publishには英語で公開という意味があります。
先程のレビュー投稿した商品ページにて確認してみます。
無事レビューが反映している事が確認できました。
他にもレビューに対してストアから返信なども行えるので、ぜひ試してみてください
ご注意: レビュー公開や返信はストアへの反映に時間がかかる場合がありますのでご注意ください。
他のアプリ
ブログでは他にもこんなアプリをご紹介していますので、構築の参考にしてみてください。
カート画面に配送日時希望を指定できる入力欄を追加するアプリです。
ご利用の配送業者に合わせた希望日時を表示することが可能です。
｢テワタシ｣ネットでらくらく注文ー店舗で受け渡しー 飲食店向けのShopify利用 ー
飲食店でネット注文・店舗受取りのサービスを便利にしてくれるアプリです。
オンラインストアを改善ポイントを発見するためのアプリです。
訪れたお客様がストアのどこをよく見ているかなどを視覚的に・直感的に分析ができるようになります。
まとめと次回予告
はじめてのShopifyアプリの導入いかがでしたでしょうか?
Shopifyアプリには様々な種類がありそれぞれ目的・運用方法・価格などが異なります。
ご自身のストアの商品・サービス・運営方法に合うShopifyアプリを使用すれば、より快適にShopifyを利用できることでしょう。
次回は、さらに他のアプリを使って『MISEル』テーマへお気に入り機能を追加します。(『MISEル』テーマと提携しているアプリで無料で利用できます。)
補足: Shopifyアプリ利用のご注意
すでに補足でもお話しましたが、Shopifyアプリは多種多様で使用方法・テーマへの反映方法・価格体系などが様々な点がアプリによって異なります。
外部サービスとの連携のためのアプリであれば、外部サービスのアカウント作成や別途利用料金がかかるなどの場合もあります。
各アプリの説明をしっかり読んで確認からの利用をオススメします。不明な点があれば、インストール前にそのアプリの提供元に事前相談など問い合わせるのも良いでしょう。
サポート返信がないなどの場合は、そのアプリの使用はオススメしません。
今後の運用やトラブルのことを踏まえるとそのようなアプリは利用を控えたほうが良いでしょう。
上記で紹介しているアプリは『MISEル』テーマでの利用が確認がとれていて、アプリ提供元との相談も踏まえて紹介しておりますので、安心してご利用ください。
