A from scratch e-commerce build featuring guided product discovery, a custom project calculator, HubSpot lead capture, and a scalable content foundation.
Executive Summary
From No Website to a Complete Digital Commerce Engine
Strathlone House is an Australian company offering DIY feature-wall kits and supplies for residential and commercial spaces. Before this engagement, the business had no website and therefore no owned digital storefront through which to present its products, educate buyers, capture enquiries, or convert growing interest in DIY home improvement into sales.
Inboundsys designed and developed a new Shopify website from the ground up. The solution followed the client’s supplied designs and requirements, used the client-recommended Shopify theme as its foundation, and combined modern UI, responsive layouts, product collections, online checkout, content management, a custom product calculator, and HubSpot forms in one scalable experience.
Project at a glance
Project / client record
Strathlone House / Fileroom
Website
https://fileroom.com/
Industry
Retail / E-commerce
Website type
E-commerce website; new build
Complexity
Medium
Project owner
Inboundsys
Core stack
Shopify, Shopify Liquid and JavaScript
What the Build Needed to Achieve
Establish a credible, professional online presence from scratch.
Modernize the brand and showcase feature-wall kits more effectively.
Create a clear, user-friendly buying journey across desktop, tablet, and mobile.
Improve mobile usability and support a seamless cart-and-checkout experience.
Help customers estimate project requirements before purchasing.
Capture leads for follow-up, not only immediate online transactions.
Give the client a manageable CMS and a scalable foundation for e-commerce growth.
THE CENTRAL IDEA
Make a technically complex DIY purchase feel simple: inspire the customer, help them calculate what they need, and provide an obvious next step buy online or submit a lead form.
The Challenge: Starting Without a Digital Foundation
The project was not a redesign or migration. There was no previous CMS, no legacy storefront, and no existing website journey to improve. Every part of the digital experience from brand presentation and navigation to product discovery, project estimation, lead capture, content management, and checkout had to be planned and built as a coherent system.
| Challenge | Business risk | Inboundsys response |
|---|---|---|
| No online presence | Lost visibility and sales opportunities | Built a complete Shopify storefront from scratch. |
| Complex DIY buying decision | Customers may not know how much material to order | Developed a custom calculator on product pages. |
| Need for mobile usability | Friction for shoppers researching on phones | Created and tested responsive layouts for all devices. |
| Need for leads and sales | Visitors not ready to buy could be lost | Integrated HubSpot forms plus newsletter signup. |
| Ongoing content needs | Dependence on developers for routine updates | Configured Shopify CMS editing, blog and resources. |
STRATEGY AND DELIVERY
How We Solved It
The delivery approach balanced the client’s design direction with Shopify’s proven commerce capabilities. Technical planning established the build foundation; the supplied designs and requirements guided the visual implementation; and brand alignment, UX design, UI design, typography, color, and responsive behavior were treated as one connected experience rather than separate tasks.
1. Plan the Commerce Architecture
The team translated the required customer journey into a practical Shopify structure. The information architecture covered the homepage, About page, service pages, product pages, blog, resource center, contact page, dynamic pages, forms, search, mega menu, product catalogue, collections, cart, and checkout. This gave both informational and transactional visitors a clear route through the site.
2. Use the Recommended Theme as a Reliable Foundation
Rather than reinvent Shopify’s core commerce behavior, the project used the client’s recommended theme as the base. The team then implemented the provided designs and requirements with Shopify Liquid and JavaScript. This approach retained native product, collection, cart, checkout, and CMS capabilities while allowing tailored components and interactions where the business needed them.
3. Build Reusable, Manageable Page Components
The website was structured for CMS editing and included dynamic pages and custom modules or components. This made recurring content and commerce elements easier to manage consistently. The client can maintain products, collections, blog content, resources, and core page information through Shopify rather than treating every update as a development project.
4. Add Guided Product Estimation
A custom calculator was developed on product pages to help customers estimate the requirements for their DIY feature-wall project. This feature directly addresses one of the largest barriers in this category: uncertainty about what and how much to purchase. By supporting a more informed decision before checkout, the calculator improves buying confidence and makes the product page more useful than a standard catalogue listing.
5. Connect the Website to Lead Follow-up
HubSpot forms were integrated for lead capture, supported by contact forms and newsletter signup. This created a second conversion path for visitors who were interested but not yet ready to complete a purchase. The resulting enquiry details can support structured follow-up, nurturing, and future marketing activity.
Solution Deliverables
| Experience | Delivered components |
|---|---|
| Brand and content | Homepage, About page, service pages, blog, resource center, portfolio/gallery and contact page. |
| Discovery | Search, mega menu, dynamic pages, product catalogue and product collections. |
| Commerce | Product pages, shopping cart, online checkout and e-commerce functionality. |
| Conversion | Custom project calculator, HubSpot forms, contact forms and newsletter signup. |
| Operations | Shopify CMS setup, reusable components, testing, launch and post-launch support. |
RESPONSIVE EXPERIENCE
Designed for Every Screen and Every Stage of Intent
Responsive design was a stated client objective and a core part of the delivered work. The site was not merely compressed for smaller screens; layouts and interactions were built to remain understandable and usable as the viewport changed. Responsive testing was then included in the formal quality-assurance cycle.
| Device context | Experience priority | Business benefit |
|---|---|---|
| Mobile | Readable hierarchy, accessible navigation, touch-friendly actions, usable product information and forms. | Supports customers discovering and comparing DIY products on the go. |
| Tablet | Flexible grids, balanced product imagery, stable modules and comfortable interaction spacing. | Maintains a showroom-like browsing experience without desktop dependence. |
| Desktop | Full navigation, richer content presentation, product discovery and confident calculator use. | Supports deeper research and considered purchasing for residential or commercial projects. |
Responsive Elements That Matter Most
Mega menu and search that keep product discovery clear as screen width changes.
Product catalogue and collection layouts that adapt without sacrificing scalability.
Product-page calculator interactions that remain practical for touch input.
Forms and newsletter signup designed to stay usable on smaller screens.
Cart and checkout pathways that preserve clear calls to action throughout the journey.
Typography and color system applied consistently to protect hierarchy and brand recognition.
WHY RESPONSIVENESS HELPS CONVERSION
A customer who can understand the product, estimate the project, and complete the next action on the device already in hand is less likely to abandon the journey because of avoidable interface friction.
Performance and Google Core Web Vitals
The project record does not include verified Lighthouse, PageSpeed Insights, field Core Web Vitals, or before-and-after performance scores. Accordingly, this case study does not claim numerical gains that were not measured. What the delivery evidence supports is a performance-conscious Shopify build using Shopify Liquid and JavaScript, a theme-based architecture, responsive implementation, meta titles and descriptions, and multi-device, browser, functional, integration, and post-launch testing.
Core Web Vitals - Ready Build Principles
| CWV area | Build priority | Customer impact |
|---|---|---|
| LCP - loading | Prioritize visible product and hero content; keep the first experience focused and efficient. | Customers see meaningful content sooner, especially on mobile connections. |
| INP - responsiveness | Keep custom JavaScript purposeful and verify calculator, menu, form, cart, and search interactions. | Interactions feel immediate and do not interrupt purchase intent. |
| CLS - visual stability | Use predictable responsive layouts and reserve stable space for media and interactive components. | Content is less likely to move while the customer reads or taps. |
PERFORMANCE ENGINEERING
How the Architecture Supports Better Performance
For an e-commerce website, speed optimization is not a one-time score-chasing exercise. It is the discipline of limiting avoidable work in the browser while preserving the functions that help customers make a purchase. The Strathlone House solution supports this through a focused Shopify stack, deliberate custom development, responsive design, and systematic testing.
Performance Build Principles
Lean platform foundation
Shopify provides the commerce engine, catalogue, collections, cart, checkout, and CMS. Using native capabilities reduces the need to recreate business-critical functions with unnecessary custom code.
Purposeful custom JavaScript
JavaScript was used where tailored functionality was required, particularly for the calculator. This keeps the custom layer aligned with a real customer task.
Responsive component behavior
Layouts were designed and tested across devices so product information, navigation, forms, and calls to action remain usable without separate, inconsistent experiences.
Search and navigation clarity
Mega-menu and search capabilities shorten the route to relevant products and information an experience optimization that works alongside technical speed.
SEO foundations
Meta titles and descriptions were completed, giving important pages a basic search presentation layer and supporting discoverability.
Recommended Ongoing Web Performance Method
Because exact field metrics were not supplied, the strongest long-term practice is continuous measurement after launch. The following operating method protects performance as content, apps, tracking scripts, imagery, and products evolve:
Measure representative templates - homepage, collection, product, content, calculator, and contact pages on both mobile and desktop.
Track Core Web Vitals using field data when sufficient traffic is available; use Lighthouse or PageSpeed Insights as diagnostic support.
Optimize product and hero images to appropriate dimensions and modern formats while retaining visual quality.
Limit additional Shopify apps and third-party scripts to those with a clear commercial purpose.
Review custom JavaScript after feature changes and regression-test the calculator, menu, search, forms, cart, and checkout.
Reserve media dimensions and retest responsive layouts to prevent avoidable layout movement.
Monitor performance after theme, app, tracking, or content changes not only at launch.
MEASUREMENT NOTE
No exact performance, organic-traffic, lead, or conversion figures were provided in the source spreadsheet. Outcomes below are therefore stated qualitatively and tied only to confirmed delivered capabilities.
Conversion Architecture: More Than a Checkout
The website was built to generate value from different levels of purchase readiness. Customers who know what they need can browse products, use the calculator, add items to the cart, and proceed to checkout. Customers who need advice or more time can submit a HubSpot form, contact the business, subscribe to updates, read supporting content, or return through the resource and blog experience.
| Visitors need | Website response | Conversion path |
|---|---|---|
| “Show me what is available.” | Product catalogue, collections, gallery, search and mega menu. | Product discovery |
| “Help me understand the project.” | Product pages, blog and resource center. | Education and consideration |
| “How much do I need?” | Custom calculator on product pages. | Confidence before purchase |
| “I am ready to buy.” | Cart and online checkout. | E-commerce sale |
| “I need help first.” | HubSpot and contact forms. | Qualified lead for follow-up |
| “Keep me informed.” | Newsletter signup. | Future nurturing opportunity |
QUALITY ASSURANCE
Testing the Complete Customer Journey
A successful commerce launch depends on more than attractive screens. The team completed design review, functional testing, responsive testing, browser testing, form testing, integration testing, user acceptance testing, and post-launch testing. This breadth was particularly important because the website combined standard Shopify commerce functions with a custom calculator and HubSpot lead-capture integration.
| Test stream | What it protected |
|---|---|
| Design review | Alignment with supplied designs, brand system, typography, color, spacing, and intended hierarchy. |
| Functional testing | Navigation, search, product browsing, calculator behavior, cart, checkout, and content interactions. |
| Responsive testing | Usability and layout integrity across mobile, tablet, and desktop viewports. |
| Browser testing | Consistent behavior across supported browser environments. |
| Form testing | Successful submission and clear user feedback for lead-capture pathways. |
| Integration testing | Reliable operation of HubSpot forms within the Shopify experience. |
| User acceptance testing | Client validation that the delivered website met requirements. |
| Post-launch testing | Confirmation of critical journeys after production deployment. |
Delivery Lifecycle
| Phase | Output |
|---|---|
| 1. Discovery and planning | Technical planning; confirmation of client-provided designs and requirements. |
| 2. Experience design | Brand alignment, UX, UI, responsive behavior, typography, and color system. |
| 3. Development | Shopify theme implementation, Liquid/JavaScript development, CMS, commerce, calculator, and forms. |
| 4. Validation | Design, function, responsiveness, browser, forms, integrations, UAT, and post-launch checks. |
| 5. Handover and growth | Client review, launch, post-launch support, and manageable Shopify CMS foundation. |
Results Achieved
The completed website established the client’s professional online presence and created an end-to-end platform for product presentation, customer education, lead generation, and e-commerce. The business can now showcase its DIY feature-wall kits, help customers estimate their needs, process online purchases, capture enquiries, publish supporting content, and manage products and pages through Shopify.
Modernized brand image with a clean, contemporary digital experience.
Improved overall user experience and mobile usability.
Launched a complete product catalogue, cart, and checkout journey.
Implemented a custom calculator for DIY project estimation.
Integrated HubSpot forms for lead capture and follow-up.
Simplified content and product management through Shopify CMS.
Created a scalable website foundation for continued e-commerce growth.
MAIN BUSINESS OUTCOME
Strathlone House moved from having no website to operating a complete digital storefront that can showcase products, generate sales, capture leads, and support customers through a more confident DIY purchasing journey.
Long-Term Value
The project’s value extends beyond launch. Shopify gives the client a proven commerce and content-management foundation; reusable and dynamic elements support consistent future growth; the blog and resource center can build educational authority; the calculator remains a practical decision-support tool; and HubSpot forms provide a route for ongoing lead nurturing. Together, these elements make the website an operational business asset rather than a static brochure.
| Long-term asset | Value created |
|---|---|
| Scalable Shopify platform | Products, collections, content, and commerce operations can grow without replacing the foundation. |
| Editable CMS | The client can manage routine content and product updates independently. |
| Educational content | Blog and resource center support customer guidance and future organic visibility. |
| Custom calculator | Continues to reduce uncertainty at a critical point in the purchase journey. |
| HubSpot lead capture | Creates a pipeline for follow-up when visitors are not ready to buy immediately. |
| Responsive system | Supports consistent access as device usage and customer behavior evolve. |
PROJECT CONCLUSION
A Strong Case Study in Practical E-commerce Transformation
This project demonstrates how Inboundsys combined structured technical planning, client-led design fidelity, Shopify expertise, custom development, responsive UX, lead-generation integration, and thorough testing to create a complete commerce experience from a blank starting point.
Its strongest feature is not any single page. It is the way the parts work together: the brand earns attention; navigation and search help customers explore; content explains the offer; the calculator reduces uncertainty; responsive design keeps the journey available across devices; checkout converts immediate demand; HubSpot forms capture future opportunities; and Shopify CMS gives the client control after launch.
Why This Project Stands Out
A full e-commerce presence was established from scratch in a 2–3 month delivery window.
The build combined native Shopify commerce with tailored Liquid and JavaScript functionality.
A category-specific calculator transformed a common customer question into an interactive buying aid.
Lead capture and e-commerce were designed as complementary conversion paths.
Responsive implementation and broad testing protected the journey across devices and browsers.
The final CMS structure supports independent management and long-term scalability.
INBOUNDSYS IMPACT
A responsive, conversion-oriented Shopify website that gives Strathlone House the foundation to inspire customers, guide DIY project planning, generate online sales, capture leads, and grow its digital business.
