ProcureGlobal · Round 2A · Mobile-first

Product Detail Page — built once for web and React Native

Every interaction below uses a primitive that has a clean React Native equivalent — horizontal snap carousels become FlatList horizontal pagingEnabled, the sticky action bar becomes a SafeAreaView + absolute footer, the bottom sheet pattern (used for variants and quote requests) maps to @gorhom/bottom-sheet. Tokens are inherited verbatim from brand-system-v1.html.

round 2A surface PDP platform web · iOS · Android touch min 48px brand tokens v1.0 locked
9:41
Electronics · TVs · Hisense 55"
Flash Sale · 02h 14m 2-year warranty
1 / 4
Hisense In stock · 12 units

Hisense 55" 4K UHD Smart TV — A6 Series with Dolby Vision

★★★★★ 4.7 · 248 reviews · 1.2k sold
GHS 6,499
GHS 7,899 Save 18%
Presentment: USD 425.20 FX 1 USD = 15.28 GHS
Inclusive of VAT · NHIL · GETFund · COVID levy
Screen size 55"
Bundle Bundle guide
Quantity Bulk pricing from 5 units
1
Free Accra delivery ›
Standard 1–3 days · Express next-day +GHS 80
Store pickup · East Legon ›
Free · Ready in 2 hours
7-day returns ›
Unopened items · Refund to original payment method

The Hisense A6 Series brings 4K UHD picture quality and Dolby Vision HDR to a clean, slim panel that fits any room. The Vidaa Smart OS gives you Netflix, YouTube, and DSTV Now out of the box, and built-in Bluetooth lets you pair your phone in seconds.

  • 4K UHD resolution with Dolby Vision & HDR10+
  • Vidaa Smart OS with Netflix, YouTube, DSTV Now pre-installed
  • Built-in Wi-Fi 5, Bluetooth 5.0, 3× HDMI 2.1, 2× USB
  • Game Mode Plus with auto low-latency
Read more

Key specs See all

Resolution3840 × 2160 (4K UHD)
Refresh rate60 Hz
HDRDolby Vision · HDR10+
Smart OSVidaa U6
Ports3× HDMI · 2× USB · LAN
Power120 W · 220V
For business

Need 5+ units? Request a B2B quote

Volume pricing, NET 30 terms, and Purchase Order workflows for registered businesses.

Customers also bought See all ›

♡
Hisense 50" 4K Smart TV A6
GHS 5,399
♡
JBL Bar 2.1 Soundbar with Sub
GHS 3,899
♡
Universal Wall Mount 32–65"
GHS 249
♡
Samsung 65" Crystal UHD AU8000
GHS 9,499
⚡ Paystack secured MoMo · Card · Bank
🛡 2-year warranty Local service centres
↩ 7-day returns Unopened items
iPhone 15 · 390 × 844 · WebKit

Design rationale

Notes on why each PDP element is shaped the way it is, with the React Native equivalent next to each web pattern. Same flow ships on three platforms with no awkward translations.

Layout

  • Single-column, top-to-bottom. Every section stacks. No multi-column desktop variant — the desktop layout is the same column centred in a wider canvas with optional sticky right-rail (price + CTA) on screens ≥ 1024px. Avoids designs that don't survive the reflow to native.
  • Sticky topbar + sticky action bar. Both pin to the viewport edges; everything between scrolls. Maps cleanly to RN SafeAreaView with a top header and an absolute-positioned footer.
  • 48px minimum touch target on every interactive element — Android Material 3 recommendation, comfortably above iOS's 44pt floor. Buttons, chips, qty stepper, icon buttons all hit this.

Gallery

  • Horizontal snap carousel with scroll-snap on web (`scroll-snap-type: x mandatory`). On native that's FlatList horizontal pagingEnabled — same UX, same gesture.
  • Page indicator uses a pill counter and dot row, both standard cross-platform patterns. No zoom-on-hover; pinch-to-zoom on the slide handles native gesture parity.
  • Badges absolute-positioned over the gallery, top-left. Flash sale countdown is live data — wire to `useEffect` interval on web, `setInterval` cleaned up in `useEffect` on RN.

Variant selectors

  • Chip rows, not dropdowns. Dropdowns are a desktop pattern that translates poorly to native. Chips are tappable, scannable, and show secondary info (price delta or stock) inline.
  • Disabled chips remain visible with strikethrough — Ghanaian shoppers see what's out of stock at a glance instead of having to expand a menu to find it missing.
  • Bundle row uses the same chip primitive — single source of truth in the design system.

Pricing

  • GHS primary, USD presentment secondary per PRD §6.6. FX rate shown explicitly — diaspora trust signal.
  • "Save 18%" coral pill uses the brand's urgency accent. Coral is reserved for time-bounded / scarcity signals — no overuse.
  • Tax inclusivity line per PRD §7.4 consumer-protection requirement: all four levies (VAT, NHIL, GETFund, COVID) shown as part of the displayed price.

B2B prompt inside a B2C page

  • Dark midnight card with aqua CTA visually separates the B2B entry from the consumer flow but keeps it on the same page — discoverable without being intrusive.
  • Clicking "Request quote" opens a bottom sheet (RN @gorhom/bottom-sheet; web uses a translateY drawer) with the quote form. No route change on mobile.

Action bar

  • Wishlist icon button + Add to cart primary. Wishlist is the secondary affordance — single icon-only target hugs the left edge, primary CTA expands to fill. The price echo in the CTA tail removes the "did I select the right variant" question.
  • Backdrop-blur on the bar so it floats over scrolling content without a hard line. RN equivalent: expo-blur's `BlurView` with `tint="default"`.

Web ↔ React Native primitive map

One component vocabulary, two render targets. Tokens live once (a JSON or TypeScript file). Tailwind on web consumes them through its config; Expo's theme module consumes the same JSON at runtime. Shape props (radius, spacing, color) stay identical across platforms.
Horizontal snap carouselFlatList horizontal · pagingEnabled
Chip row (variants)Pressable + flex row
Quantity stepperPressable + Animated.View
Tabs (Description / Specs)Material Top Tabs (react-navigation)
Spec rows (key / value list)FlatList (data driven)
Sticky bottom action barAbsolute View + SafeAreaInsets.bottom
Quote request drawer@gorhom/bottom-sheet
Image with skeleton fallbackexpo-image (cachePolicy="memory-disk")

Open questions for Ekow

  • Currency switcher placement. Currently lives in the global topbar (per brand-system-v1 storefront preview). PDP shows current currency in the price block, no per-page switch. Confirm that's the model? Q-PDP-1
  • "Customers also bought" data source. Co-purchase model (real recommender) or category-based fallback for MVP? Currently designed for either — same surface. Q-PDP-2
  • Bundle pricing shown inline with the variant chips. Confirm this matches the catalogue data model — does PRD §9 already support bundle SKUs, or do we need to extend products → product_bundles? Q-PDP-3
  • Reviews moderation flow. Auto-publish vs staff approval? Affects whether the "Write a review" CTA is on the PDP itself or routes to a separate page. Q-PDP-4

What's next

  • Round 2B — Cart drawer (slide-from-right on web, bottom sheet on mobile) + dedicated cart page with line items, tax breakdown, shipping selector, checkout CTA.
  • Round 3 — Three-step checkout (address → shipping → payment), guest + authenticated flows. Customer account dashboard.
  • Round 4 — B2B quote flow (request, status timeline, accept/decline), admin shell, customer 360.
  • Round 5 — Native-specific patterns (per the v3.3 patch): tab bar navigation, native modals, share sheets, push-notification permission flows.