Glenn Stovall's Public Notebook

Shopify Theme Development

Resources

Working locally on an existing theme

  • Install theme kit brew install themekit
  • get the theme url. Go to the site admin > online store > theme > edit code > get ID from URL.
  • create a private app in the store. get the api key and password
  • mkdir myLocalTheme && cd myLocalTheme
  • theme get --password=[your-api-password] --store=[your-store.myshopify.com] --themeid=[your-theme-id]
  • start a github repo and commit.
  • to develop & update locally: theme watch --allow-live
  • to pull from production: theme get

Notes

  • Seems to use a mix of variables that can be edited in the admin, along with css and html.
  • Set up a local version that automatically syncs with production.
  • Theme Structure
    • /assets - css, js, images, etc.
    • /config
      • settings.json - where theme settings are stored. Accessed by clicking 'Customize' from the themes page.
    • /layout
      • theme.liquid the main template file for the theme.
    • /sections
      • Reusable sections that have their own config and can be used in the theme customization.
    • /snippets
      • reusable pieces of the template. think 'components.'
    • /templates
      • page templates. examples inlude index.liquid, article.liquid, etc.
    • config.yml - used to sync local store with shopify store
  • Tackling a Theme
      1. Setup, get local environment and everything you need.
      1. Typography
      1. Forms
      1. Buttons - don't forget hover states!
      1. Hero image
      1. Other Home page parts
      1. Featured Products
      1. other, depends on theme
    • Sections have custom stylesheets and javascripts. Path forward seems to be to build out sections, add customization where necessary.
  • Snippets vs. Sections
    • snippets are static, and must be manually added to sections in your application. Sections have their own config and can be moved in the theme editor.
    • To make a section available in the theme editor, add a presets to settings, with
  • Section boilerplate
  • presets is optional, but required if you want your section to show up in the editor.
  • Section Setting Types:
    • text
    • richtext
    • collection
    • checkbox
    • range
    • color
    • select
    • image_picker
    • url