Skip to main content

Using Themes for Consistent Styling

Configure your theme to maintain consistent styling across all your widgets

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

Your Theme defines the visual styling for all widgets in your store. Instead of configuring colors, fonts, and layouts for each widget individually, set up your theme once and it applies everywhere.

Why Use a Theme?

Consistency

All widgets automatically share the same styling, creating a cohesive brand experience.

Efficiency

Change your theme settings once, and all widgets update automatically.

Simplicity

Focus on product selection and placement for each widget—the design is already handled.

Accessing Your Theme

  1. Go to Themes in the Triom sidebar

  2. Configure your styling options under the Widgets or Bundles tab

  3. Click Save Changes—they apply to all connected widgets immediately

Theme Structure

Your theme has two tabs:

  • Widgets — Settings for recommendation widgets (Grid, Carousel, List, etc.)

  • Bundles — Settings for Frequently Bought Together bundles

Each tab contains the same core settings, with bundles having additional options for source product highlighting and discount tiers.


Widgets Tab Settings

Title Settings

Configure how widget titles and subtitles appear:

Title

Option

Values

Size

Small, Medium, Large, Custom (1-99px)

Color

Any color

Alignment

Left, Center, Right

Subtitle

Option

Values

Font Size

Small, Medium, Large, Custom (1-99px)

Color

Any color

Alignment

Left, Center, Right


Product Card Design

Control how product cards appear:

Option

Values

Style

Flat, Bordered

Border Color

Any color (when Bordered)

Border Radius

None, Small, Medium, Large, Custom (when Bordered)

Background

Any color

Padding

None, Small, Medium, Large


Product Information Display

Configure product details shown on cards:

Option

Values

Image Aspect Ratio

Square, Portrait, Landscape, Original

Text Alignment

Left, Center, Right

Product Title Color

Any color

Price Color

Any color

Original Compare Price Color

Any color

Description Color

Any color


Add to Cart Button

Style the add to cart button on product cards:

Option

Values

Button Color

Any color

Text Color

Any color

Border Color

Any color

Font Size

Small, Medium, Large, Custom (1-99px)

Font Weight

100-900 (slider)

Border Radius

None, Small, Medium, Large, Custom


Timer Settings

For widgets with countdown timers:

Option

Values

Timer Size

Small, Medium, Large, Custom (1-99px)

Alignment

Left, Center, Right

Timer Color

Any color

Text Color

Any color


Bundles Tab Settings

The Bundles tab includes all the same settings as Widgets, plus these additional options:

Source Product Border

In Product Card Design, bundles have an extra option:

Option

Description

Source Product Border

Color to highlight the product the customer is currently viewing

This helps customers identify which product triggered the bundle recommendation.


Discount Tier Display

Style how tiered discounts appear (e.g., "Buy 2 save 10%, Buy 3 save 15%"):

Non-Active Tier Style

Option

Values

Text Color

Any color

Background Color

Any color

Border Color

Any color

Font Size

Small, Medium, Large, Custom (1-99px)

Font Weight

100-900 (slider)

Border Radius

None, Small, Medium, Large, Custom

Padding

None, Small, Medium, Large

Active Tier Style

Same options as non-active, styled differently to highlight the current tier the customer qualifies for.


Customizing Individual Widgets

Need one widget to look different from the rest?

  1. Open the widget editor

  2. Go to the Design tab

  3. In the Current Theme dropdown, select Custom

  4. All design settings become available for this widget

  5. Customize as needed

Choosing "Custom" disconnects that widget from your theme, giving you full control over its appearance.


Common Questions

What if I want one widget to look different?

In the widget's Design tab, change "Current Theme" to "Custom". This unlocks all design settings for that specific widget.

How does my theme interact with my Shopify theme?

Your Triom theme controls widget-specific styling. Page layout and overall store design come from your Shopify theme. The two work together.

Will my theme affect bundle widgets too?

Yes. Your theme applies to all widget types including bundles, with additional bundle-specific settings available in the Bundles tab.

Did this answer your question?