ARTSABERS — Cart Build Brief

Purpose

The ARTSABERS shopping cart template. This is the review-and-adjust page between the shop and checkout — where the customer confirms what they’re buying, sees their split shipments, applies a coupon or free gift, opts into gift wrap, and reaches for Secure Checkout.

Direction

Kyber Hull — apply the direction from SAS1. Carbon / void / charcoal grounds; warm ember forge accent on CTAs, prices, and hairlines; warm off-white body text; heading font on labels + display copy; body font on prose; zero border-radius sitewide.

Page background follows the pattern locked on the shop archive (MAS51): CSS gradient + subtle horizontal panel-joint hairlines every ~240px + warm ember bloom in the top-left corner. No photographic imagery in the main area. The header may keep a bleeding hull-plate treatment for direction bookend, but keep it compact.

Reuse from prior mockups

The subagent SHOULD lift and adapt patterns from these approved mockups verbatim where structurally appropriate:

• Compact page header + trust chip strip — from MAS51 (shop archive)
• Panel-joint hairline background pattern — from MAS51 (shop area section)
• Bordered content-group with hairline border + Kyber Hull legend — from MAS52 (form component fieldsets)
• Form input patterns — from MAS52 (coupon input field, textarea, quantity stepper, checkbox toggle, primary + secondary CTA)
• Post-grid reinforcement band — from MAS51 (plain carbon + ember hairline separator)
• Product photography URL pattern — real ARTSABERS product image URLs from the live catalogue (provided below)

Sections (top to bottom)

1. Compact page header

• ~300–350px rendered height. Not editorial.
• Optional bleeding hull-plate imagery Variant G with heavy overlay for direction bookend, or CSS panel-joint pattern matching the shop area — either is fine; keep it subtle so the cart’s content dominates.
• Breadcrumb: Home / Cart (Cart is the current page, muted or ember accent).
• Title in ember accent display type: Your Cart.
• Sub-line in warm off-white body: dynamic item count — “3 items · 2 shipments” (example rendering).
• At the base, the standard trust chip strip: 24-hour UK dispatch · UK customer service · 1-year duelling warranty · 2,400+ five-star reviews.

2. Free gift band — unlocked state

Full-width band directly below the header. Triggered when order subtotal crosses a threshold (e.g. $350 for ARTSABERS). The mockup shows the UNLOCKED-BUT-NOT-YET-PICKED state so both the achievement AND the picker read together.

• Ember gradient background matching the shop archive’s in-grid marketing banner treatment.
• Left side: small gift icon + display copy — You’ve unlocked a free gift. Sub-line — “Choose one below. Ships with Shipment 1.”
• Right side: 3 gift-option tiles side-by-side. Each tile: small 60×60 image, item name, small “Select” ghost button. One tile shows a “SELECTED” state variant (ember tick + border) — so both the picker AND the picked state read from one mockup.
• Free gift options (real accessories from the ARTSABERS catalogue): Silver Lightsaber Coupler ($19.99), Grey Lightsaber Coupler ($19.99), Black Covertec Wheel Adapter ($19.99). Show the Silver Coupler as the selected one.

3. Main cart area — two-column split

Left column: line items grouped by shipment. This is the biggest single content block on the page. Each shipment is a bordered content-group (matching the MAS52 fieldset border pattern) with the shipment heading treated as an inset legend on the top border.

Shipment 1 group:

• Legend heading: Shipment 1 of 2 · sub-line right-aligned in the legend: Arriving 12–14 August · FREE in ember accent.
• Line items (horizontal row each): 100×100 product image left, main content middle (product name display type, variant meta line “Saber Core: Xenopixel V3 · Blade: Ember-orange”), right area (quantity stepper from MAS52, unit price + line total, small ember “In stock · Ships together” note below). Two lines of secondary actions below each row: Save for later and Remove as muted body-font links.
• Two saber items in Shipment 1:
  1. Carbon Strike Lightsaber — Xenopixel V3, ember-orange blade, qty 1, $459.99 — https://artsabers.com/wp-content/uploads/sites/10/2026/01/Carbon_Strike_1-768x768.jpg
  2. Starkiller SE Lightsaber — Proffie 2.2, red blade, qty 1, $299.99 — https://artsabers.com/wp-content/uploads/sites/10/2025/12/Starkiller1_SE_1-768x768.jpg
• Delivery upgrade options row within Shipment 1 (radio group from MAS52):
  • (selected) Standard — arrives 12–14 August — FREE
  • Express — arrives 9–10 August — $14.99
  • Weekend delivery — arrives Saturday 10 August — $19.99

Shipment 2 group:

• Legend heading: Shipment 2 of 2 · sub-line: Arriving 25 August – 2 September · FREE.
• One saber item:
  1. Mace Windu SE Duelling Lightsaber — S-RGB, purple blade, qty 1, $164.99 — https://artsabers.com/wp-content/uploads/sites/10/2025/12/Mace_Windu_SE_1-768x768.jpg
• Delivery upgrade options row (same shape as Shipment 1).
• Small explainer body text below the delivery upgrades: “Ships from our workshop after final assembly + testing. Each hilt is hand-tested before dispatch.”

Right column: sticky order summary. Sits at the top of the right column and follows scroll on desktop. Should be a bordered content-group (MAS52 pattern) with generous internal padding.

Structure inside the summary:

• Legend heading: Order Summary.
• Line item totals block:
  • Subtotal: $924.97
  • Shipment 1 shipping: FREE
  • Shipment 2 shipping: FREE
  • Discount (SAVE10 applied): -$92.50
  • Gift wrap + message: $4.99 (small “Edit” link inline)
  • Tax: Calculated at checkout
