ECサイトの管理者や出店者であれば、お店の細かい機能を変更したり、ボタンの色や大きさを修正したりという要件を経験したことがあるのではないでしょうか？
もし自分でパーソナライズすることができれば、支出を減らすことができるので、非常に有益なことです。
この記事では、CSSを使用してShopifyのテーマを調整する方法を紹介します。
ストアをカスタマイズする際には、CSSを編集することがありますが、編集する前に確認すべき点があります。
Shopifyでは、管理画面から直接ファイルを編集することができるため、通常のWebサイトのように試用環境やローカルなどで確認する必要はありません。
ただし、小さな修正であっても、直接ファイルに書き込むことはおすすめできません。
テーマの複製
CSSを編集する前に、必ずテーマを複製することをおすすめします。
公開中のストアを直接編集することは危険であり、CSS編集後にトラブルが発生した場合、元のテーマに戻すことができなくなる可能性があります。
テーマを複製することで、バックアップコピーを作成することができます。
テーマの複製方法は以下画像を参考にしてください。
１：Shopify管理画面から「オンラインストア」→「テーマ」を選択
２：複製したいテーマの３点アイコン→「複製」を選択
これでテーマの複製が完了します。
次に、テーマのカスタマイズ方法をご紹介します。
CSSをカスタマイズする手順は簡単です。
画面の指示に従って進めるだけで、新しいCSSを読み込んだり、既存のCSSを編集したりすることができます。
コードを編集する
先ほど複製したテーマから「アクション」→「コードを編集」を選択します。
公開されているテーマを選択してしまうと、本番環境のサイトにCSSが反映されてしまうので注意して選択しましょう。
アセットファイルに〇〇.cssを追加する
左のファイル一覧から、アセットファイルを探してください。この中にCSSのアセットを追加していきます。
「新しいアセットを追加する」→「空のファイルを作成する」を選択してください。
「拡張機能」はcss、「ファイル名」は任意のファイル名を入力してください。
CSSを記述しカスタマイズしていく
アセットファイル内に任意でつけた名前のcssファイルがあるか確認してください。
theme.liquidで〇〇.cssを読み込む
cssファイルを作るだけではスタイルが反映されません。「theme.liquid」ファイルを選択しcssを読み込ませてください。
プレビューでCSSが反映されているか確認する
プレビュー画面にて記述したCSSが反映されているか確認してみましょう。
確認する際は、管理画面トップに戻り、「アクション」→「プレビュー」を選択することで確認ができます。
もし、CSSが反映されていなければ、CSSの読み込みができていない可能性が高いので、再度theme.liquidや任意のCSSファイルを確認してください。
本番環境に公開する
CSSが反映されていることを確認後、本番環境にアップしましょう。
「アクション」→「公開する」を選択することで本番環境にアップできます。
CSSはShopifyのLiquidファイルに直接記述することができます。
CSSファイルを新しく作成して読み込ませることもできますし、CSSファイルに記述しなくても本番環境に反映できます。
ただし、Liquidファイルに直接CSSを記述することは管理が不安定になるため、制作会社等に委託している場合は避けた方が良いでしょう。
LP等で新しいLiquidファイルを用意している場合は、で記述しても問題ありません。
続いて、ShopifyでCSSを編集できるアプリを紹介します。
Easy Custom CSS
「Easy Custom CSS」は、ShopifyストアのテーマにCSSを追加するためのアプリです。
このアプリを使用することで、LiquidファイルにCSSを直接追加する必要がなくなります。
Easy Custom CSSは、簡単にカスタムCSSを追加できるようにするためのもので、テーマのスタイルをより個性的にしたいときや、特定の要素のデザインを変更したいときに便利です。
Custom Css Pro
「Custom Css Pro」は、テーマの管理画面から直接アクセスでき、新しいCSSファイルを簡単に作成できます。
また、テーマに直接CSSを適用することもできます。テキストエディタのような機能を備えているため、編集作業がより簡単になります。
本記事では、Shopifyにおけるテーマのカスタマイズ方法と、おすすめのCSSアプリについて紹介しました。
Shopifyは世界中で愛用されているECサイトプラットフォームであり、高品質なデザインが用意されていますが、CSSを編集することで他のストアとの差別化や新しい表現が可能になります。
本記事を活用して、オリジナルデザインのショップを作り上げていきましょう。
