Heart Pressed is a new small business specializing in custom photo magnets. Their goal was to provide customers with an easy, enjoyable way to create personalized magnet packs by selecting shapes, quantities, and uploading photos with advanced editing capabilities, all through their website.
A major insight to the project was realizing that over 90% of buyers use mobile phones for their orders. This suggests that having an entirely responsive and mobile phone-optimized website is a primary consideration for their business in terms of user experience, particularly for tablets, laptops, and across all screen sizes, which deserves priority.
For the very unique product customizations they required, no off-the-shelf eCommerce platform or plugin would work. They were also dealing with typical startup constraints: a tight budget and a tighter timeline.
Our task was to provide a fully functional, ready-to-go website that would fulfill all these requirements while ensuring WordPress remained the platform for easy management and maximum cost efficiency. During the project, we also helped them establish a brand identity by designing a logo that reflected their name.
Before the website, Heart Pressed needed a logo that speaks to their target population: those who love and wish to keep safe memories, but in a beautiful and personalized way. A logo that would encapsulate warmth and playfulness, fused with clean modern aesthetics, was designed. The logo will be a direct visual representation of the idea of preserving moments ("pressed hearts") in a versatile manner for use online and off on packaging. This would help further establish brand professionalism and cohesiveness right from day one.
The heart of Heart Pressed’s website was its custom magnet order process, which included
Customers choose between two shapes, Circle or Square magnets.
Customers select from four pack sizes: 4, 6, 9, or 12 magnets.
The number of photos customers can upload is limited to the quantity selected.
For each uploaded photo, customers should be able to:
If a customer uploads 4 photos and then decides to upgrade their pack to 6 magnets, the original 4 images remain uploaded, and only the additional 2 upload slots are added, preventing the loss of user data or frustration.
All of the requirements must work smoothly and intuitively throughout the process, from the cart to the checkout, during the shopping experience for the customers and visitors.
No existing plugin on the market for WordPress or WooCommerce could manage the level of dynamic image handling, editing, and persistence associated with choosing quantity and shape.
Typically, this type of interactive custom product builder should be developed as a standalone web application. However, since the budget, timeline, and maintainability required staying within the WordPress environment for the client, that is how the decision was made.
Although WordPress is a very flexible CMS, it is not inherently built to properly support complex and dynamic user input forms requiring real-time image manipulation. The hurdles had to be dealt with from a technical standpoint within the user experience boundaries.
Since more than 90% of users shop on mobile devices, it was essential that the entire experience, from uploading an image to editing and customizing a product, be fully responsive and easy to use on small screens.
Key Features of the Custom Plugin We Include
The plugin tracks the shape and number of magnets selected by the user and reflects those selections in the user interface.
The upload interface enforces rigid limits to prevent users from uploading more images than are allowed for the selected pack.
Cropping and zooming functionalities for images are integrated directly into the upload process, allowing users to customize the appearance of each photo on the magnet.
Users can delete any uploaded image and replace it instantly without needing to refresh the page.
Switching from one pack size to another will retain already uploaded images, ensuring users are not frustrated and have to redo this task.
The plugin seamlessly integrates with WooCommerce checkout, passing custom order data to the backend for order fulfillment.
Every aspect of the site and the custom plugin was optimized for mobile devices, tablets, laptops, and desktops, ensuring a flawless shopping experience for over 90% mobile shoppers.
01
The application is powered entirely by WordPress hooks, AJAX, and JavaScript, enabling kitchen-sink dynamic front-end interaction, including page-level interaction.
02
Image handling was performed using a custom JavaScript suite integrated with the WordPress media management platform.
03
The plugin was built to be lightweight and responsive, working smoothly whether used in a desktop environment or on a mobile device.
04
Preliminary testing was conducted to ensure that image limits, the editing process, and data persistence were functioning properly across all environments, configurations, and screen types.
With website design and development, we also provided them with services, including creating the Heart Pressed logo, assisting in defining brand colors and fonts to establish the visual style for future marketing materials, and packaging.
Despite the inherent limitations of the WordPress platform, created and delivered a fully custom and interactive e-commerce website that functions seamlessly on WordPress.
Fulfillment of all the client requirements for selecting shapes, uploading images based on quantity, image editing, and persistence.
Developed mobile-first; over 90% of shoppers have an intuitive, seamless experience on smartphones.
It facilitated Heart Pressed's launch quickly and cost-effectively
The client commented positively on the site's usability and polished appearance.
Provided a solid foundation for the brand with the new logo and coherent visuals.
“The team brought our complex vision to life on WordPress, something we didn’t think was possible with our budget. The site works beautifully and our customers love the easy customization. We’re proud of how our brand looks and feels online.”
The Heart Pressed project was a classic case of striking the balance between ambitious functionalities and real-life constraints. Custom development through WordPress and mobile-first philosophy made sure we could build up a very rich yet affordable solution that surpassed won over customers while giving it a strong basis for future growth.
Get expert help for your website or app from top-rated web designers and developers. Let us handle the code work!
Web Design Mechanic is a full-service professional web design agency that builds custom websites for both B2B and B2C clients. We help businesses build a strong online presence with designs that convert and code that performs.
Copyright 2025. Web Design Mechanic All Right Reserved.