To get started using the theme, clone this repository:
git clone git@github.com:HauntedSmores/shopify-base-theme.git
or if you dont have SSH setup with github:
git clone https://github.com/HauntedSmores/shopify-base-theme.git
Next, run npm install to install required dependencies.
Edit the config.yml to use your correct password and theme id's. Your production definition block must be called "production" for the deploy command to work properly. For the theme commands to work properly, make sure you have a yamel entry named "development" and one named "production". Detailed instructions on setting up config.yml can be found here.
Finally, update the proxy value in the bs-config.js file to correctly proxy your live Shopify domain to your local BrowserSync server during development.
module.exports = {
"files": "theme.update",
"proxy": "https://mynewstore.myshopify.com/"
};
Destination of compiled files from /src directory. Do not edit files in this directory directly.
This directory contains the files that should be directly editing during store development.
Contains settings_schema.json used to add options to the theme to be edited in your store's dashboard. Once data is added in the theme settings, a settings_data.json file will be generated in your hosted theme containing the data. We chose to ignore this file in our theme's config.yml because its dangerously easy to erase all of the hosted CMS data in your theme. If you ever need it, you can get to it in your store's dashboard.
These liquid files contain the outer markup that the rest of our templates will be injected into.
Something like:
// Outer layout template
<html>
<body>
// Content from other templates
<body>
</html>
Contains JSON files dedicated to controlling localization for different languages.
Reusable pieces of liquid along with CMS capabilities. Similar to using settings_schema.json, except the options are only available on pages that contain a given section.
Reusable pieces of code without any CMS capabilities. Used for simple injections of reusable markup.
Directory for all theme assets. Depending on the type of file, they will be processed and moved to the dist/assets directory.
Nothing special here, just a commonly used asset folder that's included. Fonts will be flattened/migrated to the dist/assets folder the same way images are.
You can put SVG files here and they will be optimized with SVGO and compiled into a single sprite sheet in 'src/snippets/icons.liquid'. The sprite sheet plugin takes the file name and makes that the symbols' id. If you nest icons in folders, the folder names will be appended to the file name with --.
For the SVGs to work properly, make sure they have a viewPort property on the <svg> element.
For src/assets/icons/my-svg.svg
<svg>
<use xlink:href="#my-svg"/>
</svg>
For src/assets/icons/dark/my-svg.svg
<svg>
<use xlink:href="#dark--my-svg"/>
</svg>
Pretty simple - images go here, you may nest folders, and they will be flattened and migrated to the dist/assets folder.
All javascript files go here and should be imported into theme.js to be bundled. You can create and nest folders as needed.
All SCSS files should be placed here and imported into theme.scss to be compiled and bundled. You can create and nest folders as needed.
You may use liquid to reference assets from Shopify by wrapping your liquid in SASS interpolations (#{}) like so:
a {
colour: #{'{{ settings.link_color }}'};
}
The interpolation tags allow the SASS compiler to ignore these declarations and leave the inner string (without any quotes). All scss partials are compiled down into a single theme.scss.liquid file so that the remaining liquid will be rendered by Shopify server side.
All the necessary Shopify templates live here. The /customers sub-directory includes all account related templates.
Listed here are the commands available with this theme. Command syntax: npm run <command>
- Clears the
distfolder - Bundles assets
- Migrates template files from
srcdirectory todist
All assets are bundled for production with minification, no source maps, and less console logging.
- Runs the build command for development
- No minification
- Source maps are included
- Expanded bundle information logged in the terminal
- Starts watching your project for changes
- Opens a browser window running a local BrowserSync server proxied to your store
- Uploads any changes to your store on the "development" theme and automatically refreshes the browser
- Runs the build command
- Removes EVERYTHING from the theme labelled "production"
- Uploads your theme files to the theme named "production" in your
config.yml
You can also deploy to another theme. Just name whichever theme you would like to deploy to, "production". To avoid conflict, make sure all theme's are unique. You can only have 1 theme named "production" at a time.
- Runs the build command
- Updates all changed files on the "development" theme
You can also update another theme. Same as above, just name whichever theme you would like to update, "production". To avoid conflict, make sure all theme's are unique. You can only have 1 theme named "production" at a time.