Shopifyでヘッダーとフッターをページごとに非表示にできるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/10/13

はじめに

設定するページ種別は 10 種類、追加の URL 指定は 1 行に 1 つ、必要な操作は「テーマに追加」の 1 クリックとチェックを入れるだけです。

Shopify は、ネットショップをかんたんに開設・運営できる EC プラットフォームです。Shopify アプリを追加すると、テーマのコードを触らずにストアの機能を広げられます。

「シンプルヘッダー・フッター非表示｜ページごとに設定」は、Shopify ストアのヘッダーとフッターを、選んだページだけ非表示にするアプリです。ランディングページ（LP）やキャンペーンページでは、ヘッダーのメニューやフッターのリンクがお客様の離脱の入口になりがちです。このアプリなら、テーマを編集せずにページ単位でヘッダー・フッターを消せます。

トップページ・商品ページ・カートなど 10 種類のページごとに、ヘッダーとフッターを別々に非表示
URL を指定して、LP など特定のページだけを対象にできる
「PC のみ」「スマホのみ」の非表示にも対応
ストアに読み込まれるのはスタイルタグ 1 つだけ。JavaScript は読み込まないため、表示のチラつきもありません

料金は Basic Plan $2.99/月 です。インストールから 7 日間は無料でお試しいただけます。年払いにすると、実質 2 ヶ月分が無料になります。

シンプルヘッダー・フッター非表示｜ページごとに設定（Shopify App Store）

ページごとにヘッダー・フッターをかんたん非表示！

「シンプルヘッダー・フッター非表示｜ページごとに設定」でできること

LP では、他のページへ移るナビゲーションが無いほうが成果につながることがあります。このアプリは、テーマのコードを触らずに、選んだページだけヘッダーとフッターを非表示にします。設定はテーマエディタの「埋め込みアプリ」にまとまっているので、チェックを入れて保存するだけです。

ページごとにヘッダー・フッターをかんたん非表示！

ヘッダー・フッターを 10 種類のページごとに個別に非表示設定できます。
URL を 1 行ずつ指定して、特定のページだけを対象にできます。
PC のみ・スマホのみで非表示にする画面幅を選べます。
テーマのコードを一切編集せず、JavaScript も追加しません。
テーマ特有の要素を、追加の CSS セレクタで非表示にできます。

ランディングページのヘッダー・フッター非表示

ヘッダーとフッターを消すと、LP は商品と購入ボタンだけに集中した 1 枚のページになります。広告からの流入先に向いています。

ランディングページでヘッダー・フッターを非表示にした様子！

ページ種別ごとの非表示設定

トップページ・商品ページ・コレクションページなど 10 種類から、消したいページにチェックを入れるだけです。ヘッダーとフッターは別々に選べます。

ページ種別ごとに非表示設定を選べる管理画面！

PC・スマホ別の非表示

「スマホでは画面を広く使いたいので、ヘッダーだけ消したい」といった使い方ができます。画面幅は、ヘッダーとフッターでそれぞれ選べます。

PCのみ・スマホのみで非表示にする画面幅を選択！

URL 指定による個別ページの非表示

「固定ページのうち、LP だけ消したい」というときは URL で指定します。/pages/lp-summer のように 1 行に 1 つ書くだけです。

URLを指定して個別のページも非表示にできます！

ワンクリックでのテーマ追加

アプリの管理画面でテーマを選び、「テーマに追加」を押すだけで、テーマエディタの埋め込みアプリがオンになります。

ワンクリックでテーマに追加できます！

アプリのインストール

インストールは 5 ステップで終わります。各画像の赤枠が、クリックする場所です。

シンプルヘッダー・フッター非表示｜ページごとに設定（Shopify App Store）
料金: Basic Plan $2.99/月（7 日間の無料期間あり。年払いで実質 2 ヶ月分無料）

