How do you create a development version of a live website?

Shopify Partner
154 2 42

Hi There,

How do you create a dev version of a live Shopify site so that design/content/structural changes don't affect the live site?

Totally confused sorry, any pointers in the right direction would be much appreciated.



874 104 194

Well, there are a couple different ways you can approach that.

One way is you can capture the content_for_header and then do an if statement around the things you do not want other people to see. So like this:

 {% capture CFH %}{{ content_for_header }}{% endcapture %}

{% if CFH contains 'adminBarInjector' %}
<div class="admin-class">
  Here, no one can see this except for you. So you dont
  have to worry about any mistakes.
{% else %}
<h2>Customer View</h2>
<div class="customer-class">
 Everyone else see's this.
{% endif %}

Another way is to make a shopify partner account. You can export your current store at: 

Online Store > Themes > Actions > Download Theme File

That will provide you with a zip file for your current store, which you can take over to your shopify partner account and apply to a test store. The only thing is with that, when you export your theme file, if I remember correctly you're  just exporting the code and products. You won't have all the collections, blog posts, navigation, apps, etc. So it will take some time to reconstruct all of that. But after you have, you'll have a copy of the site that you can experiment on without worrying about anyone catching a mistake.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Shopify Partner
154 2 42

Thank you so much for the reply,

I'm shocked we can't implement a basic development workflow, it's all workarounds on top of workarounds. If there's no content, what exactly are we designing?

Web Design = Content Design

Thanks for the sugestions, much appreciated.