Tag Toolbar

The tag toolbar is a contextual toolbar that appears when you click on a tag element in a section. Tags are small label-style elements used for categories, badges, discount labels, and other short text markers. The toolbar lets you customize the tag's appearance without opening the full config panel.

Opening the Toolbar

Click on any tag element in the canvas. The toolbar appears above the tag, centered horizontally. It slides in with a smooth animation.

The toolbar closes when you click outside of it. All changes are applied instantly as you make them.

Toolbar Controls

Text Size

The left side of the toolbar contains text size controls, identical to the heading size system:

• Minus (-) - Decrease size one level down

• Size dropdown - Shows the current level (H1-H6, P1-P3). Click to see all nine options and select one.

• Plus (+) - Increase size one level up

The size levels follow the same hierarchy as all text in the builder:

`` H1 > H2 > H3 > H4 > H5 > H6 > P1 > P2 > P3 ``

Tags typically use smaller sizes like P2 or P3. Using a heading size for a tag would make it disproportionately large compared to the surrounding content.

Background Color

Click the colored square button to open the background color picker. This changes the fill color behind the tag text.

The color picker has two tabs:

Custom tab

• Full color picker with saturation/brightness selector and hue slider

• Hex color input field for precise color values

• Eyedropper tool to pick colors from anywhere on your screen

Theme tab

Quick-access swatches from your brand style:

• Brand colors - Primary, secondary, and tertiary

• Background colors - Primary and secondary background colors

Click any swatch to apply it instantly.

Text Color

Click the "A" icon button (showing the current text color) to open the text color picker. This changes the color of the text within the tag.

The text color picker has the same two tabs as the background picker, with swatches organized into:

• Brand colors - Primary, secondary, and tertiary

• Text colors - Headline and body text colors

• Button colors - Button, button hover, and button text colors

Border Radius

Click the rounded corner icon button to open the border radius dropdown. This controls how rounded the tag's corners are:

The "Full" radius creates a pill-shaped tag, which is a popular style for modern e-commerce designs. "Small" or "Medium" work well for a more structured, editorial look.

Color Workflow Tips

Maintaining contrast

Always ensure sufficient contrast between the tag's background and text colors. A dark background with light text (or vice versa) makes tags readable at small sizes.

Using brand colors

Switch to the "Theme" tab in the color picker to use your brand style colors. This keeps tags visually consistent with the rest of your page.

Matching across sections

If you use tags in multiple sections, use the same color combination for consistency. The hex input field helps you apply exact color values across different tags.