creative designer

Before you check out this post I'd suggest you take a read of this earlier one, and the warnings it contains. What this posts talks about is a method that is far from official, and is likely not something anyone would recommend. 

Once you've done that and feel that any risks are worth it - forge ahead and inject some into the New New (yep, the new new) Responsive Shopify Checkout. The checkout testing store has some injected CSS in place so you can get an idea of the loading delays and of course proof that it works!.

With luck, by the time you read this post the css has already been enabled and no further hackiness is required.

The new Shopify checkout is pretty cool, but there's still a couple of quirks that need some custom overrides. With the checkout.scss file currently disabled this is causing some stores grief. For example, I needed to find a solution for a new client site launched recently. Their trademarked logo was super long (and being trademarked) didn't exist in a smaller or stacked format. I needed to adjust the layout to ensure it remained on brand and conversion not lost. I settled on Javascript for them, but this css option would have been just as sweet.

Now I don't waste time putting together super detailed "how to" posts so you'll need to do some learning on your own. I'm better left for cool branding, design or code things - not fancy documentation! I would assume there's enough typos and horrid grammar to scare most people so you'll need to pretend those things don't exist... 

First Step: Make your checkout css file.

You can call it whatever you like, but for my checkout test store, I called mine injection.scss. It sounds exciting which is (to me!) important.

Step 2: Edit your Google Analytics settings

You should know where this is (/admin/online_store/preferences), but this magic link might shortcut you to the right place. Once you're on the right page just add some Custom Javascript to Google Analytics:

In the box that appears add the code found in the Gist below.

Be sure to change the scss filename to whatever you're using. That's it.

Like to work with me?

Let's talk