Custom Shopify Plus App for 3D Previews and 300+ Variants – Fine Art Canvas

To bypass Shopify’s 99-variant limit of 2024–2025, WebDesk Solution built a standalone Variant Engine hosted on AWS, decoupling variant logic from Shopify’s native structure. Each product’s possible configurations (size, frame type, finish, material) were stored in a JSON schema within a custom metafield. When FAC’s merchandising team added or updated variants, the engine generated a hierarchical mapping: concatenated keys representing every combination along with its own SKU, price, and inventory level. Using Shopify’s Storefront API, the app injected an invisible “proxy product” that encapsulated all 300+ combinations without bloating Shopify’s variant table. This approach ensured each combination maintained a unique SKU, price, and stock count in our external database, yet appeared as a single product in Shopify. Administrators could now manage unlimited variants without UI clutter, maintain accurate inventory tracking, and apply promotional logic at the variant level. This Custom Variant Engine laid the foundation for all subsequent features.

Key deliverables:

• Standalone engine on AWS: variant logic was decoupled from Shopify’s native structure and hosted separately on AWS.
• JSON schema in a metafield: each product’s configurations (size, frame type, finish, material) were stored as a JSON schema in a custom metafield.
• Hierarchical mapping: when merchandisers changed variants, the engine generated concatenated keys for every combination, each with its own SKU, price, and inventory level.
• Invisible proxy product: the app injected one proxy product that encapsulated all 300+ combinations without bloating Shopify’s variant table.
• Result: every combination kept a unique SKU, price, and stock count, enabling accurate inventory tracking and variant-level promotions.

To create a frictionless preview experience, we built a Live Preview Generator module in React that communicates with our AWS-hosted rendering service. As a shopper selects “24×36 Framed Canvas – Glossy Black,” the front end sends a lightweight AJAX request containing the chosen attributes. The rendering service returns pre-buffered image URLs-optimized for web delivery-accompanied by file metadata. Using a smart preloading strategy, we ensured images were fetched in the background based on likely next choices (e.g., common sizes or popular frame colors), so when a user clicked, the image swap was instantaneous. The React component leveraged CSS transitions to fade between visuals, eliminating flicker. To further optimize, we served WebP format images with multiple resolution variants (low-res for mobile, high-res for desktop), automatically selected via the browser’s device hints. The result was a zero-delay swapping engine that delivered a premium, interactive experience-driving up engagement and checkout confidence.

We built this as a specialized rendering pipeline outside Shopify’s standard theming framework.

Key deliverables:

• React preview module: a Live Preview Generator in React sent the shopper’s chosen attributes to an AWS-hosted rendering service in a lightweight AJAX request.
• Pre-buffered images: the rendering service returned web-optimized image URLs together with file metadata.
• Background preloading: images for likely next choices, such as common sizes or popular frame colors, were fetched before the shopper clicked.
• WebP at several resolutions: low-resolution files served mobile and high-resolution files served desktop, selected through the browser’s device hints.
• Result: image swaps became instantaneous, and CSS transitions faded between visuals without flicker.

For an immersive “art in context” experience, we created a comprehensive Image Bank of lifestyle settings-living rooms, offices, bedrooms-tagged by lighting, wall color, and furniture style. Each variant combination was mapped to a subset of these tags. When a user selected “Framed Canvas – Glossy White,” our app evaluated the variant’s tags (e.g., “white frame,” “modern art”), fetched relevant lifestyle images via a GraphQL query, and overlaid the 3D art canvas into the scene. This was achieved through HTML5 Canvas compositing on the front end: our React component stripped the alpha channel from the product image and placed it atop the chosen background in real time. To address performance, we implemented lazy loading and progressive JPEGs for lifestyle shots, delivering a crisp visual without jamming the network. Shoppers could now see “their” art hanging above a mid-century sofa or in a minimalist office-extending beyond standard eCommerce and transforming inspiration into reality.

Key deliverables:

• Lifestyle Image Bank: living rooms, offices, and bedrooms were tagged by lighting, wall color, and furniture style.
• Variant-to-tag mapping: each variant combination mapped to a subset of tags, and a GraphQL query fetched the matching lifestyle images.
• Canvas compositing: HTML5 Canvas placed the product art on the chosen background on the front end.
• Performance handling: lazy loading and progressive JPEGs kept lifestyle shots crisp without jamming the network.
• Result: shoppers could see their chosen art hanging in a room setting as they selected options.

