ECの利益向上に繋がるShopifyカスタマイズ事例7

弊社ではShopifyでの制作をはじめ、様々なECサイトの制作のご依頼をいただいています。
特に、現在はECサイトの売上をUPしつつ効率的な運用を行いたい、月商を1,000万円以上の規模に成長させたい、月商億円規模のサイトを安全にシステム移管したい等、「利益を上げる知識」と「システム構築の知識」を総合的に持つことで解決できるご要望を、ワンストップで実現することを得意としています。
その現場の中で行ってきたカスタマイズ事例について、解説します。

事例7：コレクションに小階層リンクの表示

カスタマイズの背景

ECサイトのユーザーが商品を探す際、導線の分かりやすさは購入率に大きく影響を与えます。特に、カテゴリー（※Shopifyはコレクション）が複数階層に分かれている場合、ユーザーが目的の商品へたどり着きやすいナビゲーションが求められます。
しかしながら、日本のECシステムでよく利用されてきた、カテゴリーページにその子階層メニュー（サブメニュー）を表示するといった機能は、Shopifyではデフォルトで実装されていません。
そのため、今回のカスタマイズでは、3階層構造のコレクション・サブメニューをShopifyで実装し、日本のユーザーにもわかりやすい、カテゴリーを深堀りできる機能を実装しています。

サブメニューの表示例

カスタマイズ前の課題

• リニューアル前のシステムでは多階層のメニューが存在したが、Shopifyにはその機能が存在しなかった。
• 商品カテゴリーは多岐にわたるため小階層メニューの実装が必須だった。
• 商品の入れ替えが多くメニューの変更が頻繁に行われるため、更新の手間と未反映のリスクを最小限にする必要があった。

上記の課題から、テーマへのLiquid開発での課題解決に取り組みました。

カスタマイズでの要件・解決案

• 最大3階層までのメニュー構造を想定し、現在閲覧中のコレクションの階層を特定して、その階層のサブメニューを表示できるようにする。
• 更新難易度を下げるため、テーマエディタ（Shopify管理画面）から参照メニューを編集できるよう、セクションでの実装を行う。
• コレクションハンドルとメニューのハンドルを照合して、一致した箇所の配下リンクを動的に出力することで、メニューをひとつ用意するだけで、すべてのコレクションに自動反映されるようにし、未反映リスクを低減する。
• UIとコードの保守性を保ちつつ、任意のスタイルを当てられるようにクラスを柔軟に指定できるオプションを設定する。

実装方法

具体的に行った実装方法は下記のような方法を利用しています。
※各コードは例であり、機構を組み込むサンプルのため、あくまで機構づくりの参考として記載しています。

全体Liquidコード

このコードを、セクションのliquidコードとして用意し、コレクションページに追加セクションとして組み込むことで、子階層メニューの自動表示を実現しています。

{%- comment -%}
  Collection Sub‑Menu 3‑depth
  ──────────────────────────
  section.settings.menu で指定したメニューから
	1) 現在の collection.handle と一致するリンクを
	   親(第1階層) → 子 → 孫(第3階層) の順に探す
	2) 見つかったリンク配下の links を UL > LI > A で出力
  ──────────────────────────
{%- endcomment -%}

{%- assign menu = section.settings.menu -%}
{%- if menu != blank and collection != nil -%}
  {%- assign current_handle = collection.handle -%}
  {%- assign submenu_links = nil -%}

  {%- for level1 in menu.links -%}
	{%- if level1.type == 'collection_link' and level1.object.handle == current_handle -%}
	  {%- assign submenu_links = level1.links -%}
	  {%- break -%}
	{%- endif -%}

	{%- if level1.links.size > 0 -%}
	  {%- for level2 in level1.links -%}
		{%- if level2.type == 'collection_link' and level2.object.handle == current_handle -%}
		  {%- assign submenu_links = level2.links -%}
		  {%- break -%}
		{%- endif -%}

		{%- if level2.links.size > 0 -%}
		  {%- for level3 in level2.links -%}
			{%- if level3.type == 'collection_link' and level3.object.handle == current_handle -%}
			  {%- assign submenu_links = level3.links -%}
			  {%- break -%}
			{%- endif -%}
		  {%- endfor -%}
		{%- endif -%}

		{%- if submenu_links -%}{%- break -%}{%- endif -%}
	  {%- endfor -%}
	{%- endif -%}

	{%- if submenu_links -%}{%- break -%}{%- endif -%}
  {%- endfor -%}

  {%- if submenu_links != blank -%}
  <div class="collection-submenu_wrap page-width{% if section.settings.class != blank %} {{section.settings.class}}{% endif %}">
	<nav class="collection-submenu" role="navigation">
	  <ul class="collection-submenu__list" role="list">
		{%- for l in submenu_links -%}
		  <li class="collection-submenu__item">
			<a
			  href="{{ l.url }}"
			  class="collection-submenu__link{% if l.active %} is-active{% endif %}">
			  {{- l.title -}}
			</a>
		  </li>
		{%- endfor -%}
	  </ul>
	</nav>
  </div>
  {%- endif -%}
{%- endif -%}

{% schema %}
{
  "name": "Collection Submenu",
  "tag": "section",
  "settings": [
	{
	  "type": "link_list",
	  "id": "menu",
	  "label": "Menu"
	},
	{
	  "type": "text",
	  "id": "class",
	  "label": "Class"
	}
  ],
  "presets": [
	{
	  "name": "Collection Submenu"
	}
  ]
}
{% endschema %}

