Product Gallery

What it does

The product gallery shows your product from every angle without a single layout jump: one big main image, a strip of thumbnails, swipe on phones, arrows on desktop. Buyers look before they buy; this is where they look. Give them angles and they stay; give them one photo and they wonder.

• Nothing ever shifts: every image slot reserves its space before loading.
• The big image loads first and fast; thumbnails wait their turn politely.
• Tapping a thumbnail swaps the main image with a soft fade.
• On phones the main image swipes; the thumbnail strip scrolls in its own lane when space runs out.
• Desktop arrows sit on solid little chips, readable over any product photo.
• Arrow keys walk the thumbnails, and each button tells screen readers which image it shows.
• An empty image list means no gallery.

How it works

1. 01

   Slide how many images, 3 to 6.

2. 02

   Pick the thumbnail position, below the main image or down the left side on desktop.

3. 03

   Copy the prompt, the gallery's build directions for your AI, into whichever AI you use.

4. 04

   Add your real product shots in the marked list, each with a short description of what that angle shows.

5. 05

   Swipe and arrow through everything: phones should swipe, desktops should show arrows on hover, and nothing should jump or flash while images swap.

6. 06

   Tab through the thumbnails too: arrow keys should walk them, and every one should announce itself, like show image 2 of 5.

What you can customize

• How many thumbnails: three for simple products; six when the details deserve their own frames and a longer look.
• Thumbnail position: below is the classic; left side feels more like a big store on desktop.
• Sizing, corners, and arrows adapt to your site automatically, because your AI builds the gallery right inside your own design, frame for frame.