Shopifyのカスタマイズ方法｜テーマ編集・コード編集の3つの方法と業者依頼の判断

Shopifyでストアを構築したあと、「もっとブランドらしくつくり込みたい」「商品ページを売れる仕様にしたい」と感じる場面は少なくありません。 テンプレートのままでは、競合との差がつきにくいのも事実です。

しかし、どこまで自分で変えられて、どこから専門知識が必要になるのか、最初は判断しづらいところです。やり方を間違えると、思った以上に時間とコストがかかってしまうこともあります。

この記事では、Shopifyでカスタマイズできる範囲、テーマ編集・コード編集・アプリという3つの方法、着手前の準備、そして自社で対応するか専門家に依頼するかの判断基準まで、一気通貫で解説します。ぜひ参考にしてみてください。

Shopifyでカスタマイズできる範囲｜どこまで自由に変えられる?

Shopifyは「ストア全体のデザイン」から「個別ページ」「機能追加」まで、想像以上に広い範囲をカスタマイズできます。ただし、契約しているプランによって対応範囲に差が出るところもあるため、まずは全体像をつかんでおきましょう。

トップページのカスタマイズ

トップページは、ヘッダー・フッター・スライダー・バナー・コレクションの陳列など、構成要素が多いページです。テーマエディタのセクション機能を使えば、これらの順序を入れ替えたり、追加・削除したりすることができます。コードを書かずに見た目を整えられるため、まず触れてみるべき部分といえます。

第一印象を左右する部分でもあるので、公開前にいくつかパターンを試してみるとよいです。

商品ページのカスタマイズ

商品ページでは、商品名・画像・説明・価格・購入ボタン・関連商品の表示などを細かく制御できます。購買にもっとも直結するページなので、カスタマイズの優先度はここがいちばん高いと考えてよいです。デザインを整えるだけでなく、導線そのものを見直す視点が欠かせません。

どの要素を変えれば購買率が動くのか、優先順位をつけながら手をつけていくのが効率的です。

お問い合わせページ・購入ボタンのカスタマイズ

お問い合わせページは新規に作成でき、受信先メールも自由に設定できます。購入ボタンについても、色・配置・サイズ・文言まで一通りカスタマイズが可能です。

小さな部分ですが、コンバージョン率に影響しやすい箇所でもあります。どちらも手軽に変更できる分、こまめに見直しておきたい部分です。

チェックアウト画面の高度なカスタマイズはShopify Plus限定

購入完了直前のチェックアウト画面も、ロゴの追加や背景色・画像、色・フォントの変更といった標準的なカスタマイズは、Basicプラン以上の全プランで行なえます。アプリを追加して機能を補うことも可能です。

一方、checkout.liquidやCheckout Branding APIを用いた高度なカスタマイズは、Shopify Plus限定です。ブランド独自の購入体験を細部までつくり込みたい場合は、Plusプランが必要になります。

なお、従来Plusで使われてきたcheckout.liquidは廃止が進んでいます。チェックアウト本体（情報・配送・決済ページ）の編集は2024年8月13日に無効化され、サンキューページ・注文状況ページのアップグレード期限は2025年8月28日、2026年1月からは未対応ストアの自動アップグレードが始まっています。最新スケジュールはShopify公式ヘルプ「チェックアウト拡張機能への移行ガイド」で確認できます。

Shopifyのカスタマイズ方法｜テーマ編集・コード編集・アプリの3つを比較

Shopifyのカスタマイズは、大きく以下の3つの方法に分けられます。

• テーマ編集
• コード編集
• アプリ

それぞれ難易度・費用・自由度が異なるため、目的に合わせて選ぶことが欠かせません。どの方法から手をつけるかで、作業の負担感も大きく変わってきます。まずは特徴を比較しながら、自分のストアに合う進め方を考えてみましょう。

方法①テーマ編集(ノーコード)｜手順と変更可能範囲

テーマ編集は、管理画面から[オンラインストア]→[テーマを編集する]をクリックするだけで始められます。

エディタの左側メニューから「ヘッダー」「フッター」「スライダー」「告知バー」などのセクションを選べば、コンテンツの追加や並び順の変更もその場で変更可能です。「テーマ設定」を開けば、配色やフォントといったストア全体の見た目もまとめて調整できます。

画像の差し替えも、セクションごとにファイルをアップロードするだけで完了します。セクションの追加・削除もドラッグ操作で行なえるため、配置を試しながらしっくりくる形を探っていけるところが魅力です。

