Styling your advice flow

Styling controls how the public Advice flow and Flow widget look. Use it before publishing so the experience feels like part of your webshop.

Where to configure this

• Styling: colors, spacing, intro, answers, buttons and product cards.
• Settings -> Recommendations: which recommendation parts are shown.
• Share & Publish: publish the current styling.

Style the flow

1. Open the Advice flow.
2. Go to Styling.
3. Set colors, spacing, answer style and product card style.
4. Add intro content only when visitors need a short welcome.
5. Check desktop, tablet and mobile.
6. Use the Live preview to review questions, recommendations and empty states.

Use images and swatches

Use images when they make a choice clearer. Question banners work best for context. Answer images and swatches work best when visitors compare visual options such as color, shape or style.

Keep images consistent in shape and size so the Flow widget remains calm on mobile.

An uploaded image may be up to 5 MB. A larger file is stopped before the upload starts.

Reuse a style

Use Style to choose the default style or a saved team style. Team styles help multiple Advice flows share the same colors, buttons and product card design.

Autosave updates the selected style. Publishing one flow that uses a shared style also updates other published Flow widgets using that style.

Flow-specific content, such as intro text, logo and intro image, stays saved on the current Advice flow.

Add product information

Open Products -> Product information to add up to three dataset attributes to recommendation cards, such as delivery time, stock status or material. Choose a label, display style and position for each field. Badges can show the label with its value or only the label. Place information above or below the title, advice labels or price, or below the product button. The default position is below the price and above the product button.

Product information belongs to the selected style, so every linked Advice flow uses the same fields. Each flow reads the values from its own connected product data. Empty values stay hidden, and these fields do not change matching or ranking.

Select product information in the Live preview to adjust its text, label and badge colors, badge corner roundness, text size and thickness.

Check before publishing

• Long answers wrap clearly.
• Buttons are easy to tap.
• Product cards stay easy to scan.
• Images do not dominate the first screen.
• The real webshop page has enough space around the widget.

You do not need to replace the Flow widget code after styling changes. Update the style and publish again.