共通設定で見た目と動作をカスタマイズ

この記事では、ギフトオプションウィジェットの共通設定について解説します。
共通設定では、ウィジェット全体の見た目や動作を柔軟にカスタマイズでき、お客様にとってより分かりやすく、使いやすいギフトオプションを提供するための重要な設定項目です。
また、説明文には固定の文言だけでなく、「変数」を利用して動的な表示も可能です。

共通設定の項目

「選択中の説明」「商品画像をリンクにする」に関しては、商品ページ、カートページでのみ有効です

説明

チェックボックス横に表示される説明文を編集します。お客様が最初に目にする部分ですので、提供するギフトオプションに合わせて分かりやすい文言を設定しましょう。

選択中の説明

ギフトオプションが選択されている（チェックが入っている）状態のときに表示される文言を変更します。
デフォルトでは、オプション選択時のドロップダウンリストと同じ {optionTitle} - {price} という形式で表示されます。
※{optionTitle} などの変数の詳細については後述します。

商品画像をリンクにする

フォーム設定で商品画像を表示している場合のみ利用可能です。商品画像をクリックしたときに、オプション商品ページを新規タブで開きます。

読み込み時にウィジェットを開く

通常、ウィジェットはお客様がチェックボックスをクリックすることでオプション内容が表示されます。この設定を有効にすると、ページ読み込み完了と同時にウィジェットが自動的に開き、オプションの入力フォームが表示された状態になります。
これにより、お客様はギフトオプションの存在にすぐに気が付くことができ、利用率の向上が期待できます。

変数について

「説明」や「選択中の説明」の文言をカスタマイズする際に利用できる変数について説明します。変数を活用することで、選択されているオプションに応じた動的な表示が可能になります。

「説明」で利用できる変数

変数	置き換えられる値
{optionTitle}	{productTitle} / {variantTitle} と同様の意味です。
{productTitle}	選択中のオプション商品タイトル。
{variantTitle}	選択中のオプション商品バリエーションタイトル。
{price}	選択中のオプション商品価格。ショップ設定に応じた通貨記号付き。

「選択中の説明」で利用できる変数

「説明」で利用できる変数に加えて、 以下が利用できます。

変数	置換される値
{description}	共通設定で入力した「説明」

設定例

以下は、「説明」に変数を使って **{productTitle} / {variantTitle} - {price}** と設定した場合の表示例です。

終わりに

共通設定でウィジェットの見た目や動作をどのようにカスタマイズできるかを見てきました。
特に「説明」の文言は、お客様のオプション選択体験に大きく影響します。ウィジェット設定内の「ページ設定」や「商品設定」も考慮しながら、お客様が迷わずスムーズにギフトオプションを選べるような最適な設定を目指しましょう。以下のページも参考に、ウィジェット設定全体を通して、より効果的なギフトオプション表示を実現してください。