GemPages V7で商品の説明をアコーディオンタブに分割する方法

GemPages V7は現在、V6のように見出しタグに基づいて商品説明をアコーディオン項目に自動分割する機能をサポートしていません。ただし、Shopifyの商品説明に見出しタグを設定し、各アコーディオン項目にカスタムコードスニペットを追加することで、同じ結果を実現できます。このガイドでは、技術チームのサポートを必要とせずに、ご自身で実装できるよう、手順全体を解説しています。

概要

この方法は、HTMLの見出しタグを使って商品説明を複数のセクションに分割することで機能します。アコーディオン要素は、カスタムコードスニペットを使用して、各セクションをその順序に基づいて表示します。任意の見出しレベル（H1～H6）を使用できます。スニペットは以下を使用します。これは例として示されていますが、製品の説明で使用する任意の見出しタグに置き換えることができます。

ステップ1：Shopifyで商品の説明を準備する

1. Shopify 管理画面 → 商品 → 商品を開きます。
2. 「説明」フィールドで、コンテンツを個別のセクションに分けます。
3. 各セクションの前に見出しタグを挿入します。見出しの種類は一貫して同じ（H1～H6）にする必要があります。コードはどの見出しタグを使用しても検出します。

構造例:

材料

材質の詳細は…

サイズガイド

サイズ詳細…

保証

保証情報…

H2、H3、H5などを使いたい場合は、好みの見出しタグを使用して、後でコードを調整します。

ステップ2: GemPagesにアコーディオン要素を追加する

1. GemPages エディター (V7) を開きます。
2. アコーディオン要素をページにドラッグ アンド ドロップします。
3. 必要な数だけアコーディオンアイテムを作成してください。各アイテムには商品説明のセクションが1つずつ表示されます。

ステップ3: カスタムコードスニペットを挿入する

各アコーディオン項目に同じコードスニペットを挿入します。その後、各タブで、表示するセクションに応じて secNum の値のみを変更します。

挿入方法:

1. アコーディオン項目を選択します。

2. 左側のサイドバーで、「コンテンツ」→「カスタム コード」を開きます。

3. コードスニペット全体を貼り付けます。

ステップ4: 見出しタグを調整する

このコードはこれは製品の説明で最もよく使用される見出しであるため、例として挙げます。

製品の説明で異なる見出しを使用している場合は、この部分内に見出しタグを入れます:

{% assign descSec = product.description | split: '' %}

例：

Shopifyの説明でを次のように変更します。

{% assign descSec = product.description | split: '' %}

説明にを次のように変更します。

{% assign descSec = product.description | split: '' %}

ステップ5: 各アコーディオン項目のセクション番号を設定する

変数 secNum は、各アコーディオン項目内に表示されるセクションを制御します。

具体的な例を挙げますと、以下の通りです。

アコーディオンタブ1 → secNum = 1

アコーディオンタブ2 → secNum = 2

アコーディオンタブ3 → secNum = 3

この番号を編集するには、この部分を変更します。

{% secNum = 1 を割り当てる %}

各タブの番号のみを変更します。

ステップ6: 保存してプレビュー

1. GemPages エディターで [保存] をクリックします。
2. 製品ページをプレビューします。
3. 各アコーディオン項目に製品説明の正しいセクションが表示されていることを確認します。