自社ECサイトのスタイルに合わせたカスタマイズ

AnyGiftに挿入されるUIは、自社ECサイトのデザインに合わせてカスタマイズできます。

AnyGiftのUIデザインをカスタマイズする

AnyGiftが挿入するUIのHTML各要素には、各ストアでカスタマイズできるように anygift- で始まるクラスを設定しています。

テーマの編集から任意のCSSファイルを追加し、anygift- で始まるクラスにスタイルを指定してください。

クラスの例

• 購入後に発行される「eギフト受け取りURLを〜」の文言: anygift-description
• 「eギフトとは？」ポップアップのタイトル: anygift-about-modal-title-text

具体的なクラス名は、ブラウザの開発者ツールで確認してください。

CSSの追加方法

カスタムCSS機能を使う方法

2023年冬より、Shopifyテーマのカスタマイズ画面からカスタムCSSを追加できます。

テーマにカスタムCSSを追加する（Shopify公式） を参照してください。

追加するCSSの例

.anygift-form-label {
  color: #666;
  font-weight: bold;
  text-align: center;
}

.anygift-form-message-input {
  font-size: 16px;
}

テーマにCSSファイルを追加する方法

こちらは、テーマにCSSファイルを追加する一般的な方法です。

1. テーマのアセット配下に anygift.css.liquid のようなファイルを作成する
2. 反映したいページのLiquidファイルから読み込む

例えば theme.liquid で読み込むと、全ページに適用されます。

{% comment %} AnyGift用CSSの読み込み {% endcomment %}
{{ 'anygift.css' | asset_url | stylesheet_tag }}

各種文言をカスタマイズする

CSSを応用すると、UIの各種文言も変更できます。

eギフトボタンの文言を変更する

「住所を知らない相手にeギフトで贈る」を「eギフトで贈る」に変更する例です。

.anygift-e-gift-modal__open-button {
  /* デフォルトの文言を非表示にします */
  font-size: 0;
}

.anygift-e-gift-modal__open-button:before {
  /* before属性を使用し、新しい文言を指定します */
  content: 'eギフトで贈る' !important;
  /* フォントサイズは、元のサイズを継承してください */
  font-size: 11px !important;
}