eギフトボタンの表示調整

AnyGiftのeギフトボタンは、商品ページやカートページの購入ボタンに一部の見た目を合わせて表示されます。AnyGift管理画面には、eギフトボタンの文言やデザインを編集する設定画面はありません。

角丸などの見た目は、Shopifyテーマ側のCSSで調整できます。テーマごとに構造や既存のデザイン指定が異なるため、テーマの開発元またはテーマの管理担当者へご相談ください。

見た目を調整したい場合

商品ページとカートページのボタンには、テーマのCSSから参照できる次のクラスが付いています。

例えば、両方のボタンの角丸だけを同じ値にする場合は、次のCSSをテーマのカスタムCSS欄またはテーマが使用するCSSファイルに追加します。

.anygift-e-gift-modal__open-button,
.anygift-cart-e-gift-modal__open-button {
  border-radius: 8px !important;
}

作業前にテーマを複製し、複製したテーマのプレビューで商品ページとカートページの両方を確認してください。ボタンの背景色、文字色、透明度、操作の有効・無効、疑似要素の content は上書きしないでください。在庫切れやeギフト設定済みの状態が判別しにくくなることを防ぐためです。

文言を変更したい場合

ボタンの文言は、ストアの状態や表示言語に応じて変わります。たとえば、カート内のeギフト設定が完了すると、設定済みであることを示す文言に切り替わります。

AnyGift管理画面から文言を変更することはできません。CSSで元の文言を隠して別の文言を重ねると、設定済みや在庫切れなどの状態が正しく伝わらないため、この方法は使用しないでください。文言変更が必要な場合は、利用中のストアと希望する文言を添えてAnyGift担当窓口へご相談ください。

表示位置を調整したい場合

通常は、AnyGiftがテーマ内の購入操作に近い位置を探してボタンを表示します。テーマの構造によって意図した位置に表示されない場合は、テーマ内にAnyGift用の配置マーカーを置き、その場所へ表示する方法を利用できます。

配置マーカーの追加はテーマコードの変更を伴います。次の情報をテーマの開発元またはテーマの管理担当者へ伝えてください。

• ボタンを表示したいページ（商品ページ、カートページ、または両方）
• 希望する位置が分かる画面キャプチャ
• 利用中のテーマ名とバージョン
• カートの形式（ページ型、ドロワー型など）

変更前に利用中テーマを複製し、元に戻せる状態にしてください。

変更後に確認すること

テーマを調整した後は、見た目だけでなく購入操作まで確認します。

1. 商品ページとカートページの両方で、ボタンが希望する位置に表示されること
2. パソコンとスマートフォンで、文言が欠けたり他の要素と重なったりしないこと
3. 通常商品、eギフト対象商品、在庫切れ商品で適切な状態になること
4. カート内容を変更した後も、現在のeギフト設定状態が正しく表示されること
5. ボタンを押すとeギフト設定画面が開き、購入操作を完了できること
6. テーマ更新や他アプリの追加後も表示と操作が維持されること

表示に問題がある場合

• 調整したテーマが現在公開中のテーマか確認します。
• テーマのプレビューと実際のストアを両方確認します。
• 商品ページ、カートページ、カートドロワーのどこで問題が起きるかを切り分けます。
• 一時的に変更前の複製テーマへ戻し、テーマ調整が原因か確認します。
• 問題の画面、商品、端末、ブラウザ、再現手順を添えて担当窓口へ連絡します。

汎用的なデザイン変更をそのまま適用すると、在庫切れ表示やカート内の設定状態が分かりにくくなることがあります。ストアごとのテーマと動作を確認したうえで調整してください。