Cai Shi Zi Ma Fenyang Wonton｜Shopify Official Website Development
From a 70-year-old shop in Zuoying Market to a highly-reproduced e-commerce website
This project involved building a Shopify official website for "Cai Shi Zi Ma Fenyang Wontons." The designer from the collaborating party had already completed the full visual design draft in Figma. Our task was to highly reproduce this design draft into a functional and maintainable Shopify website ready for launch.
Brand Background
Cai Shi Zi Ma is a well-established wonton shop that has been deeply rooted in Zuoying Second Public Market for over 70 years. It specializes in signature fresh pork wontons, spicy dry wontons, tofu skin wontons, tangyuan, and other fresh frozen delivery products. It has also been featured multiple times on TV programs and unboxed by influencers. The brand has a rich story and solid reputation. The website's mission is to transform this "market human touch" into an online experience that can drive e-commerce conversions.
Project Challenge: High-Fidelity Implementation
When a designer has already produced a complete Figma design draft, the focus of frontend implementation shifts from "creative ideation" to "precise execution":
- Layout spacing, font hierarchy, and color system all need to align with the visual specifications of the design draft.
- Multiple modules on the homepage (carousel banner, best-selling products, free shipping bundles, influencer recommendations, TV reports, YouTube video wall) need to be reproduced one by one and connected to the editable data structure in the Shopify backend.
- Both mobile and desktop versions of the layout have design drafts, requiring separate adjustments to ensure that the reproduction fidelity is not compromised by the device.
How We Did It
-
Modular Slicing
According to the Figma design draft, we deconstructed each content block on the homepage (featured products, value-for-money free shipping bundles, influencer recommendations, TV reports, Mama's Kitchen video wall, etc.) and implemented them as Shopify theme sections. We used existing theme functionalities with almost no modification to the original code, making it easy for the brand to update, reorder, and adjust content later. -
Integration of Membership and Promotion Mechanisms
Based on brand needs, we planned tiered promotional alert bars for free shipping thresholds and gift with purchase offers (spicy wontons, chili sauce), as well as a member rewards program page, allowing marketing activities to be directly reflected on the frontend. -
Integration of Social Media and Reputation Content
We organized the brand's long-accumulated TV reports, influencer unboxing reviews, and YouTube videos into the website pages, and connected communication channels such as LINE, Instagram, and Facebook. This ensures the official website is not just a storefront but also a display case for brand trust. -
Pixel-Perfect Detail Calibration
We repeatedly compared details such as button rounded corners, spacing, letter spacing, and image cropping ratios between the design draft and the actual pages to ensure that the launched website matched the visual design provided by the designer.
Results
The launched website fully preserved the visual design of the brand's designer while incorporating the product management, promotion mechanisms, and membership system flexibility inherent in Shopify e-commerce. This allowed "Cai Shi Zi Ma" to extend its 70 years of market reputation to online channels. Our service included subsequent training on how to use the website backend. After many years of operation, the website has evolved significantly from its original design and content, demonstrating how Shopify makes it easier for clients to manage and modify their content independently.
Visit Cai Shi Zi Ma Fenyang Wontons website
Share