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

学べること

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

  • 画像のアップロードとそれらを商品、ページ、またはコレクションにリンクする方法

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

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

🧩 セクション概要

Image Selectorセクションでは、顧客が一連のクリック可能な画像を切り替えられるようにできます。異なる商品ルック、カラーバリエーション、注目のコレクションを紹介するのに最適です。

各画像はオプションのテキストとクリック可能なURLを持つ視覚的なリンクとして機能します。

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

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

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

  • を選択します Image Selector

  • セクションをレイアウト内の所定の位置にドラッグします

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

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

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

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

  2. 画像をアップロードする

  3. （オプション）次を追加：

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

    • リンクURL：商品、コレクション、または任意のリンクを貼り付けます

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

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

の下で、 Image Selector 次をカスタマイズします：

色

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

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

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

タイポグラフィ

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

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

  • リンクテキストの太さ：次の間で切り替えます 通常 および 太字

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

🧩 セクションツリーの例

ヘルプが必要ですか？

  • 💬 Discordでコミュニティに参加： https://discord.gg/hcc2GvgZc6

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

  • 💻 ライブチャット： 月曜〜金曜、午前10時〜午後6時（EST）に当社ウェブサイトで直接利用可能

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

最終更新