Every widget in Triom can be customized to match your store's look and feel. This guide covers the design options available for all widget types.

Product cards are the individual product displays within your widget. Here's how to customize them:

Choose the overall appearance of each card:

Control the space inside each card:

This section controls how product images and text are displayed.

Choose how product images are displayed:

Set alignment for all text in the card:

Set the color for product titles using the color picker.

Set the color for the current product price.

Set the color for the strikethrough original price (shown when products are discounted).

Set the color for product descriptions.

Customize the button that adds products to cart:

Set the background fill color for the button.

Set the button text color.

Set the button border color.

Choose from preset sizes or set a custom value:

Use the slider to adjust font weight from light (100) to bold (900).

Control the button corner rounding:

Configure the widget title and subtitle appearance.

Choose from preset sizes or set a custom value:

Set the title text color using the color picker.

Choose from preset sizes or set a custom value.

Set the subtitle text color using the color picker.

Style the countdown timer appearance. Timer duration and behavior settings are configured in the Settings tab under Timer.

Choose from preset sizes or set a custom value:

Set the color for the countdown numbers using the color picker.

Set the color for surrounding timer text using the color picker.

Control space between products:

Space around the entire widget.