Shopify Website Redesign & Custom Product Template Development

WebDesk Solution developed a bespoke “Build Your Own Mezuzah” template leveraging Shopify product options for base attributes—Size, Style, Collection—and meta fields for extended parameters like Add Name, Name Color, Glass Transparency, Base Color, Add Shine, and Shine Color. The default page load sets Size to “Mini” and Style to “Classic,” ensuring a consistent baseline. Through a custom JavaScript-driven rendering engine, the system tracks every selection and updates the live preview on the left side of the product page in under 200ms. When a user selects a Collection (e.g., Beads), the Design section appears, dynamically loading only relevant images for that combination. Conditional logic ensures that if Name customization is toggled “Yes,” a text field appears, enforcing character limits (six for 8” x 10”, twelve for 11” x 14”) with real-time validation. The engine also handles special characters and accent marks, storing inputs in meta fields. For “Add Shine,” customers choose a color swatch, and the system layers that over the base in the live preview. Unique options for Chuppah Glass—like “In Your Glass Clear”—trigger additional rendering pipelines that swap textures and color overlays. This robust, asynchronous logic bypassed Shopify’s inherent limitations by decoupling core customizations into modular meta field functions, enabling sub-200ms rendering and precise pricing updates tied to selections. The result: customers seamlessly visualized their mezuzah as they customized, driving urgency and reducing returns.

Recognizing the complexity of letter art customization—where Style, Size, Frame Color, and Font Material interplay—WebDesk Solution engineered a separate “Build Your Letter Art” template that mirrored the mezuzah logic but addressed text-specific intricacies. Default selections loaded as Style: “Classic” and Size: “8” x 10”,” with a live canvas on the left showing the chosen frame and font. When customers switch to Frame Color (e.g., Black) or Font Material (e.g., Chunky Color), the Design section reveals accordingly. The system dynamically recalculates character limits based on size: for 8” x 10”, up to six characters; for 11” x 14”, up to twelve characters with auto-wrapping logic that evenly distributes letters across one or two rows. As letters are typed, the JavaScript engine recalibrates font size, kerning, and layout—ensuring the previewed design remains true to physical output. All input is sanitized, and edge-case logic handles special characters or emojis. Meta fields capture each input, feeding data to Shopify Checkout for accurate pricing. This template’s responsive viewport logic ensures the preview scales on mobile and desktop alike, with fallback assets preloaded to avoid latency. By encapsulating layered text rendering, frame adjustments, and real-time canvas updates, WebDesk Solution delivered a frictionless, interactive environment—empowering Poppsi’s customers to experiment confidently and complete purchases without needing human assistance.

To address the need for a gallery filtered by selected options, WebDesk Solution introduced a custom image-matching script coupled with a strict naming convention. For each product media asset, Poppsi’s content team prepended filenames with tags that corresponded exactly to option values—e.g., “Mini_Classic_Beads_RoyalBlue.jpg” or “11x14_Modern_ChunkyColor_Fuchsia.png.” When a user selects a combination (Size, Style, Collection, etc.), the JavaScript engine parses the current option set into a concatenated key string. The gallery script then scans the Product Media object for filenames containing that key, building an in-memory carousel array. Carousel thumbnails are generated on the fly; clicking a thumbnail swaps the main preview in sub-150ms, ensuring a fluid user experience. If no exact matches exist, fallback logic looks for partial matches (e.g., match Size and Style, ignoring Font Material). This dynamic approach scaled effortlessly as new assets were added: adherence to the naming convention ensured minimal overhead for the content team. By moving the filtering logic to the client side and bypassing Shopify’s static image assignments, Poppsi achieved a highly engaging, context-sensitive gallery that reflected only the assets relevant to the shopper’s current configuration—ultimately reducing cognitive load and boosting customer confidence in their selections.

WebDesk Solution implemented a meta field–triggered upsell popup for the cart page to promote Greeting and Scroll products. Each primary product in Poppsi’s catalog included associated meta fields—“upsell_greeting” and “upsell_scroll”—with valid values indicating the SKU of the suggested add-on. When a customer added a customized piece to the cart, a custom Liquid snippet parsed the cart’s line items array for these meta fields. If no Greeting or Scroll product was detected, an asynchronous AJAX call fired a payload to a lightweight JavaScript module that displayed a modal overlay under specific conditions: (1) when the cart page loaded; (2) if the browser session didn’t already store a “popupViewed” cookie; and (3) if the relevant meta field values matched. The modal showcased dynamic images, titles, and CTAs for the add-on products, with “Add to Cart” buttons making additional AJAX calls to inject items without refreshing. If the user had already added the upsell items, the Liquid logic prevented the modal from appearing again. To maintain performance, WebDesk Solution deferred the script load until after the initial page render, using Intersection Observer to detect when the cart contents were visible, then evaluating upsell conditions. This precise logic ensured that Poppsi maximized average order value without disrupting performance or frustrating customers who had already chosen add-ons.

WebDesk Solution tackled the requirement for preselected customization by extending product URLs with parameterized meta fields. Each “Customize” button on Poppsi’s collection page was programmed with a link like:

Using a custom Liquid template snippet, WebDesk Solution parsed {{ request.query_params }} on page load and mapped each parameter to the corresponding option or meta field. For product options (Size, Style, Collection), the script invoked ShopifyOptions.selectOptionByValue(“option_name”, “value”), triggering the standard Shopify option binding. For meta fields—such as adding name or shine—the script updated hidden input fields and toggled UI controls accordingly. A centralized JavaScript module validated parameters against allowed values to prevent injection or invalid states. Once all parameters were applied, the engine fired a synthetic “change” event to the live-preview renderer so that the initial snapshot accurately reflected the URL’s configuration. This solution not only streamlined the user journey—allowing customers to land on a fully configured product page with a single click—but also future-proofed the workflow: as Poppsi added new customization dimensions, simply appending parameters would prepopulate settings. By bridging Shopify’s lack of native query parameter handling with a robust mapping layer, WebDesk Solution removed friction and ensured consistency for high-traffic promotional campaigns.