購入ボタンの色やサイズ、動きでコンバージョン率は違うのか?
ほぼ関係ないようですが、お客様にわかりやすいように、日本人にもなじみの深い「あの色」に変更します。
テーマはOS2.0のDawnを使用して、テーマ設定から購入ボタンの色を設定できるようにします。
デフォルトではアクセント1が割り当てられています。
1. 設定のスキーマにid: colors_cartを追加します。
ファイル: config/settings_schema.json
[
{
"name": "t:settings_schema.colors.name",
"settings": [
{
"type": "color",
"id": "colors_cart",
"default": "#fa8900",
"label":"t:settings_schema.colors.settings.colors_cart.label"
},
]
}
]
2. 言語ファイルに日本語のラベルを設定します。
ファイル: locales/ja.schema.json
{
"settings_schema": {
"colors": {
"settings": {
"colors_cart": {
"label": "購入ボタン"
},
}
}
}
}
3. 設定データーに値を追加します。
ファイル: config/settings_data.json
{
"current": { "colors_cart": "#fa8900",
}
"presets": {
"Default": {
"colors_cart": "#121212",
}
"Craft": {
"colors_cart": "#2A332F",
}
4. ここでプッシュしてテーマ設定に購入ボタンが設定できるかを確認します。
> shopify theme push
5. バックグランド1にカスタムプロパティを設定します。
ファイル: layout/theme.liquid
:root {
--color-base-cart: {{ settings.colors_cart.red }}, {{ settings.colors_cart.green }}, {{ settings.colors_cart.blue }};
}
ファイル: assets/base.css
:root,
.color-background-1 {
--color-button-cart: var(--color-base-cart);
}
6. 購入ボタンのクラスのカスタムプロパティを変更します。
ファイル: assets/section-main-product.css
コメント /* Dynamic checkout */ 以下の クラス .shopify-payment-button__button で始まる --color-button を --color-button-cart に変更します。
7. テーマをプッシュします。
> shopify theme push
これでテーマ設定から購入ボタンの色を自由に変更できるようになりました。