aztech-mountain v2.0.3
Shopify Base Theme
See package.json for theme version.
Table of Contents
For contributing process and guidelines, check CONTRIBUTING.md.
Getting Started
Get API Key and Password
- If you're jumping on a project, please ask the lead developer and/or producer for the credentials of the development private app.
- If you're starting on a project, please follow the steps described here|(https://shopify.github.io/themekit/#get-api-access) to create a new private app and retrieve from it the API key and password.
Edit Config File
- Duplicate
config-example.yml
and rename it toconfig.yml
- Open
config.yml
- For each of your environments
development
,staging
andproduction
: Set the credentials forapi_key
andpassword
based on the private app generated in the previous step Set the store url forstore
Set the theme id fortheme_id
Set the domain for the development store to allow localhost development ** (Optional) If there are some files that should remain untouched and not uploaded to your theme, addignore_files
to your environment config. e.g.ignore_files: - config/settings_data.json
The config.yml
should look similar to:
production:
theme_id: 12345678901
api_key: 4636bc042223f53fa4e79c77bf810ea6
password: bb1c31588ca73c6096d6b60a045e6919
store: my-store.myshopify.com
ignore_files:
- config/settings_data.json
staging:
theme_id: 12345678902
api_key: 4636bc042223f53fa4e79c77bf810ea6
password: bb1c31588ca73c6096d6b60a045e6919
store: my-store.myshopify.com
development:
theme_id: 12345678903
api_key: 4636bc042223f53fa4e79c77bf810ea6
password: bb1c31588ca73c6096d6b60a045e6919
store: my-store.myshopify.com
domain: mystore.com #if you store has a custom domain add it here to keep from redirecting durring BrowserSync development
Developing
Installing dependencies
Open up a terminal window, navigate to the theme root folder and run npm i
to install all the dependencies referencered in package.json
.
Start development
Open up a terminal window, navigate to the theme root folder and run npm start
. This will compile, watch and hot reload your javascript and css. It'll also lint your js using standardjs best practices. If you make a change to a file that needs to be uploaded to Shopify, the process will handle it and reload your browser once it's been uploaded.
Note: In your Shopify Theme Settings, there is a setting called Access site through BrowserSync?, under the Dev, Logo, Favicon section. Make sure that this option is checked for your development themes, unchecked for your staging and production themes.
Deploying
There are build scripts provided in the package.json
that will build and deploy theme code directly to Shopify. All scripts can be run via npm run <scriptName>
, with the exception of npm start
. The build scripts are:
npm run development
npm run staging
npm run production
Each of the scripts reference a different environment as defined in your config.yml
file. The tasks will review your Git tree and only upload the files that have changed since your last deployment. CSS and Javascript will always be deployed.
Pre-requisites
These are things that you'll need to have for all Shopify builds, and all builds at Barrel in general.
Misc
Using Liquid in CSS and JS
It is possible to use Shopify's Liquid templating language in your CSS and Javascript. However, for most custom builds we do, we don't generally need this functionality outside of our markup.If you choose to use Liquid in your asset files, be aware that some features of this base theme may be unusable to you and the liquid syntax may cause build errors.
2 years ago