Shopify デフォルトテーマ「Debut」のスタックコンテキストを調べてみる

ishigaki

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。

Gaji-Labo では Shopify というEコマース用プラットフォームのテーマ開発を行っています。

今回は、Shopify テーマ開発を進める上で基となる Shopify デフォルトテーマの「Debut」テーマのスタックコンテキストを調べてみました。

Debut テーマに手を加えていく形での Shopify テーマ開発については、こちらの記事もご覧ください。

経緯

Gaji-Labo の Shopify テーマ開発は、Shopify のストア開設時のデフォルトテーマである「Debut」というテーマを改変する形で行っています。

そのため、 Debut テーマの実装を理解することが、円滑なテーマ開発や運用を見据え破綻しないコード設計に直結しています。

今回は、テーマ実装の理解の一環として、 Debut テーマに実装されているコンポーネントのスタックコンテキストを調査しました。

なお、調査はストア開設時初期状態の「Debut」テーマで、管理画面 > オンラインストア > テーマ > カスタマイズから参照できる以下のページで行いました。

  • ホームページ
  • 商品ページ
  • コレクションリスト
  • コレクションページ
  • ブログ
  • カート
  • 404ページ

また、以下の内容は記事執筆時点での情報です。その後の Debut テーマのアップデートによりコードが変更されている可能性があることをご留意ください。

調べた結果

Debut テーマの初期状態でスタックコンテキストを持っているコンポーネントは以下の7つです。下に行くほど重なり順は上になります。

コンポーネント名表示されるページクラス名z-indexスタックコンテキストスタックレベル
テキストオーバーレイ付き画像ホームページdiv.hero__inner2html > div.drawer-page-content1
商品リンクホームページ、商品ページ、コレクションページa.grid-view-item__link2html > div.drawer-page-content2
お客様の声ホームページdiv.quotes-slide8html > div.drawer-page-content3
検索バー表示時オーバーレイ全ページdiv.drawer-page-content::after8html > div.drawer-page-content4
ヘッダー全ページdiv.site-header__mobile-nav11html5
検索バー全ページdiv.search-bar999html6
カート追加時ポップアップ商品ページdiv.cart-popup-wrapper9999html7

以下、コンポーネントごとに詳述します。

1. テキストオーバーレイ付き画像

Debut テーマのテキストオーバーレイ付き画像コンポーネントの画像

ホームページ(トップページ)にのみ追加できるテキストオーバーレイ付き画像のコンポーネントです。

  • 表示されるページ: ホームページ
  • クラス名: div.hero__inner

2. 商品リンク

Debut テーマの商品リンクコンポーネントの画像

サイト全体で使われる商品詳細ページへの画像+タイトルのリンクコンポーネントです。

  • 表示されるページ: ホームページ、商品ページ、コレクションページ
  • クラス名: a.grid-view-item__link

3. お客様の声

Debut テーマのお客様の声コンポーネントの画像

ホームページにのみ表示できるテキストのコンポーネントです。

  • 表示されるページ: ホームページ
  • クラス名: div.quotes-slide

4. 検索バー表示時オーバーレイ

Debut テーマの検索バー表示時オーバーレイの画像
ヘッダー以下のページ内コンポーネントを全て覆うオーバーレイ

検索バー、またハンバーガーメニュー表示時に表示される、ヘッダー以下全てのコンポーネントを覆うオーバーレイです。

  • 表示されるページ: 全ページ
  • クラス名: div.drawer-page-content::after

5. ヘッダー

Debut テーマのヘッダーの画像

全ページに表示されるヘッダーです。スマートフォン表示時のハンバーガーメニューを内包しています。

  • 表示されるページ: 全ページ
  • クラス名: div.site-header__mobile-nav

6. 検索バー

Debut テーマの検索バーの画像

全ページに表示される検索バーです。

  • 表示されるページ: 全ページ
  • クラス名: div.search-bar

7. カート追加時ポップアップ

Debut テーマでカート追加時に表示されるポップアップの画像

商品をカートに追加した際に表示されるポップアップです。これはどのコンポーネントよりも最上位に表示されます。

検索バーより上位に配置されている
  • 表示されるページ: 商品ページ
  • クラス名: div.cart-popup-wrapper

まとめ

今回は、 Shopify デフォルトテーマの「Debut」テーマのスタックコンテキストを調査してみました。

堅牢な実装を行うために、既存コードを理解することは Shopify テーマ開発に関わらずどのようなケースでも重要なことだと考えています。

Shopify テーマ開発に携わっている方々の参考にしていただければと思います。

開発のお悩み、フロントエンドから解決しませんか?

あなたのチームのお悩みはなんですか? 「腕の良いエンジニアに重要でない作業まで任せてしまっている」「腕の良いデザイナーに主業務以外も任せてしまっている」「すべての手が足りず細かいことまで手が回らない」などなど… 。

そんなときは、相談相手としてGaji-Laboにお気軽にお声がけください。あなたの開発チームに足りていない役割や領域を適切に捉えてカバーすることで、チーム全体の生産性と品質をアップさせるお手伝いをします。

オンラインでのヒアリングとフルリモートでのプロセス支援に対応していますので、リモートワーク対応可のパートナーをお探しの場合もぜひ弊社にお問い合わせください!

お悩み相談はこちらから!

ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。