Popups

PopUp Promotion

Promotional popup content preset with heading, body, embedded CouponBox, and a primary CTA. Slots into PopUp.

Overview

PopUpPromotion is the promotional popup content preset. It composes a TextGroup (optional icon, caption, heading, body), an optional countdown slot, an embedded CouponBox for code copy or apply, a primary call-to-action, and a fine-print hint. It owns no dialog chrome of its own. Drop it into PopUp's default slot for launch offers, seasonal promos, and welcome discounts.

Key Business & UX Benefits

Turns paid traffic into first orders with a focused offer surface, the standard pattern behind welcome-discount conversion lifts.
The embedded CouponBox handles code copy in one tap, cutting the friction that loses redemptions between popup and checkout.
Seasonal promos ship from Studio, so growth teams launch Black Friday, Easter, or flash sales without waiting on engineering deploys.
Inherits PopUp shell semantics for focus and keyboard handling, keeping the offer popup accessible by default.

Usage

PopUpPromotion Default

<LPopUp v-model:open="showPromo" :media="image">
    <LPopUpPromotion
      heading="20% off your first order"
      body="Your welcome discount is waiting."
      :coupon="{
        text: 'Use code at checkout',
        code: 'WELCOME20',
        action: 'copy',
      }"
      cta-text="Shop now"
      cta-href="/shop"
      hint="One-time use. Excludes sale items."
      @apply-coupon="onCouponApplied"
    >
      <template #countdown>
        <CountdownBanner :ends-at="endsAt" />
      </template>
    </LPopUpPromotion>
  </LPopUp>

Feature List

Composes a TextGroup, optional countdown slot, embedded CouponBox, primary CTA, and fine-print hint
CouponBox supports 'copy' or 'apply' actions, cutting friction between popup and checkout redemption
Countdown slot accepts any countdown component, sharpening urgency on launch offers and flash sales
Inherits PopUp shell semantics for focus traps, keyboard support, and ARIA roles
Editors ship Black Friday, Easter, and welcome promos from Studio without engineering deploys
apply-coupon event hands cart logic back to the parent so coupons land in the customer's session

API Reference

Prop	Default	Type
`icon`		`string`
`caption`		`string`
`heading`		`string`
`body`		`string`
`hint`		`string`
`coupon`		`{ text, code, icon, 3 more }` Coupon configuration rendered via CouponBox.
`ctaText`		`string`
`ctaHref`		`string`
`alignment`	`left`	`"left" \| "center"`
`onApply-coupon`		`(code: string): any`

Slot	Type
`countdown`	`{}`

Event	Type
`apply-coupon`	`(event: "apply-coupon", code: string): void`

Edit this pageorReport an issue

PopUp Newsletter

Newsletter signup popup content preset with headline, body, and an embedded EmailInputForm. Slots into PopUp.

Persona Quote

A testimonial component pairing a profile picture with a quote, personal details, and optional company branding.