コードの知識がない初心者の方や、レイアウト調整・基本設定で十分なケースに向いている方法といえます。プレビュー画面で見た目を確認しながら進められるため、変更内容がすぐに反映されているか確認しやすいところもポイントです。まずはここから手を動かしてみるのが、いちばん失敗の少ない進め方になります。

方法②コード編集(HTML/CSS/Liquid)｜手順と編集ポイント

より自由度を求めるなら、コード自体が必要になります。編集したいテーマの[アクション]（三点リーダー）→ [コードを編集]からコードエディタを開き、header.liquid、footer.liquid、style.cssといったテーマファイルを直接編集していく方法です。

コードを編集するには、ShopifyのテンプレートエンジンであるLiquidの基本構文を理解していることが前提になり、専門知識が欠かせません。その分、デザインや機能はほぼ思い通りにつくり込めます。

たとえば、独自のセクションを新しく組んだり、特定のページだけ細かく動きをつけたりすることもできます。オリジナルデザインで他社と差をつけたい、独自機能を実装したいというケースに向いています。

コードを直接書き換える分、ミスがあると表示崩れにつながりやすいため、本番環境に反映する前にプレビューでしっかり確認しておくとよいです。

方法③Shopifyアプリで機能追加｜手順とおすすめカテゴリ

Shopify App Storeからアプリをダウンロードすることで、機能拡張をワンクリックで追加できます。

「PageFly」や「Gempages」といったページビルダーアプリを使えば、ドラッグ&ドロップでランディングページをつくることもできます。レビュー機能なら「Judge.me Product Reviews App」、クロスセルなら「Byte Lookbook & Shop The Look」など、サブスクリプションも含めて特定の用途に特化したアプリが数多くそろっています。

機能拡張をスピーディーに実装したいケースに向いていますが、入れすぎるとサイトの表示速度が落ちる点には気をつけておきましょう。導入前に無料プランの範囲を確認し、ストアの規模に合った課金プランを選んでおくと、コスト面でも無駄が出にくくなります。

カスタマイズ前に必ずやるべき3つの準備

カスタマイズはトラブルが起きると元に戻せないこともあります。見た目を少し変えるだけのつもりが、想定外の表示崩れにつながるケースも珍しくありません。着手する前に、最低限やっておくべき準備を3つ確認しておきましょう。

テーマを複製してバックアップを取る

[オンラインストア]→[アクション]→[複製]から、現在のテーマを複製できます。

複製は最大20個まで保存可能です。設定を変更して失敗したときの戻し先になるため、カスタマイズ前には必ず行なっておきたい工程です。複製したテーマには「公開中」のテーマと区別できる名前をつけておくと、あとで見分けやすくなります。複製の作成自体は数秒で終わるので、作業のたびに新しい複製をつくる習慣をつけておくと安心です。

利用可能なサポートレベルを確認する

無料テーマを使っている場合、Shopifyサポートが軽微な変更に対応してくれます。Basicプラン以上であれば、15分単位で最大60分の無料デザインサポートを受けられます。有料テーマを使っている場合は、外部の開発者へ直接問い合わせる形になります。

自分のプランとテーマの組み合わせで、どこまでサポートを受けられるかを把握しておくと安心です。サポートの範囲を超えるカスタマイズになりそうなときは、早めに外部リソースの確保を考えておくと、作業が滞りにくくなります。

＊参考　Shopify サポートへの問い合わせ方法

画像アップロードの規定・要件を確認する

Shopifyでアップロードできる画像には上限があります。サイズは最大5000×5000ピクセル、または25メガピクセル、容量は20メガバイトまでです。

対応フォーマットは以下の通りです。

• PNG
• JPEG
• PSD
• TIFF
• BMP
• GIF
• SVG
• HEIC
• WebP

事前に確認しておけば、いざというときの作業の手戻りを防げます。大きすぎる画像はページの表示速度にも影響するため、アップロード前に圧縮しておくのもおすすめです。画像編集ツールでまとめて書き出しておくと、商品数が多いストアでも作業の手間を減らせます。

＊参考　Shopifyヘルプセンター | 商品メディアの種類

商品ページを売れるページに仕上げる6つのポイント

商品ページは購買率にもっとも直結するページです。カスタマイズをする際に押さえておきたい6つのポイントを、順番に見ていきましょう。それぞれ単体でも効果はありますが、組み合わせて整えていくことで購買率の改善がより大きくなります。

商品名の設定(SEO・H1タグ)

商品名には、キャッチコピーの要素とブランド名を併記すると効果的です。多くのテーマでは商品名がそのままH1タグとして出力されるため、検索エンジンの評価にも直結します。

検索から流入を増やしたいなら、ここは外せないポイントです。検索される語句を自然に含めておくと、検索結果での見え方も整ってきます。

