Product Images

Upload and manage product media.

Updated March 29, 2026

On this page

Overview

Products support multiple images including a main image and a gallery. Images are served from a CDN for fast loading.

Image Data

typescript

import dash from "@/lib/dash"

const { product } = await dash.products.get("blue-dream")

// Main image
console.log(product.main_image) // "https://cdn.dashfordevs.com/..."

// Gallery images
product.images.forEach(img => {
  console.log(img.image, img.alt_text, img.order)
})

// Variation-specific images
product.attributes[0].options.forEach(opt => {
  console.log(opt.value, opt.image) // Each variation can have its own image
})

typescript

"use client"
import { useState } from "react"

export function ProductGallery({ mainImage, images }) {
  const [selected, setSelected] = useState(mainImage)

  const allImages = [mainImage, ...images.map(i => i.image)].filter(Boolean)

  return (
    <div>
      <img src={selected} alt="Product" className="w-full rounded" />
      <div className="flex gap-2 mt-2">
        {allImages.map((img, i) => (
          <img key={i} src={img} alt={`View ${i + 1}`}
               className={`w-16 h-16 rounded cursor-pointer ${selected === img ? "ring-2 ring-blue-500" : ""}`}
               onClick={() => setSelected(img)} />
        ))}
      </div>
    </div>
  )
}

Product Images

Product Images

Overview

Image Data

Image Gallery Component

Uploading Images

Next Steps