Shopify商品ページのタブの表示方法【Prestigeテーマ利用】

Shopify Prestige タブ表示方法

「ShopifyのPrestigeテーマの商品ページで画像下のタブ・アコーディオンの表示方法が分からない」

この記事では上記の悩みを解決します。

画像下のタブ・アコーディオンの表示というのは以下の部分。

Shopify Prestige タブ表示方法

では早速表示方法を解説していきます。

Prestigeテーマの商品ページで画像下のタブ・アコーディオンの表示方法

以下順を追って解説していきますね。

表示内容をページ機能で作成する

Prestigeテーマのタブ(アコーディオン)に記載する内容はページ機能を使用して作成します。

管理画面左側からオンラインストア→ページとアクセスし、「ページを追加」をクリックします。

Shopify Prestige タブ表示方法

ページにはタイトルとコンテンツを追加します。

入力後、商品の編集画面の下にある検索結果のプレビュー欄までスクロールし、「ウェブサイトのSEOを編集する」をクリックします。

Shopify Prestige タブ表示方法

URLとハンドルで適切な英単語にハンドルを書き換え、コピーしておきます。

終わりましたら右下の「保存」をクリックして保存しましょう。

この後の設定方法では、全商品で共通の内容を表示させるか、もしくは1ページずつ違う内容を表示させるかで設定方法が変わってきます。

全商品で共通の内容を表示させる場合

全商品で共通の内容を表示させる場合は、テーマのカスタマイズ機能で設定ができます!

管理画面左側からオンラインストア→テーマ→カスタイズをクリックし、カスタマイズ画面を表示させます。

「ページを選択」から商品ページを選んでクリックしましょう。

Shopify Prestige サムネイル表示

商品ページで「Product page」をクリックし、TABS欄までスクロールします。

First pageの「変更する」をクリックして、先ほど作成したページを選択します。

Shopify Prestige タブ表示方法

選択後、右上の「保存する」を忘れずにクリックして保存しましょう。

この全商品で共通の内容を表示させるのは2つまで設定できるようです。

2つ目がある場合はSecond pageの方に設定しましょう。

1ページずつ違う内容を表示させる場合

1ページずつ違う内容を表示させる場合は、各商品編集ページのタグ欄から設定します。

商品管理からタブ(アコーディオン)を表示させたい商品の編集画面を表示させます。

右側の「タグ」欄に、半角でアンダーバー2つとtab1:と入力した後、先ほどコピーしたページのハンドルを貼り付けます。

「__tab1:handlename」という感じですね。

Shopify Prestige タブ表示方法

もちろん2つ目のタブを追加する場合は「__tab2:handlename」と数字のところを2にします。

1ページずつ違う内容を表示させる場合については、何個でもタブを追加できるようです。

以上、Shopifyの画像下タブの表示方法でした!

参考になれば幸いです。

参考記事:
https://support.maestrooo.com/article/83-product-adding-different-tabs-per-product

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

3 × 2 =