【徹底解説】Shopify アプリ「シンプルヘッダー・フッター非表示｜ページごとに設定」でできること

【徹底解説】Shopify アプリ「シンプルヘッダー・フッター非表示｜ページごとに設定」でできること

広告をクリックしてやってきたお客様が、ランディングページの最初の画面でヘッダーのメニューに目を奪われ、そのまま別のコレクションへ移ってしまう。ストアを運営していると、こうした「せっかく呼び込んだのに、売りたい商品の前で寄り道されてしまう」場面に何度も出会います。

Shopify のテーマは、ヘッダーとフッターをストア全体で使い回す作りになっています。テーマエディタで消すことはできても、消えるのは全ページです。「このキャンペーンページだけ」「スマホの商品ページだけ」と範囲を絞るには、これまでテーマのコードに手を入れるしかありませんでした。

この記事では、UnReact が開発した Shopify アプリ「シンプルヘッダー・フッター非表示｜ページごとに設定」を、管理画面とテーマエディタの設定項目を1つずつ取り上げながら解説します。画面には書かれていない動きの細かいところや、アプリを使わずにコードで同じことをする方法、ページビルダー系のアプリと組み合わせるときの考え方まで、導入前に知っておきたいことをまとめました。

シンプルヘッダー・フッター非表示とは

「シンプルヘッダー・フッター非表示｜ページごとに設定」は、テーマのヘッダーとフッターを、マーチャントが選んだページでだけ見えなくするアプリです。アプリは Shopify App Store から入れられます。

仕組みはとても小さく作られています。アプリはテーマの「埋め込みアプリ」として動き、ページの <head> の中にスタイルタグを1つだけ差し込みます。そのスタイルタグに「このページではヘッダーとフッターを表示しない」という指定が書かれていて、ブラウザはページを描き始める前にそれを読みます。JavaScript は1行も読み込みません。

この「先に指定を届ける」作りが、使い心地を大きく左右します。ページの末尾に指定を置くタイプの実装だと、ヘッダーがいったん描かれたあとで消えるため、ページを開いた瞬間にヘッダーがちらっと見えてしまいます。このアプリではその一瞬のちらつきが起きません。

できることは大きく分けて5つです。

• トップページ・商品ページ・カートなど、10 種類のページ種別ごとにヘッダーとフッターを消す
• URL の一部を指定して、特定のページ（LP など）だけを対象にする
• 消す画面幅を「PC・スマホ両方」「PC のみ」「スマホのみ」から選ぶ
• テーマ独自の作りで消え残る要素を、CSS セレクタで追加指定する
• テーマのコードには一切触れない

シンプルヘッダー・フッター非表示のメリット

テーマのファイルを書き換えずに済む

ページごとにヘッダーを消す方法としてよく紹介されるのは、theme.liquid に条件分岐を書き足すやり方や、ヘッダーの無い別レイアウトを作ってテンプレートから切り替えるやり方です。どちらもテーマのファイルを直接編集するため、テーマのバージョンアップで上書きされたり、別のテーマに乗り換えたときに作り直しになったりします。このアプリは埋め込みアプリとして外から指定を足すだけなので、テーマ本体は元のままです。不要になったらスイッチを切れば、何もしていない状態に戻ります。

ヘッダーとフッターを別々に扱える

「ヘッダーは消したいけれど、フッターの会社情報は残したい」という要望はとても多いものです。このアプリはヘッダー用とフッター用で設定のグループが完全に分かれていて、対象ページも画面幅も別々に決められます。

スマホだけ・PC だけという出し分けができる

スマホでは画面の縦の長さが貴重です。ヘッダーが 60〜80px ほど上を占めるだけで、ファーストビューに入る商品写真が目に見えて小さくなります。PC ではヘッダーを残して回遊しやすくし、スマホでだけ消して商品を大きく見せる、という使い分けが設定1つでできます。

表示が重くならない

読み込まれるのは数行の CSS だけです。外部のスクリプトを読み込まないので、ページの表示速度にほとんど影響しません。表示速度は広告の品質評価や検索順位にも関わるため、LP の改善のつもりで入れたアプリが表示を遅くしてしまう、という本末転倒が起きにくい作りです。

