先日こちらの記事で紹介したShopifyですが、ECMedia-labでもこちらのサービスを使用しています。
そこで今回は、Shopifyデフォルトテーマのカスタマイズ方法をご紹介します。
デフォルトで設定されている「Debut」テーマはこんな感じです。
レスポンシブ対応でレイアウトも悪くなく、「このままでいいか」という方もいるかと思われます…。
が、CSSに手を加えて、ちょっとだけ見出しの見栄えを変える方法を記事にしていきます。
（※くれぐれもカスタマイズは自己責任で行なってください。）
テーマを複製
適用されていないテーマならば直接編集しても良いのですが、今回はすでに適用されているものとして、テーマを複製し編集します。
管理画面の「オンラインストア」→「テーマ」ページで適用中のテーマ、テーマライブラリー（アップロードされているテーマ）が確認できます。
Debutを複製しましょう。
「アクション」から「複製する」を選ぶと…
数十秒で「Debutのコピー」が用意されます。
コードを編集
複製したテーマのファイルを編集します。
複製したテーマの「アクション」→「コードを編集する」を選択
すると、ファイルツリーが表示されます。
CSSの場所ですが、「Assets」の中に格納されています。
Debutが読み込んでいるCSSは「theme.scss.liquid」で、こちらに追記しても良いのですが、
念の為、オリジナルのCSSファイルを作成し、そちらも読み込ませるようにしましょう。
「Assets」内の「新しいassetを追加する」をクリックすると、ウィンドウが開きます。
「空のファイルを作成する」タブに切り替え、名前を入力（ここではexample）し、「アセットを追加する」をクリックしてください。
「Assets」フォルダにファイルが追加されました！
続いて、このCSSファイルをテーマ内で読み込むよう、読み込みの記述があるファイルを編集します
「Layout」フォルダの中の「theme.liquid」をクリックしてください。
右のウィンドウにタブとして表示されます。
42行目にある記述をコピー&ペーストし、ペーストした記述の「theme」の部分を追加したファイル名（ここではexample）にします。
最後に右上の「保存する」をクリックするのをお忘れなく。
CSSの追記
追加したファイル名をクリックすると、右のウィンドウに新たなタブとして表示されます。
新しく追加したファイルなのでまっさらですが、ここにオリジナルのCSSを記述していきましょう。
Debutでは、紛らわしいですが「h3」というクラスを持つh2タグは以下のように表示されます。
※赤枠の箇所です
シンプルで良いのですが、見出しとしてはちょっと味気ない感じがします。
そこで以下のような記述を、example.scssに追加し、保存します。
追加ソースはこちら
See the Pen mdVBmWb by hayashi (@hayashi_) on CodePen.
追加したスタイルを実際のテーマでプレビューしてみましょう。
右上の「プレビューする」をクリックしてください。
いかがでしょう、ボーダーや背景色が入るだけでも、きちんとした見出しのようなスタイルになりました。
最後に
複製したテーマなら、適用させない限りは練習台としてうってつけです。
ガシガシ書いてプレビューして、ご自身のサイトがより良くなるようなカスタマイズを見つけ出してみてください！