Shopifyのデザインカスタマイズ方法｜テーマ選び・ノーコード・Liquidの使い分け

1.触る範囲と難易度で理解するデザインカスタマイズの3階層

ロゴを変えたいだけなのに、どこを触ればいいのか分からない。そのように考えたことはありませんか？Shopifyのデザイン変更でつまずく原因の多くは、操作の難しさより「何を、どこで変えればいいか」の見取り図がないことです。カスタマイズは触れる範囲の広さで3つの階層に分かれます。まず全体像をつかめば、自分のやりたいことがどの階層の話か見えてきます。

1-1. テーマ選び・ノーコード編集・コード編集、それぞれの違い

Shopifyのデザインカスタマイズは「テーマを選ぶ→設定で変える→コードを書く」の3階層でできています。上の階層ほど変えられる範囲は広がりますが、必要なスキルと失敗時の影響範囲も大きくなります。

3階層は触る対象が違います。

一番下が テーマ選び。サイト全体の土台になるデザインのひな型で、大枠の見た目と構成が決まります。やることは「選ぶ」だけで、特別なスキルは要りません。

次が ノーコード編集。管理画面の「テーマエディタ」で、色やフォント、ページ構成を設定画面から変えます。管理画面の操作ができれば対応できます。

一番上が コード編集。テーマを構成するファイルをLiquid（Shopify独自のテンプレート言語）で直接書き換え、エディタでは届かない部分まで作り込みます。コードの知識が要り、誤ると表示が崩れることもあります。

後戻りのしやすさも違います。設定変更は元に戻しやすい一方、コード編集はファイルそのものを書き換えるため影響が広く及びます。だからこそ、いきなり上の階層に手を出さず、やりたいことがどこで実現できるかを先に確認してください。

触れる範囲が広がるほどスキルとリスクも上がる——この対応関係を押さえれば、「自分はどの階層を触ればいいか」を判断できます。

1-2. 目的を先に決めると、触る範囲と必要なスキルが絞れる

「何を変えたいか」を先に書き出すと、3階層のどこで対応すべきかはほぼ自動的に決まります。目的が曖昧なまま手を動かすと、設定で済む変更にコード編集で挑む遠回りが起きます。

やりたいことと対応する階層は、おおまかにこう対応します。

・ロゴやブランドカラー、フォントを整えたい → ノーコード編集（テーマ設定）

・トップに特集の枠を足す、並びを変える → ノーコード編集（セクション編集）

・自社の売り方に合った土台から始めたい → テーマ選び

・会員ランクごとに表示を出し分ける、独自の商品情報の見せ方を作る → コード編集（Liquid）

こうして並べると、多くがノーコードで収まると分かります。コード編集が要るのは、設定項目では届かない独自の作り込みが必要なときに絞られます。

手を動かす前に、変えたい箇所を箇条書きにしてみてください。「ヘッダーのロゴ」「商品ページの説明欄の位置」「会員限定価格の表示」——並べると、設定で済むものとコードが要るものに自然と分かれます。これがテーマ選びや外注判断の出発点です。

変えたいことを先に言葉にすれば、触る範囲もスキルも、自社対応か外注かの初期判断も見えてきます。

2.自由度を決めるテーマ選びの3つの観点

テーマ選びは3階層で一番下の土台です。どのテーマを選ぶかで、このあとノーコードやコードで「どこまで触れるか」の上限が決まります。見る観点は3つ。価格（無料か有料か）、提供元（公式かサードパーティか）、自社の業種や拡張との相性です。

2-1. 無料テーマで足りるケースと、有料テーマが必要になる条件

無料テーマでも、商品一覧からカート、決済までの基本的な見せ方はひと通り完結します。有料が要るのは、凝ったページ構成や業種特化レイアウト、細かい表示の作り込みが必要なときに絞られます。

無料テーマで足りるのは、商品をきれいに並べたい、カートと決済までスムーズに進めたい、ブランドの色とロゴを反映したい——この程度のお店です。

有料が活きるのは次のような場合です。

・トップに特集やストーリーの枠を凝った形で組みたい

・アパレルや食品など、業種に合わせた見せ方が最初から用意されたテーマを使いたい

・商品の絞り込みや表示の出し分けを、設定だけで細かく制御したい

無料テーマは公式が用意したもので20種類前後が存在します。有料は買い切りで、価格はおおむね3〜6万円程度が中心です。月額でなく一度きりの支払いで、ランニングコストは増えません。

