We made a new version of Bootstrapify and you can find it here: https://github.com/luciddesign/Bootstrapify-4
Bootstrapify is an open-source base theme for Shopify that makes it super quick and easy for developers to start building amazing, responsive themes without having to do all the fiddly, repetitive setup work when starting from scratch.
You can view the Bootstrapify theme at http://bootstrapify-theme.myshopify.com.
Clone Bootstrapify using git or download the zip file.
git clone firstname.lastname@example.org:luciddesign/bootstrapify.git
If you wish to use the theme without touching the SASS or Bootstrap files then just upload
Bootstrapify.zip to Shopify.
To use both Shopify and Bootstrap to their full potential we concatenate Bootstraps styles with a few of our own, add some liquid and then send it to Shopify to be compiled.
The benefit of doing it this way is that we can alter Bootstraps variables directly from the theme settings and we don't have to override a whole lot of stuff with our own styles.
Our own styles are kept outside the theme directory in
dist/scss/ and are built using Grunt into
To add any new styles you can either add it directly to
dist/scss/bootstrapify_overrides.scss.liquid or include your own files in the concatenation within Gruntfile.js.
However there are two caveats with using SCSS with Shopify:
- They don't support
@import... yet. So to keep Bootstrap intact and updateable we have created this workflow for working with the theme.
- They don't allow SCSS in the checkout styles, so this still has to be compiled with SASS locally.
We then use the Shopify Theme gem to watch the theme directory and push any changes up to Shopify.
The theme settings that appear in the Shopify Admin (
config/settings.html) are generated from the YAML files in the
settings folder using the
You can discover more about this plugin and how it works from its GitHub page.
Before you start!
If you don't already have Grunt and Bower installed globally on your system you need to do this, otherwise you can jump to the project setup. To install Grunt and Bower globally using npm:
npm install -g bower npm install -g grunt-cli
Install Grunt's dependancies:
Install Bootstrap and other Bower dependancies:
Install the SASS gem and the Shopify theme gem:
Or you can do this as a nifty one liner:
npm install && bower install && bundle install
Setup the Shopify theme gem
Inside the theme folder run:
theme configure [api_key] [password] [store_url]
More detail can be found on the Shopify theme gems readme
To build the project run:
This will do the following:
- Compile the SCSS files into the themes asset directory.
- Copy Bootstraps JS files into the themes asset directory.
- Lint the Bootstrapify JS files.
To compile the SCSS files automaticly when they are saved run:
Spawn issue on 64-bit Linux systems
If you're running the task on 64-bit Linux systems, you may get a
ENOENT spawn error when the theme settings tasks is running.
See here for more details and an easy fix.
Bugs, issues or feature requests
Please create an issue here on GitHub at https://github.com/luciddesign/bootstrapify/issues
Feel free to make pull requests.
- Upgrade to version 3.1.1 of Twitter Bootstrap Sass.
- Major overhaul of how we deal with Bootstrap!
- Upgrade to version 3.1.0 of Twitter Bootstrap.
- Added Grunt for SASS compilation, JS linting and copying files.
- Added Gemfile and bower.json for dependancies.
- Moved development SCSS files into sub directory.
- Upgrade to version 3.0.2 of Twitter Bootstrap.
- Complete overhaul of theme settings.
- Upgrade to version 3.0 of Twitter Bootstrap.
- Complete overhaul and refactor of theme files.
Needless to say, we couldn't have done this without the awesome Twitter Bootstrap project which this is based on. Huge huge respect and many thanks for what these guys have created!
Copyright and license
Copyright 2013 Lucid Design Limited, Nelson, New Zealand | www.luciddesign.co.nz
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.