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

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

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

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

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

経緯

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

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

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

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

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

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

調べた結果

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

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

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

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

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

2. 商品リンク

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

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

3. お客様の声

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

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

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

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

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

5. ヘッダー

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

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

6. 検索バー

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

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

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

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

• 表示されるページ: 商品ページ
• クラス名: div.cart-popup-wrapper

まとめ

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

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

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