Product Rotator
An interactive product selector that lets visitors browse products through a circular rotation or expanding panel animation.
What It Does
The Product Rotator module displays a set of product items arranged for interactive selection. In Rotate mode, products are arranged in a circular arc and visitors can click through them to bring each product to the forefront. In Expand mode, products are listed and clicking an item expands it with full details and an image. An optional background image fills the entire section.
Best Used For
- Product category selectors where visitors actively explore options
- Highlighting a small number of flagship products with engaging interactivity
- Brand showcase sections where the visual hierarchy shifts with each selection
- Portfolio-style presentations where each item deserves focused attention
Variants
Rotate
Products are arranged in a circular layout. The active product is highlighted in the foreground while others recede to the background. Clicking rotates the selected item to the active position.
Best for: Small product ranges (3–6 items) where circular navigation feels natural
Expand
Products are listed vertically. Clicking a product expands it to reveal a full image and detail panel while other items collapse. Provides a more structured, information-dense layout.
Best for: Larger product sets or when product details need more space to breathe
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| backgroundImage | media | No | Full-section background image |
| variants | enumeration | Yes | Animation mode -- Rotate or Expand |
| productRotateDetail | component | No | Product items with images and details |
| entranceAnimation | component | No | Scroll-triggered entrance animation |
Tips for Great Results
- For the Rotate variant, keep the product count between 3 and 6 for the best visual balance.
- Use the Expand variant when each product has meaningful detail text that benefits from a focused panel.
- A background image works particularly well with the Rotate variant to create depth behind the circular layout.
- Ensure product images are consistently sized and cropped for a cohesive rotating gallery.
Supported Languages
Fully bilingual — all product detail fields support both English and Thai content.