Following the publication of the recent Shopify Theme Series
A few people have reached out to ask me about some of the workflow
tools I use when building themes. Let's begin by looking at the Desktop Theme Editor for Mac.
Desktop Theme Editor for Mac
As Shopify
is a hosted platform, you need to upload your theme files to view
changes in your store. Whilst you can of course use the theme editor in
the admin area, many of us like (and prefer) to work locally on theme
files using our chosen text editor - Sublime Text 2 in my case. The Desktop Theme Editor for Mac allows seemless syncronisation between local files and your Shopify theme
It can get a bit labour intensive having to ZIP up your theme and
upload it in order to see small incremental changes, but ,thankfullyt
there are two tools which solve this problem. The first one I'd like to
discuss is the Desktop Theme Editor for Mac.
This app, which is free to download from the Shopify app store,
works in the background to seamlessly synchronise changes made to your
local theme folder to a development or live Shopify store. This means
you are able to work locally in your favourite text editor, make
changes, add/delete files and then simply go to your store - hit refresh
- and see the changes.
Setting up the Desktop Theme Editor is straight forward:
Download the app from the Shopify App store, install and open.
Login to the app with your Shopify store details.
Pick the relevant theme you would like to work on locally. Note:
the theme has to be available in the store. If you are starting from
scratch simply upload your boilerplate theme via the store admin area
and then select it from the list.
Choose an appropriate location to save the theme.
Open up your theme in your preferred text editor.
Make a change and wait for the notification to appear that the change has been applied to your store.
Refresh your browser store to see the changes.
It's a great utility, very easy to set up and will certainly
streamline your theme development. Full details on the app including a
screencast are available on the Shopify docs site.
Shopify Gem
If you don't use a Mac, or have a preference for the command-line, you might be interested in the Shopify Theme Gem
available on GitHub. This achieves the same end result as the Desktop
Theme Editor, but instead of installing a native app you install a Ruby
Gem. The Shopify Theme Gem is a powerful command-line tool for working with your theme files
Once you have installed the Gem (full instructions
are available on GitHub) you'll have access to a wide range of
command-line features in addition to those offered by the Desktop Theme
Editor. These include the ability to:
Download all the theme files
Upload a theme file
Remove a theme file
Completely replace shop theme assets with the local assets
Open the store in the default browser
Both these tools make building themes very straightforward. The
synchronisation is quick and seamless and certainly speeds up your
workflow process.
Timber
I'm sure I am not the only person to have my own boilerplate for theme development. I maintain mine on GitHub and use this as a basis of themes I work on. Timber — A faster and easier way to build Shopify themes
My boilerplate theme is really basic and whilst it works for me you might like something a bit more fully formed such as Timber.
This starter theme was recently released by the Shopify team and
describes itself as "a faster and easier way to build Shopify themes".
It's much more of a framework than my own and ships with many useful
features.
Here's what's included:
Required Templates - Every theme template, both required and optional
Basic Markup - All the essential HTML and Liquid output and logic tags for each template
CSS Framework - A barebones set of styles that you can quickly customise for your own needs, including a fully responsive grid framework
Snippets - Reusable segments of commonly used code such as pagination blocks, breadcrumbs and newsletter sign up forms
Timber is definitely worth looking at. You can also try out a demo store to see how it functions in its basic form.
Sass Support
It's a little known fact that Shopify also supports Sass, albeit with one small caveat. Compilation of your *.scss.liquid
file happens on the Shopify servers so you don't need to worry about
running a local pre-processor for your Shopify theme development. The
resulting output CSS is compressed and comments are also removed.
I mentioned one caveat. Currently you are unable to use @imports in your Sass files, due to security implications on the Shopify platform. This currently prevents you from using helpers like Compass and Bourbon, but the good news is that solutions are being looked into.
However it's not all bad news. Timber includes a number of useful mixins
in its own Sass file and you can of course include your own - just
remember that they have to live in the same file as your style
declarations.
Better Workflow
The Desktop Theme Editor, Shopify Gem, Timber and Sass support all
represent ways in which, with very little effort on our part, we can
start to improve the way in which we build Shopify themes.
Beyond these tools many talented Shopify theme developers are using
their own tools and ideas in their daily workflow. If you have a useful
technique you'd like to share I'd love to hear it, feel free to drop a
note in the comments.
Unknown
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Medical Disclaimer
The information on this site is not intended or implied to be a substitute for professional medical advice, diagnosis or treatment. All content, including text, graphics, images and information, contained on or available through this web site is for general information purposes only. Krobknea makes no representation and assumes no responsibility for the accuracy of information contained on or available through this web site, and such information is subject to change without notice. You are encouraged to confirm any information obtained from or through this web site with other sources, and review all information regarding any medical condition or treatment with your physician. NEVER DISREGARD PROFESSIONAL MEDICAL ADVICE OR DELAY SEEKING MEDICAL TREATMENT BECAUSE OF SOMETHING YOU HAVE READ ON OR ACCESSED THROUGH THIS WEB SITE.