【NEW 】転職や給料アップに向けて、Webマーケティング関連の資格について調べてみた [ → 記事を読む ]

Shopifyのテーマ設定画面で変更できるもの

Shopifyのテーマ設定画面で変更できるもの

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の設定画面を表示します。
STEP.3
ファビコンの画像を設定する
Faviconの設定画面のFavicon imageで、ファビコン画像を選択します。
・ファビコンの推奨サイズ:32 x 32 px
・画像の形式:png

フォントを変更する方法

以下の手順で、フォントの設定が可能です。

STEP.1
テンプレート画面を表示する
販売チャネルのオンラインストアをクリックし、テーマを選択します。
次に、現在のテーマから[カスタマイズ]ボタンをクリックします。
STEP.2
ロゴを変更する画面を表示する
テンプレート画面下部の「テーマ設定」メニューをクリックし、テーマ設定の画面を表示します。
次に、画面内の[チェックアウト]メニューをクリックします。
STEP.3
フォントを設定する
チェックアウト画面のフォント枠で、見出しや本文のロゴなどを選択します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA