Shopifyのテーマガイド

3. easyPointsの表示方法3選

easyPoints, Shopify
2024/08/09

Shopifyのオンラインストアのデザイン、使用感、機能はテーマと呼ばれるプリセットをもとに管理されています。本記事は以下シリーズの第3弾にあたり、第1弾: Shopifyの「テーマ」とは、第2弾: テーマのカスタマイズ機能でできることに続き、easyPointsの機能をテーマ内に表示する3つの種類と方法について解説します。

easyPointsにはウィジェット、カスタムセットアップ、アプリブロックの3つの実装方法があり、それぞれに特徴的な仕様やメリットが存在します。ストアにあった実装方法を選択いただくことで、お客様の使用感、かかるコストや日数などが最適化可能であり、より使いやすいポイントシステムを実現できます。

以降では各実装方法の詳細を解説いたします。

ウィジェット

easyPointsのウィジェットは、セットアップ不要で実装可能なストア内のポップアップカードです。テーマのカスタマイズ画面から、埋め込みアプリ設定によって有効化が可能であり、インストール直後からフリープランを含むすべてのプランで運用可能です。

特徴として各種オプション機能やポイント情報を内包した各種ウィジェットカードがあり、ストアの設定に応じて自動で各カードが表示されます。ポイント利用フォームに始まり、会員ランクの表示や進捗確認画面、コレクションへのリンクや誕生日入力フォームまで、様々なカードが表示されます。
easyPointsのすべての機能がセットアップや追加料金不要で導入可能です。

ポイントを利用する際にはカート内でウィジェットを開き、ポイント利用フォーム内に利用したいポイント数を入力の上、「ポイントを使う」ボタンをクリックします。

非ログイン時にはログイン・会員登録をご案内したり、商品ページ閲覧時には獲得可能ポイントが自動表示されたり、開いていない時にもさまざまな情報を表示可能です。

その他にも様々なカードがございます。各種詳細は以下のリンクをご覧ください。また、デモストアにて直接動作を確認可能です。

> ウィジェットの表示内容について

> ウィジェットデモストア

ご注意点としては、デザインのカスタマイズに制限がある点がございます。メインカラーや配置などはカスタマイズにて調整が可能ですが、ウィジェット内のカードの配置や文言、機能などは変更できませんのでご注意ください。
また、ポイントによる割引額などは決済画面までは確認できません。

アプリブロック

アプリブロックはテーマのカスタマイズ画面内で選択可能なアプリの要素であり、フリープランを含むすべてのプランでご利用いただけます。easyPointsでは以下の項目が利用可能です。

商品ページ用ブロック

購入時の獲得ポイント

アカウントページ用ブロック

会員ランク情報
ポイント残高

カートページ用ブロック

カート合計獲得ポイント
ポイント利用フォーム

その他

ストア内バナー

設定時はShopifyのテーマカスタマイズページから、編集したいページへ移動し、「ブロックを追加」から任意のeasyPointsブロックを選択してください。テーマによっては構造上の理由によりブロックの追加可能箇所に制限がある場合もありますのでご注意ください。
また、アプリブロックの利用はオンラインストア2.0対応テーマに限られますので旧バージョンのテーマをご使用中の場合にはテーマのアップデートを行なってください。

また、easyPointsの要素以外にもストアカスタマイズでは様々な内容の編集が可能です。カスタマイズ機能および各種アプリブロックの詳細は以下の記事をご参照ください。

> テーマのカスタマイズ機能でできること

> easyPointsのアプリブロック

カート内にて直接ポイント利用操作が可能ですが、最終的なお支払い金額はチェックアウトページにてご確認いただきます。

前述の通り、テーマやカートの種類によっては制限が生じる場合があることに加え、誕生日特典利用時の入力フォームなどの機能は非対応となります。デザインのカスタマイズはCSSを用いて編集も可能ですが、コードを用いずに実行可能な内容には制限がございます。

カスタムセットアップ

カスタムセットアップはeasyPointsのご利用方法の中で最もカスタマイズ性が豊富なものであり、ストア様のご希望に応じたセットアップがご案内可能です。ご利用にはベーシックプラン以上へのご加入が必須条件となります。
本セットアップではデザインの完成予定図となるモックアップの作成から始まり、修正を経た後に弊社エンジニアが以下に代表されるポイント関連要素をストアのコードに実装いたします。

共通要素

商品ページの獲得ポイント数
アカウントページの保有ポイント数
カートページのポイント利用フォーム、獲得合計ポイント、利用可能ポイント

プランに応じたオプションセットアップ

アカウントページの会員ランク情報
アカウントページおよび会員登録ページの誕生日入力フォーム
アカウントページのポイント履歴

また、すべての要素が細かいデザインまで修正可能であり、ストアに合うデザインの調整や特殊なセットアップまで幅広くご対応いたします。（テーマの制限等により実装が難しい内容もございますので、特殊な内容のご希望は事前にご相談くださいませ。）

また、実装の一例として弊社デモストアがございますので、以下リンクをご確認くださいませ。

> カスタムセットアップデモストア

特殊なセットアップのご相談や、よりストアに馴染むデザインの実現、細部のご調整等をご希望の場合にはぜひカスタムセットアップにて最高のポイントシステムを実現しましょう。

ポイントを利用する際にはカート内のポイント利用フォームにポイント数を入力し、「ポイントを使う」をクリックします。小計金額や獲得予定のポイント数にも瞬時に割引情報が適用され、お客様は正確な金額を常に確認することができます。

まとめ

以上のようにeasyPointsには3種類の表示方法がございます。表示内容により実装にかかる日数や労力、適用可能な機能などが異なりますので、あなたのストアにあった表示方法をお選びください。より詳細な内容に関するご質問や、実現したい内容に応じたご案内、カスタムセットアップのご依頼をご希望の場合にはぜひ弊社カスタマーサポートまでお気軽にご相談ください。