• Hairline separator
• Estimated total row: Estimated total (label) · $837.46 (large ember display value)
• Loyalty points earned line (small muted): +240 points on this order
• Hairline separator
• Coupon input — collapsed state visible: Have a code? ghost button/toggle. Also render the EXPANDED state below the collapsed one so both patterns read from one mockup: labelled input from MAS52 with an “Apply” secondary button, then below it an “Applied” state chip showing SAVE10 · -$92.50 · Remove.
• Loyalty redemption toggle: You have 2,400 points ($24.00 value) — checkbox toggle “Apply to this order” (shown in the OFF state, small ember amount preview if turned on).
• Gift wrap + message toggle: checkbox toggle “Add gift wrap + message ($4.99)” in the ON state. When ON, an expanded textarea appears below with placeholder “Optional gift message · appears on your gift card” — render the expanded state.
• Primary CTA: Secure Checkout → — ember gradient primary button, full-width in the summary column.
• Below the CTA: trust badges row — payment method icons (Visa · Mastercard · Amex · Apple Pay · Google Pay · Klarna), secure checkout padlock glyph + label “SSL secure checkout”, 30-day returns badge glyph + label.
• Below the trust row: small muted line — “Free returns within 30 days. Duty and taxes calculated at checkout. Shipping quoted in your local currency at checkout.”

4. Cross-sell strip — “Complete your setup”

Full-width section below the main cart area. Compact.

• Section heading in display type: Complete your setup. Sub-line body: “Accessories other duellists picked up with theirs.” Small “View all accessories →” ember link right-aligned in the header row.
• Four accessory tiles in a horizontal row (4-across). Each tile: 200×200 product image, compact spec (name in display type, category tag muted, price in ember), and a small ghost Add to cart + button.
• Four real accessories:
  1. RGB Triple Lightsaber Tiered Stand — $99.99 — https://artsabers.com/wp-content/uploads/sites/10/2026/05/GD_7767-拷贝-768x768.jpg
  2. Type-C S-RGB Charging Kit — $84.99 — https://artsabers.com/wp-content/uploads/sites/10/2025/11/Type-C-S-RGB-Kit-768x768.jpg
  3. Type-C Proffie 2.2 Charging Kit — $109.99 — https://artsabers.com/wp-content/uploads/sites/10/2025/11/Type-C-Proffie-2.2-PRO-Kit-768x768.jpg
  4. Silver Covertec Wheel Adapter — $19.99 — https://nerdworks.uk/wp-content/uploads/2025/08/Silver-Covertec-Wheel-Adapter-for-S-RGB-SNV4-PRO-and-Proffie-2.2-Lightsabers-768x768.jpg

5. Empty cart state — NOT rendered inline

Document the empty-cart state in the brief but do NOT render it in the main mockup (the mockup shows the populated state). If space allows at the very bottom of the mockup, render a small “Empty cart state preview” callout showing:

• Kyber Hull hull-plate panel treatment with ember hairline top border
• Copy: Your cart is empty.
• Sub-copy: “Every saber earns its place. Explore the collection.”
• Primary CTA in ember: Shop Sabers
• Optionally: 3 “Recently viewed” tiles below to seed re-engagement

6. Post-cart reinforcement band

Same treatment as the shop archive (MAS51): plain carbon ground + ember hairline at the top + single-line dot-separated brand copy — Every hilt hand-tested in-house · Global 7–10 day delivery · 2,400+ five-star reviews.

7. Site footer

Standard site chrome. Not brief content.

What this template deliberately does NOT include

• No editorial hero — cart is functional.
• No SEO body-copy section — buyers here have already found what they want.
• No sticky floating shop-launcher — end of funnel.
• No CSS-authored placeholder saber silhouettes — use real product URLs.

Kyber Hull styling notes

• Bordered content-groups (shipment groups, order summary, coupon expanded state, gift wrap expanded, cross-sell tiles) use the MAS52 hairline border pattern — 1px hull-edge border, generous internal padding, legend heading sitting on the top border.
• Line item rows within a shipment group are plain (no border), separated from each other by a subtle 1px hairline in rgba(250,250,250,0.06).
• Ember accent used for: primary CTA, prices, “FREE” labels on shipping, selected radio option, applied coupon chip, ember hairlines on section boundaries.
• Muted body font for secondary actions (Save for later, Remove, Edit).
• Zero border-radius everywhere.

Copy locks (verbatim)

• Free gift band: You’ve unlocked a free gift. · sub-line Choose one below. Ships with Shipment 1.
• Trust chip strip (header base): 24-hour UK dispatch · UK customer service · 1-year duelling warranty · 2,400+ five-star reviews
• Post-cart reinforcement: Every hilt hand-tested in-house · Global 7–10 day delivery · 2,400+ five-star reviews
• Empty cart title: Your cart is empty.
• Order summary tax line: Calculated at checkout
• Primary CTA: Secure Checkout →

Flag for operator confirmation

• Free gift threshold amount ($350 assumed from the shop archive marketing banner) — confirm value or dynamic behaviour.
• Delivery upgrade prices ($14.99 express, $19.99 weekend) — placeholder numbers for the mockup.
• Loyalty points ratio (240 earned, 2,400 = $24 redeemable) — placeholder.
• Gift wrap price ($4.99) — placeholder.
• The MAS52 –forge-red error token should be inherited in-mockup for any error states (e.g. coupon invalid).