# Image Selector Section

### **What You’ll Learn**

* How to add and configure the Image Selector section
* How to upload images and link them to products, pages, or collections
* How to customize styles for mobile and desktop
* How to control text size, indicator styling, and layout

***

### 🧩 Section Overview

The Image Selector section allows customers to toggle through a series of clickable images—perfect for showcasing different product looks, color variants, or featured collections.

Each image functions like a visual link with optional text and a clickable URL.

***

### ⚙️ How to Add and Customize the Image Selector

#### 1. Add the Section

* In the **Shopify Theme Editor**, click **Add section**
* Select **Image Selector**
* Drag the section into place in your layout

***

### 📷 Adding Slides (Images)

Each image is added as a **Slide** block.

#### To Add a Slide:

1. Click **Add Slide**
2. Upload an image
3. (Optional) Add:
   * **Link Text**: Appears beneath the image
   * **Link URL**: Paste a product, collection, or any link

> 💡 Tip: Leave **Link Text** blank for a clean, image-only layout.

***

### 🎨 Design and Style Options

Under the **Image Selector** settings, customize:

#### Colors

* **Background Color**: Choose solid or gradient
* **Link Color**: Affects text below each image
* **Indicator Border Color**: Outline color for selected image (seen in thumbnail nav)

#### Typography

* **Link Text Size (Desktop)**: Adjustable in `px`
* **Link Text Size (Mobile)**: Adjustable in `px`
* **Link Text Weight**: Toggle between `Regular` and `Bold`

> 💡 Tip: Use bold and larger text for emphasis if you're highlighting different collections.

***

### 🧩 Section Tree Example

```
Image Selector
├── Slide – Look 1
├── Slide – Look 2
├── Slide – Look 3
├── Slide – Look 4
├── Slide – Look 5
└── Slide – Look 6
```

***

### **Need Help?**

* 💬 **Join our community on Discord:** <https://discord.gg/hcc2GvgZc6>
* 📧 **Email us at:** <support@openspaces.design>
* 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website


---

# Agent Instructions: 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:

```
GET https://docs.openspaces.design/readme-1/sections-and-features/image-selector-section.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.