The 24 Hour Shopify Challenge

We want to prove that website development isn’t as intimidating as it might seem. We’re also a crazy bunch and wanted to do something different.

So we thought; “How can we make our senior developer want to punch his Mac?”

Our answer?

Design, build, test and push live a full Shopify website in less than 24 hours of course!

It’s safe to say that Ben wasn’t massively thrilled with the prospect of waking up at 6AM and powering through until the deed is done. However, we pay his salary so it’s tough luck Ben!

We’ll be updating this blog regularly with the challenge progress, and a unique glimpse into life inside a small digital marketing agency.

Be sure to follow us on LinkedIn here, and if you’d like to talk about the challenge, please use #24HourShopifyChallenge.

We will reveal the business we’re doing the work for in due course.

See you on the other side!

The Challenge Begins

06:05 

And the #24HourShopifyChallenge begins! Ben and David are in the building and getting things up and running.

The first coffee of the day is brewing (expect us to talk about that a lot). We’re reviewing the plan of action for the day.

Yes, we prepared the plan yesterday. It’s not cheating we promise!

Here it is in all it’s glory:

  • Exporting products from WooCommerce and Importing to Shopify
  • Adding a domain to the Shopify Store
  • Installing Google Analytics tags
  • Designing & Developing a bespoke Shopify Store theme
  • Carrying out thorough device and browser testing
  • Setting up 301 Redirects
  • Resubmitting sitemaps to Google Search Console
  • Finally, launching the site!

The First Issue

06:40

The Shopify store has been created, alongside all other general setup tasks.

Will Ben be able to stick to the plan?

07:45 

The first challenge of the day presents itself. The product CSV wasn’t playing ball with Shopify, so some tweaking was needed to get all of the products uploaded. Nice and easy start!

08:05

Another Excel hack required. Expertly handled by Benjamin. Another coffee also required.

Coffee Time

08:15

Today is sponsored by caffeine, caffeine, fresh air and caffeine. Luckily, we have enough coffee to go around! Bettys & Taylors of Harrogate, let us know if you require our services 😉

08:30

Coffee is under consumption. The products are uploaded. Ben has finished his breakfast, and about to get started on the first big task of the day. It’s time for some theme development.

Office Admin

08:55

Our apprentice Morgan has entered the building! He will be assisting Ben with various elements of the build, but only for 8 hours, as we only want one of our developers banging their head against the wall. We’d prefer to keep our neighbours happy and our rent cheap.

09:25

The post has arrived! What could it be?

It's... Ice Hockey Jerseys?

09:35

So it’s actually two ice hockey jerseys for David, our marketing & sales director. He’s obsessed with ice hockey, presumably looking for some positive news after Newcastle United’s steady decline back down to the Championship. This is probably also why he prefers an ice cold office.

Not today David, not today!

Time Goes By

10:20

Not too much to report. Ben & Morgan are hard at work, whilst David is cracking on with his monthly Google AdWords & Analytics Reports.

Ben has his weekly listening of 30 Second To Mars on Spotify. Normally, we’d say something, but today we’ll let him off.

We all know the only good 30STM song is ‘Attack’ anyways.

So Slowly (Slowly Slowly)

11:05

Still working hard! It’s been snowing all morning, but has just picked up in the last ten minutes. So here’s a nice gif of our view. Kudos if you get the terrible pop song reference.

Lunchtime

12:30

It’s lunchtime, so time for a short rest and motivation break.

Luckily, the walls of our building have some inspirational messages to keep us all at peak performance.

Are we brave or bonkers?

P.S. It was Kylie!

Technical Recap

12:55

Time to recap a few of the major things achieved thus far, and to go into a little more details about the technical aspects of the build:

  • We’ve been using the Shopify Sections API to create customisable layouts for the client. Creating themes this way allows for control over the layout of the website. This is a commonly underutilised feature that really does help to save time.
  • As we’re starting from scratch, creating a theme suitable for a client to take over and use themselves requires a large amount of configurability. This means that we have to go through and define these configurable options using the Settings schema. If we were using a pre-built theme, a lot of these would be pre-defined.
  • As a next step, we’ve been ensuring that the pages created are fully responsive and in a good state for further customisation and for content/product drop-ins. At the moment, it doesn’t look great, but it works!
  • All products were uploaded to the site and categorised prop

A lot of this seems slow paced, and you would be right! The meatier tasks are fast approaching…

 

Functionality #1

13:40