コード解説

1. メニューとコレクションの関連付け

{%- assign menu = section.settings.menu -%}
{%- if menu != blank and collection != nil -%}
  {%- assign current_handle = collection.handle -%}
  {%- assign submenu_links = nil -%}
  ...
{%- endif -%}

• section.settings.menu から指定されたメニューを menu 変数に代入しています。
• collection が存在し、なおかつ menu が空でない場合にのみ処理を実行。
• ここで current_handle に、現在閲覧しているコレクションのハンドルを取得。
• submenu_links は、後でセットするサブメニュー用の変数として用意しています。

2. 3階層の探索ロジック

{%- for level1 in menu.links -%}
  {%- if level1.type == 'collection_link' and level1.object.handle == current_handle -%}
	{%- assign submenu_links = level1.links -%}
	{%- break -%}
  {%- endif -%}

  {%- if level1.links.size > 0 -%}
	{%- for level2 in level1.links -%}
	  {%- if level2.type == 'collection_link' and level2.object.handle == current_handle -%}
		{%- assign submenu_links = level2.links -%}
		{%- break -%}
	  {%- endif -%}

	  {%- if level2.links.size > 0 -%}
		{%- for level3 in level2.links -%}
		  {%- if level3.type == 'collection_link' and level3.object.handle == current_handle -%}
			{%- assign submenu_links = level3.links -%}
			{%- break -%}
		  {%- endif -%}
		{%- endfor -%}
	  {%- endif -%}

	  {%- if submenu_links -%}{%- break -%}{%- endif -%}
	{%- endfor -%}
  {%- endif -%}

  {%- if submenu_links -%}{%- break -%}{%- endif -%}
{%- endfor -%}

• 第1階層（level1） → 第2階層（level2） → 第3階層（level3）の順でループを回し、collection.handle と一致するリンクがあるかチェックしています。
• 一致するリンクが見つかった時点で submenu_links にそのリンクの配下（子要素）を代入し、さらにループを強制終了 (break) させます。
• submenu_links が設定されたら、以降の階層探索は不要なので、その際 break で処理を抜け出すための構造になっています。

3. サブメニューの出力

{%- if submenu_links != blank -%}
  <div class="collection-submenu_wrap page-width{% if section.settings.class != blank %} {{section.settings.class}}{% endif %}">
	<nav class="collection-submenu" role="navigation">
	  <ul class="collection-submenu__list" role="list">
		{%- for l in submenu_links -%}
		  <li class="collection-submenu__item">
			<a
			  href="{{ l.url }}"
			  class="collection-submenu__link{% if l.active %} is-active{% endif %}">
			  {{- l.title -}}
			</a>
		  </li>
		{%- endfor -%}
	  </ul>
	</nav>
  </div>
{%- endif -%}

• submenu_links に値がセットされていた場合のみ、サブメニューを出力します。
• section.settings.class で指定し、class を動的に割り当てられるように設計してあるため、テーマエディタから独自classを追加してスタイリングをカスタマイズ可能です。
• {% if l.active %} is-active{% endif %} のように、アクティブな状態を判定して class を付与することで、現在の階層やページをハイライト表示できます。

4. セクション設定用のJSON（schema）

{% schema %}
{
  "name": "Collection Submenu",
  "tag": "section",
  "settings": [
	{
	  "type": "link_list",
	  "id": "menu",
	  "label": "Menu"
	},
	{
	  "type": "text",
	  "id": "class",
	  "label": "Class"
	}
  ],
  "presets": [
	{
	  "name": "Collection Submenu"
	}
  ]
}
{% endschema %}

• Shopifyのテーマエディタから、セクションとしてこのメニューを追加・設定できるようにするためのセクションスキーマです。
• link_list タイプのメニュー設定と、text タイプのクラス設定の2つを用意し、階層構造の元となるメニューを指定・class名を自由に入力できるようにしています。
• “presets”でセクションの名前を指定しておくことで、テーマカスタマイズ画面で「Collection Submenu」という名前で追加できるようになります。

ポイント

今回のカスタマイズは、Shopifyのメニュー機能とLiquidを活用し、3階層までのコレクションリンクを探索してサブメニューを自動生成する実装事例です。
メニューを一つ作成して設定するだけで、自動的にコレクションのサブメニューが出来上がるので、メンテナンス性にも優れています。
ユーザーには下層階層へ移動しやすいナビゲーションを提供することで、欲しい商品をよりスムーズに見つけられ、結果として購入率や平均注文額の向上に貢献することが期待できます。
また、このカスタマイズではセクション設定）を活用することで、テーマエディタからメニューやを簡単に編集できる点も大きなメリットです。階層構造が増減した際でも、柔軟に対応できるナビゲーション設計となっています。

結果

既存サイトと同様のサブメニュー構造を簡単に持てるようになり、既存ECシステムからのリニューアル後も継続して良い結果が出ています。特に公開初日から商品を50種類以上一気に購入するユーザーも複数存在しており、Shopify上でもサイト内の回遊性を実現することで平均単価の向上に寄与した結果となっています。
Shopifyでは、セクションの活用で柔軟なカスタマイズが可能ですので、ぜひ自社ECサイトの向上に繋がる実装を試してみてください。