A Shopify Store Theme

An attempted clone of Crutchfield.com for Shopify

Using the theme

• Download crutchfield-theme.zip and upload it to the theme library in your store

Developing

• This theme
  • Download this repo (must have themekit installed)
  • Download crutchfield-theme.zip and upload it to the theme library in your store
  • Get API access for your Shopify store
  • Rename config.example.yml to config.yml
  • Add API password and store name into confg.yml
  • In command line run theme get --list to find the id of the uploaded theme
  • Add theme id to config.yml
  • Start developing
• Javascript
  • Add your scripts to .js files in src/js/templates directory
  • index.js should only contain scripts that are used by the all templates (navbar functionality)
  • other .js files corresponds to its template
• CSS
  • Add your tailwindcss 2 classes to the .liquid files
  • Other css needed can be added to src/css/tailwind.css
• Liquid
  • Edit .liquid in dist directory

Scripts

npm start

• Completes a Webpack build in development mode
• Deploys updated copy from dist/
• Webpack begins watching for file changes
• Theme Kit begins watching for file changes in dist/
• Theme Kit opens your development theme in your default browser

npm start:live

• Completes a Webpack build in development mode
• Deploys updated copy from dist to a live theme
• Webpack begins watching for file changes
• Theme Kit begins watching for file changes in dist
• Theme Kit opens your development theme in your default browser

npm run build

• Completes a Webpack build in production mode

npm run deploy

• Completes a Webpack build in production mode
• Deploys and overwrites all theme files via Theme Kit

npm run deploy:live

• Completes a Webpack build in production mode
• Deploys and overwrites all theme files via Theme Kit on a live theme

Output Files

Webpack will generate a Javascript file from src/js directory to dist/assets directory application.css will be generated by tailwind in the dist/assets directory

Made with

1. Themekit
2. Tailwindcss 2
3. Webpack 5
4. Line Awesome
   • removed all unused icons with IcoMoon
     • settings:
       • em square height : 1024
       • baseline height : 14.28571428571429
       • whitespace width : 0

License

Released under the MIT License.