商品画像の選定

商品単体の画像だけでなく、利用シーンを伝える画像も複数枚用意しておきましょう。画質の低い画像は離脱の原因になりやすいため、高品質な画像で魅力をしっかり伝えることが欠かせません。

サイズ感や素材感が伝わるアングルを意識すると、購入後のイメージとのギャップも減らせます。

商品説明の書き方

商品説明は、まず特徴を先に伝え、そのあとに背景や想い、ベネフィットの順で展開していく構成が読みやすいです。長文になると離脱を招きやすいため、簡潔にまとめておきましょう。

専門的な言葉を使うときは、直後に噛み砕いた説明を添えておくと親切です。途中に区切り線や改行を入れて、スマホでも読みやすい見た目に整えておくこともポイントです。

購入ボタンの配置・デザイン

購入ボタンは、色・配置・サイズ・文言まで自由にカスタマイズできます。ボタンを押した後のアクションも設定できるため、購入完了までの導線を最適化する余地が大きい部分です。背景色とのコントラストをつけて、ファーストビューの中で視線が自然に集まる位置に置くと、クリック率が変わってきます。

SEO設定(meta title/description)

商品ページ下部の[検索エンジンリスティング]から、ページごとのメタ情報を編集できます。

検索結果の一覧で実際にクリックされる文言を意識してつくることが、流入数に直結します。タイトルには想定取得ワードを自然に含めつつ、検索したくなる具体性を添えておくと効果が出やすいです。ディスクリプションも空欄のままにせず、商品の強みが一目でわかる文章にしておきましょう。

レビュー&クロスセルの仕組み導入

「Judge.me Product Reviews App」や「Loox」といったレビューアプリを使えば、購入者の声を可視化して信頼性を高められます。なお、Shopify公式の「Product Reviews」は2024年5月に提供を終了しており、新規での利用はできません。

あわせて「Byte Lookbook & Shop The Look」やアップセル・クロスセル系のアプリを導入すれば、関連商品を表示して顧客単価を伸ばすこともできます。レビューの件数が増えてくるほど信頼性は積み上がっていくため、購入後にレビューを促すメールやポップアップを組み合わせておくことがおすすめです。

お問い合わせページのカスタマイズ手順

お問い合わせの獲得は、売上を伸ばすうえで重要な接点になります。購入前の不安を解消できる窓口があるかどうかで、検討中の顧客が離脱するか踏みとどまるかも変わってきます。新規作成からメニューへの設置、受信設定までの流れを見ていきます。

お問い合わせページの新規作成

[オンラインストア]→[ページ]→[ページを追加]から新規作成し、テンプレートは「page.contact」を選びます。コンテンツ欄には、対応時間や注意事項などを記載しておくことも可能です。

よくある質問をあらかじめ書いておくだけで、同じやり取りに何度も時間を取られずに済みます。営業時間外に届いた問い合わせへの対応方針も、一言添えておくと相手も安心するものです。返信までの目安をひとこと書いておくだけで、顧客側の不安もやわらぐでしょう。

メニューへの設置と受信先メール設定

作成したページは、[メニュー]からフッターメニューやメインメニューに「お問い合わせ」として追加しましょう。受信先メールは[設定]→[一般設定]→[ストアの連絡先情報]から設定できます。

スパム対策のhCaptchaはデフォルトでONになっており、ボットからの送信をあらかじめ抑制できます。 受信先メールを担当者個人ではなく共有アドレスにしておくと、対応漏れを減らせるのでおすすめです。

差別化につながる3つのカスタマイズテクニック

基本的なカスタマイズだけでは、他社との差がつきにくい場面もあります。少しの工夫で印象が変わる、即効性のある3つの実装テクニックを紹介します。

告知バーでセール・送料無料を訴求

テーマエディタから告知バーセクションを追加できます。テキスト・リンク・背景色も自由に変更できるため、セールや送料無料といった訴求を、ページ上部で常に目に入る形で伝えられるのが特徴です。

期間限定の訴求であれば、終了予定が近づいたタイミングで文言を切り替えると、購入を後押しする効果が出やすくなります。訴求したい内容が複数ある場合は、順番に切り替えながら表示することも可能です。

「Powered by Shopify」の非表示でブランド感を高める

footer.liquidから該当のコードを削除すれば、「Powered by Shopify」の表示を消すことができます。無料テーマ「Dawn」であれば、以下の部分を削除することで、非表示にできます。

小さな変更ですが、プロフェッショナルな印象を与えるうえでは効果のある工夫です。フッターまでしっかり目を通す顧客は意外と多いため、細部まで自社ブランドの一貫性を保っておきたいところです。