※無料テーマ数・有料テーマ価格は、Shopify公式テーマストア（https://themes.shopify.com/ の無料／有料フィルタ）で実数を確認できます。

混同しやすい点が一つ。「無料か有料か」は 価格 の軸で、「公式かサードパーティか」という 提供元 の軸とは別物です。公式ストアにも有料テーマは並んでおり、無料＝公式・有料＝サードパーティではありません。

まず無料で始め、設定で足りなくなったら有料を検討——多くのお店はこの順番で問題ありません。

2-2. 公式テーマとサードパーティテーマのメリット・デメリットと選び方

価格とは別に、「誰が作ったテーマか」で安心感と表現の幅が変わります。公式は本体更新への追従とサポートの安定感、サードパーティは業種特化や凝ったデザインの幅が強みです。

公式テーマはShopify自身が提供・メンテナンスしています。本体の仕様が新しくなっても合わせて更新されるため、仕様変更で表示が崩れたり古い作りのまま取り残されたりしにくく、不具合時の相談先もShopifyにはっきり定まっています。反面、使うお店が多い分、見た目で個性を出しにくい場面もあります。

サードパーティは外部の開発元が作って販売するテーマです。業種特化のレイアウトや公式にない凝ったデザインが見つかる一方、更新やサポートは開発元によって異なり、品質にばらつきがあります。

選び分けはシンプルです。本体の更新を自分たちで追え、何かあれば開発元とやり取りできるなら、サードパーティの表現力を取りにいけます。不安があれば、追従とサポートが安定した公式が無難です。サードパーティを選ぶ際は、継続して更新されているかを確認してください。レビューや評価も参考にすると、導入後のトラブルを避けられます。

表現の幅か、更新・サポートの安心か。自社の運用体制に照らせば、どちらを選ぶべきかは自然と決まります。

2-3. 業種との適合性と拡張性から、後悔しないテーマを選ぶ

見た目の好みで選ぶと、あとから選び直しが発生しがちです。「業種の売り方に合うか」「あとから機能を足せるか」「OS 2.0以降の世代か」の3点を基準に選択すると、その手間を避けられます。

まず業種との相性。写真主役のアパレルや雑貨、商品点数が多く絞り込みが要る物販、ストーリーで世界観を伝えるブランド——売り方で相性のいい構成は変わります。デモのおしゃれさでなく、自社の商品を当てはめて成立するかで見ます。

次に拡張性。あとから セクション（トップの「特集バナー」「おすすめ商品の並び」のような、ページを組み立てる区画）を足したりアプリと組み合わせたりする余地があるか。ここで効くのが テーマの世代 です。

ShopifyにはOS 2.0と呼ばれる世代があり、これ以降のテーマは全ページでセクションを自由に足し引きできます

（出典：Shopifyヘルプセンター「テーマのアーキテクチャのバージョンとソース」https://help.shopify.com/ja/manual/online-store/themes/managing-themes/versions ）。

旧世代（ヴィンテージ）を選ぶと設定で触れる範囲が狭まり、結局コード編集に頼ることになります。

選ぶ前に、候補のデモページで自社の商材を想像して確認を。画像を載せたとき、説明文が長いとき、商品が増えたとき——実運用を当てはめると、見た目だけでは分からない相性が見えます。

テーマ変更は公開後の切り替えで設定やレイアウトの作り直しが発生し、負担となります。だからこそ最初の選択が効きます。業種への合致・拡張性・世代の3点を確認すれば、「別のテーマにすればよかった」を避けられます。

3.コードを書かずにテーマエディタで変更できる範囲と操作の流れ

テーマを選んだら次はノーコード編集です。「テーマエディタ」という編集画面で、色やフォント、ページ構成までコードなしで変えられます。ここでは開き方から公開までの流れ、全体スタイルの変え方、ページ構成の組み替え方を見ていきます。

3-1. テーマエディタを開いて、変更を公開するまでの流れ

テーマエディタは、編集中をプレビューで確かめてから「公開」する仕組みです。だから、いじっている途中の変更がそのまま客側の画面に出る心配はありません。

道順はこうです。管理画面の「オンラインストア」→「テーマ」と進み、編集したいテーマの「カスタマイズ」を押すとエディタが立ち上がります。

中央に今のサイト、左で編集箇所を選び、右で中身を設定する——この3分割が基本です。加えた変更はすぐには反映されず、編集中はプレビューの状態。右上の「公開」を押して初めて実際のサイトに切り替わります。

