メニュー

Shopifyテーマのカスタマイズ・コード編集のやり方

Shopifyのテーマはデフォルトでも十分高機能で質も高いですが、「ここだけ自分のショップに合うよう変更したい」というケースはどうしても出てきます。

この記事では、Shopifyのテーマをカスタマイズする2つの方法についてと、実際の手順をまとめています。

Shopifyのテーマカスタマイズに必要な知識

  • プログラミング言語(HTML、CSS、Liquid)
  • Shopifyテーマの構造

HTMLとCSSはホームページを作るためのプログラミング言語です。Shopifyのテーマも当然これらがベースになっているので、HTMLとCSSの知識は最低限必要です。

それに加えて「Liquid」というShopify独自のプログラミング言語により、Shopifyのショップが動作しています。

ただ、簡単なカスタマイズをする場合は、Liquidに関しては決まったコードをコピペして使い回すことがほとんど。HTMLとCSSが理解できれば簡単なカスタマイズが可能です。

逆にHTMLやCSSが多少分かる人であれば、Shoifyのカスタマイズは難しくありません

また、テーマをカスタマイズするにあたり、Shopifyのテーマがどのような構造で組み立てられているかの把握も必要があります。

「プログラムとか無理!」「テーマが壊れて動かせなくなるが不安…」という場合、弊社では簡単なカスタマイズも承っています。見積もりやご依頼はこちらのページからお気軽にどうぞ!

Shopifyのテーマカスタマイズ方法は2つ

Shopifyのテーマをカスタマイズする方法は2つあります。

1.管理画面からカスタマイズする方法

まず1つ目が管理画面からカスタマイズする方法(手順は後ほど

ショップ運営者のほとんどは、こちらの方法を覚えておけば十分です。

2.ローカル環境を準備する方法(難易度高め)

もう1つは、管理画面の外部からテーマをカスタマイズする方法です。

手順としては、

1.外部環境からテーマの編集ができる設定をする
2.自分のパソコン(ローカル環境)に編集のための準備をする
3.実際に編集してテーマをアップロード&反映させる

という流れです。

こちらは難易度が高い開発者向けのやり方なので、別の記事で改めて紹介します。

Shopifyのテーマを管理画面からカスタマイズする手順

ここからは実際に、管理画面からテーマをカスタマイズする手順を解説していきます。

管理画面からカスタマイズする手順1.管理画面ホームからテーマのカスタマイズページへ

まずは管理画面のホームから「テーマをカスタマイズする」ボタンをクリックします(または右メニューの「オンラインストア > テーマ」から)

管理画面からカスタマイズする手順2.カスタマイズするテーマを選ぶ

続いてカスタマイズしたいテーマの右上にある「カスタマイズ」ボタンをクリック。

管理画面からカスタマイズする手順3.選んだテーマのコード編集ページへ進む

右上の3点リーダー(…)をクリックし、メニューから「コードを編集」をクリック。

管理画面からカスタマイズする手順4.トップページを編集してみる

テーマの編集画面が表示されました。例えばトップページを編集する場合は、「Layout」から「theme.liquid」を選びます。

今回は「Dawn」のテーマをベースにお話しています。テーマによってファイルや記述内容が少し変わることもあるのでご了承ください。

{% section '◯◯◯' %}

と記述されいている箇所は、

「Sections」フォルダの中の「◯◯◯.liquid」というファイルを読み込む

という意味です。(例:{% section 'header' %}は、Sections > header.liquidを読み込み)

このように自分がカスタマイズしたい箇所を辿りながらコードを編集していくのが、Shopifyでのテーマカスタマイズの基本的なやり方です。

管理画面からカスタマイズする手順5.編集内容のプレビューと保存

編集ができたら「プレビュー」で実際の編集内容を確認。問題がなければ、「保存する」ボタンをクリックして完了です。


Shopifyテーマカスタマイズの最初の一歩について解説しました。

なんでも自分でやろうとせず、自社では利益を最も出せる業務に集中することも大切です

Profile

やまもと

モールから卒業して、自分でネットショップを持ちたい方向けのブログを書いています。

Shopifyの簡単なカスタマイズや、0からの構築。集客面に関する相談などはお気軽にお問い合わせください。

Recent

Tags