非エンジニア店長のための Shopify テーマカスタマイズ入門ガイド
非エンジニアの店長もポイントを押さえれば Shopify テーマは安全にカスタマイズできます。この記事では、コードを触らない設定の使い方から、最低限のLiquidの考え方、修正前のバックアップ方法まで、現場でそのまま使える手順として整理しました。
結論から言うと、エンジニアでなくとも「触ってよい場所」と「触らないほうがよい場所」さえ分けておけば、Shopify テーマは十分にカスタマイズできます。オンラインストア2.0以降は、テーマエディタだけでできることが増え、Liquid コードを直接書かなくても、トップページや商品ページの情報設計をかなり細かく変えられます。
一方で、「少しだけコードを変えたら表示が崩れた」「本番テーマをそのまま編集して戻せなくなった」という失敗もよくあります。そこでこの記事では、非エンジニアが現場で安全に実装できるレベルに絞って、テーマカスタマイズの始め方と、Liquid を学ぶ時の最低限のポイントを整理します。
まずはテーマエディタでできる範囲を最大限使う
Shopify 公式のテーマ編集画面（オンラインストア > テーマ > 「カスタマイズ」）では、コードを書かずに多くの変更ができます。2021年以降の「オンラインストア2.0」対応テーマでは、セクションをほぼ全ページに追加できるため、「バナーを追加したい」「おすすめ商品を差し込みたい」といった要望の多くは、テーマエディタだけで完結します。
非エンジニアが最初に押さえるとよい操作は次の3つです。1つ目は「セクションの追加・削除・並び替え」です。トップページでヒーローバナーの下に「特集商品」のセクションを追加したり、不要なテキストブロックを削除したりすることで、情報の優先順位を変えられます。
2つ目は「セクション内ブロックの編集」です。例えば「おすすめ商品」セクションの中で、商品を差し替えたり、見出しテキストを変えたりできます。ここを細かく調整するだけでも、CVR（購入率）が変わるケースは珍しくありません。3つ目は「テンプレートの割り当て」です。コレクションや商品に対して、適切なテンプレートを選ぶことで、「セール商品だけデザインを変える」といった運用も可能になります。
テーマエディタを使うときは、PC・スマホ両方のプレビューを必ず確認します。デスクトップではきれいでも、スマホでバナー画像の文字が読めない、といったミスが特に多いためです。編集のたびに「保存前にスマホ表示を確認する」というルールをチーム内で決めておくと事故を防ぎやすくなります。
編集前に必ずやるべき3つの安全対策
テーマを触り始める前に、「本番テーマを直接編集しない」ことを徹底します。Shopify 公式ドキュメントでも、テーマの複製を作ってから編集することが推奨されています。実務では、忙しさから本番テーマをそのまま編集してしまい、週末のセール直前にデザインが崩れるというリスクが現実的にあります。
具体的には、オンラインストア > テーマから本番テーマの「…」ボタンを押し、「複製」を選びます。複製したテーマを「開発用」「検証用」などと名前を付けて、まずはそちらを編集します。作業が終わったら、プレビューで問題がないか確認し、「アクション > 公開する」で切り替えます。
加えて、次の2つも最低限の安全対策として有効です。1つ目は「テーマ設定のエクスポート」です。一部のテーマでは、設定をエクスポート・インポートできます。もし対応していれば、現在の設定状態をローカルに保存しておきます。2つ目は「公開前チェックリスト」を用意することです。
- トップページ・商品ページ・カート・チェックアウトの4画面をPC/スマホで確認したか
- 主要な導線（トップ > 商品 > カート > チェックアウト）でリンク切れがないか
- 主要アプリ（レビュー、レコメンド、チャットなど）が表示されているか
この3点をチェックリストとして共有しておくだけでも、「カートボタンが消えていた」「特定商品のページだけレイアウトが崩れていた」といったヒューマンエラーをかなり防げます。
「テーマ設定」で変えられるデザインと変えられないデザイン
テーマカスタマイズでは、「設定で変えられること」と「コードを書かないと変えられないこと」を切り分けて考えると判断が楽になります。Shopify テーマには、テーマエディタ右側の「テーマ設定」タブから変更できる共通設定があり、多くのデザインはここで調整できます。
一般的に、テーマ設定で変えられるのは、フォント・色・ボタンの角丸・フォームの表示言語・ヘッダーメニューの挙動など、サイト全体に共通する部分です。例えば、ブランドカラーを変更したい場合、最初にテーマ設定の「色」から変更すれば、ボタンやリンクの色が一括で切り替わることが多いです。
一方で、「この商品だけカウントダウンタイマーを表示したい」「特定コレクションだけ、商品カードのレイアウトを変えたい」といった要件は、多くのテーマでは標準設定だけでは対応しきれません。このようなケースで初めて、Liquid や CSS を個別に編集する検討に移ると、不要なカスタム開発を減らせます。
「これは設定でできるのか、コードが必要なのか」が判断できない場合は、まずテーマの公式ドキュメントや設定画面を一通り確認します。そのうえで、どうしても難しければ、要件をできるだけシンプルにして外部パートナーに相談するほうが、長期的な運用コストは抑えやすくなります。
非エンジニアがまず押さえるべき Liquid の最低限
Liquid は Shopify が採用しているテンプレート言語で、テーマの表示内容を動的に切り替えるために使われます。非エンジニアの店長が最初から Liquid を書ける必要はありませんが、「どんな役割なのか」「どこを触ると危険なのか」を知っておくと、開発会社とのコミュニケーションやトラブル対応がスムーズになります。
Liquid の基本的な役割は、Shopify 上のデータ（商品名、価格、在庫数など）をテンプレートに差し込むことです。例えば、商品ページのテンプレートでは、商品タイトルを表示する部分に Liquid が埋め込まれており、「この位置に {{ product.title }} を表示する」といった指示が書かれています。この {{ }} の中身を書き換えると表示内容が変わりますが、間違えるとその情報自体が表示されなくなるリスクがあります。
非エンジニアが実務でよく遭遇するのは、テキストの追記や簡単な条件分岐です。例えば「在庫が少ない時だけ『残りわずか』と表示する」といった要件は Liquid の条件分岐で書かれています。このようなコードをむやみに削除すると、在庫表示がすべて消えることがあります。ですので、Liquid の編集を行う場合は、1行でも削除する前に必ずテーマを複製し、元のコードをコメントアウトして残しておく運用が現実的です。
Liquid を学び始める際は、Shopify 公式ドキュメントの Liquid リファレンスと、テーマ開発のチュートリアルを一次情報として読み、ネット上のコード断片をそのままコピペしないことをおすすめします。バージョンやテーマによって書き方が異なる場合があるためです。「何のデータを、どこに、どの条件で表示しているのか」を日本語で説明できる範囲だけを、最初は触るようにすると事故を減らせます。
失敗例から学ぶ、やってはいけないテーマ編集
テーマカスタマイズの失敗は、技術的な難しさよりも「手順の問題」で起こることが多いです。よくあるのは、本番テーマをそのまま編集してしまい、営業中にレイアウト崩れが起こるケースです。例えば、セール直前にバナーを差し替えたつもりが、誤ってセクション全体を削除してしまい、トップページがほぼ空白になってしまう、といった事故は珍しくありません。
もう1つ多いのが、テーマのアップデート時にカスタマイズが消えてしまうケースです。Shopify ではテーマのアップデートが配信されることがありますが、新しいバージョンに乗り換えると、以前自分で編集したコードが自動では引き継がれないことがあります。結果として「デザインがきれいになったが、独自のバナーやメッセージが消えた」という事態が起こります。
これを防ぐには、「どのファイルの、どの部分を編集したか」を簡単でも記録に残しておくことが有効です。例えば、オンラインストア > テーマ > コードを編集 で開くファイル名と、編集した目的をスプレッドシートにメモしておくだけでも、半年後にテーマを更新する際の対応が大きく変わります。
さらに、1回の編集で複数の変更をまとめて行わないことも重要です。「ヘッダーを直しつつ、商品ページのレイアウトも変える」といった作業を同時に行うと、どの変更が不具合の原因か切り分けにくくなります。1つの目的ごとにテーマを複製して編集し、問題がないことを確認してから次の修正に進む、という小刻みな運用が結果的に時短につながります。
RecoBoost ならこう活かす：レコメンド枠を前提にしたテーマ設計
RecoBoost のようなレコメンドアプリを使う場合、テーマカスタマイズの段階で「どこに、どの種類のレコメンドを置くか」を決めておくと成果が出やすくなります。例えば、商品ページの「カートボタン直下」に関連商品を表示するセクションをあらかじめ確保しておけば、RecoBoost のウィジェットを差し込むだけで、アップセルの導線を自然に組み込めます。トップページでも、ファーストビュー直下ではなく「特集コンテンツの後」に人気商品レコメンドを置くなど、テーマエディタでセクションの位置を調整することで、アプリの効果を最大化できます。RecoBoost を導入する際は、まず複製テーマでレコメンド枠付きのレイアウトを試し、本番反映前にPVが多いページから順に検証していくと、売上を落とさずに改善を進めやすくなります。
まとめ
非エンジニアでも、テーマエディタを起点に「設定で変えられる範囲」と「Liquid が必要な範囲」を切り分け、編集前の安全対策と失敗しない手順を押さえれば、Shopify テーマカスタマイズは現場で十分運用できます。小さな変更から始め、必ず複製テーマで検証するルールを徹底することが、安定運用への近道です。