_

Task: Using Squarespace, build a custom sizing selection feature.

This first image is the reference that was sent to me when I was contacted about this project. This client wanted to add some flavor to their product page, so instead of Squarespace's standard dropdown sizing option, they wanted locks to represent each size, which is shown below in the mock.

This next section shows the page in action! Each lock acts as a size selector. To do this, I originally was building it from scratch using data-attributes that Squarespace already has in place. But as I was poking around, I found out they have a hidden sizing selection section that can be used in place of their standard size dropdown.

Once I got the buttons working, the final task was to have the buttons interact with Squarespace's DB, and deactivate any size button that was out of stock. To do that, I just used vanilla js to pull data-attributes already provided by Squarespace, and applied them to the associated lock.

About a day into the tee dropping, I got a call and was told that some customers weren't able to checkout, so I got to digging. I went to Squarespace, and saw that Stripe was declining some payments, but it didn't say why. So I then went to Stripe, and through their dashboard was able to see the issues were with people's apple pay zips not matching the zip on their cards. With this info, I collected the emails of those users and sent out a mass email to let them know exactly why their payment was declined. This email resulted in about an 80% conversion rate on those payments that were initially declined.