バナー・ダイアログ・お知らせ・チェックボックスの色を、テーマに合わせて変える方法です。どのプランでも使えます。
テーマエディタで色を変える
- Shopify 管理画面で、テーマエディタを開きます。
- 「埋め込みアプリ（App embeds）」の「Omake ギフト自動追加」を開きます。
- 色を選んで、「保存」を押します。
選べる色は次のとおりです。
- バナーの背景色
- バナーの文字色（文字と進捗バーに使います）
- アクセント色（「受け取る」ボタンに使います）
- チェックボックスの色（カートとダイアログのチェックボックスに使います。チェックの印は、明るさに合わせて白か黒になります）
- ダイアログの背景色
- ダイアログの文字色（ダイアログと、カートに追加したときのお知らせに使います）
CSS で細かく調整する
角の丸み、商品画像の大きさ、価格の色などは、テーマの CSS から変えられます。Omake が出す要素は、すべて omake- から始まるクラス名を持っています。テーマの CSS で同じクラスを指定すれば、!important なしで Omake の既定値より優先されます。
色や大きさだけを変えるときは、CSS 変数を上書きします。
:root {
--omake-accent: #0b6e4f;
--omake-checkbox: #0b6e4f;
--omake-modal-radius: 16px;
--omake-modal-image-size: 64px;
}使える変数の例です。
-
--omake-banner-bg、--omake-banner-text: バナーの背景と文字 -
--omake-accent: 「受け取る」ボタン -
--omake-dialog-bg、--omake-dialog-text: ダイアログとお知らせの背景と文字 -
--omake-checkbox: チェックボックスの枠と塗り -
--omake-modal-radius、--omake-modal-item-radius、--omake-modal-button-radius: ダイアログ、ギフトの行、ボタンの角の丸み -
--omake-modal-image-size、--omake-modal-image-radius: ダイアログのギフト画像の大きさと角の丸み -
--omake-modal-free-color: 価格欄の「¥0」の色
形や余白も変えるときは、クラス名を指定します（例: バナー全体は .omake-banner、ダイアログ本体は .omake-modal__card）。チェックボックスは、テーマの指定に負けないようにしているため、.omake-optin .omake-checkbox のように、クラスを2つ以上重ねて指定してください。
知っておくこと
- テーマエディタで選んだ色が既定値になり、CSS で指定した値がそれより優先されます。
- ダイアログの画像と価格は、ギフト設定を保存したあと、または Omake の管理画面を開いたあとに出ます。
- ギフトを追加・削除したあとにヘッダーのカートの数が変わらないテーマでは、「共通設定」の「高度な設定」の「追加で再描画するセクションID」に、そのセクションの ID を入れます。通常は空のままで構いません。
