webdevpuneet.com

Related Snippets

147 in Cards category
48–53 of 60

Gift Wrap Option Card

Task Approval Flow Card

Shared Document Presence Bar

Live Cursor Name Tags

Subscription Pause/Resume Flow

NFT Mint Progress

Gift Wrap Option Card — Free HTML CSS JS Snippet

Gift Wrap Option Card · Cards · Plain HTML, CSS & JS · Live preview

CategoryCards
TagsSVGCSS Animation

Copy & paste

Source Code

<div class="gwc-card">
  <div class="gwc-top">
    <div class="gwc-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M20 12v9H4v-9M2 7h20v5H2zM12 22V7M12 7C10 3 6 3 6 6c0 2 3 1 6 1M12 7c2-4 6-4 6-1 0 2-3 1-6 1"/></svg>
    </div>
    <div class="gwc-copy">
      <label class="gwc-toggle-row">
        <span>
          <strong>Add gift wrap</strong>
          <small>Wrapped in tissue paper with a ribbon</small>
        </span>
        <span class="gwc-switch"><input type="checkbox" id="gwcToggle"><span class="gwc-slider"></span></span>
      </label>
    </div>
    <div class="gwc-price" id="gwcPrice">+&#36;0.00</div>
  </div>

  <div class="gwc-detail" id="gwcDetail" hidden>
    <div class="gwc-section">
      <div class="gwc-label">Wrap style</div>
      <div class="gwc-swatches" id="gwcSwatches">
        <button type="button" class="gwc-swatch selected" data-color="#e8b4bc" style="background:#e8b4bc" aria-label="Blush"></button>
        <button type="button" class="gwc-swatch" data-color="#8fb996" style="background:#8fb996" aria-label="Sage"></button>
        <button type="button" class="gwc-swatch" data-color="#e3c565" style="background:#e3c565" aria-label="Gold"></button>
        <button type="button" class="gwc-swatch" data-color="#7c93c9" style="background:#7c93c9" aria-label="Slate blue"></button>
      </div>
    </div>

    <div class="gwc-section">
      <div class="gwc-label">Gift message <span id="gwcCount">0/120</span></div>
      <textarea id="gwcMessage" maxlength="120" placeholder="Write a short note for the recipient..."></textarea>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Collapsed-by-default detail
Wrap options and message field only take up space once the toggle is switched on.
Live price delta
The add-on price updates instantly between +$0.00 and the real charge as the toggle flips.
Visual swatch picker
Wrap color is chosen from real color swatches instead of a text dropdown.
Single-selection guarantee
Clicking a swatch always deselects the previous one — exactly one style is ever active.
Enforced message limit
A maxlength textarea paired with a live counter prevents writing past the print limit.
Smooth reveal animation
The detail section fades and slides in rather than snapping open abruptly.
Accessible toggle markup
A real checkbox input with a styled slider keeps the switch keyboard- and screen-reader-friendly.
Simple, liftable state
Toggle, swatch, and message state are plain values easy to lift into a parent cart state.

About this UI Snippet

Gift Wrap Option Card — Toggle Add-On With Wrap Colors & a Live Character Count

Screenshot of the Gift Wrap Option Card snippet rendered live

A well-designed checkout add-on does three things: it stays out of the way until the shopper wants it, it makes the exact cost of opting in obvious, and it doesn't ask for more detail than it needs. The gift wrap option card follows all three — a single toggle reveals the wrap-style and message options only when switched on, and a price delta updates the instant the toggle flips. Pair it with a promo code input or checkout form for the rest of the purchase flow.

Collapsed by default, expanded on demand

At rest, the card shows just the toggle, its description, and a "+$0.00" price — a single row that doesn't compete for attention with the actual checkout. Switching the toggle on reveals the wrap-style swatches and the message textarea in one smooth slide-and-fade, and switching it back off collapses everything again, so the detail only ever occupies space when it's relevant to the current decision.

The price delta is the whole point

