Image gallery
The gallery lives on the left of the product page (or above the info on mobile). It shows:
- Main product images
- Thumbnails (below or beside, depending on layout)
- Zoom lightbox on click
- Auto-switching to variant-specific images when a color is selected
Add images to a product
Shopify admin → Products → [pick a product]
Scroll to Media
Click Add media
Upload your product photos. Order matters — the first photo is the “cover” image used on collection pages. Drag to reorder.
Attach images to variants (optional)
For each image, click Assign to variant to link it to a specific variant. When shoppers pick that variant, the gallery switches to its images.
Save
Gallery layout
Open the theme editor, on the product page
Click the Media section (the left column with the images)
Find Layout
Options:
- Thumbnails on the left — vertical thumbnail column beside the main image (feels premium)
- Thumbnails below — horizontal thumbnail row under the main image
- Grid — all images in a 2×N grid (feels editorial, no main image)
- Slider — one image at a time with dots (best for mobile-first)
Zoom
Click any image in the gallery to open a full-screen lightbox with pinch/zoom support on mobile.
Same panel, find Enable zoom
Toggle on (default). The main image gets a subtle magnifying glass icon on hover to signal it’s zoomable.
Image sizes
Citera generates multiple sizes from each upload and serves the right one based on the shopper’s screen. You don’t need to upload multiple resolutions — one high-res original is enough.
Compression matters. A 5MB product photo slows the page. Compress to 200-500KB using tinypng.com or Shopify’s built-in compression before upload.