OKCOOL

I’ve recently be working with the hosted-shop service Shopify and came across a small bug worth mentioning…

The Bug

I noticed that when you submit page 1 of the checkout process with required fields left blank, the errors attached to each field break the layout.

The default checkout CSS is causing this as it adds a height of 415px to #addresses on line 285.

The Fix

Since you can upload your own checkout.css to your theme’s assets to add to and override the default checkout.css, you can fix this by adding height: auto !important; (or using parent selectors instead of !important).

I’ve tracked the bug with Shopify so hopefully they’ll fix the default CSS.

My next wish would be to be able to customise the markup of the checkout pages, and not just the CSS…