Rather than hiding the cost of the add-on in a total that updates elsewhere on the page, the price sits directly next to the toggle and updates from "+$0.00" to the real charge ("+$4.50") the instant you opt in, with a color change to draw the eye. This answers the shopper's actual question — "what does checking this box cost me?" — without requiring them to scroll to a summary to find out.

A small, tactile swatch picker

Wrap style is chosen from four color swatches rather than a dropdown, because it's a purely visual decision — seeing the actual colors is faster and more satisfying than reading their names in a <select>. Clicking a swatch removes the .selected ring from whichever was previously chosen and applies it to the new one, guaranteeing exactly one wrap style is ever selected at a time.

A message field that respects a real constraint

Gift messages usually print on a small card, so the textarea enforces a maxlength and shows a live "34/120" counter that updates on every keystroke — the same low-friction pattern as a checkout form's field validation, telling the shopper exactly how much room they have left rather than letting them write past a limit and silently truncating it later.

Wiring it into checkout

On submit, read toggle.checked, the .selected swatch's data-color, and the message textarea's value, and include them in your order payload alongside your normal cart total plus the GIFT_WRAP_PRICE delta if enabled. The card's local state (toggle, swatch selection, message) is intentionally simple enough to lift into a parent cart/checkout state object with no restructuring.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA collapsed gift-wrap card renders showing just the toggle and a "+$0.00" price.
  2. 2
    Switch the toggle onThe wrap-color swatches and message textarea slide into view; the price updates to "+$4.50".
  3. 3
    Pick a wrap colorClick any swatch — the selected ring moves to it and the others deselect.
  4. 4
    Type a gift messageThe counter below the label updates live and the textarea won't exceed 120 characters.
  5. 5
    Switch the toggle offThe detail section collapses and the price returns to "+$0.00".
  6. 6
    Wire to checkoutRead the toggle, selected swatch color, and message on submit and add them to your order payload.

Real-world uses

Common Use Cases

E-commerce checkout add-ons
Offer gift wrapping as an upsell alongside a checkout form.
Gift card and gift-shop flows
Pair with a gift card product page to bundle wrapping with the purchase.
Holiday and seasonal promotions
Highlight a limited-time gift-wrap option during a seasonal shopping campaign.
Subscription box customization
Let subscribers add a gift note and wrap style to a one-off gifted box.
Marketplace seller options
Offer wrap/packaging add-ons as a configurable line item per order.
Order customization patterns
A reference for a collapsible, priced add-on toggle usable beyond gift wrap.
Related: 360° Product Spin Viewer
See the 360° Product Spin Viewer for a related cards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The price display reads a single GIFT_WRAP_PRICE constant and formats it with fmtPrice() based only on the toggle's checked state — "+$0.00" when off, the real price when on. Because there's one constant and one formatting function rather than separately hard-coded strings for each state, the price shown can never drift from the actual charge you'd add to the order total.

The click handler is attached once to the swatch container (not to each swatch individually) and, on every click, first removes the .selected class from every swatch before adding it to the one that was clicked. This "clear all, then select one" pattern makes it structurally impossible to end up with zero or multiple swatches selected at once.

The textarea has a native maxlength="120" attribute, so the browser itself prevents typing, pasting, or otherwise inserting text beyond that length — it's enforced at the input level, not just visually. The counter above it reads message.value.length on every input event, so it always reflects the actual current length and never exceeds "120/120".

Edit the GIFT_WRAP_PRICE constant for the price — it's the only place the amount is defined. For wrap styles, add another .gwc-swatch button with its own data-color and a background color in the HTML; the existing click handler works on any number of swatches without changes since it selects by class, not by a fixed count.

Model gift-wrap enabled, the selected swatch color, and the message text as component state (or fields in a parent checkout/cart state object). Derive the price delta and the detail section's visibility from the enabled boolean with a computed value, and bind the swatch buttons' selected state and the textarea's value/onChange to that same state rather than direct DOM class toggling.