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

Shopifyのテーマ「Dawn/Rise」の商品詳細ページで商品画像一覧を表示する方法

Shopifyのテーマ「Dawn/Rise」の商品詳細ページで商品画像一覧を表示する方法

用途

  • 商品情報管理・編集

実装方法

  • Javascript
  • HTML/CSS
詳細を表示する

Dawn/Riseテーマで商品画像を一覧表示して、クイックアクセスできるようにする設定例です。

◆実装のメリット
・ユーザーの商品理解度アップで購買率向上
(大量の商品画像が存在する場合など、ユーザーが見たい画像に素早くアクセスできるようになります)
・Dawn 10.0.0以降の不具合を解消

◆設定手順
①商品テンプレートの設定
・デスクトップ&モバイルをサムネイル表示に変更
②商品テンプレートにカスタムLiquidセクションを追加
・専用コードを挿入


テーマ「Dawn」の商品詳細ページで商品画像一覧を表示する方法(Dawn 10.0.0以上バージョンの不具合対応&デスクトップ版でも表示)


【(テーマRise/Dawnの場合)設定方法】商品テンプレートの商品情報の設定でデスクトップ・モバイルのレイアウトをサムネイル表示にし、カスタマイズされたLiquidセクションを追加しコードを挿入


挿入するコード①:CSS


挿入するコード②:Javascript&HTML


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

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

サンプルコード

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

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

関連ポスト

すべてのShopify TIPS