機能について

CSSカスタマイズ機能はAnyGiftの管理画面内でAnyGiftで表示している要素のカラーやサイズなどの見た目をCSSによってカスタマイズすることができる機能です。

管理画面の「デザインカスタマイズ」ページの「CSSカスタマイズ」タブでCSSを記載することで、自由にカスタマイズすることができます。

<aside> 💡 自社ECサイトで管理されているCSSファイルに記載することでも反映可能です。

</aside>

<aside> <img src="/icons/reorder_gray.svg" alt="/icons/reorder_gray.svg" width="40px" />

目次

</aside>

活用方法

AnyGiftによりに挿入されるUIのHTMLの各要素には、各ストアでのカスタマイズ用に anygift- で始まるクラスを設定しております。 anygift- で始まるクラスに対してスタイルを当てていただくことで、デザインのカスタマイズが可能です。

<aside> ⚠️ anygift- で始まるクラス以外のクラスは、今後の改善により変更される可能性がございます。それらのクラスに対してスタイルを当てることは非推奨となります。

</aside>

eギフトボタンのカスタマイズ

以下のようなコードを当てていただくことで、ボタンデザインの調整ができます。

サイズ

例）

.anygift-gift-ui__container {
    width: 100% !important;
}

ボタンの丸み

例）

.anygift-gift-ui__main-button {
    border-radius: px !important; # カートに入れるボタンと同じborder-radiusにする
}

カラー