Shopify 管理画面の左下にある「設定」をクリックします。
設定画面の左メニューで「アプリ」をクリックし、右上の「Shopifyアプリストア」をクリックします。Shopify App Store が開きます。
画面上部の検索窓に「シンプルヘッダー・フッター非表示」と入力し、検索結果の「シンプルヘッダー・フッター非表示｜ページごとに設定」をクリックします。
アプリの詳細画面で「インストール」をクリックします。価格設定（月額$2.99。無料体験あり。）もここで確認できます。
「アプリをインストール」の画面で、アプリが使う権限（スタッフと協力者のデータの閲覧、ストアデータを表示）を確認し、「インストール」をクリックすれば完了です。インストールが終わると、アプリの「設定」画面が開きます。

埋め込みアプリのテーマへの追加

このアプリは、テーマエディタの「埋め込みアプリ」として動きます。ページにブロックを置く必要はありません。一度オンにすれば、すべてのページで設定が効きます。

自動でのテーマ追加（おすすめ）

Shopify 管理画面の「アプリ」から「シンプルヘッダー・フッター非表示」を開きます。
「テーマにヘッダー・フッター非表示機能を追加」の「テーマを選択」で、追加したいテーマを選びます。最初は公開中のテーマ（「（公開中のテーマ）」と付いたもの）が選ばれています。
「テーマに追加」をクリックします。ホームページを表示した状態のテーマエディタが新しいタブで開き、左側の「埋め込みアプリ」で「シンプルヘッダー・フッター非表示」のスイッチがオンになっています。
右上の「保存」をクリックします。

ホームページが開きますが、埋め込みアプリはテーマ全体に効くので、ほかのページへ追加し直す必要はありません。この時点では、まだどのページも非表示になっていません。続けて「ページ種別ごとの非表示設定」でチェックを入れてください。

手動でのテーマ追加

「テーマを選択」が空欄になる場合や、自動追加がうまくいかない場合は、手動で追加します。

Shopify 管理画面で「オンラインストア」を開き、対象テーマの「テーマを編集」をクリックします。
テーマエディタ左上に並ぶアイコンのうち、3 つ目の「埋め込みアプリ」をクリックします。
一覧の「シンプルヘッダー・フッター非表示」のスイッチをオンにします。
右上の「保存」をクリックします。

アプリ管理画面の各項目

アプリの管理画面は「設定」画面 1 つです。ここで行うのはテーマへの追加と言語の切り替えで、非表示にするページの設定はテーマエディタで行います。

シンプルヘッダー・フッター非表示の「設定」画面の全体

テーマへの追加・プレビュー

テーマを選択: アプリを追加するテーマを選びます。公開中のテーマには「（公開中のテーマ）」と表示されます。
テーマに追加: 選んだテーマのテーマエディタを新しいタブで開き、埋め込みアプリをオンにします。保存はテーマエディタの「保存」で行います。
テーマをプレビュー: 選んだテーマのストアフロントを、プレビューとして新しいタブで開きます。公開前のテーマで見た目を確かめたいときに便利です。

テーマのバージョンによっては、「テーマを選択」が空欄になることがあります。そのときは前の章の「手動でのテーマ追加」で進めてください。

補足の案内

画面には「ページごとの設定はテーマエディタで行います」という案内が出ています。管理画面には非表示の設定欄がないので、テーマエディタの「埋め込みアプリ」を開いて設定します。

その上の黄色い注意書きは、「テーマに追加」で自動追加がうまくいかなかったときの案内です。そのときは「手動でのテーマ追加」の手順で進めてください。

言語設定

言語を選択: アプリの管理画面の表示言語を選び、「変更する」をクリックします。20 言語に対応しています。

ストアフロントやテーマエディタの表示言語は、この設定では変わりません。

言語設定カード。言語を選択と「変更する」ボタン、その下のおすすめアプリ

よくある質問

管理画面を日本語で表示していて、よくある質問の記事が用意されている場合は、左のサイドバーの「設定」の下に「よくある質問」が表示されます。記事が無いあいだは表示されません。

ページごとの非表示設定（テーマエディタ）

ここがこのアプリの設定の中心です。テーマエディタの「埋め込みアプリ」で「シンプルヘッダー・フッター非表示」を開くと、「ヘッダー設定」「フッター設定」「詳細設定」の 3 つのグループが並びます。初期状態では何もチェックが入っておらず、どのページも非表示になりません。

設定画面の開き方

