残高確認ウィジェット - 設定¶
Balance check widget ページでは、ストアフロントの残高確認ウィジェットを制御します。左側のナビゲーションで Balance widget に移動してください。
右上のボタンから、ウィジェットの見た目を決めるほかの2か所に移動できます。Change design(色)と Translations(テキスト)です。
有効化と無効化¶
ステータスバッジには、ウィジェットが Enabled(有効)か Disabled(無効)かが表示されます。Enable または Disable をクリックして切り替え、ページ上部のバーで保存します。新しいストアではウィジェットは無効の状態で始まります。
ウィジェットを無効にすると、残高確認ページと埋め込みコードの両方が機能しなくなり、ストアフロントにウィジェットが表示されなくなります。
残高確認ページ¶
Gift Card Hero は、次のアドレスで閲覧できるホスト型の残高確認ページを提供します。
https://[your-store].myshopify.com/a/gifthero/balance
Copy ボタンで URL をコピーできます。または Open page をクリックすると、新しいブラウザータブでプレビューできます。
ウィジェットの埋め込み¶
ストアフロントの任意の場所に残高確認ウィジェットを埋め込むには、対象のページに次の HTML を追加します。
<div class="sc-hero-checker-container"></div>
Shopify のページやブログのエディターに貼り付けるときは、エディターの <> (Show HTML) ボタンを使ってください。これにより、コードがテキストではなく HTML として保存されます。
Gift Card Hero のストアフロントスクリプトがこの要素を検出し、ウィジェットを自動的に挿入します。
ウィジェットの動作オプション¶
これらのオプションは、お客様がギフトカードのコードを入力した後の動作を制御します。特に記載がない限り、各項目はチェックボックスです。
| オプション | デフォルト | 説明 |
|---|---|---|
| Offer products at a price similar to a card balance | オン | 残高確認後に、カードの残額に近い価格の商品を表示します |
| Show main toggle button bubble | オン | ページに浮かぶボタンを表示し、お客様がクリックしてウィジェットを開けるようにします |
| Allow to apply card balance to a cart from widget | オン | お客様がウィジェットから直接、チェックアウトに進まずにギフトカードをカートに適用できるようにします |
| Show cart/balance progress bar | オン | カートの合計のうち、カードの残高でどれだけをまかなえるかを示す進捗バーを表示します |
| Show cart/balance progress bar on cart change | オン | カートの内容が変わったときに、進捗バーを再表示します |
| Show progress on cart change (秒) | 4 | カートが変更された後、進捗バーを表示し続ける時間です |
| Allow to apply multiple gift cards | オン | お客様が一度に複数のギフトカードを適用できるようにします |
| Show widget opened on first page load (秒) | 5 | ページの読み込み後、ウィジェットが自動的に開くまでの秒数です |
依存する設定
3つの進捗バーのオプションは、Allow to apply card balance to a cart from widget にチェックが入っている場合にのみ利用できます。Show progress on cart change の時間は、Show cart/balance progress bar on cart change にチェックが入っている場合にのみ利用できます。
ページの読み込み時に自動で開く¶
Show widget opened on first page load には秒数を入力します(例: 5 と入力すると、ページの読み込みから 5 秒後にウィジェットが開きます)。0 と入力すると、お客様がボタンをクリックするまでウィジェットは閉じたままになります。
一部のストアでのページレイアウトの違い
一部のストアでは、このページがより短いレイアウトで表示されます。残高確認ページのリンクと埋め込みコードの後に、Title、Text before widget、Text after widget のフィールドが表示され、上記のチェックボックスや Enable ボタンはありません。その場合は、代わりにこれらのフィールドを編集してください。上記の動作オプションは、このレイアウトには適用されません。
見た目とデザイン¶
Change design をクリックすると、Balance widget look and feel が開きます。ウィジェットのライブプレビューが左側に、スタイルの設定が右側に表示されます。
| セクション | 変更できる内容 |
|---|---|
| Overall widget styles | Widget background、Widget font の色、Gift card border radius |
| Gift card balance form | Code input background、Code input border、Code input font、Check button background、Check button border、Check button font、Check button border radius、Input border radius |
ページ上部のバーで保存してください。
テキストと翻訳¶
Translations をクリックすると、Balance widget エリアが選択された状態で Settings → Translations が開きます。ここでは、ウィジェット内のすべてのラベルとメッセージを変更できます。入力欄のラベルとプレースホルダー、確認ボタン、Apply ボタン、Check another card ボタン、ステータスのピル、取引履歴のタイトル、エラーメッセージが含まれます。編集する言語は、言語セレクターで選択してください。
お客様から見たウィジェットの動作については、残高確認ウィジェットも参照してください。