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

Shopifyのテーマ「Dawn」でサムネイルを表示しない商品詳細モバイルページで画像前後ナビゲーションを画像に重ねてより多くの情報をファーストビューに収める設定例

Shopifyのテーマ「Dawn」でサムネイルを表示しない商品詳細モバイルページで画像前後ナビゲーションを画像に重ねてより多くの情報をファーストビューに収める設定例

用途

  • 商品画像管理

実装方法

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

Shopifyのテーマ「Dawn」のモバイルページで、商品写真のサムネイルを表示しないレイアウトパターンを採用する際は、ページを開いた瞬間により多くの情報が目に入るように画像の上にナビゲーションボタンや表示枚数を重ねて表示するのも良いですね。


Shopifyのテーマ「Dawn」のセクション「折りたたみ可能なコンテンツ」について「最初の行(カラム)」以外に任意の行(カラム)も最初から開いておくようにする設定例


【設定方法】商品テンプレートの商品情報ブロックにカスタムLiquidセクションを追加してコードを挿入


【補足】この機能は「モバイルのレイアウト」が「2列」または「サムネイルを非表示にする」で有効です


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

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

サンプルコード

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

商品テンプレートの商品情報ブロックにカスタムLiquidセクションを追加してコードを挿入

関連ポスト