画像セレクターセクション

あなたが学ぶこと

  • Image Selectorセクションの追加と設定方法

  • 画像のアップロードと製品、ページ、コレクションへのリンク方法

  • モバイルとデスクトップのスタイルをカスタマイズする方法

  • テキストサイズ、インジケーターのスタイリング、レイアウトを制御する方法

🧩 セクション概要

Image Selectorセクションでは、クリック可能な一連の画像を切り替えて表示できます。異なる製品の見た目、カラーバリエーション、注目コレクションを紹介するのに最適です。

各画像は視覚的なリンクとして機能し、任意のテキストとクリック可能なURLを設定できます。

⚙️ Image Selectorの追加とカスタマイズ方法

1. セクションを追加する

  • 「 Shopify テーマエディタ」で、クリックします セクションを追加

  • を選択し、 Image Selector

  • レイアウト内の所定の位置にセクションをドラッグしてください

📷 スライド（画像）の追加

各画像は以下として追加されます スライド ブロック。

スライドを追加するには：

  1. クリック スライドを追加

  2. 画像をアップロード

  3. （任意）以下を追加：

    • リンクテキスト：画像の下に表示されます

    • リンクURL：製品、コレクション、または任意のリンクを貼り付けてください

💡 ヒント： リンクテキスト 空白のままにすると、画像のみのクリーンなレイアウトになります。

🎨 デザインとスタイルオプション

の下で Image Selector 設定をカスタマイズしてください：

色

  • 背景色：単色またはグラデーションを選択

  • リンクカラー：各画像の下のテキストに影響します

  • インジケーター枠線カラー：選択された画像のアウトライン色（サムネイルナビで表示）

タイポグラフィ

  • リンクテキストサイズ（デスクトップ）：で調整可能 px

  • リンクテキストサイズ（モバイル）：で調整可能 px

  • リンクテキストの太さ：間で切り替え レギュラー と ボールド

💡 ヒント：異なるコレクションを強調する場合は、強調のために太字かつ大きめのテキストを使用してください。

🧩 セクショントリーツリーの例

Image Selector
├── スライド – ルック1
├── スライド – ルック2
├── スライド – ルック3
├── スライド – ルック4
├── スライド – ルック5
└── スライド – ルック6

ヘルプが必要ですか？

  • 💬 Discord のコミュニティに参加してください： https://discord.gg/hcc2GvgZc6

  • 📧 メールでお問い合わせ： [email protected]

  • 💻 ライブチャット： 月〜金、現地時間（EST）10:00〜18:00 に当社ウェブサイトで直接利用可能

前へヒーローセクション次へイメージストリームセクション

最終更新