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.
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.
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
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.
- 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"
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
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.
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.
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 -%}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.
In this file we assign some default variables.
{%- assign id = "defaultModal" -%}
{%- assign openModalBtn = "defaultOpenButton" -%}
{%- assign title = "Modal Title" -%}
{%- assign body = "Modal Body" -%}Use this dynamic-modal.liquid component by creating a trigger element 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.
{%- include "dynamic-modal",
id: "homePageTestModal",
openModalBtn: "testButton",
title: "Testing Title Variable",
body: "Testing the Dynamic Body Of the Modal...",
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';"
-%}Read more on this Shopify Variable Scopes. If you find some good use cases for these please post them in the discussion ideas category