How to develop Shopify themes locally?

天大地大妈咪最大 提交于 2019-12-29 04:22:04

问题


I'm going to work on a Shopify theme, and I want to figure out how to run/edit it locally. I'd like to be able to the following, if possible:

  1. Pull all the Shopify theme code from the site to my local computer (ideally a single command line tool)
  2. Make edits locally, and run them locally or in a staging environment
  3. Push all the edits to the main Shopify site, again using a command line tool

Is this at all possible?


回答1:


There are quite a few workflows you can use here.

0. Shopify Slate (new!)

Slate is a theme scaffold and command line tool for developing Shopify themes. It is designed to assist your development workflow and speed up the process of developing, testing, and deploying themes to Shopify stores.

This is the new way for developing themes that the Shopify team has been working on for a while and soft launched publically around the 23rd of March 2017. Seems to be nowadays the most complete and proficient way of working with Shopify.

https://github.com/Shopify/slate

1. Task runners

If you're using either Gulp or Grunt locally for development, there are libraries out there that will upload your files to the store through API credentials of a Private App that you have to create. Most work by uploading the files you change, using a watcher.

  1. grunt-shopify
  2. grunt-shopify-upload
  3. gulp-shopify-upload (it's my favourite since I use Gulp but has a known issue that sometimes it stops uploading files and you have to restart it).

2. Official Shopify Theme Kit

Theme Kit is a cross-platform CLI tool that was built by Shopify Employees. It can run on windows/linux/OS X. You can read more about it on Shopify Blog or download it directly. The alternative previously mentioned of Desktop Theme Editor is deprecated and has been replaced by Theme Kit.

3. Third-party SaaS Applications

Instead of watching for changes, these will work with a continuos integration workflow, where your latest push on a certain branch gets uploaded to the theme you've selected.

  1. Beanstalk. More specific information can be found on their landing page for Shopify, here.
  2. DeployBot. Their help article on Shopify has some information on how to get started. Both options are from the same company. Here's a comparison of both they've did on their blog.

4. Third-party libraries

  1. There's also an alternative not officially supported by Shopify which is a TextMate Bundle in case you use that OSX editor.
  2. There's an unofficial extended cli similar to theme kit but with further functionality called Quickshot, which I've just found out based on Matt's response and seems pretty awesome. Some of the features they highlight are:

    • Supports uploading to multiple Shopify stores and themes
    • Easy to use configuration wizard
    • Uploads/downloads in parallel greatly reducing transfer times
    • Supports autocompiling scss locally before uploading to Shopify
    • Supports autocompiling Babel/ES6 into modules which are easily used by - Requirejs and others
    • Can use with .gitignore files or a custom .quickshotignore file.
    • Can download/upload Shopify Blogs, Pages and Products! Easily transfer them between stores! Even the metafields! And edit them locally in your favorite editor.



回答2:


Shopify recently released Slate, a new tool for theme development.

https://github.com/Shopify/slate




回答3:


Juan's answer is spot on.

There's one more I know of which I believe is a little more advanced than Themekit (which I use) called Quickshot: https://quickshot.readme.io/v2.1/docs




回答4:


Shopify have built a tool for Mac that allows you to develop your theme locally, and sync with your store https://apps.shopify.com/desktop-theme-editor

I don't know of anything for windows/Linux etc.




回答5:


If you're looking for completely offline development, it's unfortunately not possible at this time. While the Slate/ThemeKit CLIs lets you code in your favorite text editor, an internet connection is still required because it likes to keep everything in sync at all times.




回答6:


Install the state package by running the following commands:

npm install -g @shopify/slate
slate theme theme-name


来源:https://stackoverflow.com/questions/38803486/how-to-develop-shopify-themes-locally

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!