shopify-theme-lab

Shopify Starterkit is now Shopify Theme Lab

Shopify Theme Lab 2 has a much more customizable modular approach compared to the 1.x version.
By default, it's bundled with Vue.js and Tailwind CSS like the previous versions, but it's super easy to remove or replace them with any other framework.

All Changes

Shopify

• shopify/ directory contains framework-agnostic .liquid files
• less template code compared to 1.x versions
• all Vue.js examples bundled into a single snippet

JavaScript

• Vue components are global across all .liquid and .vue files
• global Vue filters
• leaner Vue example-code and file count
• you can now remove Vue entirely and replace it with any other JavaScript framework

CSS

• all new Tailwind CSS 2
• by default, CSS with PostCSS + PreCss (Removed in 2.1.0 and added postcss-preset-env) is used for styling
• preprocessor support: SASS/SCSS, LESS and Stylus
• you can now remove Tailwind CSS entirely and replace it with any other CSS framework

Workflow

• all new webpack 5
• support for npm or yarn
• new Browserlist .browserslistrc configuration
• new ESLintPlugin and updated .eslintrc.js configuration
• updated .config/ directory with a new plugins directory
• reloadr plugin now tries automatically to reconnect to base whenever the connection is lost
• cleaner console output
• git now tracks files with a static keyword in their filename inside the shopify/assets/ directory
• updated READMEs with much more detailed instructions

Migrating from 1.x

1. The easiest way to migrate is to set up a new project with the latest version of Shopify Theme Lab
2. Copy your shopify.dev.yml and/or shopify.live.yml to .config/shopify/
3. Replace the shopify/ and src/ directories with your code
4. Run npm install sass sass-loader --save-dev
5. Remove future configuration options from tailwind.config.js
6. Check Tailwind CSS 2 Upgrade Guide
7. If you get any lint errors, you might need to adjust .config/.eslintrc.js or your code 😬

If you didn't add any new packages or didn't adjust the contents of the .config/ directory you're done.

view all changes: Pull request

Bug Fixes

• fixed wrong tailwind body class. It's now min-h-screen instead of min-min-h-screen

Improvements

• added comment to explain how component naming works inside system-info component

Maintenance

• updated main repo readme
• updated package.json description
• fixed multiple typos in readme files and code comments

view all changes: Pull request

Features

• added a new vue component to show how to pass shopify data via props to vue components

Bug Fixes

• fixed webpack auto-loading for vue components with a - dash or _ underscore in their filename
• fixed wrong translation key

Improvements

• updated multiple readme files
• added reloadr readme
• added more annotations to several files

Maintenance

• updated tailwindcss from 1.8.9 to 1.8.10
• fixed typos in code and readme
• general code quality adjustments

view all changes: Pull request

Changes

• code quality
• updated readme

view all changes: Pull request

Changes

• now using node-themekit
• cleaner .config/ directory structure
• new theme initialization feature for remote Shopify store with $ yarn shopify:init
• removed shopify:deploy in favour of deploy:dev and deploy:live
• updated readme

view all changes: Pull request

Changes

• removed unused npm package from package.json

view all changes: Pull request

1.0.0 is here. Shopify Starterkit is production ready 🎉