💭

【Shopify】カスタマイズ画面で変更した色をCSSファイルで扱う方法

2021/10/13に公開

CSS

Shopifyテーマのカスタマイズ画面で変更した色をCSSファイルで扱うための方法について、テーマDawnを例に紹介します。
カスタマイズ画面では、以下の画像のようにボタンなどの色などを自由に変更できます。

本投稿では、画像内で色を変更した「アクセント1」の部分について、カスタマイズ画面とCSSの関係を記述します。

「アクセント1」のコードはconfig/settings_schema.jsonに書かれています。カスタマイズ画面で色を変更すると以下のコードの値が変更されます。ここでlabel,infoはカスタマイズ画面に表示させる文字が設定されています。また、色の初期設定は#121212となっています。

config/settings_schema.json

   {
        "type": "color",
        "id": "colors_accent",
        "default": "#121212",
        "label": "アクセントカラー",
        "info": "サイト内のタグなどの色を変更します"
     }

カスタマイズ画面で変更した色をCSSで使用するためにはlayout/theme.liquidの<head>タグ内に以下のコードを書き込む必要があります。

layout/theme.liquid

:root {
    --colors_accent: {{ settings.colors_accent }};
}

設定した--colors_accentをCSSファイル内で以下のように使用することでカスタマイズ画面で変更した色を反映させることができます。

style.css

.btn {
  color: var(--colors_accent);
}

補足

shopifyではスタイルシートの読み込み速度が遅いことからSCSSの使用が非推奨となっています。

しかし、テーマ開発をする上でSCSSは欠かせない存在です。実際には、SCSSをCSSに変換して読み込ませることになると思います。SCSSを使用して開発を行う場合は、次のようにscssファイル内の変数に設定することで扱いやすいコードが書けると思います。

$color_accent: var(--colors_accent);

GitHubで編集を提案

補足

Discussion