クイック回答：ヘッダーとフッターメニューを固定にする手順
ヘッダーを固定するには、テーマ設定 > ヘッダー を開き、固定ヘッダーのオプションを選択します（Dawnでは なし、上へスクロール時、常時、常時（ロゴ縮小）の4種類）。多くのテーマには固定フッターメニューがないため、CSSまたはメニューアプリで下部タブバーを追加し、実機スマートフォンで表示崩れがないか確認します。
画面の上下両端にナビゲーションを固定するための3ステップは以下の通りです：
- ヘッダー設定を有効化する： Shopify管理画面から オンラインストア > テーマ > カスタマイズ を開きます。ヘッダー セクション（または テーマ設定 > ヘッダー）で好みの固定挙動を選択し、保存します。
- モバイル向け下部タブバーを追加する： 標準テーマのフッターはページ末尾のコンテンツエリアであるため、専用CSSまたはアプリ埋め込み機能を使って親指の届く下部固定バーを導入します。
- 実機の表示領域を検証する： スマートフォンの実機で確認し、ヘッダーや下部バーが見出し、購入ボタン、OSのジェスチャーバーを覆い隠していないか点検します。
- 上下両極のインターフェース： 固定ヘッダーはロゴ・検索・カートを画面上部に維持し、固定フッターメニューは最も操作しやすい親指操作エリアに下部タブバーを提供します。
- ドキュメントフローと重なり：
position: fixedは要素をレイアウトから完全に外すため余白がつぶれますが、position: stickyはスクロール境界に達するまで自然な配置を保ちます。 - 2つの固定バーによる画面圧迫： スマホ画面で上下両方を固定すると閲覧領域が狭まるため、ヘッダーをコンパクトにし、商品購入ボタンとの衝突を防ぐ配慮が必須です。
固定ヘッダーと固定フッターメニューの違いと役割
固定ヘッダー（Sticky Header） は、ユーザーがページを下にスクロールしてもブラウザ表示領域の上端に留まり続けるヘッダーです。ブランドロゴ、主要コレクションリンク、検索窓、カートアイコンなどを常時利用可能な状態にし、長い商品一覧や説明文を最後までスクロールした後でも先頭に戻る手間を省きます。
一方、固定フッターメニュー（Sticky Footer Menu） は、特定商取引法やコピーライト、決済マークを記載する通常の最下部フッターとは全く異なります。現代のUIデザインにおいて、これはスマートフォン画面の最下部に常駐する 下部タブバー（Bottom Tab Bar） を指し、ホーム・検索・メニュー・お気に入り・カートなどの主要操作を親指の届く位置に集約するものです。
CSSにおける sticky と fixed の違い
CSSにおいて position: sticky は、指定されたスクロール閾値に達するまで通常のドキュメントフローに従って配置されます。MDN Web DocsのCSS position解説にある通り、sticky要素が意図通りに動作するには top、bottom、left、right のうち少なくとも1つの閾値が必要です。吸着する前はレイアウト上のスペースを自然に維持するため、要素が突然飛ぶ現象を防げます。
それに対し position: fixed は、要素をドキュメントの通常フローから完全に除外します。MDN Web Docsが明記しているように、ページレイアウト内でその要素のためのスペースが確保されなくなるため、後続の要素が上に詰められて固定要素の背面に潜り込んでしまいます。また、fixed と sticky の双方が新たな重ね合わせコンテキスト（Stacking Context）を生成するため、z-index の階層関係にも変化が生じます。
方法1：テーマ設定で固定ヘッダーを有効化する
ストアがShopify公式テーマであるDawnや、Online Store 2.0準拠のモダンテーマを利用している場合、コードを編集する必要はありません。テーマカスタマイザーから数クリックで設定できます。
- Shopify管理画面で オンラインストア > テーマ に移動します。
- 編集したいテーマの横にある カスタマイズ をクリックします。
- 左側のサイドバーで ヘッダー セクションを選択します（またはテーマのバージョンに応じて テーマ設定 > ヘッダー を開きます）。
- 固定ヘッダー のドロップダウン設定を探し、希望の動作を選択して右上の 保存 をクリックします。
Dawnテーマにおける4つの固定ヘッダーオプション
Shopifyの代表テーマDawnでは、テーマスキーマ内で以下の4つの固定オプションが定義されています：
| 設定項目 | ストアフロントでの動作 | 最適なユースケース |
|---|---|---|
| なし（None） | ヘッダーはページ内容と一緒にスクロールし、下へスクロールすると画面外に消えます。 | 単品通販ページ、縦スクロール記事、画面の表示スペースを最優先したいミニマルな店舗。 |
| 上へスクロール時（On scroll up） | 下へスクロールすると自動で隠れ、上へ少しスクロールした瞬間に再表示されます。 | 商品数の多いカタログ型ストア全般；Dawnのソースコードにおける初期デフォルト設定です。 |
| 常時（Always） | ヘッダーが当初の高さのまま、ブラウザ上端に常に固定されて表示され続けます。 | 検索、通貨セレクター、カートボタンへのアクセスをスクロール深度に関わらず担保したい店舗。 |
| 常時、ロゴを縮小 | 常時固定されますが、ロゴ画像を自動縮小して画面の縦方向の占有スペースを抑えます。 | 縦長や正方形の大きなブランドロゴを持ち、商品画像への干渉を避けたい店舗。 |
Shopify Dawnの公式GitHubリポジトリに記載されている通り、Dawnのコード内では sticky_header_type のデフォルト値は on-scroll-up に設定され、CSSの position: sticky を用いて構築されています。
Nielsen Norman Groupの固定ヘッダーに関するUX調査でもこの仕組みが推奨されています。部分固定（On scroll up）ヘッダーは、「上方向へのスクロールはメニュー操作やカート確認を意図している」というユーザー心理に基づいており、下方向へのコンテンツ閲覧中は視界を広く保つことができます。
その他のOnline Store 2.0テーマ
その他のOnline Store 2.0テーマにも同様の設定がある場合がありますが、名称や選択肢はDawnと異なることがあります。カスタムCSSを書く前に、必ずテーマの標準ヘッダー設定を確認してください。該当する設定がなければ、下のCSSによる方法に進んでください。Dawnテーマをお使いの場合は、DawnテーマにおけるNavi+の活用法 も参考にしてください。
動画での手順確認をご希望ですか？こちらの解説動画でテーマエディタの設定箇所をご覧いただけます：
方法2：カスタムCSSでヘッダーを固定する
独自テーマや固定ヘッダー設定がない古いテーマをお使いの場合でも、theme.liquid のテンプレートファイルを直接編集することなく、カスタムCSS機能を使ってヘッダーを固定できます。
作業前にテーマを複製する
スタイルを変更する前に、必ず本番テーマのバックアップを作成してください。Shopifyヘルプセンターのテーマ複製ガイドでも次のように推奨されています：”Before you customize a theme, it’s a good idea to make a backup copy so that you can discard your changes.”
テーマを複製するには、オンラインストア > テーマ を開き、公開中テーマの横にある三点リーダー（...）をクリックして 複製 を選択します。すべてのCSS調整と動作確認は、この複製テーマ上で行ってください。
CSSの貼り付け場所
Shopifyでは、テーマエディタ内に カスタムCSS の入力エリアが用意されています。オンラインストア > テーマ > カスタマイズ を開き、左側バーの歯車アイコン（テーマ設定）をクリックして、カスタムCSS パネルを開きます。
ShopifyヘルプセンターのカスタムCSS追加ガイドによると、この全体向けカスタムCSS欄に記述したルールはストア全体に適用され、1,500文字の上限があります。なお、個別セクション内のCSS欄に入力すると対象セクション内のみにスコープが限定され、全画面固定が正しく効かない場合があるため注意してください。
/* 例 — お使いのテーマに合わせてセレクタを調整し、複製テーマでテストしてください */
.section-header {
position: sticky;
top: 0;
z-index: 3;
}
上記のCSSはヘッダーコンテナに position: sticky を適用します。MDN Web Docsで示されている通り、sticky要素には位置の基準が必要であり、top: 0 を指定することで画面上端に達した際に固定されます。また z-index: 3 により、商品画像や文章の上にヘッダーが重なるようになります。
古いコミュニティ記事のコードには注意が必要です。Debutテーマ向けに投稿された過去の解説記事（Shopify Communityなど）では、jQueryスクリプトや手動のJavaScript操作が多用されています。このスレッド自体が、Shopifyのサポート対象外の高度なチュートリアルであると明記しています。現行のテーマにスクリプトをコピーせず、このガイドではテーマ設定とCSSだけを使います。
固定ヘッダーでよくある不具合と解決策
図1：概念図 — scroll-padding-topによるコンテンツの隠れとレイヤー競合の解消。
ナビゲーションバーを固定すると、ページの幾何学的配置やブラウザの描画レイヤーに変化が生じます。問題が発生する場合、大半は予測可能な4つのCSS要因に起因しています。
ヘッダーの下にコンテンツが隠れてしまう
固定ヘッダーを設定した後に最も多く報告されるトラブルは、ページを開いた瞬間にバナー画像や見出しテキストがヘッダーの裏に隠れてしまう現象です（Shopifyコミュニティでの実際の投稿）。
この不具合は、position: sticky ではなく position: fixed を使った場合に発生します。fixedは要素をドキュメントフローから完全に排除するため（MDN Web Docs）、後ろのコンテンツが上端まで繰り上がってしまうのです。position: sticky に変更すれば、スクロール開始前は本来の高さを維持するため通常はすぐに解決します。
テーマの都合上どうしても fixed を維持する必要がある場合や、ページ内リンク（#reviews や #spec など）をクリックした際に見出しがヘッダーの下に潜り込む場合は、ルートのHTML要素に scroll-padding-top を指定します。MDN Web Docsに記載の通り、この指定により固定バーの高さ分だけスクロール着地点をずらすことができます：
/* 例 — お使いのテーマに合わせてセレクタを調整し、複製テーマでテストしてください */
html {
scroll-padding-top: 80px; /* プレースホルダー：ご自身のヘッダーで実測した高さに置き換えてください */
}
フォーラムの数値を鵜呑みにせず、必ずご自身のブラウザの開発者ツールでストアのヘッダー実寸高さを測定して値を決定してください。
固定ヘッダーが途中で吸着しなくなる（overflow問題）
スライダーアプリや外部バナーを追加した途端、それまで正常に固定されていたヘッダーが固定されなくなる現象も頻発します。
この仕組みは MDN Web Docs で説明されています。sticky要素は、スクロール機構を持つ直近の祖先要素に吸着します。もし親コンテナ（html、body、<main>、ラッパー要素など）に overflow: hidden、overflow: auto、overflow: scroll が付与されていると、ヘッダーはブラウザのウィンドウではなくその親要素に固定されます。その親要素自体がスクロールしない場合、ヘッダーは一切動きません。親階層の不要なoverflow宣言を削除して解消してください。
ヘッダーが他の要素の下に潜り込む（z-index）
埋め込み動画やレビューウィジェットを通過する際、ヘッダーがそれらの下に潜り込んでしまうことがあります。逆に、ドロップダウンメニューやカートドロワーがヘッダー枠内で途切れてしまう場合もあります。
position: sticky および position: fixed は新たな重ね合わせコンテキストを作成します（MDN Web Docs）。ヘッダーの z-index を適切な値に設定しつつ、カートドロワーや検索モーダルがヘッダーより高い値を保つように調整してください。
モバイル表示時のみ固定を解除する
画面の縦幅が狭いスマートフォンでは、常時ヘッダーが表示されていると閲覧の邪魔になることがあります。メディアクエリを使って、デスクトップ表示時のみ固定ルールを適用することが可能です：
/* 例 — お使いのテーマに合わせてセレクタとブレークポイント（ここでは750px）を調整し、複製テーマでテストしてください */
@media (min-width: 750px) {
.section-header {
position: sticky;
top: 0;
z-index: 3;
}
}
ShopifyのカスタムCSS欄は @media クエリをサポートしています（Shopifyヘルプセンター）。Dawnをお使いの場合は、設定画面で「なし」や「上へスクロール時」を選ぶだけでも解決します。また、ページ読み込み後にJavaScriptでクラスを書き換えてヘッダー位置を変更するようなスクリプトはレイアウトシフト（ガタつき）を招くため避けてください。Google web.devのCLSガイドラインにある通り、CLSスコアは0.1以下を維持することが推奨されます。
以下のマトリクスは、よくある固定ヘッダーのトラブルと技術的対処法をまとめたものです：
| 発生する現象・症状 | アーキテクチャ上の根本原因 | 推奨される対処手順 |
|---|---|---|
| 初回読み込み時に本文が隠れる | ヘッダーが position: fixed のためレイアウト領域がつぶれている。 |
position: sticky に変更するか、ページ上部に同等の余白を追加する。 |
| ページ内アンカーがヘッダー裏に潜る | ヘッダーの高さを考慮せず要素最上部へスクロールしている。 | html { scroll-padding-top: <高さ>; } を正確に設定する。 |
| スクロールしてもヘッダーが固定されない | 祖先要素に overflow: hidden や auto が設定されている。 |
親要素（html, body, ラッパー）を点検し、余分なoverflowを解除する。 |
| バナーやウィジェットがヘッダーの上に重なる | 重ね合わせコンテキストの競合またはz-indexの不足。 | ヘッダーの z-index を引き上げ、カート等はさらに上位に指定する。 |
| モバイル画面が窮屈に感じる | ヘッダーの縦幅がスマホ画面に対して大きすぎる。 | Dawnの「上へスクロール時」を使うか、モバイルのみ固定を解除する。 |
多くのShopifyテーマに固定フッターメニューがない理由
固定ヘッダーが標準搭載される一方で、「固定フッターメニュー」という検索ニーズの後半部分は、一般的なテーマ設計において大きな空白地帯となっています。
Shopifyテーマにおける「フッター」とは、ページ最下部に置く静的コンテナとして設計されています。会社概要、お問い合わせ、特定商取引法に基づく表記、決済マークなど、複数列のテキスト情報で構成されます。もしこのようなフッターをそのままスマホ画面下に固定してしまうと、画面の大部分が埋まり、商品を見ることすらできなくなります。
ユーザーが本当に求めている「固定フッターメニュー」の実態は、アプリのような モバイル下部タブバー（Bottom Tab Bar） です。大半のテーマにはこれが付属していないため、独自CSSとLiquidセクションで自作するか、専用アプリを導入するかの2択になります。
カスタムCSSで下部固定バーを構築する
CSSを自作する場合の基本構造は、画面下端に吸着する固定配置になります：
/* 例 — お使いのテーマに合わせてセレクタを調整し、複製テーマでテストしてください */
.my-bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background-color: #ffffff;
border-top: 1px solid #e5e7eb;
z-index: 10;
}
body {
padding-bottom: 60px;
}
position: fixed は要素をドキュメントフローから外すため（MDN Web Docs）、body タグへの padding-bottom 追加が必須です。この余白がないと、最下部の本来のフッターや問い合わせボタンが永久に見えなくなります。また、HTMLやアイコン出力、テーマ更新ごとのメンテナンスをすべて自分で行う必要がある点にも留意してください。
iPhoneのセーフエリア（Safe Area）への対応
ホームボタンのないiPhoneなどのスマートフォンには、画面最下部にホームバーと呼ばれるジェスチャー用の横線が存在します。バーを画面下端ギリギリに配置すると、操作アイコンとシステムバーが干渉してしまいます。
MDN Web DocsのCSS env()解説にある通り、環境変数を使ってハードウェアセーフエリア分の余白を確保します：
/* 例 — お使いのテーマに合わせてセレクタを調整し、複製テーマでテストしてください */
.my-bottom-bar {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
body {
padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}
env(safe-area-inset-bottom) を使用することで、下部バーのボタンがOSの操作バーと重ならず、快適にタップできるようになります。親指の可動域とモバイルナビゲーション設計の詳細については、Shopifyにおける下部ナビゲーションとタブバー設計ガイド をご覧ください。
モバイル画面で固定ヘッダーと下部タブバーを併用するポイント
図2：概念図 — カート落ちを防ぐためのモバイル上下固定バーのバランス調整。
上部の固定ヘッダーと下部のタブバーを同時に設置する場合、縦方向の表示領域の奪い合いという人間工学的な課題が生じます。
パソコンの大きな画面ではヘッダーに十分な縦のスペースがあることが多いですが、スマートフォンでは画面スペースが極めて限られています。Nielsen Norman Groupの調査でも、モバイルデバイスにおける画面領域の節約は最重要事項であると強調されています。
上下両方のバーが常時大きく居座ると、商品を見るための隙間がほとんどなくなってしまいます。以下の配慮を行ってください：
- ヘッダーをスリムに保つ： Dawnの 上へスクロール時 を使うと、下方向へ閲覧している間はヘッダーが退避します。固定したヘッダーを小さくしたい場合は 常時、ロゴを縮小 を選びます。
- 購入ボタンとの衝突を防ぐ： 商品詳細ページでは、テーマ独自の固定「カートに追加」ボタンが画面下に現れることがあります。下部タブバーを無条件に
bottom: 0で置くと、購入ボタンが完全に隠れてしまう恐れがあります。実機でのチェックを欠かさないでください。 - キーボードフォーカスの視認性を保つ（WCAG 2.4.11）： アクセシビリティ規格 W3C WCAG 2.4.11 (Focus Not Obscured - Minimum) では、フォーカスされた操作要素が固定ヘッダーや固定フッターによって完全に隠れてはならないと定められています。
scroll-padding-topとscroll-padding-bottom（MDN Web Docs）を設定して、選択中のリンクが見える位置までスクロールするように調整します。 - タップ領域を十分に確保する（WCAG 2.5.8）： W3C WCAG 2.5.8 (Target Size - Minimum) に従い、タッチターゲットは最低でも24×24 CSSピクセル以上の大きさを確保し、押し間違いを防止します。
マルチデバイスにおける総合的なナビゲーション設計については、ハンバーガーメニューを超えたモバイルナビゲーション および ナビゲーションアクセシビリティ総合ガイド をご覧ください。
トレードオフ：メニューを固定すべきではないケース
固定ナビゲーションは便利ですが、すべてのストアやページに無条件で適しているわけではありません。Nielsen Norman GroupのPage Laubheimer氏 は次のように指摘しています：”Sticky headers can be a positive addition to a site, but only if they truly serve a purpose for your users.”
以下のケースでは、固定化を見合わせることも検討してください：
- 単品通販ストアや短いランディングページ： 掲載商品が1〜2点のみでストーリーを読ませるLPの場合、常時メニューを表示する必要はありません。固定バーは単に閲覧面積を圧迫するだけになります。
- 画面下に固定要素が既に多いストア： 画面下に固定の購入ボタン、ポップアップバナー、チャットウィジェットなどが混在している場合、さらに下部メニューを追加するとUIが破綻します。
- テーマ更新に伴う保守コスト： 独自CSSを追加するほど、テーマ更新時の確認コストが増大します。Shopifyヘルプセンターにある通り、テーマ更新でクラス名が変わればCSSの修正が必要になります。
自社ストアの規模に合わせた最適なメニュー形式を検討するには、ストアに適したメニュータイプの選び方 も参考にしてください。
Navi+の役割：コード不要で導入できる固定下部タブバー
まず前提として明確にしておきます：Navi+は固定ヘッダーを作るアプリではありません。 画面上部のヘッダー固定には、テーマ標準の設定機能（方法1）やカスタムCSS（方法2）を使用するのが最も適切です。
Navi+が解決するのは、テーマがカバーしていないもう半分の課題、すなわち 下部の固定メニュー（Tab Bar） です。自作のLiquidセクションや複雑なCSSのSafe Area計算を行うことなく、画面下部に固定されるメニューバー Tab Bar を、アプリ内でテンプレートから作成できます。
Tab Barでできること：
- 全ページでの安定した常時表示： Navi+のTab Barは全ストアページに一貫して表示され（Navi+公式ドキュメント）、メニュー構造は最大3階層に対応しています。
- テーマコードを汚さないアプリ埋め込み方式： ShopifyのApp embedsを活用します。Navi+の公開手順ガイドに従い、アプリ内でメニューを作成後、オンラインストア > テーマ > カスタマイズ > アプリ埋め込み で Store Connector を有効にして保存するだけで完了します。
- 表示ルール： メニューは、デバイス（モバイルまたはデスクトップ）、ページタイプ（ホーム、商品、コレクションなど）、URLキーワードによって表示・非表示を設定できます（Navi+公式ドキュメント）。たとえば、Tab Barをモバイルのみに表示できます。
どのようなデザイン変更であっても、まずはテーマの複製版で事前にテストを行うのが鉄則です（Shopifyテーマ複製ガイド）。
If you’d rather not maintain custom CSS for the bottom bar, Navi+ Tab Bar gives you a sticky bottom menu you can set up from templates and limit to mobile — try it on a duplicate theme first. 具体的な設定手順は、ShopifyでのTab Bar公開手順 をご覧ください。
実践チェックリスト
- テーマを複製する： 設定変更やCSS追加を行う前に、オンラインストア > テーマ でバックアップを作成する。
- 固定ヘッダー設定を選択する： テーマ設定で適切なモード（「上へスクロール時」や「常時」）を選択する。
- スクロールの滑らかさを確認する： コレクションや商品ページを上下にスクロールし、ヘッダーの表示切り替えがスムーズか検証する。
- ページ内リンクのズレをチェックする： レビューや詳細へのジャンプリンクをクリックした際、見出しがヘッダー裏に隠れないか確認し、必要に応じて
scroll-padding-topを指定する。 - 重なり順の階層を点検する： ドロップダウンメニュー、メガメニュー、カートドロワーがヘッダーよりも手前に正しく展開されるか確認する。
- 下部ナビゲーションを導入する： CSSまたはアプリ埋め込みでモバイルタブバーを追加し、
env(safe-area-inset-bottom)とbodyの余白を確認する。 - 商品ページの干渉を監査する： スマホ画面で、下部バーが購入ボタンや固定決済ボタンを覆い隠していないか点検する。
- アクセシビリティと実機テスト： Tabキーでフォーカスの可視性を確認し、iPhoneおよびAndroidの実機スマートフォンで操作性を確認する。
FAQ
Shopifyでヘッダーとフッターメニューを固定にするにはどうすればよいですか？
ヘッダーはDawnなどのテーマ設定にある「固定ヘッダー」機能（上へスクロール時など）をオンにします。フッターには固定機能がないため、カスタムCSSまたはナビゲーションアプリを使ってモバイル下部タブバーを追加します。
固定ヘッダーの背面にコンテンツが隠れてしまうのはなぜですか？
position: fixed を使用してレイアウト上の余白が消失したことが主な原因です。position: sticky に切り替えるか、ルートのHTML要素に scroll-padding-top を指定することで解決できます。
固定ヘッダーが突然動かなくなった原因は何ですか？
親要素のいずれかに overflow: hidden、scroll、auto が指定された可能性があります。CSSの仕様上、sticky要素はウィンドウではなくスクロール機構を持つ直近の祖先要素に吸着するためです。
ヘッダーをデスクトップでのみ固定し、スマホでは解除できますか？
可能です。カスタムCSSを使用している場合は お使いのテーマのブレークポイントに合わせた min-width のメディアクエリで囲んで指定します。Navi+アプリを使用する場合は、表示ルールをデバイス別に設定して、スマホのみに表示されるようにできます。
下部固定バーがiPhoneのホームバーと干渉しませんか？
適切な余白がないと干渉します。下部バーのpaddingに env(safe-area-inset-bottom) を指定することで、ハードウェアのジェスチャー領域を避けて安全に表示できます。
固定ヘッダーはユーザー体験（UX）に悪影響を与えますか？
Nielsen Norman Groupの調査によると、明確な目的がある場合は有益です。ただしスマホ画面では、表示領域を圧迫しないようコンパクトにするか、下スクロール時に隠れる設計にする必要があります。
情報源
- Shopify Dawn テーマ デフォルト言語スキーマ： locales/en.default.schema.json
- Shopify Dawn テーマ Header セクション ソースコード： sections/header.liquid
- MDN Web Docs — CSS position プロパティ： developer.mozilla.org/en-US/docs/Web/CSS/position
- MDN Web Docs — CSS scroll-padding-top プロパティ： developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
- MDN Web Docs — CSS env() 関数： developer.mozilla.org/en-US/docs/Web/CSS/env
- W3C Web Accessibility Initiative — WCAG 2.4.11 Focus Not Obscured (Minimum)： w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html
- W3C Web Accessibility Initiative — WCAG 2.5.8 Target Size (Minimum)： w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
- Nielsen Norman Group — 固定ヘッダーに関するUX調査（Page Laubheimer氏）： nngroup.com/articles/sticky-headers/
- Google web.dev — Cumulative Layout Shift（CLS）の改善： web.dev/articles/cls
- Shopifyヘルプセンター — テーマへのカスタムCSSの追加： help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
- Shopifyヘルプセンター — テーマの複製方法： help.shopify.com/en/manual/online-store/themes/managing-themes/duplicating-themes
- Shopifyコミュニティ — 固定ヘッダーに関するディスカッション： community.shopify.com/t/sticky-fixed-header-menu/308093
- Shopifyコミュニティ — Debut向け固定ヘッダー設定ガイド： community.shopify.com/t/sticky-fixed-header-and-navigation-for-debut-theme/3640
- Navi+ヘルプセンター — ShopifyでのTab Bar公開手順： help.naviplus.io/docs/usage/tabbar-bottom-navigation/publishing-on-shopify/
- Navi+ヘルプセンター — Tab Barの使い方とターゲット配信： help.naviplus.io/docs/usage/tabbar-bottom-navigation/how-to-use/
トピックを見る
このガイドは各テーマの記事にリンクしています——それぞれをさらに深く学べます。