slatify.md

Slatify Shopify Theme Guide

A quick and dirty setup guide for "Slatifying" a Shopify theme for local development. Because I never remember this 💩.

Setup

1. Create config.yml in the project root.
2. Edit the config.yml by adding your store’s credentials to the development and production environments.
3. For Slate v0 use Node Version Manager to install and use Node v8.11.1 in your project root. This may be the last version of Node compatible with Slate migrate? See issue here.

password: the password generated via a private app on this store. Access this information on your Shopify admin/apps/private page. theme_id: the unique id for the theme you want to write to when deploying to this store. You can find this information in the URL of the theme’s online editor at Shopify admin/themes. Alternatively, you can use "live" as shorthand for the published theme. Store: the Shopify-specific URL for this store/environment (ie. my-store.myshopify.com)

Download the Production Theme

Download the theme from the production environment set up in the config.yml.

theme download -e production

Convert Theme to Work with Slate

Run this command from your project root to install dependencies and restructure your theme files into a src/ directory. Empty icons/, styles/, and scripts/ folders will also be created.

slate migrate

Install Dependencies

1. Delete the newly created node_modules directory.
2. Use Node Version Manager to install and use Node v11.15.0, or the latest v11 LTS release in your project root. This is due to Gulp v3 not working with Node version greater than 11.
3. Re-install all dependencies.

yarn install

Configure JavaScript, CSS, and Settings JSON

1. If it doesn't exist already, create an empty settings_data.json file in the src/config directory.
2. Move JavaScript to the src/scripts directory.
3. Move CSS or SCSS to the src/styles directory, and remove any .liquid extension from them (Slate will compile this directly).