Triom offers four widget types, each designed for different use cases and placements. You can create widgets from scratch or use pre-configured templates for common use cases.
Grid Widget
Best for: Product pages, collection pages, homepage sections
A Grid widget displays products in rows and columns. It's the most versatile option and works well in most situations.
When to use Grid:
You want to show multiple products at once
You have space for a larger widget
You want customers to see all options without scrolling
Settings you can customize:
Number of columns per device (mobile, tablet, desktop)
Maximum number of rows
Product card style and spacing
Carousel Widget
Best for: Narrow sections, mobile-friendly browsing, homepage features
A Carousel widget displays products in a horizontal scrollable row. Customers swipe or click arrows to see more products.
When to use Carousel:
You have limited vertical space
You want an interactive browsing experience
You're displaying on mobile where horizontal swiping feels natural
Settings you can customize:
Number of visible products per device
Navigation arrows and dot indicators
Auto-scroll behavior
List Widget
Best for: Sidebars, compact displays, mobile layouts
A List widget stacks products vertically in a single column. It's ideal for narrow spaces where a grid wouldn't fit.
When to use List:
You're adding recommendations to a sidebar
You want a compact, scannable display
You're optimizing for mobile-first design
Settings you can customize:
Spacing between items
Product card layout
Maximum number of products
Product Add-Ons Widget
Best for: Pre-checkout suggestions, accessories, complementary items
A Product Add-Ons widget suggests relevant add-ons customers can include with their purchase. It can be embedded on a page or shown as a popup when customers click checkout.
When to use Product Add-Ons:
You sell products with accessories (phone cases, chargers, etc.)
You want to catch customers at high-intent moments before checkout
You want to increase basket size without being intrusive
Display options:
Embed - Display inline on any page (cart page recommended)
Popup - Triggered when customer clicks checkout (also called "Pre-Purchase Popup")
Layout types:
List, Carousel, or Grid
Checkbox positioning (left or right)
Classic or Compact style
Quick Comparison
Feature | Grid | Carousel | List | Product Add-Ons |
Best placement | Product pages, homepage | Homepage, narrow sections | Sidebars | Cart page, checkout |
Space needed | Medium to large | Medium | Small | Embed or Overlay |
Interaction | Click to view | Swipe/arrows | Scroll | Select and add |
Products visible | Many at once | Few at a time | One column | 3-6 typically |
Recommendations by Page Type
Homepage
Use a Carousel for "Featured Products" or "New Arrivals"
Use a Grid for "Best Sellers" sections
Product Pages
Use a Grid or Carousel for "Related Products"
Use a List in a sidebar for "Recently Viewed"
Cart Page
Use Product Add-Ons (Embed) for last-minute suggestions
Use a Carousel for "You May Also Like"
Checkout
Use Product Add-Ons (Popup) to catch customers before they complete purchase
Collection Pages
Use a Grid for "Popular in This Category"
Use a Carousel at the bottom for cross-category recommendations
Next Steps
Once you've chosen a widget type:
Create a new widget and select your type (or choose a template)
Connect a Data Rule to determine which products appear
Customize the design to match your store (or use a Theme)
Add the widget to your store using the theme editor