Image Selector Section

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

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?