Project summary

Graphene X creates high quality apparel sustained by materials science.

They came to us because they wanted to migrate their online store from Wix to Shopify.

We set up a Shopify site for them, kept the same design as their existing site, and optimized their theme for performance.

Highlights

  • Matched the design of their old site on Wix to the new site on Shopify
  • Created editable sections so they can modify content without needing to hire a developer
  • Improved responsive design for better usability on mobile devices
  • Improved performance by up to 79% site-wide using the same design 😎

I’m sharing this project in a blog post (with their permission, thanks Jorge!) because it’s a key example of what’s possible on a migration project from another platform + a theme build project with us (we made significant performance improvements). Also, they are stoked about their new site, even mentioning it being “perfect”, and I think that’s pretty cool. 🤓

Q and A with the client

1) Why did you decide to move from Wix to Shopify?

For several reasons. Among the most important:

  • Pages didn’t work great on mobile.
  • Wix’s customer service is to say the least terrible.
  • Wix is far behind Shopify in terms of the apps that can enhance your e-commerce.

2) Can you describe your experience of working with the Speed Boostr team?

Spectacular. These guys really know what they are doing.

These are the kind of guys that promise 10 and deliver 20. Normally we are struggling with the teams we work with for them to achieve our expectations (product and time wise) and with the Speed Boostr team we were astonished.

They would never “just stick” with what we wanted, but were constantly giving feedback based in their previous experience and recommending us actions to move forward even if this meant more work for them (this happened a lot).

3) Being new to Shopify and having the site live for a couple weeks now, what are your thoughts on Shopify and your new website?

Really happy with it. We have an incredibly well set-up store which we can improve with time along with the brand growth.

4) For our own benefit, anything you think we could have done better, or can do to improve our system?

Honestly the work you made with us was perfect. Nothing comes to my mind at the moment. You managed to outperform every single one of our expectations. [Editors note: Nice! 😃]

Project details – What we did

This was a migration project with a client that had never used Shopify. Lucky for them, we use Shopify every day and a couple of us have / had stores on Shopify.

1) Theme build

They wanted to keep the same web design, just be on Shopify.

We chose the Debut theme to use as a foundation because of it’s clean code and minimalist design.

Then we customized each page template in the new theme to mirror the design of the old site.

While building out the new theme, we also added in some custom sections that would help them edit content and layout later on, without needed to hire a developer.

2) Configure the new store

They hadn’t worked on Shopify before, so we included consulting into the project where we did a screenshare to walk through the different areas of Shopify admin to explain how everything works and answer questions.

We set up the common settings and guided them on every area that needs configured + recommendations.

3) Help update URLs and SEO

If you’re migrating from another platform, you’ll want to make sure to set up URL redirects if the URL structure is different.

For example, if your old site linked to products like this: site.com/product-a, then you’ll need to create a redirect to redirect from site.com/product-a to site.com/products/product-a (Shopify’s url structure for products).

Here’s the Shopify documentation on how to set up URL redirects.

For SEO, you’ll want to check your key areas of on-page SEO – title tag, meta description, and alt attributes. These are generated via the Shopify theme, according to what you set in your store, but if you’ve optimized these areas in your old store you may want to check your new store to make sure you’re using the same content (for example go to the Product page in your Shopify admin and click SEO section in the bottom to set a custom title tag, otherwise it just includes the product title as the title tag).

4) Import existing data

You can import products, customers, etc via spreadsheet. The formatting will likely be different from your existing platform’s export so you’ll probably have to edit the spreadsheet before uploading.

Two ways to achieve this: a) you could manually copy and paste your existing data to the new spreadsheet for Shopify or b) you (or we) can write a script to parse the old store’s spreadsheet into the format for the new store’s spreadsheet.

5) App setup

They gave us a list of goals / features they wanted, we brainstormed from our collective experience to recommend the best solutions to achieve their goals.

For the apps, we installed them into the theme and helped configure so they would be set up for success.

Side note, if you’re wanting to know what we think are the best apps in general, check out our Best Shopify Apps page for links and descriptions.

6) Test and launch

We tested every page on the site in multiple devices and screen sizes to make sure everything is working perfectly.

After agreeing that the new site was ready for launch, we guided them on the migration, which basically means pointing their domain from the old server to the new server, so when you go to graphene-x.com it now goes to their Shopify site.

We also guided them on importing data from their old site, and were available to answer their questions and give support in the days after launch.

⚡️ Performance upgrades ⚡️

Our expertise is in performance optimization of Shopify sites, so naturally we made sure they were dialed in!

We optimized the theme and images of course.

We also implemented some conditional loading techniques to prevent loading all custom code on all pages (common on Shopify sites), which saves load time by removing unused code on the page.

Improved load speed significantly on their new optimized Shopify site vs their old Wix site.

It’s worth noting that their old site wasn’t fully optimized. We’re not familiar with Wix so can’t make a direct comparison of Shopify vs Wix, but it’s likely our expertise in Shopify optimization was a major factor contributing to the speed gains.

Shopify Analyzer results

We built the first performance analysis tool for Shopify, the Shopify Analyzer, because most analysis tools give general recommendations that aren’t geared well for engaging ecommerce sites.

After optimizing their site, every page on their new site scored a 100/100, here’s the home page:

WebPagetest results

We use webpagetest.org on almost every optimization project to measure benchmarks. We’ve found this to be the most reliable tool to measure load speed, page weight, and requests.

Here are the before and after results of the 3 primary templates:

Home page

Home page before

Home page after

Product page

Product page before

Product page after

Collection page

Collection page before

Collection page after

Performance Summary

The new site is signficantly cleaner and faster, using the same design.

Do you need a new Shopify site or a redesign?

The quality of your site reflects the quality of your business. Work with Shopify experts that have years of experience in ecommerce, write clean code, and focus on website performance.

If you’re new to Shopify and low on budget, we’ve created a step by step guide with the basics to get set up on Shopify: Shopify Tutorial: How to Set Up an Online Store.

Contact us if you need help or want to level up your business.