> For the complete documentation index, see [llms.txt](https://docs.openspaces.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openspaces.design/english-ja/readme-1/sections-and-features/image-selector-section.md). # イメージセレクターセクション ### **学べること** * 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でコミュニティに参加：** * 📧 **メールでお問い合わせ：** * 💻 **ライブチャット：** 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応 --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.openspaces.design/english-ja/readme-1/sections-and-features/image-selector-section.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.