To highlight material quality, we built a Corner Shot Preview System that loaded micro-rendered images at 300 DPI resolution for each frame type and finish. During catalog ingestion, the app processed corner-shot assets, assigning them unique metafield references keyed to “frame-type:finish:angle.” On the front end, a React hook listened for changes in the selected frame and finish attributes, then fetched the appropriate corner-shot URL from our AWS S3 bucket. We leveraged Next-Gen image components that automatically selected the optimal resolution based on viewport size-ensuring desktop users saw ultra-sharp details and mobile users saw lighter files. The corner shot appeared in sync with the main 3D preview and lifestyle render, thanks to a shared state context in Redux. This cohesive synchronization meant shoppers never saw mismatched visuals; they could inspect the canvas texture, frame bevel, and mat depth in a single, coordinated preview session.

Key deliverables:

• Micro-rendered corner shots: images at 300 DPI resolution were prepared for each frame type and finish.
• Metafield references: during catalog ingestion, each corner-shot asset received a unique metafield reference keyed to “frame-type:finish:angle.”
• React hook and S3: a React hook listened for frame and finish changes and fetched the matching URL from an AWS S3 bucket.
• Responsive images: Next-Gen image components chose the resolution by viewport, giving desktop users sharp detail and mobile users lighter files.
• Result: a shared Redux state kept the corner shot, main preview, and lifestyle render in sync, so shoppers never saw mismatched visuals.

We addressed FAC’s need for product-type-specific videos by extending Shopify’s metafields to store video metadata (video ID, file type, resolution, and associated variant tags). Administrators uploaded videos via our app’s custom backend interface, mapping each file to relevant tags-“Framed Canvas – Matte Black” or “Floating Frame – Gold.” On the product page, our React player component queried Shopify’s Storefront API for these metafields and injected only the matching video. If a shopper selected a variant with no video, the player component replaced itself with a placeholder or called the next available video in the queue. Videos were served through a secure CDN, auto-playback was disabled by default (to avoid page jank), and lazy loading ensured only one high-resolution video loaded at a time. This system empowered FAC to update or swap videos without touching Shopify’s theme-maintaining a clean UI and providing relevant, rich media content exactly when it mattered.

Our player component also handled dynamic video insertion and cleanup on the front end.

Key deliverables:

• Video metadata in metafields: Shopify metafields stored each video’s ID, file type, resolution, and associated variant tags.
• Admin mapping: administrators uploaded videos through the app’s custom backend interface and mapped each file to tags such as “Framed Canvas – Matte Black.”
• Matching player: a React player read the metafields and injected only the matching video, using a placeholder or the next video when none matched.
• Loading rules: videos came through a secure CDN, auto-playback was off by default, and lazy loading kept one high-resolution video loading at a time.
• Result: FAC could update or swap videos without touching Shopify’s theme.

To eliminate manual discount headaches, we built a Rule Engine within our AWS backend that stored discount definitions linked to SKU combinations. Each rule specified discount type (percentage or fixed amount), eligibility criteria (e.g., size > 30″ and frame type = “Glossy White”), and date-range constraints. When a shopper selected a variant, the front end emitted an event to our Rule Engine API, which returned any applicable discount. The React UI then recalculated the product price on the fly, presenting the discounted total alongside the savings amount in a highlighted callout. Because the discount logic resided entirely in our external app, FAC’s marketing team could add or modify promotions via a simple admin dashboard-no developer help required. This eliminated pricing errors, prevented confusion at checkout, and supported a dynamic promotional strategy that could evolve with seasonal sales or clearance events.

Our discount definitions sat in a secure database of criteria mapped to SKUs.

Key deliverables:

• Rule Engine on AWS: discount definitions were stored in the AWS backend and linked to SKU combinations.
• Rule specification: each rule set a discount type (percentage or fixed amount), eligibility criteria, and date-range constraints.
• Real-time lookup: when a shopper selected a variant, the front end sent an event to the Rule Engine API, which returned any applicable discount.
• Price recalculation: the React UI recalculated the price on the fly and showed the discounted total beside the savings amount in a highlighted callout.
• Result: FAC’s marketing team could add or modify promotions through an admin dashboard with no developer help.