営業日カレンダーをアプリ不要で表示

Googleカレンダーとカスタムliquidセクションを組み合わせれば、アプリを追加せずに営業日カレンダーを表示できます。営業日・休業日をあらかじめ明示しておくと、顧客の満足度を高めるきっかけになるのが利点です。

発送日や問い合わせ対応日の目安も併記しておけば、購入前の不安をさらに減らせるでしょう。あわせて長期休業の予定も早めに告知しておくと安心です。

カスタマイズで失敗しないための3つの注意点

カスタマイズは便利な反面、やみくもに進めると失敗につながります。手を加えるほど後戻りも難しくなっていくため、進める前に押さえておきたい3つのポイントを解説します。

カスタマイズの目的を整理する

着手する前に、「何のために」「どこを」「どこまで」変えるのかを明確にしておきましょう。目的がはっきりしないままカスタマイズを進めると、工数とコストを無駄にしてしまいがちです。

社内で目的を共有しておけば、複数人で作業するときの方向性のずれも防ぎやすくなります。限られたリソースの中で成果を出すには、効果の出やすい部分から優先して対応するのがおすすめです。

方法ごとの費用感とテーマアップデート影響を把握する

ノーコードでのテーマ編集はほぼ無料で進められますが、コード編集には人件費か外注費がかかってきます。また、コード編集をしたあとにテーマがアップデートされると、変更内容が衝突してしまうリスクもあります。

変更量が大きくなる場合は、親テーマと子テーマを分けて管理するか、バージョン管理の仕組みを検討しておくと安心です。費用を抑えたい場合でも、変更箇所をメモに残しておくだけで、トラブル発生時の原因特定がぐっと早くなります。誰がどこを変更したのかを記録しておく仕組みも、長く運用していくうえでは欠かせません。

アプリの入れすぎはサイト速度を落とす

アプリを追加するたびに、読み込むファイルが増えていきます。その積み重ねが、表示速度の低下につながります。使っていないアプリは削除し、必要最小限の構成を保つようにしましょう。

導入時には無料トライアル期間を使って、表示速度への影響を確認してから本格運用に切り替えるのも一つの方法です。定期的にインストール済みのアプリを見直す機会をつくっておくと、知らないうちに増えていく無駄を防げます。

自社で実施するか、Shopify Expertに依頼するか判断基準

カスタマイズには「自社で実施する」か「業者に依頼する」かの2択があります。どちらが自分のストアに合っているか、判断軸を見ていきましょう

自社実施が向いているケース

テーマ編集の範囲でレイアウト調整が十分間に合う場合や、社内にHTML/CSSの知識を持つメンバーがいる場合は、自社でのカスタマイズが向いています。配色やセクション構成の調整であれば、専門知識がなくても管理画面の操作だけで対応できるケースがほとんどです。

予算が限られていて、まずは最小構成で立ち上げたい段階でも、自社での対応から始めるのが現実的といえます。立ち上げ後に売上が伸びてきたタイミングで、必要な範囲だけ業者に依頼する進め方も選択肢の一つです。

Shopify Expertに依頼すべきケース

独自デザインや独自機能、チェックアウトのカスタマイズが必要になってくると、自社対応だけでは難しくなってきます。売上規模が拡大して運用負荷が増えてきたときや、Liquidの編集・外部システムとの連携が発生するときも、専門家に依頼すべきタイミングです。

カスタマイズだけでなく、構築そのものを依頼したい場合は、Shopify構築代行サービスも選択肢になります。Shopify制作会社の選び方については、以下の記事もあわせて参考にしてみてください。

カスタマイズ依頼時の費用相場

オリジナルデザインのカスタマイズであれば、100〜300万円程度が目安になります。要件が複雑になるほど費用も上がっていく傾向があります。大規模サイトの企画から構築までを依頼する場合は、300〜1,500万円以上かかることもあります。

依頼先によって金額の幅が大きく変わるため、複数社で見積もりを取って比較するのがおすすめです。料金の詳細についてはShopifyの料金について解説した記事でも紹介しています。 ぜひ参考にしてみてください。

まとめ

Shopifyのカスタマイズには、テーマ編集・コード編集・アプリという3つの方法があり、難易度や費用、自由度がそれぞれ異なります。着手前にはテーマの複製やサポート範囲の確認を済ませておくと、トラブルを避けやすくなります。商品ページなど優先度の高い部分から手をつけていくのが効率的です。

テーマ編集で十分なら自社実施、独自機能やデザインが必要になれば業者への依頼を検討する。その見極めが、効率と品質を両立させる近道になります。