Skip to main content

Adding Widgets or Bundles to Your Shopify Theme

Step-by-step guide to placing widgets on your store pages using the theme editor

Tom Nipravsky avatar
Written by Tom Nipravsky
Updated over a month ago

After creating a widget in Triom, you need to add it to your Shopify theme so customers can see it. This guide shows you how to place widgets using Shopify's theme editor.

Before You Start

Make sure your widget is:

  1. Saved - All settings configured

  2. Set to Live - Status toggled to "Live" in Triom

  3. Data Rule connected - Widget must have products to display

Adding a Widget to Your Store

Step 1: Copy Widget ID

You'll need this ID to connect your widget in the theme editor.

Copy the Widget ID from either:

  • The Widgets page table (click the copy icon next to any widget)

  • The widget editor (shown at the top when editing a widget)

Step 2: Open Theme Editor

  1. Go to your Shopify admin

  2. Navigate to Online Store > Themes

  3. Click Customize on your active theme

Step 3: Navigate to the Correct Page

Navigate to the page template where you want to add your widget:

Placement locations by widget type:

  • Product Add-Ons (Embed) → Product page

  • Product Add-Ons (Popup with Checkout Click) → Must be placed on the cart page or any page containing a “Checkout” button

  • Bundles → Must be placed on a product detail pages.

  • All other widgets → Product page, Homepage, Cart page, or Collection page

Step 4: Add the Triom Widget Block

  1. In the left sidebar, click Add section or Add block

  2. Scroll to the Apps section

  3. Select Triom Widgets

Step 5: Add Your Widget ID

  1. Click on the "Triom Widgets" block to open its settings

  2. Find the Widget ID field in the right sidebar

  3. Paste your Widget ID into the field

Step 6: Save Your Changes

Click the Save button in the top-right corner of the theme editor. Your widget is now live on your store!

Adding Widgets to Other Pages

To place widgets on different pages, navigate to the desired page template in the theme editor and follow steps 4-6 above.

Common Page Placements

Page

Best Widget Types

Product Page

Related Products, Frequently Bought Together, Product Add-Ons

Homepage

Best Sellers, New Arrivals

Cart Page

Cart Add-Ons, Last Chance Offers

Collection Page

Collection Recommendations

Multiple Widgets on One Page

You can add multiple Triom widgets to the same page. Each widget placement is independent—add multiple app blocks as needed.

Example product page setup:

  1. "Frequently Bought Together" bundle in product information section

  2. "Related Products" carousel at bottom of page

Troubleshooting

Widget Not Showing

  • Check the widget status is Live in Triom

  • Verify the correct Widget ID is pasted in theme editor settings

  • Ensure a Data Rule is connected and has matching products (widgets with no products are not displayed)

  • Clear your browser cache

Widget Styling Looks Wrong

  • Design settings are configured in Triom, not the theme editor

  • Go to Triom > Widget > Design tab to adjust styling

  • Some themes may need CSS adjustments

Did this answer your question?