Shopify Staging Site

Question

What's the simplest way to set up a dev environment for a Shopify store. I'm trying to edit a Shopify store for a client that has a live Shopify site. I want to clone it and create a new version of the site in a dev environment - so I'm not editing a live site.

Answer 1

If you wish to edit the theme files, I suggest using Shopify Theme Kit. Therefore, connecting to the existing theme and duplicate to properly create and test your edits.

Answer 2

Create a Shopify Partners Account.

https://www.shopify.com/partners

This will enable you to create stores from the partners admin. You can set up a dev store, then export your client's live theme from within their store admin and import it on to your dev store.

You may not need a whole new dev environment to make your changes, though you might want to for test transactions/app integration. If it's just simple theme edits, you can just duplicate the live theme on the client's store and use ThemeKit or Shopify Slate for development, then set your theme as the live one when you finish edits.

https://shopify.github.io/themekit

https://shopify.github.io/slate/docs/about

Answer 3

Here is list of points for clone store in dev store.

1. Create a new store in your development partner account.
2. Export theme from live store to dev store.
3. Setup App same as live in dev store.
4. Export require data like products, collection, customer and import in dev store. you can use any export/import app like excelify for it.
5. Do require changes in theme and after approval migrate theme in live store.

Answer 4

Every store comes with the ability to have up to twenty themes. You best bet is to make a deal with your client so that you get your very own DUPED or CLONED theme of their current production theme to work on. You then hook up your theme editing environment to that theme ID. You can then store all your work in your git, and push theme changes live to YOUR theme. Anytime you have anything great to show the client, they can PREVIEW your theme, using the live inventory and pages and blogs.

That way, no live production code gets hurt. The one drawback is if you invent new templates, they are not part of the live theme, so you maybe puzzled as to how to preview those. You have to make empty or fake versions in the live theme. You also have to clone or dupe products for example, to then assign your new templates to preview. It does suck, but the suckage is minimal.

So that is it. The best a developer can have. The shopify theme gem command line tool still works aces for me, YMMV. Do what makes you happy there.

Answer 5

You can use ThemeKit to achieve this.

1. When you navigate to Themes in your admin, under the Live Theme "Actions" dropdown, click on Duplicate.
2. Once you've installed ThemeKit, you should have the config.yml file available to add credentials for you working environments (if the file does not exist just create it in the root folder). The contents should look something link this:

prod:
  password: ${PROD_PASSWD}
  theme_id: ${PROD_THEMEID}
  store: ${PROD_SHOP}
dev:
  password: ${DEV_PASSWD}
  theme_id: ${DEV_THEMEID}
  store: ${DEV_SHOP}

3. You can explicitly add your credentials into this file or use a "variables! file saved locally in \AppData\Roaming\Shopify\ThemeKit (for windows) where you add your credentials, something like this:

DEV_PASSWD=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
DEV_THEMEID=1259349550
DEV_SHOP=shirtsthatmatchmypants.myshopify.com

PROD_PASSWD=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
PROD_THEMEID=593495501
PROD_SHOP=shirtsthatmatchmypants.myshopify.com

You would get these credentials while you're installing the ThemeKit private app to your store.

4. Note that the password and shop variables are the same for both environments but you can find each theme's ID under the "edit code" link when you navigate to Themes in your admin, under the Live Theme "Actions" dropdown as well as the "Actions" dropdown of the theme's duplicate from step 1. You should see a link like this https://shirtsthatmatchmypants.myshopify.com/admin/themes/593495501 where the number at the end is the theme ID.
5. Now when you start developing, use the theme watch --env=dev flag when you're working behind the scenes. You can use the "Preview" link in the "Actions" dropdown of the theme's duplicate from step 1 to see or share your changes. Then use the theme deploy --allow-live --env=prod flag when you're ready to deploy your changes to the live theme.