公開テーマを直接編集もできますが、大きく手を入れるなら複製してから触るほうが安全です。複製は「下書き」扱いで本番に影響しません。試しながら作り込み、完成版を公開に切り替えれば、中途半端な状態を客に見せずに済みます。

公開前にもう一つ、スマホ表示の確認を。エディタ上部でPC/スマホを切り替えられるので、両方で崩れがないか見てから公開します。PCとスマホ表示では見え方が異なるので、両方を確認しておくと安心です。

「複製して、プレビューで試して、スマホも確認してから公開」。この順番を習慣にすれば、ノーコード編集で公開中のサイトに不具合が出る 心配はほぼなくなります。

3-2. 色・フォント・余白など、全体スタイルを設定で変える

サイト全体の印象は「テーマ設定」でまとめて変えられます。ページごとに直す必要はなく、一か所の設定が全ページに反映されます。

テーマエディタの編集には2つの役割分担があります。全体に効く「テーマ設定」と、特定の部分だけを変える「セクション編集」。色・フォント・余白のような全体の見た目は前者で扱います。

テーマ設定で変えられる代表的なものは次の通りです。

・ブランドカラー（ボタン・リンク・見出しの色） ・フォント（見出し用と本文用を別々に指定） ・余白やコーナーの丸み（全体の詰まり具合・やわらかさ） ・ロゴとファビコン（タブに出る小さなアイコン）

設定すれば、トップも商品ページも問い合わせページも一括で同じスタイルに揃います。1ページずつ塗り直す手間がないのが利点です。

ただし色やフォントを増やしすぎると統一感が崩れます。色は2〜3色、フォントは見出しと本文の2種類まで——このくらいに絞るほうが整って見えます。

全体の印象を決めるのはテーマ設定。まずブランドカラーとフォントを決めると、サイト全体の方向性が一気に定まります。

3-3. セクション編集でページ構成を変える

ページ構成は「セクション」を足す・並べ替える・消すことで、コードなしで組み替えられます。トップに特集の枠を加えたり、要らない要素を消したりがドラッグでできます。

セクションはページを組み立てる区画の単位です。トップなら「スライドショー」「おすすめ商品」「画像とテキスト」「お客様の声」といったまとまりが、それぞれセクションにあたります。エディタ左側に並び、追加・並べ替え・非表示を切り替えられます。

セクションの中には、さらに小さい ブロック が入ることもあります。「画像とテキスト」の中に見出し・本文・ボタンのブロックがあり、それぞれ足したり消したりできる入れ子の構造です。

操作は直感的で、追加して並び順を入れ替え、要らないものは非表示に。表示・非表示は切り替えられるので、消す前に一度隠して様子を見ることもできます。

全ページでセクションを自由に足せるのはOS 2.0以降のテーマです。旧世代だとトップ以外で自由度が下がり、商品ページや問い合わせページの構成を変えにくくなります。

もう一点、セクションで足せる範囲とアプリが要る範囲の境目があります。レビュー枠やFAQのアコーディオンのような「見せ方」はセクションで足せることが多い一方、サブスク決済やポイント残高の管理のように、裏で動く処理はテーマでは賄えません。この場合、アプリが必要です。見た目を組み替えるのがセクション編集、と捉えると見分けやすくなります。

追加・並べ替え・非表示を覚えれば、ページ構成はコードなしでかなり自由に組めます。まず公開前のテーマで一度試してみると、どこまで動かせるか感覚がつかめます。

4.Liquid編集で自由度が上がる反面、対応を誤るとリスクも高まる

設定では届かない部分を変えたくなったら、最後の階層がコード編集です。ShopifyのテーマはLiquidで書かれ、直接いじればエディタにない出し分けや独自レイアウトまで作れます。ただし自由度が上がるぶん、誤ったときの影響も広くなります。ここでは、できること、リスクと防ぎ方、自社か外注かの線引きを見ていきます。

4-1. Liquidで何ができ、どこを編集するのか

Liquidは、Shopifyのテーマを動かすテンプレート言語です。商品名・価格・在庫数といったストアのデータを呼び出して表示する役割で、編集すればデータの見せ方そのものを組み直せます。

テーマを構成するファイルはこのLiquidで書かれています。商品ページや一覧の骨組み、ヘッダーやフッターの中身——エディタで設定をいじったとき裏側で書き換わるのがこのファイルです。Liquidを直接編集するとは、その骨組みに手を入れる作業を指します。

