Introduction
This case study describes the migration and replatforming project of the e-commerce site messoanuovo.it from WooCommerce to Shopify, carried out by Hoculus between December 2023 and March 2024. The project represented a significant technical challenge, requiring not only the migration of the platform, but also the pixel-perfect reproduction of the previous UI/UX.
The Customer: Refurbished (Computer Parts)
Messo a Nuovo is the e-commerce site of Computers Parts Srl, a Sicilian company based in Rocca di Capri Leone (ME), a leader in the sale of high-quality refurbished electronic and computer products since 2010.
Sector of Activity
E-commerce of refurbished and new technology products, with a focus on:
- Refurbished desktop and laptop computers
- Printers and peripherals
- Servers and monitors
- Smartphones and tablets
- Accessories and components
Company Mission
Computers Parts stands out in the Italian market for its philosophy centered on three fundamental pillars:
- Premium Quality : Exclusive focus on high-end business products (Lenovo, HP, Dell, Apple) from corporate divestments with short life cycles (2-3 years)
- Environmental Sustainability : Refurbishing approximately 120,000 products annually that would otherwise become electronic waste
- Convenience : Offer professional technology with savings of up to 40% compared to list prices
-
Brand Results
- Over 30,000 satisfied customers
- 98% positive feedback
- Over 1,500 reviews on the website and Google
- Acknowledgements from Salvatore Aranzulla and Tom's Hardware
The Challenge
Initial Context
The website messoanuovo.it operated on WooCommerce with a highly customized architecture developed over time to meet the specific needs of the business. The graphic interface, the result of years of optimization and testing with customers, had demonstrated excellent results in terms of conversions and user satisfaction.
Despite the effectiveness of the consolidated frontend, the system had some critical issues:
- Management difficulties for the internal team
- Limitations in platform scalability
- Complexity in maintaining customizations
- Need to optimize the user experience at checkout
For this reason, the client requested a pixel-perfect replica of the existing frontend: every visual element, spacing, color, and interaction had to be kept identical to the original, ensuring continuity in the user experience and preserving the optimization work done in previous years.
Project Objectives
Primary Objectives
- Complete migration from WooCommerce to Shopify while maintaining all existing features
- Pixel-perfect replica of the existing frontend - The client specifically requested a faithful reproduction of the visual identity and established user experience, maintaining the layout, colors, typography, and all the graphic elements of the original site, but with the ability to use the Shopify editor for modifications.
- Simplify management through Shopify's intuitive interface
- Conversion funnel optimization with a particular focus on the shopping cart and checkout
Secondary Objectives
- Improved overall site performance
- SEO optimization and analytics tools integration
- Implementation of advanced business-specific features
- Native integration with third-party services (payments, shipping, live chat)
Specific Technical Requirements
The client had identified a series of key technical requirements:
- Advanced Search : Search system with filters by Category, Price and Brand
- Payment Methods : Credit Cards, PayPal, Scalapay, Bank Transfer, Teacher Card
- Live Chat : Real-time support system
- Push Notifications : OneSignal Integration for Blogs and New Products
- Shipment Tracking : AfterShip Integration
- SEO : Tools equivalent to Yoast SEO
- Q&A Products : Question/Answer System with History Retrieval
-
Custom Product Page :
- Logos and icons for technical attributes (CPU, RAM, SSD, etc.)
- Microsoft Office Warranty Extension and License Options
- Clear display of technical specifications
- Optimized Shopping Cart and Checkout : Side cart with related products
The Solution
Technical Architecture
The implemented solution involved the use of Shopify as the core platform, integrated with an ecosystem of apps and customizations to replicate and improve the previous experience.
Project Phases
Phase 1: UI/UX Design and Customization (January - March 2024)
Front-end Customization This phase represented the most significant challenge of the project: pixel-perfect replication of the existing WooCommerce front-end on a custom Shopify theme. The team worked meticulously to faithfully reproduce every visual detail, studying the original site and recreating:
- Exact layouts and grids
- Specific colors (hexadecimal codes)
- Typography and font size
- Spacing and padding
- Animations and transitions
- Hover states and interactions
- Identical responsive breakpoints
The team implemented the following sections with faithful replication:
-
Homepage :
- Hero section with dynamic banners
- Featured Product Grid
- Showcase main brands (Lenovo, HP, Dell, Philips, etc.)
- "Other categories" section with custom images
- Satisfied Customer Badge
- Trustpilot Review Integration
- Information section "What does refurbished mean"
- Advantages: savings, quality, environment
-
Product Page :
- Custom layout with focus on technical specifications
- Icon system for attributes (CPU, RAM, Storage, Display, etc.)
- "Warranty Extension" and "Microsoft Office" sections
- Integrated Q&A for customer questions
- Optimized image gallery
- Badges and certifications
-
Collections Page :
- Advanced filter system
- Optimized responsive grid
- Quick view products
- Custom sorting
-
Custom Menu :
- Mega menu with structured categories
- Intuitive navigation between sections
- Quick links to key pages
Phase 2: Content Migration (January - February 2024)
Blog and Content
- Creation of blog structure with 3 main categories:
- Articles
- Buying Guides
- Reviews
- Migrating existing articles
- Shopify SEO Content Optimization
Institutional Pages Creation and population of all information pages:
- Who we are
- Terms of sale
- Secure payments
- Returns and refunds
- Privacy Policy
- Cookie Policy
- Contacts
- FAQ
- Teacher's Card
- Shipping
- Payment in installments
- Reviews
- What does refurbished mean?
Phase 4: Integrations and Optimizations (February - March 2024)
Essential Integrations
-
Google Analytics
- Google Analytics account setup 4
- Advanced e-commerce tracking setup
- Implementing custom events
-
Google Search Console
- Verify site ownership
- Submission sitemap
- Monitoring configuration
-
Google Merchant Center
- Product feed integration
- Configuring product attributes
- Manual sitemap upload
-
Trustpilot
- Review widget implementation
- Strategic positioning on the homepage and footer
- Product star integration
-
Live Chat (Tawk.to)
- Chat widget configuration
- Customize appearance in line with brand
- Notification and Operator Setup
-
Search System
- Shopify Native Search Setup
- Implementation of advanced filters (Category, Price, Brand)
- Optimizing results
Scheduled Integrations
- OneSignal for push notifications
Phase 5: Final Testing and Optimizations (March 2024)
- Cross-browser and cross-device testing
- Loading speed optimization
- Check cart and checkout functionality
- Payment gateway test
- Check integration of the Teacher Card
- Complete quality assurance
Technical Challenges and Solutions
1. Highly Customized Product Page
Challenge : Replicate a WooCommerce product page with numerous customizations, including technical attributes with icons, warranty extension and Microsoft Office options, and a Q&A system.
Solution :
- Custom Liquid Template Development
- Using Shopify metafields and metaobjects for technical attributes
- Implementation of a dynamic icon system based on metafields
- Q&A section integration with question history recovery
- Conditional logic for Office display on specific categories
2. Complex Mega Menu
Challenge : Create a navigation system with categories, subcategories, and promotional links while maintaining usability and performance.
Solution :
- Custom Menu Development with Liquid
- Asynchronous loading optimization
- Responsive design for mobile
3. Integration of the Teacher Card
Challenge : Implement a non-standard payment method typical of the Italian market.
Solution :
- Research and integration of specific solutions
- Custom gateway configuration
- Thorough testing of the checkout process
4. SEO Migration
Challenge : Maintain SEO while migrating from WooCommerce.
Solution :
- Complete mapping of old → new URLs
- Implementing 301 redirects
- Google Search Console Setup
- Sitemap Setup
- Meta tag optimization on all pages
5. Performance and Speed
Challenge : Maintain excellent performance with extensive customization.
Solution :
- Image optimization (lazy loading, WebP)
- Custom CSS/JS minification
- Using Shopify CDN
- Lazy loading for non-critical sections
Results
Project Metrics
Project Duration : 4 months (December 2023 - March 2024)
Team Involved :
- Project Manager: Riccardo Campioni
- Developers: Daniel Frimu, Miguel Sosa
- Designer: Arianna Scopece
- QA: Riccardo Campioni
Deliverable :
- ✅ Complete and functional Shopify site
- ✅ Content migration (products, blogs, pages)
- ✅ Key integrations (Analytics, Search Console, Merchant Center, Trustpilot, Tawk)
- ✅ Complete UI/UX customizations
- ✅ Custom product page template
- ✅ Blog system with 3 categories
- ✅ All institutional pages
- ⏸️ AfterShip integration (planned post-launch)
Benefits for the Customer
Technicians
- More stable and scalable platform : Shopify automatically manages hosting, security, updates
- Intuitive administrative interface : Reduce daily management time
- Improved Uptime : 99.99% Guaranteed by Shopify
- Optimized performance : Global CDN and enterprise infrastructure
Business
- Simplified checkout process : Potential for increased conversions
- Native Integrations : Less dependency on external plugins
- Simplified management : Staff can focus on sales and marketing
- Scalability : System ready for future growth
- Mobile-first : Optimized experience across all devices
User Experience
- Improved navigation : More intuitive menus and filters
- Faster checkout : Fewer steps, more conversions
- Side Cart : Smoother shopping experience
- Integrated live chat : Instant customer support
- Clear social proof : Trustpilot is well integrated
Technologies Used
Core Platform
- Shopify : E-commerce platform
- Liquid : Template engine for customization
- Shopify CLI : Development and Deployment
Integrations
- Google Analytics 4 : Web analytics
- Google Search Console : SEO monitoring
- Google Merchant Center : Product feed
- Trustpilot : Review management
- Tawk.to : Live chat
Development Tools
- Git for version control
- DevTools browser for debugging
- Shopify Theme Kit for Local Development
Best Practices Implemented
SEO
- ✅ 301 redirect for all old URLs
- ✅ Meta title and description optimization
- ✅ XML Sitemap configured
- ✅ Schema markup for products
- ✅ Optimized and readable URLs
- ✅ Alt text on all images
- ✅ Correct canonical tags
Performance
- ✅ Lazy loading images
- ✅ WebP format for images
- ✅ CSS/JS minification
- ✅ Preload critical resources
- ✅ Shopify CDN for static assets
- ✅ Optimized caching
UX/UI
- ✅ Responsive design on all devices
- ✅ Accessible color contrast
- ✅ Readable and scalable fonts
- ✅ Clear and visible CTAs
- ✅ Breadcrumb navigation
- ✅ User feedback messages
- ✅ Loading clear states
Safety
- ✅ SSL Certificate
- ✅ Secure Shopify Checkout
- ✅ Updated Privacy Policy and Cookie Policy
- ✅ GDPR compliance
- ✅ PCI compliance for payments
Conclusions
The messoanuovo.it replatforming project represents a successful migration from WooCommerce to Shopify, demonstrating how it's possible to modernize a complex e-commerce site while maintaining brand identity and improving the user experience.
Key Success Factors
- Detailed Planning : In-depth requirements analysis and clear roadmap
- Expert Team : Experienced Shopify and Liquid developers
- Collaborative Customer : Timely feedback and quick decisions
- Iterative Approach : Agile development with continuous testing
- Focus UX : Prioritize user experience in every decision
Value Generated
- Modern, scalable and easy to manage platform
- Reduction of technical maintenance costs
- Potential conversion rate improvement
- Solid foundation for future growth
- Continuity in market positioning
Final Reflection
The success of this project confirms that migrating to Shopify is a sound strategic choice for growing e-commerce businesses requiring a stable, scalable, and easy-to-manage platform. The key is a methodical approach that balances technological innovation with respect for the brand's identity and specific business needs.
The partnership between Hoculus and Messo a Nuovo has demonstrated how close collaboration between agency and client, combined with solid technical expertise and attention to detail, can transform a complex challenge into a growth opportunity for both parties.