【技術者向け】ストアデザインのマイナーチェンジの紹介

今回は、shopifyのデザインを自社HPと同じように近づけたいと思い、CSSの調整を少し行いました。

作業としてはフォントの変更とボタンカラーの変更を行いました。

フォントをデフォルトのゴシック体からgoogle font の 「 font-family: 'Noto Serif JP', serif; 」に変更しました。

最初にgoogle fontを読み込む必要がありますが、対象ファイルとしては「theme.liquid」になります。

ファイル内の</head>タグの直前にgoogle font のコードを貼り付けます。

次に、「theme.scss.liquid」の中で、変更したい箇所のCSSを変更します。

変数で管理されているので、ファイル内を検索して変更。

フォントを変更するだけで印象がかなり変わりました。

全ページ確認していると、カート内で表示される年齢確認のアプリ「Age Verification」を利用しているのですが、これにはSCSSがあたっておらず、追加調整しました。

横着して「theme.scss.liquid」に上書き用のSCSSを書いたのですが、アプリ内で調整できる箇所にはSCSSが当たりませんでした。CSSの詳細度は高めに書いているので、別ファイルを読み込みで調整するしかないのか？って疑問を持ちながらも最低限整えて終了しました。

画像はSCSSです。色々書いてますが、あたっていないのが多いです。

来年を目処に、デザインはメジャーアップデートしたいので、今年はこうした細々とした調整を気が向いたときにしたいと思います。