A mostly reasonable approach to Shopify theme development
A note on the language:
- "Avoid" means don't do it unless you have good reason.
- "Don't" means there's never a good reason.
- "Prefer" indicates a better option and its alternative to watch out for.
- "Use" is a positive instruction.
- Use Gulp, unless you have a good reason not to.
- Always commit your work to git after a feature is complete
- Always Use .SCSS flavor of SASS
- Use snippets/partials whenever possible
- Shopify Docs are your friend.
- When in doubt, copy the Timber theme design patterns
- Use Shopify Image Filters to server properly sized media files.
- Use Shopify Theme Options for common variables, such as email, social links, hours
- Use Shopify Pages for static content.
- Use Shopify Blogs are looped content.
- Avoid deeply nested naviagtions.
- Avoid customizing checkout (Shopify Plus Only)
User the Shopify-Helix starterkit unless there is a good reason not to.
- SCSS Paritials
- Gulp-based file syncing
Shopify does not have a local server or git deployment strategy. This means it's extremely easy to either 1) overwrite a team members work or 2) introduce bugs into a live site. To avoid this, you should follow a development workflow that works with the Shopify system.
Steps to make a feature
Pay attention to this if you are working on a Shopify project at the same time as another developer.
- Setup your machine
- Create a branch
- Log into Shopify Admin > Themes
- Duplicate the live theme
- Rename newly duplicated theme your branch name
- On your new theme, click
- Note the Theme ID in the URL (it should be the only integer in the URL)
- IMPORTANT paste the branched Theme ID into the
- Run Gulp
- Code all the things, and your changes will automatically be pushed up to the unpublished theme of the Theme ID you identified
- IF you change any theme settings on your branch (in the Shopify customize theme WYSIWYG), run
theme download config/settings_data.jsonand commit that with your PR.
- Finish the feature, make a PR
- Merge the PR to