This article is an introductory book by our company on Shopify, Hello Shopify Themes: A Guide to Shopify Theme Development Here's an excerpt from .

Building an original theme requires more Shopify skills than customizing your existing themes, and requires both a budget and time, as well as collaboration with directors and designers.
Still, it’s worth the challenge – this chapter will introduce you to useful information when implementing your original theme.

original theme option

All of the themes published in Shopify’s theme store, led by Dawn, are high quality ones that meet certain standards.
Just by customizing your existing themes, you can create an online store with a fully practical and beautiful layout.
That said, it’s true that more than just using an existing theme, you get the same feel as any other Shopify store we’ve seen somewhere else.
If you want to express a more branded world view in the store, your original theme will be an excellent option.
For example, the following Shopify store is built with an original theme:

netflix.shop
Netflix's online store.
You can see Netflix’s tone and manners like coloring, fonts, etc.
The Official Netflix Merch Shop
https://www.netflix.shop/

wabararose.com
The online store of the farm WABARA on Lake Biwa.
The non-standard world, Inc. , the publisher of this book, is responsible for the direction, design, and implementation at once, and I am in charge of full renewal as an original theme.
WABARA｜Rose Farm KEIJI – WABARA online store
https://www.wabararose.com/

In this section, when considering the option of an original theme, we will introduce what it is better to grasp in advance.

who's the theme?

Well, even if it is an original theme in a bite, the conditions are different.
There are different things to consider when it comes to custom-made themes created for specific merchants and those that can be published in the Shopify theme store to an unspecified number of merchants like Dawn.

an original custom-made theme

In many cases, this custom-made theme is made as an original theme; it will be created by receiving a request from the merchant and repeating one-on-one interviews.
Because it doesn’t presuppose sales in the Shopify theme store, you only need to implement what is needed for merchants and the level of difficulty varies greatly depending on their requirements.
A simple set of themes could well be implemented by a small team.

original theme for the sale of a theme store

If you’re creating an original theme for sale in a Shopify Theme Store, you need to meet all of the following 22 requirements set by Shopify: Any theme that does not meet your requirements will be rejected from publishing to the Theme Store.

1. Exclusive Sales Requirements: Theme Store exclusivity
2. Theme uniqueness: Uniqueness
3. Features to Be Ready for:
4. Requirements for each file: templates, sections and blocks
5. Liqhthouse scores above a certain level: Lighthouse performance and fitness
6. Page Requirements: Pages
7. Consistency of themes: Consistency and functionality
8. Browser compatibility: Browser compatibility
9. CSS and JavaScript Requirements: Assets
10. SEO Optimization: Search Engine Optimization (SEO)
11. Accessibility: Accessibility
12. Social media: social media
13. Design and UX Design: Theme design and UX
14. Theme setting requirements: Settings
15. Font picker: Font picker
16. Color Design: The Color System
17. Image responsiveness: Responsive images
18. Naming themes and theme styles
19. Version numbers and release notes: Theme versions and release notes
20. Building a Demo Store: Demo reports
21. Documentation and contact forms
22. Theme support requirements: Supporting your theme

Among the 22 requirements are also more subdivided check items.
If you are interested, please refer to the official documentation.

This requirement ensures that the themes sold at Shopify Theme Store have a certain level of quality, but their design and implementation difficulty is much higher than custom-made ones.
However, once you have created a theme that meets these requirements, you can earn revenue from a wide range of merchants by selling at the Theme Store.
This chapter will focus on custom-made themes.

good thing to consider in requirement definition

Depending on the merchant’s business model, the requirements for original themes are very different: stores that serve as corporate sites, stores that focus on subscription products and stores that want to accept complex customization information from users at the time of ordering.
First of all, we will define the theme requirements while repeating the interviews.In that case, I will introduce some good points to consider in advance.

look ahead to post-release operation

The online store is not the end, it's the beginning.
The same goes for the theme, and let's design it with a view to how it will operate on the merchant side after release.
For example, even a single fixed page could be thought of as a reference to an HTML entry field on Shopify, hard-coded on Liquid's side or ready to be updated from the theme editor in combination with dynamic sections.
In particular, how to relate the following elements to a theme is better done by aligning merchants and awareness at the time of requirement definition - wireframe creation.

• Menu items (with or without hierarchical structures)
• Theme editor (dynamic section or static section)
• metafield
• App

study an existing theme

Dawn alone is good enough as a reference for the theme, but if possible, it will also be useful for the theme design if you mention other OS 2.0 themes.
Just knowing that CSS, JavaScript configurations and custom section components don’t exist in Dawn can be designed like this will give you a wide range of possible options.
0 compatible and popular existing themes, "Prestige" and "Impulse".

Prestige
-- you can push the visuals all over.
-- rich text section
• A wide range of product media display options
https://themes.shopify.com/themes/prestige/

Impulse
· Suitable for large-scale stores with a large number of products and volume of transactions
• Features for stores that also sell at physical locations
https://themes.shopify.com/themes/impulse/

Notice the Difference With WordPress

The theme implementation of Shopify may be introduced as something similar to the WordPress theme implementation.
There are some similarities, but Shopify doesn’t have a few of the general features in WordPress, so be careful (such as not changing URL structure, not having category functions on blogs or not being able to create subdirectories freely).

confirmation of the page to be prepared

At Shopify, there are several pages that will be automatically generated.
Noticing that the design of a given page is missing at the wireframe or design stage, if it turns out after the implementation time, there will be a return and trouble.
The following is a list of pages to consider.

• top page
• product list page
• collection list page
• product detail page
• cart page
• blog post list page
• blog post detail page
• fixed page
• search page
• account related page
• password protection page
• page 404.
• gift card

If you notice that these pages are not part of a wireframe or design, you want to see if they are intentional exclusions.

wireframe design creation

When creating an original theme wireframe, it is recommended to proceed with the screen configuration of "pages that should be prepared" mentioned above while actually checking in Dawn.
The non-standard world, Inc. , the publisher of this book, distributes a wireframe kit for creating original themes, so please refer to it together.

What we would like to consider when designing is a unique design variation of the online store.
Please note that design parts at the time of sale and sale on product list (collection) page, product tag / vendor display presence or absence, selection part when there is a product variation are often overlooked.
Also, if you agree with merchants which parts will be treated as common modules by section components or snippet files at the design stage where possible, it is easy to follow-up implementation smoothly.
In addition, for original themes that aim to be sold at the theme store, it is necessary to take into account accessibility more carefully.
As well as considering the design and color contrast during focus of elements, parts that are assumed to be difficult to access on a keyboard can also be consulted with engineers at the design stage.

Click here to purchase the introductory book on Shopify theme development that we produced at our company.
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

Explore the feature