Hello Shopify Themes Shopify Theme Development Guide
In my blog, I'm not here, engineer Kawashima.
If you’re following me on Twitter, we’ve got some good news to share today.
in the early summer of last year Shopify: Crowdfunding Wants To Create A Shopify Theme Development Book 。
Thankfully, I have achieved my goal and over the last six months I’ve been writing in parallel with client work.
This book, “Hello Shopify Themes,” is finally coming to life.
The color proofreading after the entry was finished, and this week's printing process finally started. It will be a while before we can deliver it to you! I am very looking forward to it too!
So today I’d like to give you a quick introduction to the book before it is available for sale on Hello Shopify Themes.
April 22: It was released to the general public!
Purchase of this book is accepted from the special feature page :)
We do not have any plans for printing after the sale at this time, so if you would like to read a printed book please pick us up as soon as possible.
- Author: Sayaka Kawashima
- Publishing: Non-standard world, Inc.
- Number of pages: B5, 248
- Price: 3,850 yen (tax included) * Packed with PDF version, free shipping
purpose of this book
As you can see on the introduction page, this book “Hello Shopify Themes Shopify Theme Development Guide” is a book that supports development paths for everyone interested in Shopify theme development.
We have covered Shopify’s Online Store 2.0 specification and the development flow with the Shopify CLI (additional mention of traditional Theme Kit development).
In addition to customizing Dawn, we will explain the structure of the theme itself and the grammar of Liquid as well as the points that you want to pay attention to when implementing original themes.We aim to become a book that can be used widely from beginners who touch on the theme for the first time to middle-class people who want to work on the development of original themes.
The main reader is an engineer who is interested in the development of the theme, but I would be happy if you could have a director, web designer and store owner who wants to deepen their knowledge about the theme.
However, if you’re already working on a theme, you probably know that Shopify has an incredibly fast update.
In the future, this book as a printing medium will be different from Shopify's latest specifications.
Even so, in order to be able to catch up with Shopify’s latest information on its own, this book contains reference links to official documents and explains how to find the information.
I hope that you will use this book as a foothold to deepen your understanding of the theme and examine new information yourself.
Introduction to each chapter
This book consists of six chapters, each with its contents and an overview.
Chapter 1: What Forms the Shopify Theme
The first chapter provides an overview and structure of the theme, and explains what we want to understand in the development of the theme. As we begin developing it, we have compiled all the information that makes our first path as easy to walk as possible.
What can and cannot be done with a theme? How does it relate to each other? If you are new to the theme, there is no need for you to understand everything at once. It's a chapter that I want you to read again when you get used to the theme development.
1-1. Overview of Shopify Themes
Thematic control of
Relations with the theme editor
Liquid, a template language
Live themes and theme libraries
1-2. Theme Structure
The role of the theme file
Thematic file nesting relationship
Thematic directory structure
1-3. Guide to the Theme File
layout file configuration
Theme file loading
Data structure of template files (JSON)
Liquid and schema of section files
The contents of Chapter 1 are also available for free on this blog.
/ 1-1. Overview of Shopify Themes
• 1-2. Theme structure (scheduled for release in May 2022)
• 1-3. Finding your way around theme files (scheduled for release in May 2022)
Chapter 2: Building a Development Environment
In Chapter 2, we will introduce how to set up the environment necessary for theme development.
We created a development store and explained the installation of Shopify CLI with command line tools, starting up the development theme one step at a time.
2-1. To Begin Theme Development
Shopify partners.
Store management screen: development store and collaborator account
Development tools: Shopify CLI and Theme Kit
-- your own code editor
2-2. Creating a Development Store
The process of creating a development store
2-3. Introduction of Development Tools
Shopify CLI
Theme Kit
2-4. Hello World with the Shopify CLI
launch a development theme
edit a theme file
reflect the content of a theme in one's store
Other Shopify CLI commands
Chapter 3: Customizing Dawn Themes
Chapter 3 is a hands-on edition, and based on the development environment we built in the previous chapter, we will actually customize Shopify’s default theme Dawn with the Shopify CLI.
In addition to the features of Dawn, we also discussed “dynamic section blocks”, “meta-fields” and “form extensions,” which are widely useful on other themes.
* The book is based on information as of February 2022 (Dawn version 3.0.0), and Dawn version 4.0.0, released in March, will be supplemented by this support page.
3-1. Characteristics of Dawn Themes
Speed of display speed: Efforts to reduce weight and improve performance
Improved maintainability: modularizing code
High extensibility: many components that can be manipulated by the theme editor
Accessibility consideration
Example of Dawn customization
3-2. Creating dynamic sections and blocks
Sections Everywhere
FAQ section file creation
-- make it available as a dynamic section
FAQ titles can be changed from the theme editor
FAQs are dropped into the block
if you want to make it more advanced
3-3. Utilization of metafields on product pages
• Creating product metafields
Using it as a dynamic resource from the theme editor
Applications: metafields and conditional bifurcation
if you want to make it more advanced
3-4. Form Extension of Commodities and Carts
Line Item Property adds an input field to the product page
Cart attributes add input to your cart page
The test order confirms the display on the management screen
if you want to make it more advanced
3-5. Introduction of Japanese fonts
• Finding the font settings
Setting_schema.json to add input settings for Japanese fonts
rewrite CSS variable parts of theme.liquid
to reduce font size.
if you want to make it more advanced
Chapter 4: Implementation of Original Themes
Chapter 4 takes a step further and explains the details of each theme file, its implementation considerations as well as the grammar of Liquid. The schema details are also included in this chapter, which is essential for working with the theme editor.
To create an original theme, it is essential to have a broader knowledge of Shopify and cooperate with the director/designer.
4-1. The option of the original theme
Who's the theme?
- Good thing to consider in the definition of requirements
Wireframe design
4-2. Implementation of each page
Theme as a whole: styling (CSS/Sass)
Theme overall: JavaScript
Theme as a whole: Menu functions and mega menus
top page
Collection (list of products) page
Collections page
Product Page
cart page
Blog: List of articles and details page
- Fixed pages
Account-related pages
Password Protection Page
4-3. Liquid grammar
How to read and find official documents
Basics of Liquid notation (Type, Operator, True/False Value, Variable and Whitespace Control)
Liquid object
Liquid tag
Liquid filter
4-4. Theme File Description
How to read and find official documents
layout file
template file
section file
snippet file
asset file
config file
locale file
4-5. Theme editor and schema notation
Schema: a JSON description that defines associations to the theme editor
Settings attribute: Theme setting, section setting and block setting definition
The blocks attribute: defining an array that can be manipulated from the theme editor
The presets attribute: definitions that correspond to dynamic sections
Chapter 5: Connecting Themes and Apps
Chapter 5 will focus on application and supplementation, the topic of this chapter is about Shopify’s “app”.
Perhaps there are very few people who don’t use any of the apps involved in theme development, and using an app will make theming even more feasible.
0, the embeddable app specs and a list of recommended apps as well as notes on how to use traditional applications.
A list of recommended apps will be published later on this blog.
5-1. Theme Development and App Relations
The Shopify App Store
Theme and app integration
What to keep in mind when adding apps that affect the theme code
The app expands the possibilities of themes
List of recommended apps
Expanding the development of themes
store-expanding app
Chapter 6: Theme Development Tips
Chapter 6 concludes with a reference to supplemental information useful for actual theme development projects and other options (headless commerce).
Because it is an applied content, I would like you to read it for those who have become accustomed to the development of themes and middle-class people who want to deepen their knowledge.
6-1. Knowledge useful in real cases
-- when you hit a wall,
Theme git management and GitHub integration
A case study of implementation flow in a project
Development commands for Theme Kit
Let’s take a look at the old theme for OS 2.0
6-2. Theme SEO measures
title element
meta-description element
Canonical URL
· Structured data
-robots.txt
6-3. Custom Storefront option
Custom storefronts and headless commerce
Shopify Storefront API
Custom storefront developer tools
Custom storefronts can help.
Expectations for Hydrogen
6-4. Catch up on the latest information from Shopify
Shopify Changelog
Shopify official documentation
Shopify Help Center
Shopify official blog
Twitter.
toward the release of
As the launch date approached, I became a little nervous... (laughs)
Hello Shopify Themes will be published in a few more blog posts, so please look forward to it.
If you read this article and are interested in the book, You can purchase it from this special feature page. 。
Thank you very much!