Customize the product block

The product block inherits the widget's font, colors, and radius settings. Use its Custom CSS field when you need more control over its container, text, questions, or input.

Choose where to write the CSS

We recommend the Custom CSS field under Surfaces → Product block in the JUST dashboard. Its rules apply inside the block on both Liquid and headless storefronts, without a theme edit.

In this field:

• use :host to target the <just-ai-agent mode="block"> element;
• use [part='name'] to target an exposed part.

:host {
  --ai-block-accent: #c96f4a;
}

[part='chip'] {
  border-radius: 999px;
}

The field accepts up to 1500 characters. It rejects @import; URLs in url() must point to your storefront or cdn.shopify.com.

The Global CSS override, under Ralph > Advanced in the dashboard, is a separate stylesheet. It runs on the storefront page, like theme CSS, so it can reach the block only through custom properties and ::part(). Use it for changes that also affect the page around the widget.

You can also write the rules in the theme itself. See Write CSS in the theme for the selector syntax and cascade order.

Start from the default style

By default, the product block has a transparent background, no border, and no padding. The suggested questions and input keep the widget's design, while the container blends into the surrounding page.

To create a card-like surface, set a background and inner spacing:

:host {
  --ai-block-bg: #f6f1e7;
  --ai-block-padding: 24px;
}

Use regular margin and border properties on :host to position or separate the block. --ai-block-padding changes only the spacing inside its container.

CSS custom properties

Set these properties on :host to update the whole block.

Not every style has a custom property. Use ::part() for the typed input color, the resting input border, and every font size except the title. The styling reference lists these cases.

The --ai-radius-* defaults scale with the element's radius attribute, from sharp to pill, so the block and standalone widget change shape together.

Style the exposed parts

The product block exposes eight parts. In the dashboard's Custom CSS field, select them with [part='name']. From theme CSS, use ::part(name).

Part rules run after the block's built-in styles, so they can change both appearance and layout:

[part='chips'] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

[part='chip'] {
  justify-content: center;
  border: 1px solid #1d3a5f;
  border-radius: 999px;
  background: #fff;
}

[part='title'] {
  font-family: georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

Pseudo-classes work as expected. For example, strengthen the hover state when the brand color is dark:

[part='chip']:hover {
  background: #e9e6df;
}

Apply a complete theme

Paste this example into the product block's Custom CSS field:

:host {
  --ai-block-bg: #f6f1e7;
  --ai-block-padding: 24px;
  --ai-block-radius: 16px;
  --ai-block-title-color: #1d3a5f;
  --ai-block-title-size: 26px;
  --ai-block-accent: #c96f4a;
  --ai-block-chip-radius: 999px;
  --ai-block-input-radius: 12px;
  --ai-block-font: georgia, 'Times New Roman', serif;
}

[part='chips'] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

[part='submit'] {
  border-radius: 999px;
}

Write CSS in the theme

Theme CSS can customize the same properties and parts, but uses selectors from outside the web component:

Remove obsolete theme rules when moving styles into the dashboard. If you cannot edit the theme, adding !important in the dashboard field overrides the theme rule, including a theme rule that also uses !important.