Discount Chip Value

Renders the discount code text inside Discount Chips.

Last updated

Discount Chip Value icon

How to use

  1. Follow the steps in Discount Chips to create a chip design.

  2. Place this component for the discount code text alongside the Discount Chip Remove for the remove control.

  3. Connect the chip design to Discount Chips' ⦿ Chip control — each chip gets its code context automatically.

Styling the code text

Font and Color set the code's typography; Transform applies none, uppercase, lowercase, or capitalize to the rendered string.

Canvas placeholder vs. live rendering

Discount Chip Value must live inside the design component connected to Discount Chips' ⦿ Chip control. On canvas, with no context connected, it shows placeholder text Code; on the live site, it renders the active discount code when one or more is active. It should be paired with Discount Chip Remove inside the same chip design.

Questions? Join our Slack community