こんにちは。
ディレクターの田辺です。
Shopifyを使い始めたばかりの頃、ストアフロントの見た目を変更しようと思った時、なんでもかんでも「テーマのコード編集で解決しよう」と思っていた時期が私にもありました。
しかし、コード編集をしようと思うと、HTMLとLiquidの知識が必要になってきますし、ネットで検索して見つけたカスタマイズコードをコピペしてもうまくいかなったりすることもあります。
そんな時、ノーコードで、Shopifyのストアフロントのデザインや見栄えをある程度変更できる機能、それが「テーマ設定」です。
「テーマ設定」を利用することで、デザインにどのような変更を加えることができるかを、Dawn 10.0.0を例にざっくり解説します。
1. 「テーマ設定」にアクセスする
まずは、
ストア管理画面 > オンラインストア > テーマ
にアクセスし、下図のように、使用中のテーマの「カスタマイズ」をクリックします。
次に、
下図のようにして「テーマ設定」を開きます。
上図画面の「テーマ設定」の下に並ぶ、
「ロゴ」「色」「タイポグラフィー」などが「テーマ設定」から変更できる項目です。
2. テーマ設定からできるデザイン変更の例
例えば、商品カードの見た目を変更してみます。
Dawn 10.0.0のデフォルトの商品カードの見た目は下図です。
テーマ設定を変更することで下図のような見た目に変更できます。
テーマ設定から変更した内容を記載します。
- 商品カード > スタイル を「スタンダード」から「カード」に変更
- 商品カード > テキストアライメント を「左」から「中央」に変更
- 商品カード > 罫線 を「0px」から「1px」に変更
- レイアウト > 水平スペース を「8px」から「24px」に変更
- レイアウト > 垂直スペース を「8px」から「24px」に変更
- 色 > スキーム2 から背景色と文字色を調整
- タイポグラフィー > 本文のフォントサイズスケール を「100%」から「120%」に変更
まとめ
このように「テーマ設定」だけでも、思いの外、細かいデザイン変更が可能です。
設定項目の名称は、HTML, CSSの知識が多少ある方が、理解しやすいと思いますが、もし知識がなくても、テーマ設定を変更した内容は「保存」するまで実際のストアフロントには反映されません。
また、テーマを複製し、非公開のテーマで「テーマ設定」を変更し、問題がなければ公開中のテーマに適用する、とすることもできます。
このように、実際に各項目を操作し、どのような変化が起こるかを確認しながら設定できます。
できるだけノーコードでカスタマイズしたい！という方や、
コード編集でソースコードをなるべく汚したなく！という方は、
ぜひ、「テーマ設定」をお試しください。