Joffre Ordinola Shopify Developer & E-commerce Specialist
|

My Portfolio

I'm Joffre.

Shopify Developer & E-commerce Specialist

Shopify Developer and E-commerce Specialist with 5+ years of end-to-end experience across theme development, store operations, and custom feature engineering. I build scalable, in-house solutions using Liquid, JavaScript, and Shopify's native APIs — reducing third-party app dependency while solving complex business problems. My background in store operations means I don't just build features, I understand why they matter to the business.

A Few Things I've Built

Liquid Metafields Block-first Theme Migration

Theme Migration

Issue - Multiple clients were running outdated or over-extended themes - paying monthly for apps replicating native features, managing template sprawl, or locked into legacy account systems.

Solution - End-to-end migrations: theme research, full content and section rebuilds, metafield-driven template consolidation, and custom section development - leaving every client on a cleaner, cheaper, actively maintained stack.

How it works: Each migration starts with a theme audit to identify the right target based on the client's feature needs. From there: full rebuild of homepage, collections, product pages, and landing pages — native sections where possible, custom builds where nothing available fits. Metafields consolidate template sprawl, reducing dozens of one-off templates down to a handful of flexible ones. On block-first themes like Horizon and Rise, existing metafield logic is ported and adapted to the new architecture.

Metaobjects Klaviyo GA4 Custom JS

Product Finder

Issue - With a highly technical product catalog, customers were overwhelmed and unsure which gear suited their skill level, leading to high bounce rates and pre-sale support tickets.

Solution - A 4-step discovery quiz that recommends a full equipment setup tailored to the customer's profile. The recommendation logic is powered by Shopify Metaobjects, letting the client update rules via CSV without touching code. Integrated with Klaviyo for lead capture and GA4 for full-funnel analytics.

How it works: The quiz logic is driven by Shopify Metaobjects — the client manages recommendation rules via CSV without touching code. Each step captures a profile attribute; at completion, a full 4-product setup is returned. Klaviyo stores each customer's selections as custom properties for personalized post-quiz email flows. GA4 event tracking monitors every step and drop-off point in the funnel.

Cloudflare Worker GraphQL Custom JS

Regional Inventory Filter

Issue - Customers in the EU were accidentally purchasing US-only stock, leading to high refund rates and fulfillment errors across regions.

Solution - A Cloudflare Worker detects the user's region via IP headers and queries the Shopify GraphQL API to disable swatches and the CTA for any variant not stocked in the nearest warehouse.

How it works: A Cloudflare Worker intercepts every storefront request, reads the IP-based market header, and queries the Shopify Admin GraphQL API for variant-level inventory at each regional warehouse location ID. The result is passed to a custom JavaScript asset on the frontend, which disables color swatches and the Add to Cart button for any variant unavailable in the user's region — all before a single click.

Shopify CLI App Extensions Metaobjects

B2B Wholesaler Hub

Issue - Standard Shopify account pages are built for retail. Wholesale partners needed a dedicated hub for bulk reordering, exclusive assets, and specialized support.

Solution - A two-tiered portal: native UI extensions for dynamic B2B badges and product recommendations, plus a custom dashboard that intercepts the account flow for verified partners and redirects unauthorized users.

How it works: The Shopify CLI extensions render only for customers associated with a Shopify Company (B2B). They inject a Dynamic Status Badge fed by customer metafields and a product recommendation grid powered by Metaobjects directly into the native account page. The custom dashboard is a separate Liquid template: a header intercept script checks whether the logged-in user holds a B2B tag and redirects them there automatically. A Liquid security check at the top of the dashboard redirects any unauthorized retail visitor back to the homepage.

Metafields Custom JS Custom Section

Cart AOV Optimizer

Issue - The cart drawer was a dead end - customers could see their items and check out, but nothing encouraged higher spend or communicated how close they were to a free shipping threshold.

Solution - A real-time free shipping progress bar combined with a metafield-driven upsell widget that intelligently hides products already in the cart - both managed entirely from the Shopify editor without touching code.

How it works: The free shipping bar reads the current cart total in real time and calculates the remaining gap to the configured threshold — updating live as items are added or removed. The upsell widget pulls recommended products from a metafield on the cart page, then uses JavaScript to filter out any products already in the cart before rendering — so the same item is never suggested twice. Everything is configurable directly from the Shopify Theme Editor.

Custom Template Liquid

Coupon Hub

Issue - Deal-seeking traffic was leaving the store to find promo codes on third-party sites, reducing the brand's control over the buying experience.

Solution - A dedicated Promo Center landing page that replicates the coupon site experience natively, keeping high-intent traffic on the brand's own domain.

How it works: Built as a dedicated Liquid page template with custom sections. Each promo card displays the discount code, expiry, and a one-click reveal-and-copy interaction. The page is managed entirely from the Shopify admin — merchants add or update promotions without developer involvement. Instead of leaking high-intent traffic to third-party coupon sites, the entire deal-seeking experience happens on the brand's own domain.

Custom Section Web Component Liquid

Build Your Own Bundle

Issue - Products that naturally pair together had no bundling mechanism, leaving AOV on the table and forcing customers through multiple product pages.

Solution - A native Liquid section with a custom web component. Customers pick from a product grid while a sticky sidebar tracks selections in real time - the submit button only unlocks when the exact bundle size is met.

How it works: Built as a native Liquid section with a custom web component. The left panel renders products from a collection or curated list, each with a variant picker driven by available variants. The right sidebar pre-renders empty slots and fills them in real time via JavaScript — populating each slot with the selected product's image, title, variant label, and price. The 'Add all to cart' button stays disabled until the exact configured bundle count is met. Bundle size, columns, and color scheme are all manageable from the Theme Editor.

PostHog A/B Testing Metafields

Price Testing

Issue - The brand needed to find the optimal price point for a hero product without confusing returning customers or manually changing global store settings.

Solution - A PostHog-powered A/B framework that reads test prices from metafields, persists assignments via localStorage and cookies, and injects matching discount codes at checkout to honor the tested price.

How it works: PostHog manages variant assignment and feature flags. On page load, JavaScript reads test prices from product metafields and updates the displayed price in the UI. localStorage and a cookie both store the assigned variant so returning visitors always see the same price. When the customer reaches checkout, a listener automatically injects the corresponding discount code into the checkout URL — ensuring the tested price is honored without any manual intervention.

Custom Section Custom JS Liquid

UGC Video Grid

Issue - The brand needed to showcase creator content on their landing pages but relied on an expensive third-party video subscription app to handle it.

Solution - A native section that auto-detects video aspect ratios (landscape/vertical) and adjusts the grid layout accordingly - replacing the paid app with a one-time custom build.

How it works: Each video card uses JavaScript to detect the aspect ratio of the uploaded file. Vertical videos (9:16) render in a portrait column; landscape videos (16:9) span a wider cell. A mixed creator feed displays cleanly without manual tagging or layout configuration. The section replaces a paid video subscription app with a one-time native build — no recurring cost, no third-party dependency.