Skip to content

v2.0.0 Shopify Theme Lab 🧪
Compare
Choose a tag to compare
@sergejcodes sergejcodes released this 02 Dec 16:38
v2.0.0
4116f61
This commit was created on github.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.

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

Assets 2
Loading