Product Add-Ons widgets suggest complementary items customers can add to their purchase. They're perfect for accessories, warranties, and "complete the look" suggestions. You can embed them on a page or show them as a popup when customers click checkout.
Step 1: Create the Widget
Go to Widgets in the sidebar
Click Create Widget
Select Product Add-Ons as the widget type
Name your widget (e.g., "Phone Accessories Add-Ons")
Step 2: Choose Display Method
Under Display Method, choose how the widget appears:
Embed
Displays the widget inline on a page. Best for cart pages where customers are reviewing their purchase.
No trigger required
Add to your store using the Shopify theme editor
Copy the Widget ID and paste it in the Triom app block
Popup
Shows as an overlay when the customer clicks checkout.
Triggered by checkout button click
Catches customers at the highest-intent moment
Must be placed on the cart page or any page containing a "Checkout" button
Step 3: Connect a Data Rule
Go to the Settings tab
Under Connected Data Rules, select an existing data rule from the dropdown
Set the Product Limit (maximum number of products to display)
Click Save
Note: Data Rules are created and configured separately in the Data Rules section. If you don't have any data rules yet, create one first.
Important: Widgets without a connected Data Rule will not be displayed on your storefront.
Step 4: Configure Layout
Under Layout, choose how products are arranged:
Layout Type
Choose a layout type. Each layout has different style options and settings:
List
Products stacked vertically in a single column
Styles: Compact Checkbox Left, Compact Checkbox Right
No additional layout settings
Carousel
Products in a horizontal scrollable row
Styles: Classic Checkbox Left, Classic Checkbox Right, Compact Checkbox Left, Compact Checkbox Right
Settings: Desktop columns (1-6), Tablet columns (1-4), Mobile columns (1-2), Gap
Grid
Products in rows and columns
Styles: Classic Checkbox Left, Classic Checkbox Right
Settings: Desktop columns (1-6), Tablet columns (1-4), Mobile columns (1-2), Row limit (1-20), Gap
Note: The number of products shown is controlled by the Product Limit in your connected Data Rule.
Step 5: Customize Product Display
Configure how each product appears:
Product Image
Size: Small, Medium, or Large
Aspect ratio: Square, Portrait, or Landscape
Product Information
Title display (full or truncated)
Price display (regular price, compare-at price)
Vendor name (show/hide)
Step 6: Configure Header & Messaging
Title
Add a compelling headline:
"Complete Your Purchase"
"Customers Also Bought"
"Don't Forget These Essentials"
Subtitle (Optional)
Add supporting text:
"Add these items and save"
"Recommended accessories"
Step 7: Configure Action Buttons
Add Button
Button text (e.g., "Add Selected to Cart")
Button style and colors
Skip/Close Option
Text for declining (e.g., "No Thanks", "Continue to Checkout")
Style (text link or button)
Step 8: Set Up Discounts (Optional)
Encourage add-on purchases with discounts:
Go to the Settings tab
Enable Apply Discount
Choose discount type:
Percentage - e.g., 10% off add-ons
Fixed Amount - e.g., $5 off each add-on
Set any quantity requirements
Step 9: Save and Publish
Preview your widget
Click Save Changes
Toggle to Live
If using Embed display:
Copy the Widget ID
Add it to your store via the theme editor
If using Popup display:
The widget automatically appears when customers click checkout