Overview

This is an unoffical sample code for scratch building Shopify theme without cloning Dawn for understanding the theme architecture with simpler and fewer Liquid code.

If you are a theme beginner and feel it tough to grab the high volume source code of Dawn, this basic theme may work as a tutorial, but you are expected to be familiar with basic HTML / JavaScript / CSS.

Code structure

The exact same as the Shopify theme structure.

For better understanding of the theme mechanism, you should check these first.

Layouts = the theme main files
Templates = each page configuration to render the sections below, most of which are *.json files (some are *.liquid)
Sections = each page content written as HTML / JavaScript / CSS with Liquid code, most of which are *.liquid files (some are *.json)
Section schema = definitions of how each section works in the theme editor, most of which have blocks for each element
App blocks = special blocks in each section to render theme app extensions
Section groups = groups of sections which split the theme editor left navigation into some parts and work with the store contextualization as *.json files under /sections, not /templates.
Dynamic sources = theme editor function to connect store data instances to liquid objects

How to run

Just for running this theme on your store, simply download this as a zip to upload to your store. However, most of this theme users must be developers who want to modify the code to apply the change immediately, which can be done by Shopify CLI with the following steps.

Install the CLI.
Clone this GitHub repo. or download as a ZIP to extract in your PC.
Go to the directory of this theme above to run shopify theme dev in your terminal.
If you're asked to login, follow the steps and copy and paste the two URLs shown on the CLI output for theme editor and storefront to your browser address bars.

How to install

The steps above are for development mode that gets terminated once you stop the running, if you install the theme to your store permanently, run shopify theme push --unpublished to create a new theme named by you in your store (For the second update, the push only without the parameter updates the current live theme).

Sample list

All samples are available at Wiki.

Trouble shooting

If your change to files are not applied to the theme editor or storefront, make sure the dev output of CLI shows Synced without errors. Even if you have no errors but the editor or storefront doesn't reflect the change, shutdown the CLI with Ctrl + C to relaunch shopify theme dev (this sometimes happens when you modify the JSON temaplate or section schema).

TIPS

Shopify Liquid has the powerful internationalization features, and your liquid object doesn't need to change the code for translation and currencies. For example, once you access the language path like /ja in your storefront URL, liquid objects return Japanese translated data such as product titles if they have the translation. Also once you pass the currency and country parameters like currency=JPY&country=JP, liquid objects return the price in the specified currency with country.
```
  {{ product.title }} returns 'Test product' in `/` in English (when English is the default language), 
  does 'テスト商品' in `/ja` in Japanese without accepting any language parameters.

  {{ product.price | money_with_currency }} returns $5.00 USD after passing `currency=USD&country=US`,
  does ¥700 JPY with `currency=JPY&country=JP` without reading those parameters in code.
```
If you want to check the behaviors above, try the translation API or use translation apps, and try the local currency settings.
This sample doesn't have customer my page implementation because it recommends to use new customer accounts which is not given by theme templates, but Shopify native features like other checkout extensibility.
Sections (*.liquid) do NOT need their corresponding templates (*.json) always. For example, the recommendation Ajax API returns the result as the specified section without its template, and also you can render each section in JavaScript dynamically using the section rendering API.
If you create portable sections which can be inserted to all pages or specific ones, don't forget to add presets and enabled_on fields in the section schema. In this sample, every section can be inserted to a single template only (non portable) except for list-collections.liquid which is defined as a portal one for some specified templates in its section schema.
Some global JavaScript objects like window.Shopify are given by Shopify's generated code with {{ content_for_header }}, and global JS and CSS files are accessible with the hosted file filters.
Gift card template has the specific implementation with its own layout to work with checkout.
Templates used by the theme editor have naming rules to detect each type. For example, if you want to have multiple product templates, their names need to be product.json (default), product.test1.json, product.test2.json, .... etc. You can check it creating a new template from the code editor.
Note that if you connect your theme in the store to its GitHub repo., Shopify bot automatically updates your GitHub code which sometimes conflicts with your local change.

Disclaimer

This code is fully unofficial and NOT guaranteed to pass the public theme review for Shopify theme store. The official requirements are described here.
If you use this code for your production, all resposibilties are owned by you.

benzookapi/shopify-barebone-theme-sample