OrthoRx Website - Development Overview

OrthoRX was a shorter term project related to Shopify. The original template for the site had been made through Webflow and unfortunately, during the migration to Shopify, the template was broken. The request was mainly to address the issues that had popped up and to update some styling which hadn't translated properly from Webflow to Shopify

Approach

One of the biggest challenges during this project was fixing the broken add to cart. Adding items to cart was working fine on the individual product pages however, it was not working for the quick add to cart button on the product list page. Fixing issues such as this are generally not hard under normal Shopify templates but the problems were hidden under a lot of minified code that had come from the Webflow migration and pinpointing where the problem was ended up being quite a hassle.

Along with the broken add to cart button, the product cards were not styled as intended and the product filtering was not working properly. My work here, after fixing the add to cart button, involved fixing the responsiveness of the page (cards per row of grid, text size, etc.), adding hover state styling (green background & arrow decorator as seen in the image above), and fixing the integration of the plugin responsible for rendering the product list and filtering options.

There were also a couple of pages that had not come through with the Webflow migration, such as the /pages/reset-password and the /cart page and so, those had to be built as well.

In addition, the client requested a size chart and a review feature on the product page. In order to dynamically style the size charts in the way the client requested, I created a new JSON product field for the client to update for each product that had size information. The outcome of filling in that information can be seen below

as for the review feature, I set their site up with the Judge.me plugin, a free Shopify plugin for collecting user reviews. After adjusting styling to be in line with the brand and fixing responsiveness issues, the final product can be seen below

All in all, this project was a great excuse to get back into interacting with Shopify and Liquid syntax, tools which I hadn't used since my days working with Dr Smood. More importantly, it served as a reminder as to why I like to write my own code instead of using no-code website builders 😅