既存のページにそのまま使える

ページビルダーのように、LP を一から作り直す必要がありません。いま公開している固定ページや商品ページを、そのまま「ヘッダーの無いページ」に切り替えられます。

シンプルヘッダー・フッター非表示のデメリット

戻り道も一緒に無くなる

ヘッダーにはロゴ（トップページへのリンク）やカートのアイコンが入っていることがほとんどです。ヘッダーを消すと、それらも一緒に見えなくなります。商品ページやカートページで使うときは、ページの中に「カートを見る」「トップへ戻る」などの導線を用意しておかないと、お客様が迷子になります。

特定商取引法の表記へのリンクが見えにくくなる

多くのストアでは、特定商取引法に基づく表記やプライバシーポリシーへのリンクをフッターに置いています。フッターを消したページでは、本文の末尾にそれらへのリンクを置いておくと安心です。

ページの中身まで作るアプリではない

このアプリが行うのは、あくまで「消す」ことだけです。LP の見出しや画像、購入ボタンの配置はテーマのセクションで作ります。デザインを細かく作り込みたい場合は、後半で触れるページビルダーとの組み合わせを検討してください。

テーマによっては追加の指定が必要になる

主要なテーマのヘッダー・フッターは初期設定のまま消えるように作ってありますが、独自の構造を持つテーマでは消え残る要素が出ることがあります。そのときは詳細設定で CSS セレクタを足す必要があり、ブラウザの検証機能でクラス名を調べるひと手間がかかります。

料金プラン

料金プランは Basic Plan の1つだけです。

• 月払い: $2.99/月
• 年払い: $29.99/年（月払いの 12 ヶ月分より、実質 2 ヶ月分ほどお得）
• 無料体験: インストールから 7 日間

プランによる機能の差はありません。設定できるページの数や URL の行数にも、料金による制限はありません。まずは 7 日間の無料体験のあいだに、自分のテーマできちんと消えるかを確かめるのがおすすめです。

インストール

インストールは Shopify の管理画面から始めて、5 ステップで終わります。

1. 管理画面の左下にある「設定」をクリックします。

   

2. 設定の左メニューから「アプリ」を選び、右上の「Shopifyアプリストア」を押します。

   

3. アプリストアの検索窓に「シンプルヘッダー・フッター非表示」と入れて検索し、結果に出てきたアプリを開きます。

   

4. アプリの紹介ページにある「インストール」を押します。料金と無料体験の有無もこのページで確かめられます。

   

5. アクセス権限の確認画面が出ます。このアプリが求めるのは「スタッフと協力者のデータの閲覧」と「ストアデータを表示」の2つだけです。内容を確かめて「インストール」を押すと、アプリの管理画面が開きます。

   

アクセス権限が少ないのは、このアプリが商品や注文のデータを読み書きしないためです。必要なのは「どのテーマがあるか」を知ることと、テーマエディタへ案内することだけです。

アプリ管理画面の構成

このアプリの画面は、大きく2か所に分かれています。

• アプリの管理画面（Shopify 管理画面の「アプリ」から開く）… テーマへの追加と、管理画面の表示言語の切り替え
• テーマエディタの埋め込みアプリ（オンラインストアの「テーマを編集」から開く）… どのページで消すかの設定すべて

非表示にするページの設定がアプリの管理画面に無いのは、設定をテーマごとに持たせるためです。テーマエディタで設定すると、その値はテーマの中に保存されます。公開前の新しいテーマで設定を試し、問題がなければ公開する、という Shopify の通常の流れにそのまま乗れます。

各画面の説明

アプリ管理画面: テーマにヘッダー・フッター非表示機能を追加

アプリを開くといちばん上に出てくるカードです。ここで行うのは、テーマエディタの「埋め込みアプリ」でこのアプリのスイッチを入れるまでの案内です。

