Skip to main content
Version: 1.0.0

Product and Variant Detail

In the ARShades Library, products are organised in a list view. Each row represents a product model, and by clicking the + icon next to a product, the list expands to show all available colour variants for that model. This makes it easy to immediately see the different options of frame and lenses colour available for a product.

Product List Structure

The product list offers two levels of view. In collapsed mode, you see only the main product information. Expanding a row with the + button displays all variants of that product. Clicking on the product name opens the dedicated detail page.

ViewDescription
CollapsedDisplays product thumbnail, product name, brand, total number of variants, and last update date.
ExpandedShows all variants (colour combinations) with SKU, EAN, size, frame colour, and lenses colour.
Product ClickClicking the product name opens the Product Detail Page.

Product Detail Page

The detail page provides a complete overview of the product and its variants. It is divided into a left panel, where all variants are listed, and a main preview area, where the selected variant can be visualised in 3D, AR, or with the Virtual Try-On previews.

Layout

The page layout is designed to keep variants accessible while offering a large area for previews.

SectionDescription
Left PanelVariant list; clicking on a variant loads its preview.
Main Preview AreaDisplays 3D and AR previews, VTO, and reference images.

Available Previews

In the main preview area, multiple visualisation options are available to compare and validate the 3D asset.

Preview TypeDescription
3D/AR ViewerInteractive model with zoom and rotation controls.
VTO Web PreviewTry-On experience directly in the browser using the webcam.
VTO Mobile PreviewQR code accessible by clicking the phone icon; scan to try the model on mobile apps.
Reference ImagesReal product photos shown alongside the 3D model.
Expand View ButtonEnlarges preview for better comparison between 3D model and reference images.

Variant Detail Information

Each variant is described with precise metadata to ensure correct identification and usage. These details are shown below the preview section when a variant is selected.

FieldDescription
SKUStock Keeping Unit identifier.
EAN / UPCStandard product codes for retail reference.
Frame ColourMain frame colour of the variant.
Lenses ColourColour of the lenses.
Temple ColourColour of the temples (arms), if different from frame.
Size DetailsLens width, bridge size, and temple length.
StatusLifecycle state (e.g. Available, In Progress, Published).
Last UpdateMost recent modification date.