Skate Attributes Orbit Renderer

Built a fully autonomous image-generation pipeline that turns Shopify product tags into a polished, branded infographic at gallery position 2 — boosting impression rate from below-the-fold (~30%) to above-the-fold (~95%) on every PDP. The renderer reads up to five attribute tags per product (Comfort, Trinity Mount, Anti-Rocker, Carbon Boot, etc.), composes them around the featured image inside an 800x800 SVG with foreignObject HTML cards, rasterizes via Puppeteer + sharp, and uploads through the Shopify Admin REST API with an alt-text signature so re-runs are idempotent and self-healing against duplicate images. A products/update webhook with HMAC-verified Shopify-signed payloads keeps every product image in sync the moment a tag is added or removed — typical end-to-end latency under five seconds. Includes a one-shot backfill CLI that processed 83 products in a single pass with zero duplicates, a Liquid theme snippet that auto-hides itself when the JPG version exists in the gallery, and a mobile lightbox CSS constraint that keeps the image inside the viewport so the close button stays reachable. The service runs on Railway with a Linux + Chromium + Noto Color Emoji Docker image so the card icons render reliably across products.