• テーマを選択: ストアにあるテーマの一覧から、アプリを追加するテーマを選びます。最初から選ばれているのは公開中のテーマで、名前の後ろに「（公開中のテーマ）」と付いています。
• テーマに追加: 選んだテーマのテーマエディタを新しいタブで開きます。開いた時点で、埋め込みアプリのスイッチはオンになっています。エディタ右上の「保存」を押して初めて、テーマに反映されます。
• テーマをプレビュー: 選んだテーマのストアフロントを、プレビューとして新しいタブで開きます。公開前のテーマで見た目を確かめたいときに使います。

カードの中ほどに黄色い注意書きがあるのは、テーマのバージョンによって「テーマを選択」が空欄になる場合があるためです。その場合でも、後述する手動の手順で問題なく追加できます。カードの下には「ページごとの設定はテーマエディタで行います」という案内も表示されています。この画面には、非表示にするページの設定欄はありません。

アプリ管理画面: 言語設定

画面の下のほうにある、アプリの管理画面の表示言語を切り替えるカードです。

• 言語を選択: 日本語・英語・ドイツ語・フランス語・中国語など、20 言語から選べます。
• 変更する: 選んだ言語で管理画面を表示し直します。

この設定で変わるのは、アプリの管理画面の文字だけです。ストアフロントの表示言語や、テーマエディタの設定項目の言語は変わりません。テーマエディタの項目名は、Shopify 管理画面そのものの言語設定に従います。海外のスタッフと一緒にストアを運営している場合でも、それぞれが読みやすい言語で設定を確認できます。

アプリ管理画面: おすすめアプリ

画面のいちばん下には、UnReact が提供しているほかのアプリが並びます。右上の「×」で閉じられます。設定とは関係のない欄なので、閉じても動作には影響しません。

アプリ管理画面: よくある質問

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

テーマエディタ: 埋め込みアプリの一覧

ここからは、テーマエディタの中の設定です。テーマエディタの左上に並ぶアイコンのうち、3つ目が「埋め込みアプリ」です。開くと、テーマに入っているアプリの一覧が出ます。

一覧の「シンプルヘッダー・フッター非表示」の右にあるスイッチが、アプリ全体のオン・オフです。ここがオフのあいだは、下の設定をどう組んでも何も起きません。「設定したのに消えない」と感じたら、真っ先にこのスイッチを見てください。

名前の左の「∨」を押すと、設定が開きます。最初はすべてのページ種別がオフで、URL の欄も空です。この状態では、スイッチをオンにして保存しても、どのページも見た目は変わりません。

テーマエディタ: ヘッダー設定

設定はまず「ヘッダー設定」のグループから始まります。項目は3種類です。

非表示にする画面幅 は、ヘッダーを消す画面の幅を選ぶプルダウンです。初期値は「PC・スマホ両方」です。

• PC・スマホ両方 … 画面の幅にかかわらず消します
• PC のみ … 画面幅 750px 以上のときだけ消します。スマホではヘッダーが残ります
• スマホのみ … 画面幅 749px 以下のときだけ消します。PC ではヘッダーが残ります

境目の 750px は、Shopify の標準テーマ（Dawn など）がスマホ用とパソコン用のレイアウトを切り替える幅に合わせてあります。タブレットを縦に持つと 750px 前後になることが多いので、タブレットでの見え方が気になる場合は、実機で一度確かめておくと安心です。

ページ種別 は、ヘッダーを消すページを種類ごとに選ぶ 10 個のスイッチです。初期値はすべてオフです。

• トップページ … ストアのホームです。キャンペーン期間中だけトップを特設ページのように見せたいときに使います
• 商品ページ … すべての商品ページが対象になります。購入ボタンに集中させたいときに使います
• コレクションページ … 個々のコレクション（商品の一覧）のページです
• コレクション一覧ページ … すべてのコレクションを並べたページです
• 固定ページ … 「オンラインストア」の「ページ」で作ったページすべてです
• ブログ一覧ページ … ブログの記事が並ぶページです
• ブログ記事ページ … ブログの個々の記事のページです
• カートページ … カートの中身を表示するページです
• 検索ページ … ストア内検索の結果ページです
• 404 ページ … 存在しない URL を開いたときのページです

