← Back to Portfolio★ Featured Project
Shopify App — Published on App Store

Installments UX

A commercially published Shopify app rated 4.7 stars across 126 merchant reviews. Installments UX removes the single biggest friction point in MENA e-commerce — payment sticker shock — by surfacing Buy Now Pay Later breakdowns directly inside checkout and on product pages. The result: higher conversion rates, larger average order values, and a checkout experience that speaks both English and Arabic natively.

🛒 Shopify Checkout Extensibility 💰 BNPL — Buy Now Pay Later 🇮🇴 Kuwait (KWD) 🇪🇳 / 🇦🇷 Bilingual EN/AR 🔗 installments-ux.com ✅ Shopify App Store — Live
Installments UX — Shopify App Store listing
4.7★
App Store Rating
126
Merchant Reviews
$99
Per Year
3
BNPL Providers
2-4
Installment Splits
0%
Interest

Checkout Experience

Live preview of the installment widget as it appears in a Shopify checkout. Customers select their BNPL provider, choose a split, and see the exact per-payment amount with dates — all calculated in real time:

Installments UX — checkout widget demo

Supported BNPL Providers

Merchants choose their preferred BNPL provider from the admin dashboard. Each provider is configured with its own branding, colors, and logo — no code changes required:

Architecture

🛒

Checkout UI Extension

Renders directly inside the Shopify checkout after the payment method list. SVG-based pie-chart visualizations give customers an instant, intuitive grasp of their installment schedule — reducing hesitation at the moment of purchase.

ReactShopify UI ExtensionsSVG GenerationCheckout API Hooks
🎨

Theme App Extension

Product-page blocks that show the per-installment price before the customer even reaches checkout. Includes a marquee-style scrolling bar with BNPL provider logos. Configurable min/max amounts and default splits via theme settings.

LiquidTheme BlocksSnippetsCSS/JS Assets

Remix Admin App

Embedded Shopify admin dashboard that lets merchants configure everything — provider selection, payment method gating, eligibility rules, and branding — without writing a line of code. OAuth authentication, Prisma session storage, and webhook handlers under the hood.

RemixPrismaPolarisApp BridgeShopify API

Key Features

Split into 2, 3, or 4 Payments

Real-time installment calculator tied to the live cart total. Customers choose their preferred split and see the exact per-payment amount instantly — in KWD with 3-decimal fils precision.

Full English & Arabic with RTL

Native Arabic translation with Eastern Arabic numerals. RTL-aware SVG layout and right-to-left text flow. Language auto-detected from the Shopify checkout locale.

Min/Max Amount Limits

Merchant-configurable eligibility rules control when the widget appears. Amount validation (e.g., 10-2000 KWD), currency gating, and payment method filtering keep the UX clean and compliant.

Marquee Scrolling Bar

A theme-level scrolling banner that cycles through BNPL provider logos on the storefront. Builds buyer confidence by surfacing trusted payment brands before checkout.

Payment Schedule Display

Auto-generated monthly schedule with exact dates. "Today" label for the first payment. Proper month-end handling ensures no surprises for the customer.

Payment Method Control

Merchants toggle exactly which BNPL providers are active and configure branding per provider — Deema, Tabby, Tamara, or custom — all from the admin dashboard, no code required.

Tech Stack

Frontend

RemixReactTypeScriptPolarisVite

Extensions

Shopify UI Extensions ReactCheckout APILiquidTheme App Extension

Backend

PrismaSQLiteShopify App RemixApp BridgeGraphQL Admin API