具体的にできることは次の通りです。

・商品名・価格・在庫などのデータを取り出し、好きな形で表示する ・会員ランクや在庫状況など、条件で表示を出し分ける ・商品を条件で絞り込んで並べる、独自の並び順をつくる ・セクションでは組めない独自のレイアウトを作る

編集場所は、管理画面の「テーマ」→「コードを編集」にある各テンプレートやセクションのファイルです。

ノーコードとの境目は次のように考えると分かりやすいです。エディタの設定項目にあることはノーコードの範囲、設定項目にない動きをさせたいならLiquidの出番です。設定で足りるなら、わざわざコードを触る必要はありません。

Liquidとは、エディタでは届かないところに手を伸ばす道具です。そのため、操作が自由になる反面ファイルそのものを書き換えるので、リスク管理とセットで考える必要があります。

4-2. テーマ更新やコード編集のリスクは、事前の複製で防げる

コードを編集する前にテーマを複製しておけば、不具合で崩れても、テーマ更新でカスタムが消えても、元に戻せます。

避けたいのは公開中のテーマを直接書き換えることです。一か所のミスが商品ページ全体やカートの崩れにつながることがあり、公開テーマで起きれば客の画面でそのまま崩れます。

防ぎ方はシンプルで、編集前に複製します。複製したテーマで書き換え、プレビューで検証し、問題なければ公開に切り替える——この手順なら検証中のミスが本番に出ません。

もう一つはテーマの更新です。提供元からアップデートが配られますが、コードを直接書き換えていると、更新でカスタム部分が上書きされたり、新版と噛み合わなくなったりします。どこを書き換えたか記録し、更新前に必ず複製でバックアップを取ることをおすすめします。

「複製してから触る」を徹底するだけで、コード編集の怖さは大きく下がります。元に戻せる状態を手元に残すことが、Liquidを扱う最低限の備えです。

4-3. コード編集を自社で対応するか外注するかの判断基準

判断の軸は、失敗時の事業への影響度と、社内に知見を蓄積する価値があるかどうかです。 決済やカート周りのように売上へ直結する部分は外注が無難、軽い変更や繰り返し発生する改修は社内体制を作るほうが長い目でコストを抑えられます。

自社対応が向くのは次の場合です。

・変更が軽い（項目を一つ足す、表示条件を少し変える）

・同じ変更が繰り返し発生する——都度外注より社内に知見を貯めるほうが、外注費も引き継ぎの手間も抑えられます

・社内にコードを読める人がいる、または育てる余地がある

ただし、作成・修正したコードをそのまま公開テーマに適用せず、複製テーマで検証してから反映する手順は変わりません。 外注が向くのは次の場合です。

・決済・カート・在庫連携など、不具合が売上に響く部分

・一度きりで専門知識が要る複雑な改修（社内に貯める価値が薄い）

・社内に扱える人がおらず、育てる時間もない

軸は、影響範囲・社内スキル・一回かぎりか繰り返しかの三点です。影響が大きく知見がないほど外注へ、繰り返し発生して社内で吸収できそうなら自社へ振り分けます。

すべてを一方に決める必要はありません。軽い変更は自社、難しい部分や事業影響の大きい改修だけ専門会社に任せる部分外注もあります。継続的に手を入れるなら、保守契約で相談先を確保する方法もあります。

この変更を間違えたらどれだけ困るか、で考えると判断しやすくなります。戻せる軽い変更は自社で経験を積み、戻せない・影響が大きい部分は専門家に任せる——この線引きがコストと安全の両面で無理がありません。

5.まとめ

ここまでの3階層のうち、自分がどこを触ればよいかの目安が整理できました。そこで次にすべきことは、「何を変えたいか」のリストアップです。そしてさらに、設定で済むのか、セクションの組み替えなのか、コードが要るのかを仕分けてみてください。これができていれば、テーマ選びの基準も、自社か外注かの判断もぶれずに決められます。書き出したリストを手元に、次の作業へ進みましょう。

・変えたいことは見えたが、Shopifyでそもそもどこまでできるのかを先に把握したい方は、機能とカスタマイズの全体像をまとめたこちらへ：Shopifyでできること｜機能・カスタマイズ完全ガイド｜Rabo Marketing Square

・自社のやりたいことがどの階層に当たるか、テーマ選びや外注判断を一緒に整理したい方は、下記のフォームよりRaboの無料相談でご相談ください。