This is a starter Theme using Webpack, ThemeKit and TailwindCSS for developing Shopify themes with modern build tools. The goal is to create a tool with a component-based folder structure and is easy to use.
- Component based folder structure
- ES6 Modules
- Chunk files
- Optimized and Minified code
- Hot Module Reloading - Thanks @felixmosh!
- Lazy Loading
- Prettier Formatting
- Linter
- Prefetch and Preload
- Fonts & Theme Setting
- TailwindCSS
This is set up for a component-based file structure. All liquid, js and scss are in the same folder to keep things in one place. Example of folder structure:
- components
- sections
- header
- header.js
- header.liquid
- header.scss
- header
- sections
Note: always import component scss files into the component javascript file. For example import './header.scss'; is inside header.js. This ensures the scss will get compiled to css with Webpack.
There are some rules to follow with this folder structure. For each component liquid file use the following template.
<style></style>
<html></html>
<script></script>It's important to reference styles and scripts from the compiles assets folder. Webpack will compile all js and css files under the filename.
For example a starting template for a header.liquid component would look like this.
<!-- Reference to compiled style in assets folder -->
{{ 'bundle.header.css' | asset_url | stylesheet_tag }}
<div class="header_container">
<!-- HTML HERE -->
</div>
<!-- Reference to compiled js in assets folder -->
{{ 'bundle.header.js' | asset_url | script_tag }}This theme setup is built with Yarn, Webpack and ThemeKit which are dependant on NodeJS versions.
You can use node v14 to install dependencies and run build commands.
- Install nvm
- Run
nvm install v14in terminal - Install dependencies
yarn install
This project uses clean-css-cli to minify TailwindCSS during build.
Install Clean-CSS CLI
yarn add clean-css-cli -g
Note: Global install via -g option is recommended unless you want to execute the binary via a relative path, i.e. ./node_modules/.bin/cleancss
- Install dependencies
yarn installornpm i - Rename the
config.yml.exampletoconfig.ymland add the Shopify Theme credentials - Run a build test
yarn buildif no errors then you are good to go
Note: the first time you run yarn start or yarn deploy to a new theme you must comment out ignore_files.
# - config/settings_data.json
# - "*.js"
# - "*.hot-update.json"
In Liquid, you can include a hyphen in your tag syntax {{-, -}}, {%-, and -%} to strip whitespace from the left or right side of a rendered tag.
By including hyphens in your assign tag, you can strip the generated whitespace from the rendered template.
If you don’t want any of your tags to print whitespace, as a general rule you can add hyphens to both sides of all your tags ({%- and -%}):
{%- assign username = "Borat Margaret Sagdiyev" -%}
{%- if username and username.size > 10 -%}
Wow, {{ username }}, I like!
{%- else -%}
Hello there!
{%- endif -%}When in development mode yarn start hot module reloading is enabled. It watched for changes to JavaScript, CSS and Liquid files. When JS or CSS is changes the browser will change without the need to refresh. When changes are made to liquid files a manual browser reload is required.
In the event that you find the HMR assets are not loading and the requests to localhost:9000 are 404 you will need to approve or pass a valid certificate.
To solve this issue you can open a new browser window and approve the SSL Certificate or pass a valid certificate as mentioned here devServer.https.
- Finalization and First Release
- Update copy-webpack-plugin to v6 Issue #519 Thanks @felixmosh!
- Webpack 5? 🤔