AI Prompt Marketplace
Magento 2 Platform
We built a Magento 2 marketplace for prompt engineers and AI creators , with independent seller storefronts, Stripe split payouts, instant digital file delivery, auto-generated collage thumbnails for image and video products, and a custom horizontal filter bar replacing Magento's default sidebar navigation.
Overview
The client needed a working marketplace where prompt engineers could open their own storefronts, upload image and video-based AI prompts, set their own prices, and receive payouts automatically , while buyers could browse by AI tool, filter by category and price, and receive purchased files immediately after checkout.
The platform was built on Magento 2, which handles physical goods well out of the box but required significant custom work to support digital delivery, multi-vendor payouts, and a media presentation that reflects the visual nature of AI-generated content. The project covered five distinct workstreams:
- Auto-generated image collage thumbnails , a custom Magento module that combines 3–4 product images into a single unified preview, triggered automatically on upload
- Video collage thumbnail generation , frame extraction from multiple product videos, combined into one static preview so buyers can assess video content from the product grid without hitting play
- Stripe payment integration , secure checkout with split payouts between the platform and individual sellers, fully wired into Magento's order lifecycle
- Horizontal layered navigation , the default Magento sidebar was replaced with a top filter bar carrying AI tool, category, price range, and ratings filters
- Figma-to-Magento UI build , the full design was completed in Figma first, then implemented as a custom mobile-first theme with CSS/LESS, responsive breakpoints, and touch-friendly interactions
All five workstreams were delivered together as a production-ready Magento 2 marketplace , with clean module architecture that doesn't touch Magento core and is ready to extend as the platform grows.
The Challenge
Magento 2 is built around physical products with single hero images, sidebar navigation, and standard checkout flows. Adapting it for a digital prompt marketplace required solving problems Magento doesn’t address out of the box , from how products look in the grid to how payments get split between platform and sellers.
How Products Looked in the Listing Grid
Prompts typically ship with 3–4 sample images or multiple video outputs. Magento’s default grid just picks the first image and shows it as a thumbnail , which tells buyers almost nothing about what a prompt actually produces:
- Products with 3–4 images showed one thumbnail , the other samples were invisible until the buyer opened the product page
- Video-based prompts had no preview at all , just a static image placeholder, with no indication of what the video outputs looked like
- The default grid layout was generic, with no visual hierarchy that reflects the creative and AI-generated nature of the products
- Magento's vertical sidebar pushed the product grid to roughly 75% page width , a poor fit for a media-heavy browse experience
- No filtering by AI tool (ChatGPT vs Midjourney vs DALL·E) , a basic requirement for this category of product
Mobile Experience and Getting Payments to Work
The client’s audience skews heavily toward mobile , creators list on the go, buyers discover products while scrolling. The platform had two hard blockers before it could go live:
- No payment gateway configured , the platform couldn’t accept real transactions from buyers or route payouts to individual sellers
- Checkout was not optimised for mobile , multi-step flow with small tap targets and no saved payment options
- Collage thumbnails broke on smaller viewports , images overlapped or overflowed the product card
- The navigation had no mobile-friendly collapse , filters and sidebar competed for screen space on phones
- No Figma design had been produced , the theme was assembled without a design system, leaving inconsistent spacing and typography across pages
The platform couldn't go live in its existing state , buyers had no reliable way to find relevant prompts, no payment method to complete a purchase, and no mobile experience worth returning to. Every gap was a conversion killer, and all of them needed to be solved before launch rather than patched later.
Our Solution
Each problem had a clear owner. Image presentation needed a custom module. Video previews needed a separate pipeline. Payments needed Stripe wired into Magento's order system. Navigation needed a layout overhaul. And mobile needed a proper design-first approach through Figma before any frontend code was written.
Product Image Collage Generator
When a seller uploads 3 or 4 product images, Magento picks the first one as the thumbnail and ignores the rest in the grid. We wrote a custom Magento module that watches for image uploads and automatically generates a collage thumbnail , arranging the images in a 2×2 grid layout and saving the result as the product's listing image. No manual work required from sellers.
Result: Sellers with multiple product images get a professional, consistent listing thumbnail automatically. Buyers see a richer preview from the grid , reducing the need to click into every product before deciding.
Video Thumbnail Collage System
Image collages were straightforward , video prompts were harder. For products with multiple video outputs, we built a separate module that pulls a frame from each uploaded video using FFmpeg and passes those frames through the same GD Library / Imagick collage pipeline. The result is a static collage thumbnail on the listing that represents all the videos, without needing playback to happen.
A single frame is pulled from each video at upload time using FFmpeg , no manual work needed from the seller
The extracted frames are stitched into a single collage image using GD Library / Imagick , same pipeline used for image collages
The collage image is saved as the product thumbnail and shown on the listing grid , buyers can assess video content at a glance
Thumbnails displayed at full responsive quality across all device sizes, including product category and search result pages
Result: Buyers can judge video-based prompts from the product grid without opening the page. Scroll-and-buy behaviour is faster , especially on mobile where opening each product on a slow connection is a real friction point.
Stripe Payment Integration
Stripe was integrated as the payment processor , handling card checkout, split payouts between the platform and individual sellers, and tying payment confirmation back into Magento's order status system so orders only progress when a payment actually succeeds.
- Card payments accepted on checkout , Stripe handles PCI compliance so no card data touches the Magento server
- Split payouts configured between the platform operator and each selling vendor , Stripe Marketplace routes the correct share to each party automatically
- Magento order status wired directly to Stripe payment events , orders move to processing only when Stripe confirms a successful charge, not before
- Payment failures handled explicitly , buyer is shown a clear error and held at checkout rather than landing on a broken order confirmation
- Minimal checkout UI , Stripe Elements embedded directly in the checkout page, no redirect to a third-party payment domain
Result: The platform can accept real payments and route them
correctly from day one. Buyers get instant access to their purchased files; sellers receive
their share automatically without the platform operator manually processing payouts.
Stripe
Documentation
Horizontal Layered Navigation
Magento's default layered navigation is a vertical sidebar that pushes the product grid into a narrow column. For a media-heavy prompt marketplace, that layout wastes too much space. We replaced the sidebar entirely with a filter bar that sits horizontally above the product grid, keeping the full page width available for product cards.
- Magento’s native SEO-friendly URL generation for filtered pages is fully preserved , no custom URL rewrites needed
- The full product grid width is now available , more cards visible per row on desktop and tablet without a sidebar competing for space
- On mobile, the filter bar collapses into a single-tap panel so it doesn’t eat the screen on smaller devices
Result: Buyers find relevant prompts in fewer clicks. The AI tool filter alone removes most of the irrelevant browse noise that a generic category structure can’t fix , and the grid gets the full page width to work with.
Figma-Based UI & Mobile Optimisation
Rather than picking up wherever design constraints allowed, we started the UI entirely in Figma before writing any frontend code. Every screen , product grid, product detail, checkout, mobile breakpoints , was fully designed and reviewed first. That meant development had exact specs to work from, and the client could see and approve the visual direction before a line of LESS was written.
- Full Figma design produced first , wireframes, component layouts, and high-fidelity mockups across desktop and mobile before any code was written
- Custom Magento theme built with CSS/LESS and mobile-first breakpoints matching the Figma specs exactly
- Collage thumbnails tested across viewport sizes , they reflow without overflow or distortion at every breakpoint
- Product grid columns adjust from 4 on desktop to 2 on tablet to 1 on mobile , collage images stay proportional throughout
- Checkout redesigned for one-thumb use , larger tap targets, fewer steps, payment input accessible without zooming
- All interactive elements tested for touch , no hover states relied on for core functionality
Result: The theme is consistent because it was designed to be consistent , not assembled piecemeal. Mobile users have the full purchase path available without pinching, zooming, or hitting dead-end interactions.
System Architecture
Six layers run independently without touching each other’s code. The Magento theme handles rendering, the collage modules run on image/video upload events, Stripe handles payment events, the multi-vendor layer manages seller permissions and storefront data, MySQL stores everything, and the CSS/LESS layer controls presentation at every viewport. Changes to any one layer don’t propagate to the others.
Architecture note: No Magento core files were modified , all customisations sit in separate modules and theme files. This means platform upgrades don’t risk overwriting any of the marketplace-specific functionality.
Results & Impact
Vendor Marketplace
Digital Delivery
Split Payouts
Collage Previews
Business Impact
Each seller has their own storefront on the platform , independent product listings, individual pricing, and their own order history. The platform operator can see and manage everything from the shared admin panel.
The purchased file is attached to the order as a downloadable link the moment Stripe confirms the payment. No admin approval step, no email delay, no waiting for a human to process the delivery.
Stripe splits each payment between the platform commission and the seller’s share automatically. The seller receives their payout; the platform retains the configured fee. No manual reconciliation needed.
Every product in the grid has a collage thumbnail , image-based prompts show a 2×2 grid of sample outputs; video-based prompts show extracted frames. The presentation is consistent regardless of what each seller uploaded or how they named their files.
The AI tool filter is the first control buyers reach for , filtering by ChatGPT, Midjourney, DALL·E, or Stable Diffusion narrows the catalogue immediately. Category, price, and ratings filters sit alongside it in the same horizontal bar, and Magento’s SEO-friendly URL parameters are generated cleanly for every active filter combination.
Designed in Figma at every breakpoint before development started, then built as a custom Magento theme. Touch targets are large enough to use without zooming, the product grid reflows from 4 columns on desktop down to 1 on mobile, and checkout fits on a phone screen without horizontal scrolling.
ChatGPT, Midjourney, DALL·E, and Stable Diffusion each have their own category and filter value. Buyers can browse entirely within one AI tool’s ecosystem or compare prompts across tools side by side.
All custom work lives in separate Magento modules , the collage generators, navigation overrides, and multi-vendor logic are each self-contained. Adding new AI tool categories, new product types, or new vendor tiers is a configuration or module change, not a rebuild.
Technology Stack
Final Outcome
Before
- Products with 3–4 sample images showed only the first image as the grid thumbnail , the full output range was invisible until buyers clicked into the product
- Video prompts showed a static placeholder , buyers had no way to judge video output quality from the product grid
- Vertical sidebar navigation took up 25% of page width and offered no AI tool filtering
- No mobile design , layouts broke on phones, touch targets were too small, and checkout required zooming on small screens
- No payment gateway , the platform could not accept or route real transactions
- No mobile design , layouts broke on phones, checkout required zooming, no touch-optimised interactions anywhere on the platform
After
- Every product in the grid now shows a collage thumbnail , image prompts display a 2×2 preview of all sample outputs; video prompts show extracted frames from each video
- Horizontal filter bar across the top of the product grid with AI tool, category, price, and ratings filters , full page width available for product cards
- Figma-designed theme deployed , consistent UI across all pages, responsive from 320px to 1440px, touch-optimised throughout
- Stripe live on production , buyers pay by card, sellers receive their split payout automatically, digital files delivered immediately on payment confirmation
- Multi-vendor storefronts active , each seller manages their own listings and pricing independently from the shared platform
This platform demonstrates how Magento 2 can be adapted to power a modern digital marketplace, tailored specifically for AI products. By combining custom media handling, improved navigation, Stripe payment integration, and a mobile-first Figma-designed theme, the solution delivers a seamless experience for both creators and buyers , with a scalable, future-ready foundation built for growth in the AI-driven digital economy.
Have a Magento 2 Project That Needs Custom Development?
We build on Magento 2 when the project needs something the platform doesn’t do by default , custom modules, multi-vendor setups, payment integrations, media pipelines, or theme builds from Figma. If you have a specific problem to solve, we’re set up to scope and build it.
Start a ConversationFrequently Asked Questions
An AI prompt marketplace is a platform where creators list and sell text prompts written for specific AI tools , ChatGPT, Midjourney, DALL·E, Stable Diffusion, and others. Buyers purchase a prompt as a digital file (text or a structured template) and use it directly in the relevant AI tool to generate output. The marketplace model lets independent creators monetise their prompt engineering work, while buyers get a tested, ready-to-use starting point instead of writing prompts from scratch.
Yes, with custom module development. Magento 2’s core is designed around physical goods ,
things like shipping, weight, and inventory. Digital delivery, split payouts, and
multi-vendor storefront management need to be added through custom modules and
third-party extensions. The platform’s modular structure makes this feasible without
modifying core files, which means marketplaces built this way can still receive Magento
security and platform updates without risk of overwriting custom work.
Adobe Commerce Developer Documentation
Stripe handles the full payment lifecycle and has mature support for marketplace routing
through Stripe Connect , where a single buyer payment gets split automatically between
the platform operator and the seller. It integrates cleanly with Magento through its
API, supports card payments from all major issuers, and handles failure states and
confirmations with enough detail to wire into Magento’s native order status system. For
a digital marketplace taking real money, Stripe also removes the need to handle or store
card data directly, reducing compliance scope.
Stripe Documentation
Layered navigation in Magento is the filter system that lets buyers narrow product listings by attributes , category, price, ratings, custom fields like AI tool type. By default it renders as a vertical sidebar panel on the left side of the category page. The sidebar typically takes up around a quarter of the page width, which reduces the space available for the product grid. Replacing it with a horizontal filter bar across the top of the grid reclaims that space and keeps all filter controls visible and accessible without a persistent left column. Magento’s underlying URL generation for filtered states is unchanged, so SEO performance is not affected.
Most digital marketplaces see the majority of their traffic from phones. If the product grid is hard to scroll, filters are too small to tap, or checkout requires zooming in on a payment form, a significant share of potential buyers will drop off before completing a purchase. Mobile-first design means designing for the phone screen first and scaling up to desktop, rather than building for desktop and trying to compress it down later. For this marketplace, mobile-first also affected how collage thumbnails were sized, how the filter bar collapsed, and how checkout input fields behaved on smaller viewports.