I worked in a full-time position as a Front-end Shopify Developer for Bristol-based agency Thought & Mortar from June 2024 until its closure in March 2026.
My duties included:
- Developing custom solutions to meet the needs of a wide variety of clients through bespoke theme features;
- Pushing the boundaries of Shopify with custom Liquid and JavaScript to overcome unique challenges;
- Translating project briefs into comprehensive technical scope documents;
- Bringing Figma designs to life with responsive CSS;
- Managing multiple CI/CD Git-to-Shopify pipelines at once;
- Writing approachable client documentation which also breaks down technical details to help clients feel empowered;
- Using JavaScript within Google Scripts to manipulate spreadsheets ready for import;
- Helping businesses set up their first E-commerce store, migrate from other systems like Adobe Commerse and eBay, or update from Shopify themes from 1.0 to 2.0;
- Utilising AI as a tool to enhance my work and increase productivity, while keeping the core of my work distinctly human.
PerfectFit
PerfectFit were on Adobe Commerce and overly reliant on customers using their 'Harness Calculator' to find the right size harness for their dog. The customer would input their dog's breed/measurements and the calculator would link them to the appropriate harness, but there wasn't any recognition of the dog's breed or specific measurements after that, so it was easy to get confused as to which harness was recommended.
Dog breeds products
As part of their move from Adobe Commerce to Shopify, I theorised and implemented 'dog breed' products. We added them as products to their Shopify store, but they are never intended to actually be purchased. Instead, they are just a vector for purchasing the appropriate harnesses for that size of dog breed without disrupting the product structure PerfectFit were used to.
'Fit' metaobjects within a metafield store which size dog should have which sized harness, and when the 'Harness selector' inputs are changed by the customer, the Section Rendering API updates the UI around the appropriate harness.
An important SEO benefit was that it gave PerfectFit the perfect pages to rank for searches like 'harness for border collie' or 'husky harness'.
Challenges that I overcame implementing this system included:
- Setting up a query string system so that customers can return to the breed/size/puller/variant that they were viewing previously;
- Ensuring the customer stays on the same color option when moving between harnesses;
- Updating the variant image in the gallery when moving between harnesses and variants;
- Customizing the Google Structured Data so dog breed harnesses appear as a `productGroup`, with the harnesses as products within it.
Harness finder
We also kept the Harness Finder available as an additional avenue for customers to find the correct harness.
I coded the new version from scratch to work with the new dog breed pages, and added new Google Analytics 4 events that fire when a customer succeeds or fails to get a result.
These events carry all the form data as parameters, allowing PerfectFit to see which breeds/sizes are most commonly searched for. This will help inform them which new dog breeds they should add to the store and which new fits they should add for existing breeds.