Shopifyのテーマ設定では、様々な変更が可能です。
初めての設定変更では、ロゴやサイトカラーを変えたい時に、どこで変更するのか分からなかったため、主要の設定について詳しくナレッジにしていきます。
Shopifyのテーマ設定で変更できるものとは?
Shopifyのテーマ設定画面で変更できるものは、以下などがあります。
- Colors
- Typography
- Product grid
- Favicon
- Cart page
- Embellishments
- Search
- Social
- チェックアウト
- テーマスタイル
これらの中でも、ECサイトを作る際に、実際に変更を加えた項目について、下記へ説明を残していきたいと思います。
変更できること
Colors
カラーの設定ができる箇所は、以下となります。
- ヘッダーもしくはサイドバー
- ボディー(ベース)
- フッター
カラー変更できるものは、以下になります。
- 背景色
- テキストカラー
- リンクカラー
Typography
タイポグラフィが設定できます
Product grid
グリッドの設定ができます
Favicon
ファビコンの設定ができます
Cart page
カートページの設定ができます
Embellishments
装飾の設定ができます
Search
検索の設定ができます
Social
ソーシャルの設定ができます
チェックアウト
以下などを、設定・変更が可能です。
- バナー
背景画像 - ロゴ
画像 / 位置 / ロゴのサイズ - メインエリア
背景色 / 背景画像 / 入力フォームの色
※画像はリピート - 注文
背景色 / 背景画像 - フォント
見出し / 本文 - 色
アクセントリンク(リンク、ハイライト、チェックマーク) / ボタン / エラーメッセージ
テーマスタイル
テーマの変更が可能です。。
具体的には、ECサイトのレイアウトやデザインの変更ができます。
メモ
一度設定したテーマを変更した場合、デザインや設定の面で影響が出たり、一部の設定が失われることがあります。但し、コンテンツ自体が無くなってしまう訳ではありません。
ロゴを変更する方法
以下の手順で、ロゴの設定が可能です。
STEP.1
テンプレート画面を表示する
販売チャネルのオンラインストアをクリックし、テーマを選択します。
次に、現在のテーマから[カスタマイズ]ボタンをクリックします。
次に、現在のテーマから[カスタマイズ]ボタンをクリックします。
STEP.2
ロゴを変更する画面を表示する
テンプレート画面下部の「テーマ設定」メニューをクリックし、テーマ設定の画面を表示します。
次に、画面内の[チェックアウト]メニューをクリックします。
次に、画面内の[チェックアウト]メニューをクリックします。
STEP.3
ロゴの画像を設定する
チェックアウト画面のロゴ枠で、ロゴの画像や表示位置、ロゴのサイズなどを選択します。
ファビコンを変更する方法
以下の手順で、ファビコンの設定が可能です。
STEP.1
テンプレート画面を表示する
販売チャネルのオンラインストアをクリックし、テーマを選択します。
次に、現在のテーマから[カスタマイズ]ボタンをクリックします。
次に、現在のテーマから[カスタマイズ]ボタンをクリックします。
STEP.2
ファビコンを変更する画面を表示する
テンプレート画面下部の「テーマ設定」メニューをクリックし、テーマ設定の画面を表示します。
次に、画面内の[Favicon]メニューをクリックし、Faviconの設定画面を表示します。
次に、画面内の[Favicon]メニューをクリックし、Faviconの設定画面を表示します。
STEP.3
ファビコンの画像を設定する
Faviconの設定画面のFavicon imageで、ファビコン画像を選択します。
・ファビコンの推奨サイズ:32 x 32 px
・画像の形式:png
・ファビコンの推奨サイズ:32 x 32 px
・画像の形式:png
フォントを変更する方法
以下の手順で、フォントの設定が可能です。
STEP.1
テンプレート画面を表示する
販売チャネルのオンラインストアをクリックし、テーマを選択します。
次に、現在のテーマから[カスタマイズ]ボタンをクリックします。
次に、現在のテーマから[カスタマイズ]ボタンをクリックします。
STEP.2
ロゴを変更する画面を表示する
テンプレート画面下部の「テーマ設定」メニューをクリックし、テーマ設定の画面を表示します。
次に、画面内の[チェックアウト]メニューをクリックします。
次に、画面内の[チェックアウト]メニューをクリックします。
STEP.3
フォントを設定する
チェックアウト画面のフォント枠で、見出しや本文のロゴなどを選択します。