Work

Variant-Level Collection Merchandising Router

VariantCast

Show specific product variants in specific collections — without duplicating products or splitting inventory.

Role
Designer, engineer, operator
Stage
Pre-launch
Stack
Remix · TypeScript · React · Polaris · Prisma · PostgreSQL
VariantCast

What it does

VariantCast is a Shopify app that lets merchants on Basic through Advanced plans display specific product variants in specific collections — a feature locked behind Shopify Plus ($2,000/month). Uses Product Metafields (JSON) to store variant-to-collection mappings and an App Embed Block (<1KB JS) to dynamically render the correct variant thumbnail, price, and URL on the storefront.

Features a 3-layer webhook loop prevention system using Redis for idempotency, write-stamp tracking, and atomic processing locks. Built with a theme-agnostic DOM walker that works on all Online Store 2.0 themes with zero code edits.

Features

  1. 01 Variant-to-Collection Mapping Three-step Polaris UI: select a product, pick a variant, choose target collections. Maps are stored as JSON Metafields on the product for zero-latency storefront access.
  2. 02 App Embed DOM Swap A <1KB synchronous JavaScript snippet injects into the collection page <head>, swaps the product image, price, and URL on DOMContentLoaded. Theme-agnostic: works on all OS 2.0 themes.
  3. 03 3-Layer Webhook Loop Prevention Prevents infinite webhook loops via Redis-backed idempotency deduplication (24h TTL), write-stamp tracking (60s TTL), and field-level diffing. Atomic processing locks prevent race conditions.
  4. 04 Free + Pro Billing Free tier: 10 active mappings. Pro tier: $29/month, 14-day free trial, unlimited mappings. Uses Shopify's native recurring charge billing API.
  5. 05 Mapping Dashboard Full CRUD management with pagination, search, bulk delete, and per-mapping status. Product and collection browsers with variant-level detail and mapping badges.
  6. 06 Automatic Cache Updates Listens to products/update and collections/update webhooks to auto-refresh cached prices, images, and titles. Handles collection renames gracefully by re-keying all affected Metafields.
VariantCast — dashboard
VariantCast — dashboard

Built with

  • Remix
  • TypeScript
  • React
  • Polaris
  • Prisma
  • PostgreSQL
  • Redis (Upstash)
  • Shopify GraphQL API
  • Theme App Extensions
  • Sentry

Available for new work — 2026

Tell me what you want built.

Mohamed Elgohary — Cairo, Egypt LinkedIn GitHub Telegram