https://github.com/bryanyeh/crutchfield-theme
Crutchfield.com theme using Tailwindcss for Shopify
https://github.com/bryanyeh/crutchfield-theme
shopify shopify-theme tailwindcss2 webpack5
Last synced: 3 months ago
JSON representation
Crutchfield.com theme using Tailwindcss for Shopify
- Host: GitHub
- URL: https://github.com/bryanyeh/crutchfield-theme
- Owner: BryanYeh
- Created: 2020-10-19T04:27:00.000Z (over 5 years ago)
- Default Branch: v2.0.0
- Last Pushed: 2021-01-16T23:26:25.000Z (over 5 years ago)
- Last Synced: 2025-08-22T15:47:14.881Z (11 months ago)
- Topics: shopify, shopify-theme, tailwindcss2, webpack5
- Language: JavaScript
- Homepage: https://crutchfield-theme.myshopify.com
- Size: 4.66 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# A Shopify Store Theme
## An attempted clone of [Crutchfield.com](https://crutchfield.com) for Shopify
### Using the theme
- Download [crutchfield-theme.zip](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](crutchfield-theme.zip) and upload it to the theme library in your store
- Get [API access](https://shopify.github.io/themekit/#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](https://tailwindcss.com/) 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](https://github.com/Shopify/themekit)
2. [Tailwindcss 2](https://tailwindcss.com)
3. [Webpack 5](https://webpack.js.org/)
4. [Line Awesome](https://icons8.com/line-awesome)
- removed all unused icons with [IcoMoon](https://icomoon.io/app/)
- settings:
- em square height : 1024
- baseline height : 14.28571428571429
- whitespace width : 0
## License
Released under the [MIT License](https://opensource.org/licenses/MIT).