Kabana

03 — Product page

Item page layout

One page per design. Stone, metal and chain are options on that page, never separate products. Below is the layout and the behaviour each section needs.

+----------------------------------------------------------+
|  breadcrumb: Collections / Riviera / Pendants            |
+---------------------------+------------------------------+
|                           |  COLLECTION (small caps)     |
|                           |  Product name (display)      |
|      MAIN IMAGE           |  Item number  GPIF036MW-CH   |
|      square, 1:1          |  Price                       |
|                           |                              |
|                           |  STONE  o o o o o o o o      |
|                           |  (swatches, name on select)  |
|                           |                              |
|                           |  METAL  [G] [W] [N]          |
|                           |                              |
|  [t][t][t][t]  thumbs     |  CHAIN                       |
|                           |  (o) With 18" chain  $1,495  |
|                           |  ( ) Chain not included $1,29|
|                           |                              |
|                           |  [ Add to bag ]              |
|                           |  [ Find a jeweler ]          |
+---------------------------+------------------------------+
|  Description (2 cols)     |  Specifications table        |
+----------------------------------------------------------+
|  Hand-cut inlay story block (brand)                       |
+----------------------------------------------------------+
|  More in this style — other stones as a strip             |
+----------------------------------------------------------+
|  You may also like — same collection                      |
+----------------------------------------------------------+
1

Gallery

  • Square 1:1 crop, white or bone background, no drop shadow.
  • Minimum 2000px so the zoom is usable.
  • Thumbnails below on desktop, swipe carousel on mobile.
  • Changing the stone or metal swaps the whole gallery, not just the first shot.
2

Stone picker

  • Round swatches in the stone's actual colour, with the stone name shown on hover and under the row once selected.
  • Every stone shown is a real item number with its own price — the price updates on selection.
  • Out-of-stock stones stay visible and selectable; show 'Made to order' rather than hiding them.
  • The selected item number is always printed on the page. Customers and our retailers quote it to us.
3

Metal picker

  • Separate control from the stone. Yellow / white / rose gold, platinum and silver where the style offers them.
  • If a metal-and-stone combination doesn't exist, disable it rather than 404 after the click.
4

Chain option (pendants only)

  • Two radio options on one page: with chain (-CH) and chain not included.
  • With chain is preselected — it is the option we lead with.
  • Never create two separate products for this.
  • If only the chain photo exists, show it under the chainless option with the caption 'Chain not included'.
5

Specifications

  • Item number, collection, metal content, stone, diamond weight and quality, measurements, setting type.
  • Plain table, no icons. Retailers read this closely.
6

More in this style

  • A strip of the same design in every other stone, each linking to the same page with that variant selected.
  • This is the single most important cross-sell on the site.

See it working

A clickable version of this layout, with the stone, metal and chain controls live, so the interaction is not left to interpretation.

Open the sample item page