|Project Name||Stars||Downloads||Repos Using This||Packages Using This||Most Recent Commit||Total Releases||Latest Release||Open Issues||License||Language|
|Slate is a toolkit for developing Shopify themes. It's designed to assist your workflow and speed up the process of developing, testing, and deploying themes.|
|Themekit||983||a month ago||58||June 23, 2021||93||mit||Go|
|Shopify theme development command line tool.|
|Timber||923||3||5 years ago||August 25, 2016||50||mit||Liquid|
|The ultimate Shopify theme framework, built by Shopify.|
|Awesome Shopify||634||9 months ago||cc0-1.0|
|📌✨A curated list of awesome Shopify resources, libraries and open source projects.|
|Shopify theme development environment using Liquid, Vue and Tailwind CSS. Built on top of Shopify CLI 🧪|
|Theme Scripts is a collection of utility libraries which help theme developers with problems unique to Shopify Themes.|
|Starter Theme||440||4 months ago||54||mit||Liquid|
|The Shopify Themes Team opinionated starting point for new a Slate project|
|Cartjs||437||5||2 years ago||27||November 14, 2020||44||mit||CoffeeScript|
|Slater||348||1||3||a year ago||49||April 14, 2020||62||Liquid|
|🛠 Shopify development toolkit|
|Theme Check||296||1||3 days ago||49||December 12, 2022||89||other||Ruby|
|The Ultimate Shopify Theme Linter|
Why?: This was built as a starter theme to bring modern build tools and a modern workflow into Shopify development since Shopify Slate has been deprecated. This starter theme is as stripped down as much as possible so you can start with a blank canvas.
Pre-requisites: Need to have Shopify CLI 2.X.X (for serve & share commands), Node/NPM, Gulp Cli installed. This should work for the latest versions of each but for trouble shooting I have the falling versions: npm(7.5.4) | node(v12.16.1) | gulp(CLI version: 2.3.0,Local version: 4.0.2) | ThemeKit (1.1.6 darwin/amd64)
If you have all pre-requisites install from above then go ahead and download the latest release. After downloading the release/repo then
cd project-name and run command
npm install. This will install all of the development dependencies.
.env.sample fill in the values and remove the .sample extension:
# Sample env file, remove the .sample extension and fill in the values STORE_URL='my-shopify-store.myshopify.com' STORE_PASSWORD='shpat_e122110f8a000000dddeeff777' STAGING_THEME_ID='12300000002' LIVE_THEME_ID='12300000001'
Once you have the
.env setup you can run
yarn store:login inside the projects root. This will start development on your dev theme by opening a preview link, starting shopify theme serve to watch for changes, and also start watching for changes in your
List of commands you can use with npm
yarn serve(recommended) opens auto generated development theme preview link, start watching src files, and has hot reloading etc...
yarn shareopens preview link from shopify serves auto generated dev theme
yarn devauthenticate into your shopify store, start watching src files, & starts local dev server
yarn deploydeploy your development theme
yarn watchwatch development theme,
yarn openopen preview link for development theme
yarn downloaddownload all development theme files to
yarn buildgenerates css, js, and images
yarn build:prodgenerates production ready css, js, images
yarn build:cssgenerates development css
yarn build:jsgenerates development js
yarn build:imgcompresses images in /src/images and places in assets
/srcfiles for changes
yarn openopens preview link for development theme
The development process
You have two options either
yarn dev which will open a preview link, start theme watch on your
/dist files, and start watching for changes in your
/src files or if you want to get auto reloading with Browser Sync, run
yarn watch to start watching both your
/dist folders then open a new terminal tab and run
yarn bs to start Browser Sync to get a link that will allow auto reload your site on file changes (among many other things)
Once your changes look good on development the next step is to run
yarn stage. This builds your files in production mode and deploys them to your staging theme. Then opens a preview to make sure changes are stable there.
Once you have verified the changes. You can deploy to live by running
yarn live:deploy, this will confirm you actually want to deploy to live, enter y and watch your changes go live.
P.S. This project doesn't give you the command to watch live even though theme kit allows you to. You really should never watch live.
So first off I should let you know that all built js and css files have
If you have a lot of different features/styles per page I think this is the best approach. The main idea with Rollup is to have one js file per page. To keep the global scope clear rollup builds your files within an immediately invoked function expression. This means we can't stack script tags on top of one another to have access variables and functions in each script.
The only option is to put all your first-party js into one file. If you have code that's only gonna be used on certain pages and don't want to add it where it isn't needed then you need to make a script per page needed and then one script that has your js that you share across the site. As an example, let's say you only have custom js for the index, product, and collection page. The rest of your site shares the same code.
To do this you want to create 4 js files (index.js, collection.js, product.js, main.js) in
/src/js/, and one module called shared.js in
/src/jsmodules. You will import the shared.js module in all 4 script files since it will contain the code you need across all pages. You will then go into theme.liquid and write an if statement that imports the script for the page you are on or else just imports main.js. For example, if the user is on the product page import product.js and nothing else. If the user is on the about us page import main.js and nothing else. This will keep your bundle as small as possible along with Rollup's built-in tree-shaking. This same theory works for CSS though you do get cascading with the CSS so you can have more than one file per page if you want.
If you don't have a lot of features and functions you can just import one script and style file for the entire site. This is pretty much already set up in the site with main.js and styles.scss
We can import form node_modules but usually tree shaking doesn't work as it used commonJS. You can read the difference here. Rollup also has other plugins we can add as needed.
Rollup is configured in
This one isn't really that big of deal but, at this, I'm not watching the .liquid files with Gulp. This means JS and CSS builds don't get triggered when you only make a change to a
.liquid file. Most of the time this is not an issue. The only issue I have noticed is if a CSS selector or class is purged and then you add it to a .liquid file to use then you have to trigger a CSS rebuild. The other solution is to have gulp rebuild CSS and possibly JS src files upon each
.liquid file change. If you want to do this go to line 118 in
gulpfile.js and change it to this
watch(config.deepSass, config.liquid, series('build:css'));
I got the shopify theme files (
/dist/) from another git repo. I tried to clean up the files and include all the minimum required files that shopify needs.
You can replaced the entire contents of the
/dist folder with any shopify starter theme. Just make sure it's the same structure(i.e.
/dist/snippets, etc...).Please let me know if I missing any files or base code that is needed.
P.S. I currently don't have the
layout/checkout.liquid since that's for Shopify Plus+ only. You can also add this yourself.