Developing a Shopify theme locally

Here at Multiple States we use Shopify as our recommended e-commerce platform. When we need to work on a theme locally we use the Shopify theme gem. It is a command line tool that lets you make live changes to themes in your Shopify account.

Within our clients Shopify account we have two installs of the theme, production and staging. The Shopify theme gem allows us to push changes to the staging theme and preview them in browser for testing before we push them to production.

Installing the Shopify theme gem

To install the Shopify theme gem on OS X El Capitan you will need to follw the following steps:

  1. Open Terminal
  2. First, we need to install Homebrew. Homebrew allows us to install and compile software packages easily from source. Homebrew comes with a very simple install script. When it asks you to install XCode CommandLine Tools, say yes. Open Terminal and run the following command:
    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  3. Now that we have Homebrew installed, we can use it to install Ruby. We’re going to use rbenv to install and manage our Ruby versions. To do this, run the following commands in your Terminal:
    brew install rbenv ruby-build
    # Add rbenv to bash so that it loads every time you open a terminal
    echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profile
    source ~/.bash_profile
    # Install Ruby
    rbenv install 2.2.3
    rbenv global 2.2.3
    ruby -v
  4. To install the shopify_theme gem use ‘gem install’ (you might have use ‘sudo gem install’)
    gem install shopify_theme
  5. To setup your config file you can follow the instruction outlined at http://shopify.github.io/shopify_theme/





Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s