Shopify Starter Theme
A Shopify starter theme, complete with local development setup utilizing Shopify Theme Kit.
A bit of what this starter theme is utilizing: Webpack, Babel, Browsersync, Lazysizes, Svelte, ESLint, PostCSS, TailwindCSS, PurgeCSS, Material Design Icons, Stylelint
Quick Start
- Setup Shopify Theme Kit
- If you are new to Theme Kit be sure to follow the steps for Installation, Get API Access. Then Create a new theme or Configure an existing theme.
- Add config file (config.yml) for your Shopify theme(s)
- From project directory run
npm install
Example config.yml
Note: you can find your theme_id
at this URL for your Shopify store: https://yourstore.myshopify.com/admin/themes.xml
development:
password: 0987654321098765432109876543210
theme_id: 0987654321
store: yourstore.myshopify.com
production:
password: 1234567890123456789012345678901
theme_id: 1234567890
store: yourstore.myshopify.com
ignore_files:
- settings_data.json
Local Development
I'll run both of these same time, in two different Terminal windows.
npm run watch:theme
, to start a process that will watch your directory for changes and upload them to Shopifynpm run watch:assets
, to start Browersync and build scripts and styles.
Theme Check
Theme Check is a linter for themes. In order to run it you first need to install it through HomeBrew or RubyGems. Also useful is the VSCode Theme Check extension.
# Install via HomeBrew
brew tap shopify/shopify
brew install theme-check
# Run it
npm run theme-check
Structure
src/
: JavaScript and CSS source files are compiled from here and added totheme/assets/
.theme/
: Shopify ready theme files that are uploaded with Shopify Theme Kit.config.yml
: Contains the information needed for Shopify to authenticate requests and edit/update remote theme files.
Reference
- Lazy, or on-demand, loading for JavaScript modules with Webpack. Learn more.