Shopifyを利用している方なら、テーマをカスタマイズしたいと思ったことはあるかと思います。
しかし、ちょっと難しそうでついつい後回しにしてしまっているのではないでしょうか。
Shopifyテーマをカスタマイズする3つの方法と各テーマのカスタマイズ方法を解説します。
Shopifyテーマのカスタマイズに苦戦している方には役立つ知識となっているので、しっかり理解しておきましょう。
Shopifyテーマをカスタマイズする３つの方法
Shopifyテーマをカスタマイズする方法は3つあります。
- 管理画面からテーマエディタで編集する方法
- 管理画面からコード編集する方法
- ローカル環境でカスタマイズする方法
どのカスタマイズ方法もまずは、Shopifyの管理画面へアクセスし、テーマのページを開きます。その後、それぞれの方法でテーマのカスタマイズを行います。
コード編集は少し難易度が高くなっているため、初心者は管理画面からテーマエディターで編集する方法がおすすめです。
管理画面からテーマエディタで編集する方法
Shopifyを手軽にカスタマイズする方法はテーマエディタで編集する方法です。
専門的なHTMLやCSSの知識がなくても、コンテンツの配置やテキスト変更などの細かいカスタマイズが可能です。
やり方は以下の通りとなっています。
- Shopifyの管理画面から「現在のテーマ」を選択、「カスタマイズ」をクリック
- 追加したいコンテンツをドラック＆ドロップ
管理画面からコード編集する方法
少し難易度は上がりますが、管理画面からコードを編集する方法もあります。専門的な知識がある人にとっては、テーマエディタを編集するよりも簡単かもしれません。
やり方は以下の通りとなっています。
- Shopifyの管理画面から「現在のテーマ」を選択、「アクション」＞「コードを編集」をクリック
- テーマをカスタマイズする
ローカル環境でカスタマイズする方法
最後に大幅なカスタマイズを行いたい場合におすすめしたいのが、ローカル環境でカスタマイズする方法です。この方法は、HTMLやCSS、Liquidの知識がないと難しい方法となっています。
ローカル環境でコード編集を行う場合は、Shopify Theme Kitをインストールしましょう。
やり方は以下の通りとなっています。
- Shopifyの管理画面から「現在のテーマ」を選択、「アクション」＞「テーマファイルをダウンロード」をクリック
- ダウンロードしたテーマファイルを編集する
管理画面からカスタマイズ・編集方法
ここからは、Shopifyテーマのカスタマイズの基本をご紹介します。テーマの変更方法をご紹介し、さらにテーマエディタでできる配色・フォント変更についても触れていきます。
① 好みのテーマを選択する
まずはShopifyで好みのテーマを探します。テーマ選択までの手順は以下の通りです。
- 管理画面で「オンラインストア」＞「テーマ」をクリック、現在のテーマを確認する
- 「テーマライブラリー」の「無料テーマを探す」をクリック
※「Shopify テーマストア」を選ぶと、別タブが開きます。有料/無料のテーマを手に入れることができます。 - 表示画面から自分の好みのテーマを選択する
- スタイルを選択して、「テーマライブラリーに追加する」をクリック
この手順に従えば、「テーマライブラリー」に選択しテーマが表示されるようになります。
② 管理画面からテーマエディタを起動する
好みのテーマ選択が完了したら、管理画面のテーマエディタを起動します。
テーマエディタは「テーマライブラリー」の「カスタマイズ」から起動可能です。
③ コンテンツの追加や設定を行う
テーマエディタでは、ウェブサイトのレイアウトや配色、フォントスタイルのカスタマイズが可能です。先ほど選んだ好みのテーマをテーマエディタでさらにカスタマイズすれば、かなり自分好みのデザインにサイトを仕上げることができるでしょう。
テーマコードからカスタマイズ・編集方法
Shopifyのテーマを利用して運用しているとどうしても細かい部分までカスタマイズしたい場合があります。例えば、「細かいデザインの調節がしたい」「CSSを調整を加えたい」などこだわればこだわるほど、細かいテーマ編集をしたくなります。
テーマの一部分だけを軽く編集したい場合は、「テーマコードのカスタマイズ」がおすすめです。管理画面のテーマエコードの編集が可能です。
大幅にテーマをカスタマイズしたい場合は、テーマを一旦ダウンロードしてからローカル上でコードエディタを使って編集する方法が適しています。
テーマコードから編集する場合は「HTML、CSS、Liquid」の知識が必要
テーマコードから編集を行う場合はHTML、CSS、Liquidの知識が必要不可欠となります。HTML・CSS・Liquidの知識がないと、Shopifyの細かい編集をすることは難しいです。自分で行うのが難しい場合は、プロにお願いするのも1つの手段と考えましょう。
①テーマの複製をしてバックアップを取る
「テーマコード」を編集する場合は、必ずバックアップを取っておくようにしましょう。もしテーマコードの編集内容を破棄したいという時にこのバックアップが役立ちます。
バックアップの取り方は以下の通りです。
複製するテーマで、「アクション」＞「複製」をクリック
②テーマコードを編集する
次にテーマコードの編集を行います。テーマコードの編集画面は以下のように開きます。
Shopify管理画面から「現在のテーマ」＞「アクション」＞「コード編集する」をクリック
Shopifyで好みのテーマを選択し、カスタマイズする方法であれば、短時間で好みのカスタマイズが行えるはずです。カスタマイズしたデザインの確認は、Shopify上でテーマ適用をし、実際に見てみる方法が効率的です。
Shopifyの設定・編集・カスタマイズに便利なアプリを紹介
Shopifyの設定・編集・カスタマイズを行う際に利用したい便利なアプリをご紹介します。うまくアプリを活用すれば、作業の効率化や簡素化ができることもあるので、ぜひインストールしてみてください。
All In One Product Zoom
- アプリ名：All In One Product Zoom
- 料金：月額$2.99（3日間の無料期間あり）
All In One Product Zoomはサイトを訪れたゲストが商品を拡大して見ることができるようにすアプリです。このアプリを導入することにより、ゲストが商品を拡大して見られることで、商品のより細部まで確認することができるようになります。
出典：https://apps.shopify.com/all-in-one-product-zoom?locale=ja
Shogun Landing Page Builder
- アプリ名：Shogun Landing Page Builder
- 料金：月額$39〜（10日間の無料期間あり）
Shogun Landing Page Builderは、コードの編集をせずにストアページを編集できるようにしてくれるアプリです。基本的にはドラック＆ドラップでストアページを作成することができるため、誰でも手軽にストア作成ができます。
アプリを消去してしまっても、作成したページは削除されないのが魅力の1つです。
出典：https://apps.shopify.com/shogun?locale=ja
Product Filter & Search
- アプリ名：Product Filter & Search
- 料金：月額＄19〜（14日間の無料体験あり）
Product Filter & Searchは、欲しい商品を簡単に検索できるようにしてくれるアプリです。商品数が増えてくると、Shopifyのデフォルトの検索機能だと、どうしても商品の検索がしにくくなってきます。そんな時にこのアプリを利用すれば、より正確に商品を絞り込み、検索をかけることができます。
出典：https://apps.shopify.com/product-filter-search?locale=ja
Shopifyテーマカスタマイズのまとめ
Shopifyテーマのカスタマイズ方法は以下の3つとなっています。
- 管理画面からテーマエディタで編集する方法
- 管理画面からコード編集する方法
- ローカル環境でカスタマイズする方法
初心者の場合は、「管理画面からテーマエディタを編集する方法」がおすすめですが、より細かくカスタマイズしたい場合は「管理画面からコード編集する方法」がおすすめです。
また、大幅な編集をしたい場合は、「ローカル環境でカスタマイズする方法」が適しています。
テーマコードを編集する場合は、あらかじめバックアップを取り、万が一の場合に備えるようにしましょう。また、テーマをカスタマイズする際は、Shopifyのアプリを活用してみるのもおすすめですよ。
