Fast Shopify development with hybrid Debut theme
DateJun 11, 2021
In this article I will explain how we at Bornfight approach developing Shopify themes for clients with a budget or timeline that is not suitable for full custom development.
If that is the case we love to suggest starting with a theme to lower the cost and shorten the development time. Hybrid in this context means crossing a theme with fully developed features with tools for modern frontend development like ES6, SCSS and utilizing features like Hot Module Replacement etc.
To achieve this we will be using:
- Shopify Debut theme – as scaffolding tool for faster development
- Themekit – development tools to interact with the Shopify platform to watch for local changes and upload them automatically to Shopify
- Shopify Packer – bridge that allows us to develop using modern tools like Webpack 5 for minification, bundle splitting, bundle analysis, prefetch and easier manipulation with themekit
- Bornfight b–creative – Bornfight frontend project template for code style and rules
Why Debut theme?
I like starting with the Debut theme because it’s designed and written by the Shopify team and it’s free. It offers a great number of features like predictive search, adding to cart with Ajax, product image zoom and gallery etc, basically everything you need to develop a shop with all the features . It’s also written quite well and offers some of the latest tricks for making ultra fast websites which is very important for any website, and it’s fully accessible. It also comes with a large number of locales for the whole theme. Since we are not using Debut because of the design, its minimal looks is a feature, not a bug.
Introducing Shopify Packer
Shopify Packer written by Eric Hayes is probably the best thing happened to Shopify theme development since Shopify stopped supporting Slate. It’s everything we all hoped for and that’s a promise. Packer uses Webpack 5 with zero config to compile, bundle, split and minify your modern development technologies and start a server for development with hot module reloading actually working perfectly. It can also create, list and manipulate (delete, download, deploy etc) themes from your shop which is a lifesaver sometimes. I also love using Eric’s Shopify Packer because it uses SCSS, Stylelint, ESLint, Babel and PostCSS. It can analyze bundles and have multiple entry points for templates and layouts. It’s actually a CLI tool that’s installed globally and you can start a new project or integrate Packer with an existing theme in ridiculously little time. Most importantly you can easily customize all settings for the site and webpack if needed. Eric also provides quick support for the packer so i would highly recommend it and also buy him a beer because he deserves one for this!
Standardising code with Bornfight’s b-creative
How to connect all the tools to create hybrid setup?
Thinking about design
Firstly create a new development store which will then come with a Debut theme pre-installed or just install the Debut as a new theme. Now you can provide the designer with the preview link so he/she can look at all the stuff that it needs to style. Goal here is to create a design that follows Debut themes features, components and repeatable sections.
Next thing to do is to connect Shopify Packer with the Debut theme for local development and to utilize modern development tools. You can connect Packer with an existing theme or you can create a new blank theme and copy and replace Packers starter theme files from src molder with all of the Debut files you get when you download, which is my preferred way. This will then leave you with all of the Debut assets, config, layout, locales, sections, snippets and templates along with Packers styles and scripts folder which will then be used to create new custom styles and scripts. Follow Packers docs to generate API access that Packer needs to work with the themek (same process as only using themekit – private app API password).
Next we will copy SCSS and JS architecture from Bornfight’s b-creative along with linter configs to achieve standardised code. Best thing to do is not to change names of the Packer main entrance point files and just include b-creative’s files inside existing Packer files (they are empty anyways). Don’t forget to copy the fonts folder because it’s needed for including fonts with b-creative. Your new SCSS and JS will also need some dependencies installed which you can find in b-creative’s package.json file under dependencies. B-creative comes with Bornfight’s modern CSS reset to help you with developing new features.
Your final structure should look something like this:
And if everything is configured correctly, running packer start should give you this result:
I would like to finish this article with some pros and cons of using this hybrid setup for developing new themes.
- Faster and cheaper development time when designing and developing upon the Debut theme for “projects on budget”
- Local development with all of the features
- Using modern tools like ES6 and SCSS to develop themes
- Hot Module Replacement so you don’t have to reload all the time while development
- Slightly complex for setting up a new project because it needs multiple tools merged into one
- Is probably not suitable for anything else then to develop themes cheaper and with tight timeline