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

Shopifyのテーマ「Dawn/Rise」商品詳細のデスクトップ画面で「サムネイル画像の表示列数」を4列以外にも任意に指定できるようにする設定例

Shopifyのテーマ「Dawn/Rise」商品詳細のデスクトップ画面で「サムネイル画像の表示列数」を4列以外にも任意に指定できるようにする設定例

用途

  • 商品情報管理・編集

実装方法

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

デスクトップ画面で表示されるサムネイル画像の列数を、4列以外にも任意の数に変更できる設定方法です。
デフォルトでは4列で固定ですが、1列当たりなるべく多く(またはその逆に少なく)表示したい場合がありますが、取扱商品に応じて変更できるようになります。

◆実装のメリット
・画面サイズに合わせた最適な表示が可能
・ブランドイメージに合わせたデザイン調整が容易に

◆具体的な手順
設定方法①
「sections/main-product.liquid」にschemaを追加。
「locales/ja.schema.json」にラベルを追加。

設定方法②
「sections/main-product.liquid」にカスタムコードを追加

運用方法
デスクトップのレイアウトが「サムネイル」または「サムネイルカルーセル」のとき、設定した列数に応じてサムネイルの表示を調整可能。


テーマ「Dawn/Rise」商品詳細のデスクトップ画面で「サムネイル画像の表示列数」を4列以外にも任意に指定できるようにする設定例


【(テーマRise/Dawnの場合)設定方法①】「sections/main-product.liquid」にschemaを、「ja.schema.json」にラベルを追加


【(テーマRise/Dawnの場合)設定方法②】「sections/main-product.liquid」にコードを追加


【(テーマRise/Dawnの場合)運用方法】デスクトップのレイアウトが「サムネイル」または「サムネイルカルーセル」のときそれぞれサムネイルのカラム数を指定


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

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

サンプルコード

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

「sections/main-product.liquid」にschemaを追加

「ja.schema.json」にラベルを追加

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

すべてのShopify TIPS