Website Rebuild & Shopify Development
TerraBoard
Rebuilt TerraBoard's Shopify website from approved Figma designs while collaborating with the design team to maximize the capabilities of the existing platform. The project focused on creating reusable templates, responsive layouts, and a scalable website architecture that simplified long-term maintenance.
Front-End Development • Technical Collaboration
Shopify • PageFly • Liquid • HTML • CSS • JavaScript
My Contributions
Development
Front-End Development
Shopify Theme Customization
Responsive Development
Collaboration
Technical Collaboration
Design Handoff Support
Shopify Platform
PageFly Development
Liquid Customization
Product Template Architecture
Optimization
Collection Organization
Quality Assurance
Overview
TerraBoard was rebuilding its Shopify website using approved Figma designs while continuing to leverage the existing Shopify ecosystem and PageFly workflow. The goal was to create a modern, responsive website without introducing unnecessary complexity or increasing long-term maintenance costs.
Before development began, I collaborated with the design team to align the proposed designs with the capabilities of the existing Shopify theme and PageFly setup. This ensured the designs could be implemented efficiently while taking advantage of the platform's existing functionality.
The final solution included responsive page builds, reusable product templates, improved collection organization, and a cleaner Shopify structure that simplified ongoing website management while preserving flexibility for future growth.
The Challenge
Existing Website Structure
The website required a complete rebuild while preserving existing functionality and minimizing disruption to the client's Shopify environment.
Design & Platform Alignment
The approved designs needed to work within the capabilities of the existing Shopify theme and PageFly without creating unnecessary custom development.
Reusable Product System
The client sold multiple products with varying configurations, requiring flexible templates that could support the entire catalog without creating duplicate page layouts.
Live Website Migration
Website needed to remain easy for the client to update while avoiding unnecessary costs associated with additional PageFly pages or overly customized theme code.
My Approach
Discovery
Reviewed the approved Figma designs alongside the existing Shopify implementation to identify opportunities for improving scalability, reducing maintenance, and making better use of the existing platform.
Design Strategy
Collaborated with the design team before development to align proposed layouts with the capabilities of Shopify and PageFly, ensuring the approved designs remained visually consistent while being efficient to implement and maintain.
Build & Refine
Developed the new website using reusable templates, responsive layouts, and organized Shopify structures while ensuring all links, navigation, products, and pages were thoroughly tested before launch.
Key Improvements
Technical Collaboration
The approved designs needed to work within the existing Shopify ecosystem while avoiding unnecessary development complexity.
Collaborated with the design team before development to identify opportunities that leveraged existing theme features and PageFly functionality.
Reduced development complexity while creating a solution that remained flexible and easy to maintain.
Reusable Product Templates
Multiple products required similar layouts but contained different content and variants.
Created a single reusable Shopify product template that supported the client's entire catalog through dynamic content.
Simplified future maintenance while providing a consistent shopping experience across all products.
Scalable Shopify Structure
Collections, navigation, and product organization required cleanup to support the redesigned website.
Reorganized collections, product templates, and supporting Shopify structures while rebuilding the site.
Created a cleaner, more scalable foundation that improved long-term content management.
Responsive Development
The redesigned website needed to deliver a consistent experience across desktop, tablet, and mobile devices.
Developed responsive layouts that accurately reflected the approved Figma designs while adapting naturally across screen sizes.
Delivered a polished user experience across devices without requiring separate layouts or duplicated content.
Project Gallery
Project Impact
Technical Improvements
Reusable product templates
Cleaner Shopify structure
Organized collections
User Experience
Responsive across devices
Consistent product experience
Improved content organization
Business Value
Easier long-term maintenance
Reduced future development effort
Optimized use of existing PageFly plan
Ready to Bring Your Next Project to Life?
Whether you're starting a project from scratch or looking for someone to join an existing team, I'd love to hear how I can help.
[email protected]
Next Case Study
Website Redesign & WordPress Development
Rusk Renovations
Redesigned and rebuilt the company's website from wireframes through development while preserving the established brand identity. The project modernized the user experience and website structure while delivering a responsive WordPress solution aligned with business goals.