A cool little piece of dynamic price functionality has been implemented.

By utlising the Timber Frameworks ‘SelectCallBack’ function, we can dynamically change the value of how much a person is saving and display it to them. People buying on products online will be more inclined to buy if they think they are making a big saving.

We’ve seen conversions increase when including similar pricing functionality, hard coded or otherwise. Food for thought if you have an ecommerce website!

Here’s a snapshot of the code for those interested:

Coffee #3

14:00

It’s coffee time again! Double strength espresso all round, except for Morgan, who doesn’t drink hot drinks.

I mean, come on!!!

Functionality #2

15:10

A ‘Countdown’ functionality has been built in. This allows an alert to display next to a product showing how long is left until the next delivery.

As you can see from the image below, there’s a good amount of customisation available. The alert can be configured to countdown to a specific time and choose whether or not to restart the countdown once the limit has been reached. The client also has the option of showing how much a customer can save, as introduced previously.

Good work Ben!

Happy Little Workers!

16:00

Speaking of countdowns, we’ve seen some eyes glancing towards the clock, expecting a 5pm finish. How futile!

Don’t they look fantastic! Hard working developers!

Also notice the discarded McDonald’s takeaway bag in the bottom left. Really doing the stereotype justice lads.

The Little Things

16:35

More additions to the website are completed. We now have a wishlist, the cart and purchase pages have been setup, the user account functionality has been sorted, as well as the Collections page.

Styling of the pages has now begun. We’re shifting phases now, from building the ‘core’ of the site to more design and user experience focused work.

One Departs!

17:15

Our apprentice Morgan has called it a day. Well, we called it for him – he’s put in a solid shift today. The pressure piles on Ben, with the halfway point approaching.

Time for tea we think! A surprisingly nutritious meal for David, compared to the others. Although the smell of double cheeseburgers lingering in the air somewhat takes away from the health benefits…

Thoughts on the snazzy keyboard?

On The Up

18:10

Progress is coming along nicely indeed.

Aaaaand back down..

19:30

As always with development it’s quite often the “easier” tasks that always mess up your timescales. Shopify’s Timber framework has done a great job of helping us structure our website, however, some of it’s JavaScript functions are starting to cause problems…

Technical Recap

20:45

Okay, so a quick recap…

  • The header/navigation has been styled and is fully responsive.
  • We have started to style all of the pages individually where necessary. Timber does a great job of providing a base style for every page of the theme. For example, accounts, cart, orders etc. This means we can concentrate on the following pages; home, collections, product.
  • JQuery Cycle has been implemented. This is a lightweight JQuery plugin that allows us to add slider functionality to our store.

Home Time!

22:00

It’s 10 o’clock and it’s time to head home for Ben so he can finish the site from the comfort of his own house.

A lot of the major front end CSS and JS has been created to get the store looking just how the client wanted it.

Looks like it is time to start the testing!

Shout out to David still in the office catching up on the work he missed out on!

And the clock strikes midnight!

12:00

6 Hours to go and it looks like we are coming to the end of the project with hours to spare. Time to stick The Office US on the Xbox for some light-hearted comedy to see me through to the early hours of the morning.

Testing went well! Again, thanks to the magic of Timber there are very few bugs to fix. One of the advantages of building on a web framework is that they have been tried and tested. They are a very reliable for creating web apps!

One thing letting the site down at the moment is the lack of content. The client’s existing site has very little in terms of content. They also have inconsistently sized product imagery which isn’t very pleasing on the eye and isn’t doing the theme justice.

Time to look over the site and see where improvements can be made…

More options!

01:00

Just a quick on-the-hour update.

Earlier in the day I set up all of the Theme options so that I could start building out the theme files. looking back, I think I should of added more options…

When building a theme for a website (whether it is WordPress or Shopify) a developer must ask ones self “would the client like control over this element?”. For example, a client might want to change the font size of the navigation bar. This is a fairly straight forward request to implement and this kind of customisation should be available to the client.

Look at all those options

Mmmm…. Look at all those options!

Now that more code has been added, it’s time to test again.

Aaaaargh! 301 Redirects!

01:18

Yikes! I completely forgot about the 301 redirects! Time to dive back in to the client’s existing site and export URLs.

For those who don’t know why 301 redirects are important…

They’re important because when you move a website a redirect will tell search engines that a page now exists on a different URL. Broken URLs can have a negative effect on your organic rankings.