スイッチは「その種類のページすべて」に効きます。たとえば「固定ページ」をオンにすると、LP だけでなく「会社概要」や「お問い合わせ」のページからもヘッダーが消えます。特定のページだけを対象にしたいときは、次の URL 指定を使います。

追加で非表示にする URL は、ページ種別では選べないページを URL で指定する欄です。1行に1つ、/pages/winter-sale のように URL の一部を書きます。

入力欄の下にも「1行に1つ入力します。URL の一部と一致したページで非表示になります」と書かれているとおり、判定は部分一致です。大文字と小文字は区別しません。途中に空行が入っていても無視されるので、行を空けて見やすく並べてもかまいません。

ページ種別と URL の指定は「または」の関係です。どちらか一方に当てはまれば、そのページでヘッダーが消えます。

テーマエディタ: フッター設定

ヘッダー設定の下に「フッター設定」のグループがあります。中身はヘッダー設定とまったく同じ3種類で、フッターについて別々に決められます。

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

ヘッダーとフッターの設定はおたがいに影響しません。「ヘッダーはスマホのみで消し、フッターは PC・スマホ両方で消す」「ヘッダーは LP だけ、フッターはカートページだけ」のような組み合わせも自由です。

テーマエディタ: 詳細設定

いちばん下にあるのが「詳細設定」です。初期設定のままでは消えない要素があるときに使う、上級者向けの欄です。

• 追加で非表示にする要素（ヘッダー） … ヘッダーと一緒に消したい要素の CSS セレクタを、1行に1つ書きます。たとえば .site-header のようにクラス名を書きます。消える条件は、ヘッダー設定で選んだページと画面幅と同じです
• 追加で非表示にする要素（フッター） … フッターと一緒に消したい要素の CSS セレクタを、1行に1つ書きます。消える条件は、フッター設定と同じです

セレクタを調べるには、消したい要素の上で右クリックして「検証」を選び、表示されたクラス名や ID を確かめます。テーマによっては、ヘッダーの上に固定表示されるお知らせの帯や、スクロールすると出てくる追従ヘッダーが、通常のヘッダーとは別の部品として作られていることがあります。そうした要素をここに書き足します。

テーマへの追加

アプリをテーマに追加する方法は2通りあります。

自動で追加する場合 は、アプリの管理画面で「テーマを選択」からテーマを選び、「テーマに追加」を押します。ホームページを表示した状態のテーマエディタが新しいタブで開き、埋め込みアプリのスイッチがすでにオンになっています。

右上の「保存」を押せば追加は完了です。ホームページが開きますが、埋め込みアプリはテーマ全体に効くので、ほかのページで追加し直す必要はありません。

手動で追加する場合 は、「オンラインストア」の「テーマ」から、対象テーマの「テーマを編集」を押します。

テーマエディタが開いたら、左上の「埋め込みアプリ」アイコンを押し、一覧の「シンプルヘッダー・フッター非表示」のスイッチをオンにして保存します。「テーマを選択」が空欄になる場合や、ブラウザがポップアップを止めて新しいタブが開かない場合は、こちらの手順で進めてください。

ストアフロントの見た目を変える

設定の結果は、テーマエディタのプレビューにそのまま映ります。「保存」を押す前に、どう見えるかを確かめられます。

まずは、トップページのヘッダーを消す前と後を並べてみます。下はトップページのスイッチをオフにした状態です。プレビューの上部に、ロゴとメニューの入った黒いヘッダーが出ています。

トップページのスイッチをオンにすると、その場でヘッダーが消え、ページの先頭からセールのバナーが始まります。

テーマエディタ右上のスマホのアイコンを押すと、プレビューがスマホの幅に切り替わります。スマホではヘッダーの高さの割合が大きいため、消したときの違いがよりはっきり出ます。

日本語のストアフロントで、エディタの設定と見た目を並べるとこうなります。左のパネルでトップページのスイッチがオンになり、右のプレビューではヘッダーの無いページになっています。

ここからは、よくある使い方ごとの設定例です。

