🧩セクションと機能

セクションと機能の概要

学べること

🧱 柔軟でテーマネイティブなセクションの完全な一覧 🎯 Plain Jane と Interactive での使用場所と方法 🔀 イマーシブなレイアウトや従来のレイアウトとどのように組み合わせるか


Plain Jane テーマでは、幅広い再利用可能な セクション を利用でき、これらは積み重ねたり、スタイルを設定したり、順序を変更してダイナミックなページを作成できます。これらはすべてのバージョンで動作します — 例えば Plain Jane Starter, Interactive、および Standard.

💡 セクションは 任意のページ に Shopify テーマエディタから追加できます — ホームページ、カスタムページ、パスワードページ、そして今では Interactive Space レイアウト内にも.


サポートされるセクション

ここでは、標準で利用できるものを簡単に紹介します:

  • ブログフィードセクション サムネイル、タイトル、説明付きで最近のブログ投稿を表示します。

  • コレクション表示セクション コールトゥアクションのテキストやボタンをオプションで付けて特定のコレクションを強調表示します。

  • コレクションリストセクション 複数のコレクションをグリッドで表示し、レイアウトオプションをカスタマイズできます。

  • メール登録(ポップアップ) タイマー付きまたは退出意図のモーダルを表示してメールを収集します。

  • メール登録(埋め込み) サインアップフォームをレイアウトの任意の部分に直接埋め込みます。

  • FAQ セクション 折りたたみ式の質問と回答コンテンツを追加します — 製品情報やサポートに最適です。

  • ヒーローセクション テキストオーバーレイ、コールトゥアクションボタン、レスポンシブコントロールを備えたフル幅のヒーローバナー。

  • イメージセレクターセクション リンクのように機能するカスタムクリック可能ゾーンを持つ画像を展示します(編集記事コンテンツに最適)。

  • イメージストリームセクション ブランドビジュアルやライフスタイルショットのループする横スクロールを作成します。

  • マーキーセクション お知らせやプロモーション用の自動スクロールするテキストストリップを追加します。

  • プリローダーセクション イマーシブなストア向けにブランディングされたローディング画面体験を作成します。

  • プロダクトカルーセルセクション オプションのクイックビューやバッジ付きで、スワイプ可能な行で製品をフィーチャーします。

  • テキストブロックセクション 配置、サイズ、間隔のコントロール付きでスタイライズされたテキストブロックを追加します。

  • ビデオスポットライトセクション 自動再生、コントロール、キャプションテキストをオプションで備えたフル幅ビデオを埋め込みます。

  • ブログ記事セクション フェードインアニメーションやカスタムスタイリングを備えたカードベースのグリッドレイアウトでブログ記事を表示します。

  • ブログ背景セクション ビデオ、画像、カラーオーバーレイ、グラデーション効果でイマーシブなブログページの背景を作成します。

  • ブログタイムゾーンセクション(時計) リアルタイム機能を備えたプロフェッショナルな時計とロゴ表示システムをブログページに追加します。

  • インタラクティブ環境セクション インタラクティブなナビゲーション、背景、ブランド統合を使ってイマーシブでナビゲート可能な空間を作成します。

  • ダイナミック背景セクション(強化版) スライドショー機能、タイプライター効果、高度なアニメーションを備えた高度な背景システム。

  • インデックスセンターレイアウトセクション インタラクティブ効果、ロゴ統合、タイムゾーン表示を備えた洗練された中央配置のホームページナビゲーションを作成します。


これらが使用できる場所

  • 💻 ホームページ — これらの組み合わせを使ってフルのランディング体験を構築します。

  • 📄 カスタムページ — セクションをあなたの ページ テンプレートや Canvas ページの下に積み重ねます。

  • 🔒 パスワードページ — ここに FAQ、メール登録、カウントダウン、またはビデオを追加します。

  • 🎮 インタラクティブスペース — 伝統的なセクションとイマーシブなタッチポイントレイアウトを混在させます。

⚠️ すべてのセクションが製品リンクやコマース機能をサポートしているわけではありません。コンバージョン重視の領域には、コレクション表示やプロダクトカルーセルのような製品フォーカスのセクションを使用してください。

ヘルプが必要ですか?

最終更新