【Shopify】CSSをカスタマイズする方法【style.cssを作る】

オンラインストアの「テーマ」から

左メニューの「オンラインストア」の中の「テーマ」を選択します。

事前のバックアップ

現在選択しているテーマが出てくるので、カスタマイズする前にバックアップとして複製を作っておくと安心です。
「アクション」をクリックし、「複製する」で簡単に現在のテーマのコピーができます。

「コードを編集」へ

続いてCSSをカスタマイズするために、「コードを編集する」へ進みます。

新しいassetを追加する

「コードを編集する」へ進むと、洗濯しているテーマのコードが出てきます。
その中から、「Assets」のフォルダの下にある「新しいassetを追加する」を選択します。

そして名前を「style.css」にして作成。

style.cssを作ったら、その中にカスタマイズするCSSを書き込んでいくのですが、このままでは反映されません。

「theme.liquid」からstyle.cssを読み込む

先ほど作ったstyle.cssを反映させるために、「theme.liquid」からstyle.cssを読み込ませます。

「Layout」 の中の「theme.liquid」を開きます。

そして以下のコードをhead内で追加します。

これでstyle.cssに書いたCSSが反映されるようになります。