キャンペーンの LP だけ消す には、ページ種別のスイッチはどれも入れず、ヘッダー設定とフッター設定の両方の「追加で非表示にする URL」に、LP の URL（/pages/lp-summer など）を書きます。ほかの固定ページには影響しません。

URL を指定して個別に消す流れは、掲載画像でも紹介しています。

スマホの商品ページだけ広く使う には、ヘッダー設定の「非表示にする画面幅」を「スマホのみ」にし、「商品ページ」のスイッチを入れます。PC では従来どおりヘッダーからほかの商品を探せて、スマホではヘッダーの分だけ商品写真が上に上がります。

画面幅の切り替えは、掲載画像でも紹介しています。

カートページから他のページへ流れないようにする には、フッター設定の「カートページ」をオンにします。ヘッダーまで消すとカートから商品ページへ戻れなくなるので、ヘッダーは残しておくのが無難です。

ページ種別でまとめて消す 場合の考え方は、次の掲載画像のとおりです。スイッチは種類ごとなので、どのページがその種類に含まれるかを意識して選びます。

画面には書かれていない動きと注意点

設定画面だけでは分かりにくい挙動を、実装の中身に沿ってまとめます。導入してから戸惑わないよう、目を通しておいてください。

URL の指定は部分一致で判定される

URL は「含まれているかどうか」で判定します。/pages/lp と書くと、/pages/lp-summer や /pages/lp-winter も対象に入ります。1ページだけを確実に狙いたいときは、URL の末尾まで書いてください。逆に、URL の命名を /pages/lp- で揃えておけば、1行の指定で LP 全部をまとめて対象にできます。

空行は自動で読み飛ばす

テキストの入力欄は、最後に改行が残りやすいものです。もし空行を「すべての URL に含まれる文字列」として扱うと、全ページでヘッダーが消えてしまいます。このアプリは空行を必ず読み飛ばすように作ってあるので、行を空けて書いても問題ありません。

ページ種別に無いページは URL で指定する

ページ種別のスイッチは 10 種類です。それ以外のページ、たとえばポリシーのページ（/policies/ で始まるもの）やパスワードページ、お客様アカウントのページには、スイッチがありません。これらは「追加で非表示にする URL」に書けば消せます。

テーマエディタのプレビューでも消える

設定した結果をそのまま確かめられるよう、テーマエディタのプレビューでもヘッダー・フッターは消えます。ヘッダーの中身（ロゴやメニュー）を編集したいときは、プレビューの上ではなく、テーマエディタ左側のセクション一覧からヘッダーを選んでください。

設定はテーマごとに保存される

設定値はテーマの中に保存されます。新しいテーマを作ったり、別のテーマに切り替えたりしたときは、そのテーマでも埋め込みアプリをオンにして、設定し直す必要があります。テーマを複製した場合は、複製元の設定がそのまま引き継がれます。

お知らせの帯も多くの場合いっしょに消える

Shopify の最近のテーマでは、ヘッダーの上に出るお知らせの帯（アナウンスバー）が、ヘッダーと同じグループに入っています。そのため、ヘッダーを消すとアナウンスバーも一緒に消えるのが普通です。アナウンスバーだけ残したい場合は、このアプリではなくテーマ側でヘッダーの構成を見直す必要があります。

追加のセレクタは1行ずつ独立して効く

詳細設定に書いたセレクタは、1行ごとに別々のスタイルとして出力されます。ブラウザは書き間違いを含むスタイルを丸ごと無視するので、もし全部の行を1つにまとめていたら、1行の書き間違いで既定の指定まで効かなくなります。このアプリでは1行ずつ分けているため、書き間違えた行だけが効かず、ほかの行と初期設定のヘッダー・フッターは消え続けます。

記事やカードの中のフッターは消さない

HTML の footer 要素は、ページ全体の下部だけでなく、ブログ記事の末尾や商品カードの中にも使われます。このアプリはページの直下にあるヘッダー・フッターだけを対象にしているので、本文の中の小さなフッター部分が巻き添えで消えることはありません。

コードで自作する場合

