How to redesign, overhaul, and relaunch live site

Technical Q&A
1

I want to redesign & overhaul my site. This will entail editing the theme and creating, editing, and deleting pages, collections, menus, metadata, products. I want to keep my live site active until I’m ready to launch the new stuff. I obviously want to keep my orders info, my users, analytics, etc.

It seems I have 2 choices, listed below with a few questions. Please let me know if there are other options? Did I miss any gotchas for either option? Which have you used, and which do you recommend?

(1) Make a staging site on a Partner account. Export & import my products. Manually copy any assets that will survive the redesign (or use a plugin to, with limitations, copy stuff over). Develop all the public-facing stuff to be as I’d like it.

But then the question becomes: how to get the staging stuff back on the live site? If I just make the new site “Live” with a DNS change, I lose all my orders, analytics, users, etc. Moving the theme back to the live site seems easy enough (Github). I can export/import products. For the pages, metadata, etc, it seems like I could use a plugin like “Rewind Copy” or “Duplicate” and copy the dev stuff to the live site? (But both of those say they can’t copy Menus and other stuff? So there’d be some manual copy/paste and duplicate-by-hand work.)

Wouldn’t the past orders etc. then get messed up if I overwrite my products? Wouldn’t I lose all data associated with the “old” products?

Pros: Clean slate; results in cleaner code and set up

Cons: Hard to re-integrate with existing site and existing backend data

(2) Do everything on the live site, develop and preview the theme, make new collections, new menus, new pages, etc. for use with the new theme.

But what about editing Products? I need to edit the description, metafields, media, etc. I need to create some new products and delete some old ones, etc.

What about assigning Pages to Theme templates (seems like you can only choose from “live” theme templates)?

Is it OK to make new pages “visible” if they are only linked-to from the new Theme’s menus and other pages?

And then once I launch, I’d have to go through a (pretty cumbersome) “cleanup” phase where I’d delete the old pages, old menus, old collections, etc.?

Pros: All existing site data stays integrated

Cons: Sloppy work-arounds, might not be able to preview everything

2

@jamieCA , I see this question is four months old and although you got no response, I’m in the same boat now so I’m wondering what you ultimately chose to do. Let this also serve as a bump to the question if anyone wants to jump in.

I am working on a developer site for a former employer. Their site has slowed to a crawl and there are just too many code customizations and now-unnecessary apps for me to try to clean up the existing account. Even if I start with a clean version of the theme (which I am), I know some files are kept even with a new theme (I’m looking at you Assets and Files folders), and, of course, all of the apps remain even when I change a theme. I want this to be a truly clean copy.

I’m almost certain that moving to the developer site is going to be too scary for this client—particularly because of the loss of sales history—so after getting the theme ready and tweaked, I’m going to have to load it into the existing account. What’s the best way to go about this?

3

I ended up creating a partner account and developing a new site there. I set it up so my new theme is on GitHub — so the old “live” site and the new could both access it.

I used the native Shopify export/import to copy the products over to the dev site. That also brought the product images.

On the dev site I made my Pages and Blogs. I created Menus. I did all the dev until the site was done more or less.

Once the dev site was done, I had to

move the stuff to the live site. First, I set the live site to be password-protected for an “under construction” phase. Then I had to get each set of elements from dev >> live:

  • theme: this updated through GitHub so I only had to mark it as “live”

  • products: native Shopify export/import. This works good because you maintain any order history since the product ids stay the same via export/import

  • pages and blogs: easiest way was through free addon that did this. Before I imported new, I went through and un-published (to draft) all the old pages on the existing site (for back up). I also changed the old page urls to “***.old”.

  • I had to create url redirects by hand from any old pages urls to the appropriate new stuff.

  • files: used another free addon for this

  • menus: had to re-enter all these by hand

  • there were a few other points:

  • set your preferences by hand

  • a lot of addons can’t be installed on the dev site, so you have to install/test/tweak on the live site before you launch (i.e., remove password).

Overall judgment: Shopify is a big, fat CMS. As a programmer you get locked very quickly into having to figure out millions of little inconsistencies, quirks, and ecosystems. PITA.

I think this approach (a separate dev site instead of doing significant work on top of the live site) was probably the right one. The tools feel like such a big kludge anyway, at least in this respect I felt like in the end I more or less understand what all the parts are.

good luck!

4

Amazing response! Thank you for providing so much detail. This is a huge help for me and hopefully others in the same boat will find this response when it’s their turn to experience this hell.

Again, thanks!

5

Thank you so much for this!! I am facing a redesign for a client with very high sales volume and this process has been keeping me up at night. Your detailed list has awarded me some much needed sleep :sweat_smile:

@Shopify_77 please work on a “staging store” solution. The fact that us developers have to go through this gauntlet of unnecessary pain just to redesign/rebrand a store is a bit ridiculous. K thanks bye :victory_hand:

6

Thanks so much for this. I am new to building in Shopify and am trying to make this as painless as possible for the client (and myself). What addon did you use to export your new theme/pages and blog? Is there an addon/app to set up the redirects? I am frustrated knowing that I will essentially be doing things twice to get fully set up.

7

@GenniferR I used Matrixify to export/import all content, pages, blogs, products etc. For the theme, an app is not needed. Instead, set up your theme on GitHub so that both your development store and live store can access it. Or you can simply download your theme file from your dev store and upload it to the live store when ready. No app needed for redirects either, you can create your redirects in Online Store > Navigation > View URL Redirects (button in top right)