Element picker for Custom CSS in Upsell Builder

The Custom CSS fields on an Upsell Builder offer now give you two ways to target what you want to style, so writing a rule no longer starts with hunting for a selector.

Until now, styling an offer meant finding the right class yourself.

What you can do

Click Pick an element from the preview, hover over the widget, and click the element you want. Vitals inserts a ready-made CSS rule for it. This button currently appears on product-page placements. You can also choose from a list of clickable chips covering the most common elements, grouped into Widget, Product, and Pricing and labels.

How it works

The predefined elements use stable Vitals selectors, so a rule written through them keeps working even if you later switch the widget's layout. Picking an arbitrary element that is not in the list still works, but it targets an internal class that can differ between layouts or change over time, so the predefined options are the more durable choice. If styling stops applying after a layout change, that is usually why. The list can be extended, so tell us which elements you are missing.

Learn more in the Vitals Help Center.