Skip to main content

Creating Your First Widget

This guide walks you through creating your first recommendation widget, from choosing a type to adding it to your store.

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

This guide walks you through creating your first recommendation widget, from choosing a type to adding it to your store.

Before You Start

Make sure you have:

  • Triom installed on your Shopify store

  • At least a few products in your store

  • Access to your Shopify theme editor

Step 1: Create a New Widget

  1. Open Triom from your Shopify admin

  2. Click Widgets in the sidebar

  3. Click the Create Widget button

Create widget dialog

You'll see two options:

Option A: Choose a Widget Type

Select a widget type to create from scratch:

  • Grid - Products in rows and columns

  • Carousel - Horizontal scrolling row

  • List - Vertical stacked layout

  • Product Add-Ons - Pre-checkout suggestions (embed or popup)

This creates a widget without a Data Rule. You'll configure what products to show in the next step.

Option B: Use a Pre-Configured Template

Select from ready-made templates like:

  • Best Sellers - Show your top-performing products

  • Recommended for You - Personalized AI recommendations

  • Related Products - Similar items to what the customer is viewing

  • Recently Viewed - Products the customer has browsed

Templates create a widget with a Data Rule already configured. The product selection is set up for you automatically.

Tip for beginners: Start with a pre-configured template. You can always customize it later.

Step 2: Connect a Data Rule

If you chose a widget type (Option A), you'll need to connect a Data Rule to determine which products to display.

  1. Go to the Settings tab in the widget editor

  2. Under Connected Data Rules, select an existing data rule from the dropdown

  3. Set the Product Limit (maximum number of products to display)

  4. Click Save Changes

Data Rules section

If you chose a template (Option B), skip this step—your Data Rule is already configured.

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 3: Customize the Design

Your widget can use your store's Theme or have custom styling:

  1. Go to the Design tab

  2. Choose Current Theme:

    • Select your theme to use consistent styling

    • Select Custom to customize this widget individually

  3. If using Custom, adjust appearance settings:

    • Title & Subtitle - Add a heading like "You May Also Like"

    • Layout - Choose how many products to show per row

    • Product Card - Customize image size, text styling, and button appearance

  4. Preview your changes in real-time on the right side of the screen

See Customizing Widget Design for detailed design options.

Step 4: Set Up Discounts (Optional)

Want to encourage purchases? Add a discount to products in your widget.

  1. Go to the Settings tab

  2. Enable Apply Discount

  3. Choose a discount type:

    • Percentage - e.g., 10% off

    • Fixed Amount - e.g., $5 off

  4. Optionally set a quantity limit or cart threshold

Step 5: Publish Your Widget

  1. Review your widget in the preview

  2. Click Save Changes

  3. Toggle the widget status to Live

  4. Copy the Widget ID - You'll need this to add the widget to your store

Step 6: Add to Your Store

  1. Open your Shopify admin

  2. Go to Online Store > Themes

  3. Click Customize on your active theme

  4. Navigate to the page where you want the widget (e.g., Product page)

  5. Click Add block

  6. Find and select the Triom app block

  7. Paste your Widget ID in the app block settings

  8. Position the widget where you want it to appear

  9. Click Save

What's Next?

Now that your first widget is live:

  • Monitor performance - Check your Analytics dashboard after a few days

  • Create more widgets - Try different widget types on different pages

  • Set up Data Rules - Create personalized experiences for different customer segments

  • Connect integrations - Display reviews from Klaviyo, Loox, Judge.me, or Yotpo

Common Questions

How long until I see results?

You'll start seeing widget interactions immediately. Give it at least a week to gather meaningful conversion data.

Can I have multiple widgets on the same page?

Yes! Many stores use a "Related Products" widget on product pages and a "Best Sellers" widget on the homepage.

What if my widget isn't showing?

Check that: (1) the widget status is set to Live, (2) you pasted the correct Widget ID in the theme editor, and (3) a Data Rule is connected (or you used a template).

Where do I find my Widget ID?

Open the widget in Triom and look for the ID at the top of the editor, or copy it from the widget list.

Did this answer your question?