danurbanowicz / shopify-starter-theme

Setup for local development using Shopify Theme Kit and Webpack

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

  1. Setup Shopify Theme Kit
  2. Add config file (config.yml) for your Shopify theme(s)
  3. 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.

  1. npm run watch:theme, to start a process that will watch your directory for changes and upload them to Shopify
  2. npm 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 to theme/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.

About

Setup for local development using Shopify Theme Kit and Webpack

License:MIT License


Languages

Language:Liquid 63.9%Language:JavaScript 15.3%Language:CSS 14.5%Language:Svelte 6.2%