「オンラインストア」→「テーマを編集」でテーマエディタを開きます。
左上の「埋め込みアプリ」アイコンをクリックします。
「シンプルヘッダー・フッター非表示」の名前（左の「∨」）をクリックして、設定を開きます。

テーマエディタの「埋め込みアプリ」に並んだシンプルヘッダー・フッター非表示

ヘッダー設定

ヘッダーを非表示にするページと画面幅を選びます。テーマのアナウンスバー（ヘッダーの上の帯）も、多くのテーマではヘッダーと一緒に非表示になります。

非表示にする画面幅: ヘッダーを消す画面幅を選びます。初期値は「PC・スマホ両方」です。
- PC・スマホ両方: どの画面幅でも非表示
- PC のみ: 画面幅 750px 以上で非表示（スマホではヘッダーが残る）
- スマホのみ: 画面幅 749px 以下で非表示（PC ではヘッダーが残る）
ページ種別（10 項目）: チェックを入れたページでヘッダーを非表示にします。初期値はすべてオフです。
- トップページ
- 商品ページ
- コレクションページ
- コレクション一覧ページ
- 固定ページ
- ブログ一覧ページ
- ブログ記事ページ
- カートページ
- 検索ページ
- 404 ページ
追加で非表示にする URL: ページ種別では選べないページを、URL で指定します。1 行に 1 つ、/pages/lp-summer のように URL の一部を書きます。URL の一部と一致したページで非表示になり、大文字・小文字は区別しません。空行は無視されます。

ヘッダー設定。非表示にする画面幅とトップページ〜404 ページのスイッチ

ヘッダー設定の「追加で非表示にする URL」に /pages/winter-sale を入力した状態

フッター設定

フッターも、ヘッダーとまったく同じ項目で別々に設定します。

非表示にする画面幅: PC・スマホ両方 / PC のみ / スマホのみ（初期値: PC・スマホ両方）
ページ種別（10 項目）: トップページ / 商品ページ / コレクションページ / コレクション一覧ページ / 固定ページ / ブログ一覧ページ / ブログ記事ページ / カートページ / 検索ページ / 404 ページ（初期値: すべてオフ）
追加で非表示にする URL: 1 行に 1 つ、URL の一部を入力します。

「ヘッダーは残してフッターだけ消す」「ヘッダーはスマホだけ、フッターは全画面幅で消す」といった組み合わせも自由です。

フッター設定のページ種別と「追加で非表示にする URL」

詳細設定（追加で非表示にする要素）

テーマによっては、ヘッダーやフッターの作りが独特で、初期設定のままでは消えないことがあります。そのときに使う欄です。

追加で非表示にする要素（ヘッダー）: ヘッダーとして一緒に消したい要素の CSS セレクタを、1 行に 1 つ入力します（例: .site-header）。ヘッダー設定のページ・画面幅の条件で非表示になります。
追加で非表示にする要素（フッター）: フッターとして一緒に消したい要素の CSS セレクタを、1 行に 1 つ入力します。フッター設定のページ・画面幅の条件で非表示になります。

セレクタは、ブラウザの検証機能（右クリック →「検証」）で、消したい要素のクラス名を確かめてから入力します。1 行ごとに別々に効くため、1 行書き間違えても他の行は効き続けます。

詳細設定の「追加で非表示にする要素（ヘッダー）」「追加で非表示にする要素（フッター）」

用途別の設定例

LP だけヘッダー・フッターを消したい: ページ種別のチェックは入れません。ヘッダー設定とフッター設定の「追加で非表示にする URL」に、どちらも /pages/lp-summer を入力します。

ヘッダーとフッターを非表示にしたストアフロント。ページの先頭からセールのバナーが始まる

商品ページを購入に集中させたい: ヘッダー設定とフッター設定の両方で「商品ページ」にチェックを入れます。
スマホでは画面を広く使いたい: ヘッダー設定の「非表示にする画面幅」を「スマホのみ」にし、対象ページにチェックを入れます。PC ではヘッダーが残り、スマホ幅（749px 以下）でだけ消えます。

スマホ幅でヘッダーを非表示にしたストアフロント。ヒーロー画像から表示が始まる