商品情報にスキップ
1 1
公開日:2024.10.27

【Dawn】Shopifyで商品詳細画面の商品説明欄でタブ切り替え型の表示を行う設定例

【Dawn】Shopifyで商品詳細画面の商品説明欄でタブ切り替え型の表示を行う設定例

用途

  • 商品情報管理・編集

実装方法

  • HTML/CSS
詳細を表示する

Shopifyの商品詳細ページで、タブ切り替えの商品説明を掲載したい場合の設定例です。テーマ編集で商品情報セクションの中にタブ切り替えを行うJavascriptとcssを設定した上で、商品情報の「商品説明」内に対応フォーマットに沿ってHTMLタグを設定します。特にテーマの制限はありません。


商品詳細画面の商品説明欄で、タブ切り替え型の表示を行う設定例


【設定方法①】テーマ編集で「sections/main-product.liquid」にコードを追加


【設定方法②】商品情報の商品説欄に必要なタグを含む要素をHTML編集モードで挿入


ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Dawn/Rise 15.2.0

「sections/main-product.liquid」にコードを追加

関連ポスト