アプリを使わずに、テーマのコードを直接編集して同じことをする方法も紹介しておきます。仕組みを知っておくと、アプリの設定の意味も理解しやすくなります。

方法1: theme.liquid に条件付きのスタイルを書く

いちばん手軽なのは、テーマの layout/theme.liquid の <head> の中に、ページの種類を見て CSS を出し分ける Liquid を書く方法です。

{%- comment -%} 商品ページと LP でだけヘッダーを消す {%- endcomment -%}
{%- assign hide_header = false -%}
{%- if request.page_type == 'product' -%}
  {%- assign hide_header = true -%}
{%- endif -%}
{%- assign path = request.path | downcase -%}
{%- if path contains '/pages/lp-summer' -%}
  {%- assign hide_header = true -%}
{%- endif -%}
{%- if hide_header -%}
  <style>
    .shopify-section-group-header-group { display: none !important; }
  </style>
{%- endif -%}

request.page_type には、表示中のページの種類（index・product・collection など）が入ります。request.path は URL のパス部分です。どちらかの条件に当てはまったときだけ <style> を出し、ヘッダーのグループを丸ごと消しています。<head> に書くのは、ページの描画より先に指定を届けて、ちらつきを防ぐためです。

この方法の注意点は、条件を増やすたびにテーマのファイルを編集し直すことになる点です。URL を足すにも Liquid を書き換える必要があり、書き間違えるとテーマ全体が表示されなくなるおそれもあります。また、テーマを新しいバージョンに更新すると theme.liquid は上書きされるため、同じ編集をやり直すことになります。

方法2: ヘッダーの無いレイアウトを作る

もう1つは、ヘッダーとフッターを読み込まない別のレイアウトファイルを用意して、LP のテンプレートだけをそのレイアウトに切り替える方法です。

{%- comment -%} layout/theme.landing.liquid（theme.liquid を複製して作る） {%- endcomment -%}
<!doctype html>
<html lang="{{ request.locale.iso_code }}">
  <head>
    {{ content_for_header }}
    {%- comment -%} テーマ本来の head の中身をここに残す {%- endcomment -%}
  </head>
  <body>
    {%- comment -%} {% sections 'header-group' %} を書かない {%- endcomment -%}
    <main id="MainContent">{{ content_for_layout }}</main>
    {%- comment -%} {% sections 'footer-group' %} も書かない {%- endcomment -%}
  </body>
</html>

theme.liquid を複製し、ヘッダーとフッターを読み込む {% sections 'header-group' %} と {% sections 'footer-group' %} の行を削ったものです。{{ content_for_header }} は Shopify やアプリが必要とするスクリプトを出力する部分なので、消してはいけません。

作ったレイアウトは、LP 用のテンプレートの JSON に "layout": "theme.landing" と書いて指定します。

{
  "layout": "theme.landing",
  "sections": {},
  "order": []
}

この JSON はテンプレートファイル（たとえば templates/page.landing.json）の先頭部分で、layout の値がレイアウトファイルの名前に対応します。固定ページの編集画面で「テーマテンプレート」に landing を選ぶと、そのページだけがヘッダーの無いレイアウトで表示されます。

ちらつきが原理的に起きないのが利点ですが、レイアウトファイルを丸ごと複製するため、元の theme.liquid に入っているテーマの読み込み処理を正しく残す必要があります。テーマの更新のたびに差分を見比べる手間もかかり、スマホだけ消すといった画面幅での出し分けはできません。

アプリを使う場合との比較

コードで自作する方法は、費用がかからない代わりに、変更のたびに開発の手間が発生します。ページを増やすたびに Liquid を書き換え、テーマを更新するたびに編集をやり直すことになります。アプリなら、URL の追加はテーマエディタの入力欄に1行足すだけです。テーマのファイルそのものは書き換えていないので、テーマの更新で編集内容が消えることもありません。月 $2.99 で、この保守の手間をまるごと手放せると考えると、運用を担当する人がエンジニアでない場合はアプリのほうが確実です。

ページビルダーやメニュー系アプリとの使い分け

