こんにちは！フルスタックエンジニア@フラクタのナカモトです。
本日は、Shopifyの便利なCSS用の機能についてお話します。

Shopifyで使えるCSS系ファイルの種類

Shopifyでは以下、3種類のCSS系ファイルが利用できます。

・CSSファイル
・SCSSファイル
・liquidファイル

それぞれの特徴

・CSSファイル
通常のCSSファイルです。

・SCSSファイル
SCSS記法で記述できるCSSファイルです。
Shopifyサーバーが保存時に自動でコンパイルして、
「{ファイル名} + .scss.css」ファイルを生成してくれます。

・liquidファイル
Shopify用のテンプレートエンジンliquidを使ってシステム変数を利用できるSCSSファイルです。
コンパイルは以下の順に行われます。
liquidコンパイル→SCSSコンパイル→CSSファイル生成
その結果「{ファイル名} + .scss.css」ファイルを生成してくれます。

liquidファイルの便利なところ

システム変数を利用できることで、例えばShopify全体でのフォントカラーを変えたい場合に、settings_schema.jsonに定義したフォントカラーを指定しておけば、CSSのコードを書き換えることなく、再コンパイルするだけで、スタイルの変更ができちゃうってことです！
地味に嬉しい機能ですね！

詳しくはこちらの記事も合わせてご覧ください。

まとめ

Shopifyではこのような、制作サポート機能が豊富で、行いたいビジネスや表現したいデザインにより集中できるようなプラットフォームとなっています。
これからも、そのほかの便利機能についてもどんどんご紹介していきますよ！

Shopifyを無料で試す

Shopifyは、今なら14日間無料でお試しいただくことができます。
この機会に、あなたもShopifyでECサイトを開設してみませんか？

Shopify ECサイト構築サービスについて

フラクタでは、Shopifyを利用したECサイト構築サービスを行なっております。詳細につきましては、弊社サイトよりお問い合わせくださいませ。