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

Shopifyのテーマ「Rise/Dawn」の商品詳細ページで商品説明欄の高さが一定以上の場合に自動で開閉処理を追加しておく設定例

Shopifyのテーマ「Rise/Dawn」の商品詳細ページで商品説明欄の高さが一定以上の場合に自動で開閉処理を追加しておく設定例

用途

  • 商品情報管理・編集

実装方法

  • HTML/CSS
詳細を表示する

商品説明が長文な商品の場合、その掲載位置によっては購入ボタンがかなり下の方に押し出されてしまい、カート追加しづらい状況が発生します。そこで、テーマ「Rise/Dawn」で説明文が一定の高さ以上になった場合に自動開閉機能を実装する方法です。

◆実装のメリット
・ページの見やすさが向上し、ユーザー体験が改善されます
・必要な情報に素早くアクセスできるようになります
・モバイル表示時の使いやすさが格段に向上します

◆具体的な手順
・商品詳細ページのテンプレートで商品情報セクションの「カスタムLiquid」ブロックを追加
・開閉機能用のコードを挿入して設定を完了

この設定により、一定量以上の商品説明文がある場合、自動で「続きを読む」ボタンが表示され、ユーザーが必要に応じて内容を確認できるようになります。


テーマ「Rise/Dawn」の商品詳細ページで商品説明欄の高さが一定以上の場合に自動で開閉処理を追加しておく設定例


【設定方法】コレクションテンプレートにカスタマイズされたLiquidセクションを設定しコードを挿入


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

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

サンプルコード

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

コレクションテンプレートにカスタマイズされたLiquidセクションを設定しコードを挿入

関連ポスト