ヘッダー・フッターを隠す手段は、このアプリ以外にもあります。PageFly・GemPages・Shogun のようなページビルダーには、ビルダーで作ったページの中でテーマのヘッダー・フッターを外す設定があります。Navvy のようなメニュー系のアプリは、ヘッダーの中のナビゲーションだけを差し替えたり隠したりします。ここでは、それらと一緒に使うときの考え方を整理します。

ページビルダーで作った LP は、ビルダー側の設定に任せる

ページビルダーで作ったページは、ビルダー側でヘッダー・フッターの有無を決めるのが自然です。このアプリの URL 指定にも同じページを書くと、どちらの設定で消えているのかが分からなくなり、あとで「ヘッダーを戻したいのに戻らない」という混乱のもとになります。ビルダーのページは、このアプリの対象から外しておきましょう。

テーマにもともとあるページは、このアプリで消す

ページビルダーの設定は、ビルダーで作ったページにしか効きません。テーマにもともとある商品ページやカートページ、テーマの「ページ」で作った固定ページのヘッダーを消したいときは、このアプリの出番です。両方を使っているストアでは、次のように役割を分けると管理しやすくなります。

• ビルダーで作ったキャンペーンの LP … ビルダーのページ設定でヘッダー・フッターを外す
• テーマの商品ページ・カート・固定ページ … このアプリのページ種別か URL 指定で消す

どちらを先に入れるかの判断

LP をデザインから作り込む予定がまだ無く、「今あるページを、ヘッダーの無い形でも見せたい」という段階なら、まずこのアプリだけで十分です。ページ種別のスイッチと URL の指定で、すぐに試せます。その後、デザインを作り込んだ LP が必要になった段階でページビルダーを足せば、ビルダーのページと既存のページを上のように分担できます。

メニューだけを隠したい場合

ロゴやカートのアイコンは残して、メニューだけを消したいという場合もあります。このアプリはヘッダーを丸ごと消すためのものなので、その用途には向きません。詳細設定に書いたセレクタも、ヘッダー設定で選んだページ・画面幅の条件でヘッダーと一緒に消える仕組みです。メニューだけを差し替えたい場合はメニュー系のアプリ、ヘッダーごと消したい場合はこのアプリ、と目的で分けて考えてください。

まとめ

「シンプルヘッダー・フッター非表示｜ページごとに設定」は、テーマに手を入れずに、ヘッダーとフッターを好きなページでだけ消せるアプリです。

• 10 種類のページ種別と URL の指定を組み合わせて、消すページを決められる
• ヘッダーとフッターは別々に、画面幅（PC・スマホ両方 / PC のみ / スマホのみ）も別々に設定できる
• スタイルタグ1つを <head> に差し込むだけの作りで、ちらつかず、表示も重くならない
• テーマの更新や乗り換えでも、コードの書き直しが要らない

LP の離脱を減らしたい、スマホの商品ページをもう少し広く見せたい、といった小さな改善を、エンジニアの手を借りずに試せるのがいちばんの価値です。7 日間の無料体験があるので、まずは自分のテーマのプレビューで、ヘッダーが消えた LP がどう見えるかを確かめてみてください。

アプリは Shopify App Store からインストールできます。

おすすめ Shopify アプリ

UnReact では、LP の成果を上げるのに役立つアプリをほかにも提供しています。ヘッダーを消した LP と組み合わせやすいものをいくつか紹介します。

• シンプルカウントダウンタイマー｜お手軽残り時間表示 … 残り時間をカウントダウンで表示します。期間限定の LP と相性のよいアプリです
• シンプル送料無料バー｜あといくらで送料無料表示 … 送料無料までの残り金額を表示します。カートページでヘッダーを残しつつ、もう1点の購入を後押しできます
• シンプルスマホナビゲーション｜お手軽モバイルボトムメニュー … スマホの画面下にメニューを固定表示します。スマホでヘッダーを消したページに、別の形で導線を残したいときに向きます
• シンプル縦型ショート動画ギャラリー｜お手軽動画グリッド … 縦型のショート動画を並べて表示します。LP の中で商品の使用感を伝えたいときに使えます