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: [e-mail]

• 💻 Live chat with us: Available Monday–Friday, 10AM–6PM EST, directly on our website