How to test shopify themes locally?

Quesofat
February 24, 2017
276 views
2 votes
4 Answers

I was wondering what the best way was to deploy shopify themes locally for testing before deploying. We recently started employing deploybot. We really like deploybot but we also would like a way to not wait five minutes to test our files in an alternate store.

How would I accomplish this?

Tags: liquid shopify

Answers

- DavidLazar
- February 25, 2017 at 11:26 pm
- 0 votes
0
You have a test shop. You are working on a theme. If you are doing it right, any changes you make to the theme, are automatically transferred to the test shop. So all you need to do is watch your browser, since you probably also have a watcher on that auto-reloading on changes.

Have been doing this for years, and I never wait 5 minutes for a deploy, as it takes mere seconds to deploy a change and see the results. Throw in some smart Git hooks and you’ve even got version control.

Login or Signup to reply.

- JoshBrown
- February 26, 2017 at 1:52 am
- 0 votes
0
It’s tough to preview themes locally. Check out Themekit if you want a quick way to sync local theme files with a development shop: https://shopify.github.io/themekit/

Login or Signup to reply.

- GeorgeButter
- February 28, 2017 at 5:18 am
- 0 votes
0
Here’s how to setup a local working environment:
https://www.shopify.com.au/partners/blog/95401862-3-simple-steps-for-setting-up-a-local-shopify-theme-development-environment
1. Install themekit:
curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python

https://shopify.github.io/themekit/
1. Setup API credentials by creating a private app in your Shopify admin.
Apps > Create private app
1. Get your theme id.
  visit name.myshopify.com/admin/themes.json to get a list of themes and ids
2. Create a config.yml file and populate it with the credentials. It should look somewhat like this:
```
 development:
  password: 16ef663594568325d64408ebcdeef528
  theme_id: "123"
  store: can-i-buy-a-feeling.myshopify.com
  proxy: http://localhost:3000
  ignore_files:
    - "*.gif"
    - "*.jpg"
    - config/settings_data.json
```
1. Have themekit listen for any local changes and upload them to Shopify.
theme watch

However the store is still online. Because the Shopify framework is hosted on Shopify there is no localhost solution.
Login or Signup to reply.

- JordanQuartermain
- June 27, 2018 at 1:50 am
- 0 votes
0
For anyone coming to this in 2018, we now have use of Slate.

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

For an idea of workflow, we have multiple devs working on the same theme and they can see their changes locally with Slate.

How we achieve this
- We have a dev store that is a direct clone of our production store.
- Each dev creates another theme on the dev store and branches off master locally. They then will ONLY use the theme id of the theme they just created to work with (updated in their config.yml)
- Slate will watch changes and deploy to their preview theme and refresh their browser locally too.
- Once the dev is happy with their changes, we merge back into master and deploy to the live (master) theme on our dev store.
- Once it passes all the tests on our dev store, we push to a production store using slate.
EDIT – For creating new section files, template files, product templates etc

You won’t be able to create these files and for them to be displayed locally without a small workaround.

For example, if you create a new product template ("product.my-product.liquid"), you’ll need to Publish your preview theme first, then perform a "slate start" in terminal, select your new product template for whatever product you’re using it on in Shopify, then re-publish your "master" theme.

You may need to do another "slate start" to get the new theme template displaying on the product locally, but it will work.

This is because Shopify only allows you to assign product templates to the current active theme.
Login or Signup to reply.