Shopifyの商品ページにタブ切り替え型画像スライドショーを設置する方法！商品の特徴を整理して伝える完全ガイド
目次
- はじめに
- 記事の構成
- Shopify でタブ切り替え型の画像スライドショーを表示できる？
- タブ切り替え型の画像スライドショーを表示するメリット・デメリット
- テーマのコード編集とアプリ導入の比較
- おすすめ Shopify アプリ「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」紹介
- アプリのインストール手順
- アプリをテーマに追加（有効化）
- アプリの設定項目を理解する
- すぐ使えるおすすめ設定例
- 関連施策との組み合わせ
- テーマのコード編集で実装する場合のサンプルコード
- 運用のコツ
- よくある質問
- まとめ
- 参考記事
はじめに
Shopify でストア運営をしていて、「商品の特徴をもっと分かりやすく伝えたい」「画像が増えすぎて商品ページが縦に長くなってしまう」と悩んだことはないでしょうか。
商品ページに掲載すべき画像は意外と多く、メイン画像だけでなく、サイズ感を伝える画像、カラーバリエーション、素材のクローズアップ、使用シーンなど、訴求すべき切り口は多岐にわたります。これらを単純に縦並びで並べると、ページが間延びしてしまい、お客様が下までスクロールしてくれない可能性があります。一方、通常の自動再生スライドショーでは、お客様が見たい画像にすぐにたどり着けず、ストレスを感じさせてしまうこともあります。
そこで注目されているのが、タブ切り替え型の画像スライドショーです。「サイズ別」「カラー別」「特徴別」などのタブをクリックするだけで、お客様が見たい画像にすぐ切り替えられるため、商品の特徴を整理しながらコンパクトに伝えることができます。
この記事では、
- Shopify でタブ切り替え型の画像スライドショーを設置する方法
- 設置するメリットとデメリット
- テーマのコード編集とアプリ導入の比較
- おすすめアプリ「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」の使い方
- テーマ編集での実装サンプルコード
を、Shopify 初心者の方にも分かりやすく完全解説します。
この記事は以下の記事を参考にしています。
- Shopifyにタブ切り替え式の画像スライドショーを設置できるアプリ6選！商品の特徴を整理して見せる方法
- Shopifyのタブ切り替え型画像スライドショーアプリ9選！商品の特徴をわかりやすく伝える厳選アプリを徹底比較
記事の構成
この記事は以下の流れで解説します。
- Shopify でタブ切り替え型の画像スライドショーを設置できるか
- 導入のメリットとデメリット
- テーマのコード編集とアプリ導入の比較
- おすすめアプリ「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」の紹介
- アプリのインストール手順とテーマへの追加方法
- アプリの設定項目の解説と運用例
- 関連施策との組み合わせ
- テーマのコード編集で実装する場合のサンプルコード
- 運用のコツとよくある質問
Shopify でタブ切り替え型の画像スライドショーを表示できる？
結論から言えば、Shopify のデフォルト機能だけではタブ切り替え型の画像スライドショーを設置することはできません。Shopify には標準で「画像スライダー」セクションが用意されているテーマもありますが、これらは自動再生型または手動切替型のスライダーであり、タブで切り替える機能は搭載されていません。
タブ切り替え型の画像スライドショーを実現するには、次の 2 つの方法があります。
- テーマのコード編集で実装する方法
- Shopify アプリを導入して実装する方法
どちらの方法にもメリット・デメリットがあるため、後ほど比較を行いますが、ノーコードで素早く実装したい場合は アプリの導入が最もおすすめです。
タブ切り替え型の画像スライドショーを表示するメリット・デメリット
メリット
商品の特徴を整理して伝えられる
タブで情報をカテゴリー分けできるため、商品ページがスッキリと整理された印象になります。お客様にとっても情報が探しやすくなり、商品の魅力をストレスなく理解してもらえます。
- 「サイズ別」「カラー別」「特徴別」のように切り口を整理できる
- ページの情報構造が明確になり、ユーザビリティが向上する
- ブランドとしての信頼感も高まる
ページの縦の長さを抑えられる
通常なら 5 枚の画像を縦に並べる必要がある場面でも、タブ切り替えなら 1 枚分のスペースで全画像を表示できます。
- スマホでのスクロール量が大きく減る
- ファーストビューに重要な情報を集約できる
- 商品ページのデザインに余裕が生まれる
ユーザーが能動的に情報を選べる
自動スライドの場合は受動的に画像を見ることになりますが、タブ切り替え式ならお客様が能動的に「見たい情報」を選べます。
- 商品への関心度が高まる
- 滞在時間の延長につながる
- 結果として購入意欲の向上にもつながる
PC とスマホで最適な見せ方ができる
アプリによっては、PC とスマホで別々の画像を設定できるものもあります。
- PC では横長のワイドな画像
- スマホでは縦長で迫力のある画像
- デバイスごとに最適な構図を選べる
商品の理解度が高まり返品率を下げる
サイズや使い方への不安が事前に解消されることで、お客様が納得した上で購入できるようになります。
- 返品率の低下
- カスタマーサポートへの問い合わせ減少
- 顧客満足度の向上
デメリット
タブ数の上限がある
多くのアプリではタブ数 5 枚程度が上限です。それ以上の枚数を見せたい場合は、複数のスライダーを並べたり、別の見せ方を検討する必要があります。
タブのラベル設計に工夫が必要
タブのラベルは短く、かつ内容が一目で伝わるテキストにする必要があります。長すぎるラベルは横並びで表示しきれず、デザインが崩れる原因になります。
タブを認識してもらう必要がある
タブの存在に気づいてもらえないと、最初の画像しか見られずに離脱されることがあります。タブの色やデザインを目立たせる工夫が必要です。
テーマのコード編集とアプリ導入の比較
テーマのコード編集で実装する方法
メリット
- 月額費用がかからない
- 自社のテーマに完全にフィットしたデザインに仕上げられる
- アプリに依存しないため、アプリ提供終了などのリスクがない
デメリット
- Liquid・JavaScript・CSS の実装スキルが必要
- レスポンシブ対応や自動スライド、アニメーションなどの実装が複雑
- テーマアップデート時にコードを移植する手間がかかる
- 実装後のメンテナンスや改修も自分で行う必要がある
アプリを導入する方法
メリット
- ノーコードで設置できるため、初心者でもすぐに使える
- 豊富なカスタマイズ項目が画面操作で完結する
- アップデートや不具合修正がアプリ側で対応される
- 1 週間〜2 週間の無料体験期間で試してから判断できる
デメリット
- 月額費用がかかる
- アプリ提供終了などのリスクがある
- カスタマイズ範囲がアプリの仕様に制限される
結論：最初はアプリで小さく試すのがおすすめ
Shopify は機能拡張のための アプリエコシステム が非常に充実しているプラットフォームです。コード実装の工数や品質を考えると、まずはアプリで実装して、効果が出たら本格導入するというアプローチが最もコストパフォーマンスに優れます。
特にタブ切り替え型の画像スライドショーは、自前で実装するとレスポンシブ対応・アニメーション・自動再生・ドラッグ操作・アクセシビリティ対応などやることが多く、しっかり作り込もうとすると 1 週間以上の工数がかかることもあります。アプリなら数分で同等以上のクオリティの実装が完了します。
おすすめ Shopify アプリ「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」紹介
ここからは、Shopify でタブ切り替え型の画像スライドショーを設置できるおすすめアプリ 「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」 をご紹介します。
アプリの基本情報
- アプリ名: シンプルタブ型画像スライドショー｜商品説明タブ切り替え
- 価格: Basic Plan $4.99/月（1 週間の無料体験期間あり、年払いで実質 2 ヶ月分無料）
- 対応言語: 日本語・英語
- 主な機能: タブ切り替え式の画像スライドショー、最大 5 枚の画像、PC/スマホ別画像、自動スライド、アニメーション、マウスドラッグ、矢印 7 種類、アスペクト比 6 種類、カスタム CSS 対応
できること
商品ページやホームページに、タブで画像を切り替えられるスライダーを設置できるアプリです。最大 5 枚までの画像をタブのラベルごとに整理して表示できるので、お客様が見たい情報をワンクリックで切り替えられて、商品の魅力をスッキリと分かりやすく伝えられます。
タブ形式で気になったスライドを素早く表示
通常のスライダーと違い、タブで直接表示したい画像を選べるのが特徴です。お客様が「サイズ別」「カラー別」「特徴別」など気になる情報をワンクリックで素早く切り替えられるので、商品の魅力をストレスなく伝えられます。
PC 用とスマホ用に別々の画像を設定可能
PC とスマホでは画面サイズや見え方が大きく違うため、最適な画像も変わってきます。本アプリでは PC 用画像・スマホ用画像をそれぞれ設定できるので、横長の PC ではワイドな画像を、縦長のスマホでは縦構図の画像を表示できます。
ノーコードで見た目をカスタマイズ
アスペクト比、タブの色や文字サイズ、矢印のスタイル、自動スライドのスピードなど、見た目に関わる設定を画面上でつまみを動かしたり色を選んだりするだけで自由に調整できます。
1 クリックでテーマに追加
アプリの管理画面から「テーマに追加」ボタンを押すだけで、お使いのテーマにスライダーをすぐに設置できます。難しい設定や手作業のコード追加は不要です。
アプリのインストール手順
ここからは、アプリのインストール手順を画像付きで解説します。とても簡単なので、初めての方でも迷わず進められます。
1. 設定をクリック
Shopify 管理画面の左下にある「設定」をクリックします。
2. アプリと販売チャネルへ移動
設定メニューから「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。
3. アプリを検索
検索窓に「シンプルタブ型画像スライドショー」と入力し、表示されたアプリをクリックします。
4. インストール
アプリ詳細画面で「インストール」をクリックします。
5. 権限の確認
権限の確認画面が表示されるので内容を確認し、「インストール」をクリックしてインストールを完了します。
アプリをテーマに追加（有効化）
アプリをインストールしたら、画像タブスライダーをテーマに表示するために「アプリブロック」を追加します。「自動でテーマに追加」と「手動でテーマに追加」の 2 つの方法があります。
自動でテーマに追加（1 クリック追加）
ホームページにスライダーを設置したい場合は、こちらの方法がおすすめです。
-
アプリの管理画面を開きます。
-
「テーマを選択」で追加したいテーマを選び、「テーマに追加」ボタンをクリックします。
-
テーマエディタが開いたら、表示位置や設定を確認して右上の「保存する」をクリックします。
手動でテーマに追加（任意ページに設置したい場合）
商品ページやコレクションページなど、好きなページの好きな位置にスライダーを設置したい場合は、こちらの方法を使います。
-
Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
-
テーマエディタ上部のプルダウンから、追加したいページに移動します。
-
「セクションを追加」または「ブロックを追加」をクリックします。
-
「アプリ」タブを選び、「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」のアプリブロックを選んで追加します。
-
表示を確認し、問題なければ右上の「保存する」をクリックします。
アプリの設定項目を理解する
テーマエディタの右側にある設定パネルから、スライダーの見た目や挙動を細かくカスタマイズできます。設定はグループごとにまとまっているので、目的に合わせて順番に調整してみてください。
コンテンツ設定
スライダーに表示する画像やタブのラベル、リンクを設定するセクションです。最大 5 枚の画像（タブ）を設定できます。
- タブ 1〜5 のラベル: 各タブに表示する文字。「サイズ」「カラー」「特徴」「使い方」など短いラベルが効果的です。
- 画像 1〜5: タブごとに表示するメイン画像（PC 用）を設定します。
- 画像 1〜5（スマホ）: スマホで表示する専用の画像。設定しない場合は PC 用画像がスマホでも表示されます。
- リンク 1〜5: 各画像をクリックしたときに移動する URL を設定可能。
- リンクを新しいタブで開く: チェックを入れると新しいタブで開きます。
タブバー設定
タブバーの位置や色、文字の見た目などをカスタマイズできるセクションです。
- タブバーの配置: 「上」「下」「なし」から選べます。
- タブの背景色 / 文字色 / 下線色: ブランドカラーに合わせて自由に設定。
- タブの下線太さ: 0〜10px で調整可能。
- タブの不透明度: 0〜100% で調整。100% 未満にするとタブが画像に被さって表示されます。
- タブの文字サイズ・文字太さ: 文字の大きさ・太さを自由に調整。
- タブの上下余白・左右余白: 0〜60px の範囲で調整可能。
スライド設定
画像の表示比率や矢印のスタイルなど、スライド本体の見た目を調整できるセクションです。
- アスペクト比: 「最初の画像に合わせる」「16:9」「4:3」「1:1」「4:5」「9:16」から選択。
- 画像の収め方: 「画像で埋める」「画像を収める」から選択。
- マウスのドラッグ操作: チェックで PC でもドラッグ操作できるようになります。
- 矢印のスタイル: 7 種類から選択可能。「なし」も選べます。
- 矢印の色 / 大きさ: 自由にカスタマイズ。
- スマホ時の矢印表示: チェックでスマホでも矢印を表示。
アニメーション設定
スライドの自動再生や切り替え時の動きを設定できるセクションです。
- 自動スライドのスピード: 0〜15 秒で設定。0 秒に設定すると自動スライドが OFF。
- アニメーションのスピード: 0.1〜3 秒で切り替え時のアニメ速度を調整。
- アニメーションの種類: 「なし」「スライド」「フェード」から選択。
余白設定
スライダーの上下の余白を、PC とスマホで個別に設定できるセクションです。
- 上部余白 / 下部余白（PC）: PC 表示時の余白を 0〜100px で設定。
- 上部余白 / 下部余白（スマホ）: スマホ表示時の余白を 0〜100px で設定。
追加設定（カスタム CSS）
標準の設定では実現できない細かなデザイン調整をしたい場合は、こちらに直接 CSS を記述できます。
すぐ使えるおすすめ設定例
アパレル：サイズ別の見せ方
- タブラベル: 「S サイズ」「M サイズ」「L サイズ」
- 画像: 各サイズの着用画像（モデル身長つき）
- アスペクト比: 4:5（縦長で着用感が伝わりやすい）
- アニメーション: フェード（落ち着いた印象）
- タブの背景色: 白、文字色: ダークグレー、下線色: ブランドカラー
コスメ：使用前後とテクスチャー
- タブラベル: 「使用前」「使用後」「テクスチャー」「成分」
- 画像: ビフォーアフター画像 + 質感のクローズアップ
- アスペクト比: 1:1（SNS 風で映える）
- アニメーション: スライド
- マウスドラッグ: ON（直感的に切り替えられる）
家電：使用シーン別
- タブラベル: 「リビング」「キッチン」「寝室」「アウトドア」
- 画像: 各シーンでの使用イメージ
- アスペクト比: 16:9（横長で空間が伝わる）
- アニメーション: スライド + 自動スライド 5 秒
- PC とスマホで別画像: PC は横長、スマホは縦長で使用シーンを最適化
文言のテンプレ例
タブのラベルは短く、ひと目で内容が分かるテキストが効果的です。
- 「カラー｜ブラック」のように記号で区切ると、視認性が向上
- 絵文字（🎨「カラー」、📏「サイズ」など）でアイコン的に使う
- 「3 つの特徴」のように数字を入れて訴求力を上げる
関連施策との組み合わせ
タブ切り替え型の画像スライドショーは単独でも効果がありますが、他の施策と組み合わせることでさらに大きな効果を得られます。Shopify ストアでよく行われている関連施策をご紹介します。
商品レビューアプリとの組み合わせ
Judge.me、Loox、YotPo などの商品レビューアプリと組み合わせれば、商品の特徴をタブで整理して見せた直後に、お客様の声で信頼性を裏付けることができます。「商品の特徴 → レビュー」という導線が完成し、購入意欲を強く後押しできます。
サイズチャート・FAQ アプリとの組み合わせ
タブ切り替え型のスライドショーで「サイズ感」を視覚的に伝えた上で、別途サイズチャートアプリで詳細な数値を提示することで、サイズに関する不安をほぼ完全に解消できます。FAQ アプリで「よくある質問」を整理することも、返品率の低下に大きく貢献します。
スライドショーアプリとの併用
タブ切り替え型は商品ページの「特徴セクション」に最適ですが、ホームページのファーストビューには 通常の自動再生型スライドショー の方が向いています。両方を併用することで、ページごとに最適な見せ方が実現できます。
A/B テストツールとの組み合わせ
タブの順序やラベル、画像の構成を A/B テストで検証すれば、最もコンバージョン率の高い組み合わせを見つけられます。データに基づいた改善を継続することで、スライドショー単独では得られないレベルの成果が生まれます。
メールマーケティングとの組み合わせ
商品ページのタブで紹介した「商品の特徴」を、Klaviyo などのメールツールで配信するメールマガジンにそのまま転用すれば、メールから商品ページへの導線がスムーズになります。リターゲティング広告にも同じ訴求軸を使えば、ブランドメッセージの一貫性が高まります。
テーマのコード編集で実装する場合のサンプルコード
「アプリは使わずに自前で実装したい」という方向けに、シンプルなタブ切り替え型画像スライドショーのサンプルコードを紹介します。
実装の流れ
sections/tab-image-slider.liquidを作成して Liquid とスキーマを定義assets/tab-image-slider.cssでスタイルを定義assets/tab-image-slider.jsでタブ切り替えロジックを実装- テーマレイアウトファイルから CSS と JS を読み込む
- テーマエディタからセクションを配置して画像とラベルを設定
HTML を追加（Liquid）
<section class="tab-image-slider" data-tab-image-slider>
<div class="tab-image-slider__tabs" role="tablist">
{% for block in section.blocks %}
<button
type="button"
class="tab-image-slider__tab {% if forloop.first %}is-active{% endif %}"
role="tab"
aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"
aria-controls="tab-panel-{{ forloop.index }}"
data-tab-target="{{ forloop.index }}"
>
{{ block.settings.label }}
</button>
{% endfor %}
</div>
<div class="tab-image-slider__panels">
{% for block in section.blocks %}
<div
id="tab-panel-{{ forloop.index }}"
class="tab-image-slider__panel {% if forloop.first %}is-active{% endif %}"
role="tabpanel"
data-tab-panel="{{ forloop.index }}"
>
{% if block.settings.image_pc != blank %}
<img
class="tab-image-slider__image tab-image-slider__image--pc"
src="{{ block.settings.image_pc | image_url: width: 1600 }}"
alt="{{ block.settings.label | escape }}"
loading="lazy"
width="1600"
height="900"
>
{% endif %}
{% if block.settings.image_sp != blank %}
<img
class="tab-image-slider__image tab-image-slider__image--sp"
src="{{ block.settings.image_sp | image_url: width: 800 }}"
alt="{{ block.settings.label | escape }}"
loading="lazy"
width="800"
height="1200"
>
{% endif %}
</div>
{% endfor %}
</div>
</section>
{% schema %}
{
"name": "Tab Image Slider",
"max_blocks": 5,
"settings": [
{
"type": "select",
"id": "aspect_ratio",
"label": "Aspect Ratio",
"options": [
{ "value": "16-9", "label": "16:9" },
{ "value": "4-3", "label": "4:3" },
{ "value": "1-1", "label": "1:1" },
{ "value": "4-5", "label": "4:5" },
{ "value": "9-16", "label": "9:16" }
],
"default": "16-9"
}
],
"blocks": [
{
"type": "tab",
"name": "Tab",
"settings": [
{ "type": "text", "id": "label", "label": "Tab Label", "default": "Tab" },
{ "type": "image_picker", "id": "image_pc", "label": "Image (PC)" },
{ "type": "image_picker", "id": "image_sp", "label": "Image (Mobile)" }
]
}
],
"presets": [{ "name": "Tab Image Slider" }]
}
{% endschema %}
CSS を追加
.tab-image-slider {
max-width: 1200px;
margin: 40px auto;
padding: 0 16px;
}
.tab-image-slider__tabs {
display: flex;
gap: 8px;
border-bottom: 1px solid #e5e5e5;
margin-bottom: 16px;
}
.tab-image-slider__tab {
flex: 1;
padding: 12px 16px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
font-size: 14px;
font-weight: 600;
cursor: pointer;
color: #666;
transition: border-color 0.2s ease, color 0.2s ease;
}
.tab-image-slider__tab.is-active {
border-bottom-color: #1f1f1f;
color: #1f1f1f;
}
.tab-image-slider__panels {
position: relative;
}
.tab-image-slider__panel {
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.tab-image-slider__panel.is-active {
display: block;
opacity: 1;
}
.tab-image-slider__image {
width: 100%;
height: auto;
display: block;
}
.tab-image-slider__image--sp {
display: none;
}
@media (max-width: 768px) {
.tab-image-slider__image--pc {
display: none;
}
.tab-image-slider__image--sp {
display: block;
}
}
JavaScript を追加
document.querySelectorAll('[data-tab-image-slider]').forEach((slider) => {
const tabs = slider.querySelectorAll('[data-tab-target]');
const panels = slider.querySelectorAll('[data-tab-panel]');
tabs.forEach((tab) => {
tab.addEventListener('click', () => {
const target = tab.dataset.tabTarget;
// 既存のアクティブを解除
tabs.forEach((t) => {
t.classList.remove('is-active');
t.setAttribute('aria-selected', 'false');
});
panels.forEach((p) => p.classList.remove('is-active'));
// 対象をアクティブに
tab.classList.add('is-active');
tab.setAttribute('aria-selected', 'true');
slider
.querySelector(`[data-tab-panel="${target}"]`)
.classList.add('is-active');
});
});
// キーボード操作（左右矢印キーでタブ切り替え）
tabs.forEach((tab, index) => {
tab.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') {
const next = tabs[(index + 1) % tabs.length];
next.focus();
next.click();
}
if (e.key === 'ArrowLeft') {
const prev = tabs[(index - 1 + tabs.length) % tabs.length];
prev.focus();
prev.click();
}
});
});
});
コード実装の注意点
- アクセシビリティ: タブには
role="tab"、パネルにはrole="tabpanel"を付け、aria-selectedやaria-controlsを適切に設定する - レスポンシブ対応: PC とスマホで画像を出し分ける場合、CSS と Liquid の両方を調整する必要がある
- パフォーマンス: 画像は
loading="lazy"を付けて遅延読み込みする - テーマアップデート: テーマを更新するとカスタムコードが上書きされるため、コピーを保管しておく
- 自動スライド・アニメーション: 上記サンプルには含まれていないため、必要に応じて追加実装する
実装の量がかなり多いことが分かるかと思います。これらをすべて自前で作るのは大きな工数なので、最初は アプリで小さく試すことを強くおすすめします。
運用のコツ
タブ切り替え型の画像スライドショーを最大限に活かすための運用のコツをご紹介します。
- タブのラベルは 4 〜 6 文字程度に: 長すぎると改行されたり崩れる原因になります
- 最初のタブには「最も訴求したい情報」を配置: 初期表示で見られる確率が高いため
- タブの色とコンバージョンボタンの色は変える: タブが押されすぎてカートに進む導線を阻害しないように
- 画像のクオリティを揃える: タブごとに画質や色味がバラバラだと、安っぽく見えてしまう
- データを取って改善を続ける: タブごとのクリック率やコンバージョン率を計測し、ラベルや順序を最適化
よくある質問
Q1. タブはいくつまで設定できますか？
A. アプリにもよりますが、本記事で紹介した「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」は最大 5 枚まで設定できます。
Q2. PC とスマホで別の画像を表示できますか？
A. はい、本アプリでは PC 用画像とスマホ用画像をそれぞれ独立して設定できます。スマホ用画像を設定しない場合は PC 用画像が自動でスマホにも表示されます。
Q3. タブを表示せずに、自動スライドだけにすることはできますか？
A. はい、タブバーの配置で「なし」を選ぶと、タブを非表示にして矢印・自動スライドだけのスライダーにできます。
Q4. アニメーションを無効にできますか？
A. はい、アニメーションの種類で「なし」を選択すると、瞬時に切り替わるシンプルな表示にできます。
Q5. 既存テーマを変更すると設定はリセットされますか？
A. テーマブロックの設定はテーマごとに保存されるため、テーマを切り替えると新しいテーマで再度設定する必要があります。元のテーマに戻せば設定は復元されます。
Q6. アプリの解約はどうやってやりますか？
A. Shopify 管理画面の「アプリ」一覧から該当アプリの右側にある「アンインストール」をクリックするだけで解約できます。サブスクリプション料金もそこで停止されます。
まとめ
今回は Shopify の商品ページに タブ切り替え 型の画像 スライドショー を設置して、商品の特徴 を整理して伝える方法を完全解説しました。
要点をまとめると以下のとおりです。
- Shopify のデフォルト機能ではタブ切り替え型の画像スライドショーは実現できない
- アプリを導入するか、テーマのコード編集で実装する必要がある
- ノーコードで素早く実装するなら アプリ導入が最もおすすめ
- 「シンプルタブ型画像スライドショー｜商品説明タブ切り替え」は最大 5 枚の画像を PC/スマホ別で設定可能、ノーコードで導入できる
- 月額 $4.99 で 1 週間の無料体験あり、年払いなら実質 2 ヶ月分無料
- 商品レビュー、サイズチャート、メールマーケティングなどの関連施策と組み合わせるとさらに効果的
商品の特徴を整理してお客様に分かりやすく伝えることで、コンバージョン率の向上、返品率の低下、ブランドの信頼感アップなど、多くのメリットを得ることができます。まずは無料体験から、お試しください。
シンプルタブ型画像スライドショー｜商品説明タブ切り替えのインストールはこちら
詳細なご利用ガイドはこちらからご確認ください。
.png?w=400){kind=icon}
.png?w=400){kind=icon}
