4. 商品ページの作成とカスタマイズ
Plain Jane および Interactive 向け
📓 注意: ここには 新しい商品セクションショーケース のレイアウトがあり、このビデオではカバーされていません。設定手順と詳細については、次を参照してください: 商品セクションショーケース
このビデオで学べること
Plain Jane v3 と Interactive v2 の商品ページレイアウトをカスタマイズする方法
商品セクション内のすべてのブロックタイプとスタイリングオプション
Scroll Layout（アーカイブ版）商品セクションの使い方
ギャラリーサイズ、ボタンスタイル、アコーディオンなどの調整箇所
📓 注意: この
Scroll Layout（以前はArchived Layoutと呼ばれていました）」は、デフォルトの商品セクションの古い代替版です。現在も使用可能ですが、ブロックベースのカスタマイズはできません。
🛠️ テーマエディターでの商品ページへのアクセス方法
に移動します オンラインストア > テーマ > カスタマイズ.
画面上部中央のドロップダウンメニューから次を選択します
製品 > デフォルト商品.別の商品をプレビューするには、 変更 プレビューバーの「変更」をクリックして別の商品を選択します。
🧱 コア商品セクションブロック
商品ページは 商品セクション と個別の ブロック で構成されています。各ブロックは並べ替え、削除、またはカスタマイズできます。
一般的なブロック:
セールラベル：カスタムカラー、パディング、間隔
ヘッダー：商品タイトルの表示を制御
SKU：オプション。利用可能な場合にSKUを表示
価格：通貨記号の有無で表示を切替
説明：語数制限と「続きを読む」リンクをサポート
ギャラリー：親の商品セクション設定で制御
ボタン：カートに追加やバリアント選択
アコーディオン：サイズチャート、返品ポリシー、FAQ等に使用
💡 ヒント: ブロックを追加するには、
商品セクション、次にブロックを追加.
🎛️ 商品セクションレイアウト設定
最上位の 商品セクション をクリックして以下のレイアウトオプションにアクセスします:
画像位置:
左または右フェードアニメーション：商品が表示される際のフェードの制御
ギャラリー列数：1から6まで（ギャラリーが左にある場合のみ利用可能）
画像サイズ設定（デスクトップ＆モバイル）：スライダーで調整します
⚠️ 一部の設定（列数など）はギャラリーが左にある場合にのみ利用できます。
🧩 追加のブロック設定
セールラベル
ラベルの背景色と文字色を変更
バッジ周りの間隔を調整
価格表示
通貨記号の表示切替
ラグジュアリー／ミニマルスタイルのフォントサイズ調整
説明ブロック
色、マージン、語数制限を設定
「続きを読む」展開リンクを有効にする
ボタンとバリアント
次の商品ボタンを有効／無効にする
コーナー半径、マージン、間隔をカスタマイズ
アコーディオン
複数追加可能：例、
サイズチャート,返品／交換タイトルとマージンスペースをカスタマイズ
🗂️ Scroll Layout 商品セクション（アーカイブ）
Scroll Layout は、全ての画像を縦に表示するフルサイズの縦スクロールギャラリーを表示する商品セクションのアーカイブ版です。
使い方:
をクリック セクションを追加 >
商品セクション（スクロール）重複を避けるために現在の商品のセクションを非表示にする
右側の設定パネルでカスタマイズする（このバージョンはブロックを使用しません）
主な違い:
すべての画像が積み重なった縦スクロールギャラリー
モバイルや長尺の製品ストーリーテリングに最適
ブロック対応なし — すべての設定はセクションパネルで構成
カスタマイズ機能が少ない（例：角丸設定なし）
💡 ヒント: 以前のテーマバージョンの古いスクロール体験が好みの場合はこれを使用してください。
➕ 商品ページに追加セクションを追加する
商品ページには他のShopifyテーマセクションを他のページと同様に追加できます：
イメージストリームメール登録スライドショーコレクションリスト
これらを並べ替え、ブランドスタイルに合わせてカスタマイズしてください。
ヘルプが必要ですか？
💬 技術サポートについてはDiscordにご参加ください： https://discord.gg/hcc2GvgZc6
📧 メールでお問い合わせ： [email protected]
💻 ライブチャット： 月曜〜金曜、午前10時〜午後6時（EST）に当社ウェブサイトで直接利用可能
最終更新