How to configure VTO Native Frame Carousel ?

Prerequisites

Before integrating the Native Frame Carousel, ensure that:

• Virtual Try-on is already integrated and working on your site.

• You have access to:

  • Frame identifiers

  • Frame images and variant assets (thumbnails, lens images)

Integration overview

The Native Frame Carousel is configured through the VTO initialization configuration object.

The integration consists of:

• Providing recommended frames (optional, max 6).

• Providing frame variants (optional, unlimited).

• Providing lens color variants (optional).

• Customizing the carousel UI (optional).

The carousel is rendered natively by Virtual Try-on. No additional UI implementation is required on your side.

Add the Native Frame Carousel configuration

Include the Native Frame Carousel configuration when initializing the VTO.

• carousel

Configuration structure

All sections are optional, but each item inside them must respect required fields to be displayed.

Configure recommended frames

Recommended frames are displayed in a dedicated section inside the VTO.

Rules

• Maximum 6 recommended frames

• All required fields must be provided

• Frames with missing required fields will not be displayed

Required fields

• frameLabel

• frameId

• frameImageUrl

 Optional fields

• frameAdditionalInfo

Example

"frames": [
  {
    "frameLabel": 'string',
    "frameImageUrl": 'string',
    "frameAdditionalInfo": 'string'

    sizes: [
              {
                sizeLabel: 'Medium',
                frameId: '940887'
              }]
  }
  ]

Frame variants allow users to switch between different versions of the same frame.

You may provide any combination of the following variant types.

Color variants

Required fields:

• frameImageUrl

• frameLabel

Optional fields:

• frameAdditionalInfo

• variants

 {
    "frameImageUrl": 'string',
    "frameLabel": 'string',
    frameAdditionalInfo: 'Boss',
    "variants": [{ sizes: [{ frameId: 'string' }] }],
  }

Required fields:

• frameId

• SizeLabel

• variants

 {
    "variants": [{ sizes: [{ frameId: 'string' }] }],
    "sizeLabel": 'string',
    "frameId": 'string',
  }

Required fields:

• lensId

• lensImageUrl

• lensLabel

"lenses": [
  {
    "lensId": 'string',
    "lensImageUrl": 'string',
    "lensLabel": 'string'
  }
]

You can adapt the wording of the “Recommanded frames” section title according to your needs

"settings": {
   "recommendedSectionTitle" : 'string'
}

If not provided, default text “You might also like” is displayed.

Error handling and validation

• If a required field is missing, the corresponding frame or variant is not displayed.

• If more than 6 recommended frames are provided, additional frames are ignored.

• If the Native Frame Carousel module is not enabled in the licence, all related configuration is ignored.

It is recommended to validate all required fields before deploying to production.

Final checklist before go-live

• VTO integration working correctly

• All required fields provided for frames and variants

• Image URLs publicly accessible

• Recommended frames limited to 6 items

Example

Follow this codepen example !