Themekit Webpack Save
(Legacy) Shopify Themekit with Webpack and TailwindCSS
(Legacy) Shopify ThemeKit with Webpack 5
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. With the new Shopify CLI a Webpack Dev Server is no loger needed. Please refer to this new project for Shopify 2.0 theme: webpack-shopify-cli
Contributing
To contribute to this repo please see
📁 Folder Structure
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 }}
Note: The scss or css file can alternatively be imported into the js file which will get compiled with webpack.
Node Version Manager
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
Clean-CSS CLI
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
TailwindCSS
This project uses TailwindCSS v2 a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. Checkout the amazing documentation and start adding classes to your elements.
Getting Started
- 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"
Webpack Dev Server
-
yarn startwill run build commands and start the webpack development server. -
yarn buildwill run build commands and create a dist folder of the compiled files. -
yarn deploywill upload the dist folder contents to your theme configured in the yml
Self-Signed Certificate
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.
Note: a quick fix with Chrome chrome://flags/#allow-insecure-localhost change to enable
HMR (Hot Module Reloading)
When in development mode yarn start hot module reloading is enabled. It watches 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 may be required.
Whitespace control
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 -%}
Variable Scope & Components
This is not unique to this project but it's worth mentioning and creating a component example. See the src/components/snippets/dynamic-modal/dynamic-modal.liquid component. This is a simple modal that uses variable scope for data, styles and functions.
Use this dynamic-modal.liquid component by creating a trigger element or function like a button with an id.
<button id="testButton">Trigger Modal</button>
Next we include the modal in a section with declared variables. These will be scoped to the snippet and we now have a dynamic reusable modal component we can use throughout our theme.
{%- render 'dynamic-modal',
id: "testModal",
openModalBtn: "modalBtn",
title: "Modal Title",
body: "Modal Body",
buttonOne: "Alert",
buttonOneFunction: "alert('Q: Do you struggle with impostor syndrome? Me: no I’m great at it')"
buttonTwo: "Close",
buttonTwoStyle: "text-white bg-red-500 hover:bg-red-700"
buttonTwoFunction: "modal.style.display = 'none';"
-%}
I came across this idea using include from David Warrington's article Shopify Variable Scopes and re-factored to use render tags. If you find some good use cases for these please post them in the discussion ideas category
Open Source Agenda Badge
