ShopifyでPC版に最適な左サイドバーを設置する方法を解説。theme.liquidの構造理解からサイドバー領域の追加、CSSによるデザイン調整、Liquid条件分岐での表示ON/OFFまでをわかりやすく紹介。BtoBサイトや多カテゴリーを扱うECに役立つ小技です。
近年ウェブサイトのレイアウトを見ると、サイドバーを持たない1カラム構成が主流になってきているように感じます。
しかしECサイトのPC版に目を向けると、依然としてサイドバーを設置しているケースが少なくありません。
理由の一つは利便性にあります。ユーザーが商品を比較・検討する際、カテゴリや条件をすぐに絞り込めるサイドバーは大きな役割を果たしています。
特にPCからの購入が多いBtoB系のECサイトでは、多岐にわたる商品カテゴリーを備えていることが多いため、サイドバーの存在は重要。そこで本記事では、Shopifyテーマに左サイドバーを設置する方法を考察しながら、その基本となる「theme.liquid」の構造について紹介していきます。
まず「theme.liquid」の構造を知ろう
サイドバーを設置するためには、まず「theme.liquid」の構造を理解しておく必要があります。
「theme.liquid」はテーマ全体に共通する要素を記述するファイルであり、各ページのレイアウトを定義する非常に重要な役割を担っています。
Shopifyの基本構造は「ヘッダー」「メインコンテンツ」「フッター」の3つで構成されており、ヘッダーやフッターはすべてのページで共通して表示されます。
一方、メインコンテンツはページごとに内容が異なり、トップページ、商品ページ、ブログ記事、コレクションページなど、それぞれに対応するテンプレートファイルを持っています。
これらのテンプレートはテーマエディタから編集できるほか、Liquidコードを修正することで細かいカスタマイズも可能です。つまり、「theme.liquid」はサイト全体の骨格を形作る基盤であり、サイドバーを設置する際もこの構造を前提として理解しておくことが重要になります。
サイドバーは、ヘッダーやフッターのようにテーマ全体で共通して表示させることもできますが、Liquidの条件分岐を使えば、ページごとに表示/非表示を制御することも可能です。
たとえば、商品ページやコレクションページでは表示に、トップページやブログ記事では非表示にするといった設定ができるため、利用シーンに合わせた柔軟なレイアウトを実現できます。
「theme.liquid」の構造
ではここで、「theme.liquid」の構造をシンプルに紹介します。実際にファイルを開いてみると、300行を超える大きなボリュームがありますが、基本的には次のような領域に分けられています。
・head領域（<head></head>）：meta情報、JavaScriptやCSSの読み込み、titleタグなどを管理
・header領域（{% sections ‘header-group’ %}）：サイトロゴ、グローバルナビゲーション、検索やカートアイコンなど
・コンテンツ領域（{{ content_for_layout }}）：トップページや商品ページなど、各ページ固有のテンプレートが展開されるメイン部分
・footer領域（{% sections ‘footer-group’ %}）：フッターメニュー、コピーライト表記、SNSアイコンなど
このように整理しておくと、サイドバーをどの位置に組み込むのが最適かをイメージしやすくなります。
もちろん、{%- render ‘cart-drawer’ -%}のようにテーマによって追加されているパーツもありますが、基本的なレイアウト構成としては、先ほど紹介した4つの領域で理解しておけば十分です。
ちなみに cart-drawer は、ユーザーが商品をカートに追加した際に表示されるモーダルボックスのような役割を担っており、購入体験を向上させる仕組みの一つです。
サイドバーを設置
では、いよいよPC版表示用の左サイドバーを設置していきます。
なぜ「左」なのかというと、もともとブログなどでは右側にサイドバーを配置するケースも多く見られましたが、近年のECサイトでは左側にサイドバーを置くデザインが主流になっているため。ユーザーの視線の流れや操作性を考慮すると、左サイドバーの方が自然に利用されやすい傾向があります。
サイドバーを設置するには、これまで説明した基本レイアウトに新たな領域を組み込む必要があります。
お気づきかもしれませんが、Shopifyの各パーツは {% sections ‘〇〇〇’ %} という形で読み込まれています。そして、この呼び出しには2種類があり、サイドバー領域に複数のセクションを配置する場合は「sections（セクションたち）」を、一方で単一のセクションで構成する場合は「section」 を使用します。
sideBar-group.jsonを作成
今回は、テーマエディタから柔軟にカスタマイズできるようにしたいので、サイドバーは {% sections ‘〇〇〇’ %}を使って進めていきます。これにより、複数のセクションをまとめて管理でき、管理画面上からも追加・編集がしやすくなります。
まずは、「sections」フォルダ内に「sideBar-group.json」を作成します。以下はそのサンプルコードです。
{
"name": "sideBar-group",
"type": "aside",
"sections": {
"main": {
"type": "sideBar",
"settings": {}
}
},
"order": [
"main"
]
}このコードでは、「sideBar-group」という新しいセクション・グループを定義しています。中には「sideBar.liquid」というセクションを読み込む形になっており、必要に応じて追加の設定を組み込むことも可能です。
注意点として「sideBar-group.json」の「type」は「aside」 に設定する必要があります。
※なぜ「aside」なのか。
「type」を指定するのは、Shopifyに「このセクションはどの枠に属するのか」を認識させるためです。Shopifyのテーマエディタでは、「ヘッダー」「フッター」「メインコンテンツ」「aside（補助領域）」 といったエリアごとに編集パネルが分かれています。
もし「type」を設定しなかったり、誤って設定したりしてしまうと、Shopifyはそのセクションをどの領域に表示すべきか判断できません。結果として、テーマエディタに正しく表示されなかったり、意図しない場所に組み込まれてしまう可能性があります。
sideBar.liquidを作成
では、作成した「sideBar-group.json（サイドバー領域）」のメインを担うセクションとして「sideBar.liquid」を作成します。
今回はできるだけシンプルに、ul-liでリンクを並べるだけのサイドバーを用意してみます。
{% schema %}
{
"name": "サイドバー",
"presets": [
{ "name": "サイドバー" }
]
}
{% endschema %}
<!-- シンプル版サイドバー -->
<ul class="sideBar-list">
<li><a href="/collections/sub">サブカテゴリー1</a></li>
<li><a href="/collections/sub-2">サブカテゴリー2</a></li>
<li><a href="/collections/sub-3">サブカテゴリー3</a></li>
<li><a href="/collections/sub-4">サブカテゴリー4</a></li>
</ul>for文を活用すれば、特定のコレクションを画像付きでサイドバーに表示することも可能です。
以下は、ハンドルが 「main」 のコレクションを読み込み、登録されている代表画像とタイトルを並べるサンプルコードです。
{% schema %}
{
"name": "サイドバー",
"presets": [
{ "name": "サイドバー" }
]
}
{% endschema %}
{% assign target_handles = 'main' | split: ',' %}
<ul class="collection-list">
{% for handle in target_handles %}
{% assign current_collection = collections[handle] %}
{% if current_collection %}
<li class="collection-item">
<a href="{{ current_collection.url }}">
<img src="{{ current_collection.featured_image | img_url: '200x200' }}"
alt="{{ current_collection.title | escape }}">
<h3>{{ current_collection.title | escape }}</h3>
</a>
</li>
{% endif %}
{% endfor %}
</ul>サイドバー領域をtheme.liquidに組み込む
次は、作成した「sideBar-group.json（サイドバー領域）」を theme.liquid に組み込みます。上述のとおり、サイドバー領域には複数のセクションを配置したいので、呼び出しは「{% sections ‘sideBar-group’ %}」とします。
メインコンテンツと横並びにする関係で、main内にサイドバー用の枠とページ本体の枠を用意します。
<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
<div class="sideBar">
{% sections 'sideBar-group' %} //サイドバー領域
</div>
<div class="pageMain">
{{ content_for_layout }} //本体
</div>
</main>PC版のデザインでは、各枠のサイズなどをCSSで調整すれば問題ありません。また、スマホ版でサイドバーを非表示にしたい場合も、同様にCSSで制御することができます。
以下はCSSでの調整例です。
#MainContent {
display: flex;
gap: 24px;
}
.sideBar {
width: 260px;
}
.pageMain {
flex: 1;
}さらに、ページごとにサイドバーを表示・非表示に切り替えたい場合には、Liquidの条件分岐を利用します。たとえばトップページだけサイドバーを非表示にする場合は、以下のようにテンプレートを判定するコードを加えます。
{% if template == 'index' %}
//トップページでは非表示
{% else %}
<div class="sideBar">
{% sections 'sideBar-group' %}
</div>
{% endif %}theme.liquidにサイドバー領域の組み込みを完了すると、テーマエディター上で新しい枠が追加されていることを確認できます。また、その枠には他のセクションを追加できるようになっているはずです。
以上、Shopifyで左サイドバーを設置する小技の紹介でした。
冒頭でもお話ししたように、BtoB系のECサイトや、多岐にわたる商品カテゴリーを備えているECサイト、そしてPCでの購入が多いECサイトにおいては、サイドバーの設置は欠かせない工夫になるかもしれません。
カテゴリーだけでなく、タグクラウドや営業日カレンダーなどを配置すれば、さらに利便性や情報提供の幅が広がります。ぜひご活用ください。