See? You don’t get that kind of service from your gran’s friend’s daughter-in-law’s husband who does freelance web dev on-the-side.

Saying as I’m home alone, I feel like the accompanying image is appropriate!

That was quick...

01:30

Act cool.. just act as if you didn’t just have a mild freak-out about the 301s…

So yeah, that went quicker than expected. I now have a 301 redirect document ready to upload when we swap the domain over.

P.S. Can you tell I’m a fan of the Office US?

Bedtime!

02:10

Okay, so far I have completed:

  • Product Import
  • Installed several Shopify Apps
    • Shopify Order Printer
    • MailChimp popup
    • Smart Wishlist
  • Designed/developed a configurable, fully-responsive Shopify Store theme.
  • Carried out device and browser testing.
  • Set up a 301 redirect document.

Right now would be a good time to get the client to check over the site and request amends. But, she’s asleep so I think I will grab some well-deserved sleep too!

G’Night folks!

Back to the grind!

11:00

Rise and shine folks! It’s time to call the client!

At this stage it’s important to understand their thoughts on the theme and take note of any design/functionality amendment requests…

ITS GOOD NEWS! HOORAY!

12:15

The client is happy! Phew!

The 20 hours of coding yesterday was worth it!

I now have a list of amends to work through as well as a few bugs that cropped up during the revealing of the theme (typical).

4 Hours to go!

12:20

So, here are the outstanding tasks..

  • Make the home page banner spread the full width of the page and allow the client control over how long a slide is displayed for.
  • Add a “heading” element to the home page layout. A header should help break up the page.
  • Set a max width on the logo at Desktop, Tablet and Mobile breakpoints (widths at which the screen changes layout).
  • Let the client configure the style of the alert on the product page.
  • Remove the search form from the navigation bar on desktop and create a search pop up.
  • Style the dropdown menus!
  • Fix the layout issues on the “collections-list.liquid” template.

These probably mean nothing to you, but at least you know I’m not sat doing nothing…

If you listen closely you can almost hear the countdown clock..

12:30

Okay, starting to feel the pressure now.

I think I’m just going to list the task and the time it was completed…

It's the final countdown!

12:40 –  Make the home page banner spread the full width of the page and allow the client control over how long a slide is displayed for.

13:30 – Add a “heading” element to the home page layout. A header should help break up the page

13:40 – Set a max width on the logo at Desktop, Tablet and Mobile breakpoints (widths at which the screen changes layout).

14:00 – Let the client configure the style of the alert on the product page.

14:35 – Remove the search form from the navigation bar on desktop and create a search pop up.

14:45 – Style the dropdown menus!

15:00 – Fix the layout issues on the “collections-list.liquid” template.

Almost there...

15:15

So close!

Time to do some last minute testing before I call the client again at 16:00!

Hopefully nothing major shows it’s face…

WE DID IT!

15:54

With minutes to spare, no big deal…

A couple of small issues cropped up, nothing we couldn’t handle.

We’ve also found time to drop in some dummy content and fix any mistakes that might have occurred during the product CSV import. (A few products were displaying as free…).

Right, time to call the client and deliver the good news!

We knew we would do it...

To recap!

Over the last 24 hours we have…

  • Held talks with a client and quickly drafted a proposal document that specifies the deliverables for this project.
  • Registered a new Shopify Store.
  • Imported products from an existing WooCommerce Store.
  • Developed a configurable and fully-responsive Shopify Store theme.
  • Installed Several Shopify Apps to make managing the Store easier.
  •  Created a 301 redirect document ready to bulk import.
  • Completed several rounds of testing .

 

Remaining Tasks

Okay, so we weren’t able to delivery everything…

The client’s imagery wasn’t as good as first thought (coupled with image import issues) we’ve only uploaded one image for each product. We have made recommendations to the client for their imagery, e.g. file size and dimensions.

The website is also severely lacking content. This is something the client is going to have to create and upload by their self. For demonstration purposes we have used a mixture of lorem ipsum and stock imagery.

Until the imagery is complete we are going to leave their existing website live. Therefore we have not implemented the 301 redirects or transferred the domain to the Shopify Store. However, they don’t currently get any traffic to their existing website… But, it’s just easier if this is all done at once!

Check out the site below

Password: uniata

Thank you!

Thanks for following!

Thanks to everyone for following along! It’s been a good journey!

Now that the challenge is over we can start working on your next project.

If you have a WordPress or Shopify project in the pipeline, please get in touch 🙂