Shopifyの購入ボタンの色を変えるには

購入ボタンの色やサイズ、動きでコンバージョン率は違うのか?
ほぼ関係ないようですが、お客様にわかりやすいように、日本人にもなじみの深い「あの色」に変更します。

テーマは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

これでテーマ設定から購入ボタンの色を自由に変更できるようになりました。

購入ボタンの色を変更
ブログに戻る

コメントを残す

コメントは公開前に承認される必要があることにご注意ください。