【完全解説】Shopifyでセクションを非表示にする方法｜テーマ別・シチュエーション別に徹底ガイド！
はじめに：Shopifyで「一時的にセクションを消したい」とき、どうする？
Shopifyサイト運営中、こんな悩みを持ったことはありませんか？
-
期間限定キャンペーン終了後、バナーを一旦非表示にしたい
-
制作中のセクションを一時的に隠しておきたい
-
スマホだけ特定のセクションを非表示にしたい
実は、Shopifyではセクションを「削除」せずに「非表示」にするスマートな方法がいくつも用意されています。
この記事では、初心者でもすぐできるノーコード手順から、カスタムCSSを使った高度な非表示テクニックまで、徹底的に解説します！
1. Shopifyの「セクション」とは？おさらいしておこう
まず最初に、Shopifyにおける「セクション」の基本を確認しておきましょう。
セクションとは？
Shopifyテーマにおける「セクション」は、ページの構成要素を指します。
たとえば、
-
ヒーローバナー
-
特集コレクション
-
テキストブロック
-
画像付きテキスト
などが「セクション」にあたります。
テーマエディタ上でドラッグ＆ドロップできる、柔軟な設計が特徴です。
2. Shopifyでセクションを非表示にする基本方法
実は、セクションを丸ごと非表示にするのはとても簡単です。
大きく3つの方法があります。
① テーマエディタで「表示/非表示」切り替え（最も簡単！）
多くのテーマでは、テーマエディタ上で簡単にセクションの表示・非表示を切り替えられます。
操作手順
-
Shopify管理画面 →「オンラインストア」→「テーマ」→「カスタマイズ」
-
該当ページに移動
-
非表示にしたいセクションを探す
-
セクション名の横にある「目のアイコン（👁）」をクリックして非表示にする
ポイント： 非表示にしてもセクション自体は削除されないので、いつでも復活できます！
② テーマエディタでセクション自体を「削除」
もし完全に不要な場合は、セクションを「削除」することも可能です。
ただし、削除してしまうと、再作成が必要になるので慎重に。
おすすめは「非表示にとどめておく」こと。
③ コード編集で特定条件下だけ非表示にする
さらに柔軟な非表示制御をしたい場合（たとえばスマホだけ隠したい場合など）は、CSSやLiquidコードを使ってカスタマイズできます。
これについては後半で詳しく解説します！
3. 【応用編】CSSを使って特定デバイスだけセクションを非表示にする方法
例えば、スマホでは非表示にしたいけどPCでは表示したい、
そんな時はCSSで制御するのがベストです。
基本的なCSSコード
ここで重要なのは、**対象セクションのクラス名（class）**を正しく指定すること。
テーマエディタでセクションの設定画面を開き、カスタムCSSクラスを追加できる場合は、任意のクラス名（例：hide-on-mobile）を設定してから上記コードを書くときれいに管理できます。
4. Shopifyテーマ別：セクション非表示対応の違い
実は、Shopifyのテーマによって、セクションの非表示操作のしやすさに差があります。
代表的なテーマと特徴
| テーマ名 | 特徴 |
|---|---|
| Dawn | 標準機能で「表示/非表示」切り替え可能。非常に柔軟。 |
| Sense | Dawnベース。カスタムCSSクラスの追加も簡単。 |
| Prestige | 高機能だが一部セクションは固定で編集できない場合あり |
| Impulse | セクションブロック豊富、細かいカスタマイズ推奨 |
もし「テーマエディタで非表示ボタンが見当たらない！」場合は、コードカスタマイズが必要になるかもしれません。
5. シチュエーション別：セクション非表示活用アイデア
具体的にどんな時に「非表示」を使うと効果的か？
例を紹介します。
季節キャンペーン終了後
-
クリスマス、バレンタイン、夏セールなど
-
キャンペーン終了後は関連バナーや特集を非表示にしておくとスマート
セール期間だけ特別表示
-
セール開催中だけ「タイムセールバナー」を表示
-
期間外は非表示にしてスッキリした見た目に
メンテナンス中ページの一時的非表示
-
新機能追加やページリニューアル時
-
公開前に一時的に隠しておきたい時に便利
6. よくあるトラブルと対処法
非表示にしたのに消えない場合
-
キャッシュが原因かも。ブラウザキャッシュクリア、またはプライベートブラウザで確認を。
-
適用クラス名ミス、メディアクエリ間違いもよくあるので要チェック。
テーマアップデートでCSSが消えた場合
テーマ更新時にカスタムCSSが上書きされることがあります。
対応策：
-
外部CSSファイルを作成して読み込む
-
必要なコードはバックアップしておく
テーマ編集前には必ずバックアップを取りましょう！
まとめ｜セクションを自在に「出したり隠したり」できれば、運営がもっとラクになる！
Shopifyサイト運営では、**「セクションを非表示にするスキル」**は必須です。
覚えておくべきポイントは、
-
テーマエディタの「目のアイコン」で簡単非表示
-
スマホ・PC別表示切り替えにはCSSを使う
-
テーマによってできることが少し違うので事前確認
-
更新前のバックアップは絶対に忘れない
たったこれだけ！
セクションを自在に出し入れできれば、
キャンペーン運用も、デザインの更新も、何倍もスマートになりますよ。
ぜひ今日から「セクション非表示」を使いこなして、あなたのShopifyストアをもっとかっこよく、もっと柔軟に運営していきましょう！
