カスタムCSSで、Shopifyのテーマをカスタマイズする
こんにちは。
ディレクターの田辺です。
Shopifyで、テーマのCSSを変更したいとき、コード編集をしていませんか？
しかし、コード編集でのCSSの変更は、どこにどんな影響が出るかが分かりにくいため、ハードルが高いと感じる方もいると思いますし、どこをどう直したかを忘れてしまい手をつけられない状態になってしまった、という人もいるかと思います。
そんな時、便利なのが「カスタムCSS」です。
本記事では、「カスタムCSS」の概要と、「カスタムCSS」でどんなことができるかの事例を紹介します。
カスタムCSSとは
カスタムCSSの詳細な概要はShopifyのヘルプページをご確認いただくとして、本記事ではカスタムCSSがどんなものかをざっくり説明いたします。
下図は、テーマ「Dawn 11.0.0」のテーマカスタマイズ画面です。
赤い矢印で指されている入力フィールドがカスタムCSSです。
この図で言うと、このカスタムCSSは、画像バナーセクションのカスタムCSSになります。
例えば、下記のような記述をカスタムCSSに追加してみます。
.banner {
width: 500px;
margin: 0 auto;
}
下図のようになります。
ご覧の通り、バナー画像セクションの横幅がずっと狭くなりました。
さて、カスタムCSSがどんな性質を持っているかをまとめてみます。
- カスタムCSSは、全てのセクションに設定可能 (ブロックには設定できません。)
- 設定したカスタムCSSは、そのセクション内の要素にだけ影響します。他の要素に関するスタイルを記述しても無視されます。例えば、上図のバナー画像セクションのカスタムCSSに、ヘッダー要素のスタイルを記述しても、ヘッダーには反映されません。あくまで、バナー画像セクション内に存在する要素に関するスタイルのみが反映されます。
つまり、カスタムCSSを使う大きなメリットは下記と考えています。
- 1つのセクションのスタイル変更が、他の箇所に影響してしまうことを防げる (スタイル変更の影響範囲を限定できる)
- 他のセクションへの影響を気にしなくていいので、手軽に追加・変更できる
なお、セクションだけでなく、下図のようにテーマ全体のカスタムCSSもあります。
複数のセクションにまたがる要素のスタイルを一度に変更したい時にはおすすめですが、カスタムCSSの一番のメリットは、スタイル変更の影響を限定できることですので、本記事ではテーマ全体のカスタムCSSについては触れません。
カスタムCSSでできることの事例
弊社のShopifyコミュニティの回答活動の中からカスタムCSSでの利用事例を列挙します。
(解決に至っていない投稿もありますので、参考程度にお考えください。)
- スライドショーのページネーションのスタイルを調整する
- 「今すぐ購入」ボタンにアイコンを追加する
- ログイン画面、カート画面のフォントサイズを調整する
- 商品ページの画像の大きさを調整する
- スライドショーの仕切り線を非表示にする
- 商品詳細ページのアコーディオンの余白を調整する
- 商品詳細ページの価格の横に「税込」を表示する
カスタムCSSの注意点
便利なカスタムCSSではありますが、いくつか注意点があります。
まず、
https://help.shopify.com/ja/manual/online-store/themes/theme-structure/extend/add-css
のカスタムCSSを使用する際の考慮事項をご覧ください。
上記ヘルプページに記載されていないもので、弊社が認識している注意点は2つです。
- 使用できないプロパティや文字列があります。例えば、contentプロパティを使用できません。また、homepageという文字列が含まれることも許容されません。
- テーマ全体のカスタムCSSでは、規制されているはずのアットルールが一部使用できます。しかし、それが仕様なのかバグなのかが不明なので、注意してご利用ください。
まとめ
本記事を読んで、
「コード編集は怖いけど、カスタムCSSなら影響範囲も限定されるし、ちょっとやってみようかな」
と考えてくださる方が増えれば幸いです。
しかし、カスタムCSSではできなこともあり、コード編集が必要になる場合もあります。
そんな時はぜひ、弊社にご相談ください。
ご相談と御見積まででしたら無料で対応いたします。