Shopify just recently updated their Shopify online experience which they call “Online Store 2.0”.
With this update, Shopify merchants can now customize their entire online store using sections & blocks. This opened a lot of doors not just for Shopify app developers but also for Shopify theme developers because now, you can add cool sections and blocks to the most commonly used pages like products page, collections page, blog page, etc.
If you’re a Shopify theme developer and you don’t know yet how to create a Shopify theme for Online Store 2.0, then this is the best time to learn because Shopify is now accepting Shopify themes to be listed on their Shopify Theme Store!
This means you can make money by selling your Shopify themes! So are you interested to learn more?
In this course, we’re going to learn how to create a Shopify theme for Online Store 2.0 using Shopify CLI with the help of TailwindCSS to design a cool online store.
In this course you will learn:
How to set up your development store using Shopify CLI 3.0
Using TailwindCSS to design a Shopify theme
Create navigational bar
Create collection page
Create product page
Create customer page
Create cart page
and more!
Online Store 2.0 (JSON Templates)
Shopify CLI
Schema Settings
Search Engine Optimization (SEO) for pages like articles, products, etc.
Liquid language (Referencing asset files, loops, conditional statements, Shopify objects, filters, and many more)
Customer Templates
If you think you’re ready to start, signup now, and let’s create the best Shopify theme together!
Shopify just recently updated their Shopify online experience and now they call it “Online Store 2.0”.
With this update, Shopify merchants can now customize their entire online store using sections & blocks. This opened a lot of doors not just for Shopify app developers but also for Shopify theme developers because now, you can add cool sections and blocks to the most commonly used pages like products page, collections page, blog page, etc.
If you’re a Shopify theme developer and you don’t know yet how to create a Shopify theme for Online Store 2.0, then this is the best time to learn because Shopify is now accepting Shopify themes to be listed on their Shopify Theme Store!
This means you can make money by selling your Shopify themes! So are you interested to learn more?
In this course, we’re going to learn how to create a Shopify theme for Online Store 2.0 using Shopify CLI with the help of TailwindCSS to design a cool online store.
In this course you will learn:
How to set up your development store
Using TailwindCSS to design a Shopify theme
Online Store 2.0 (JSON Templates)
Shopify CLI
Schema Settings
Search Engine Optimization (SEO) for pages like articles, products, etc.
Liquid language (Referencing asset files, loops, conditional statements, Shopify objects, filters, and many more)
AJAX API (Getting products data, Sending products to the cart, etc)
If you think you’re ready to start, signup now, and let’s create the best Shopify theme together!
Shopify Themes are one of the most important parts of a Shopify store. In order for a Shopify store to work, merchants have to install and use at least one Shopify theme to display their products.
If you’re not a developer, you might find it difficult to create a custom Shopify theme. However, does that mean you can’t create a custom Shopify theme?
Well, of course not!
Creating a custom Shopify theme is honestly very easy! Thanks to the libraries created by Shopify.
That being said, how do you create a Shopify theme?
In this article, we’ll learn about Shopify theme development and how to create a custom Shopify theme using ThemeKit step by step.
We have a Shopify Theme Development Course! Be one of the first students!
Are you looking for an in-depth guide on how to create Shopify themes? Click the enroll button now and become a Shopify developer!
If you’re looking for a video version of this article, you can watch the following video instead.
Getting Started
In order for us to be able to create a Shopify theme, we will need to do the following:
Create a development store
Create a private app and generate API credentials
Install ThemeKit
Create a Shopify ThemeKit project
So with all that being said, let’s start and create a Shopify theme.
Building a Shopify theme using ThemeKit
Let’s start off this tutorial by creating a development store. We’re going to need a development store to create a private Shopify app and generate API credentials. If you already have an account, you can skip this step and proceed to create a private app.
Once you have logged in, go to stores page and create a new store.
By clicking the Add store button, Shopify will ask you to pick whether it’s a development store or a managed store. Pick development store.
After, fill-up the form and click Save.
Create a private app
By creating a development store, you should be automatically logged in to your development store.
Go to the apps page.
In the apps page, look for the link that says Manage private apps. It’s usually located underneath of the installed apps card.
By default, private apps are disabled so you’ll have to enable it by clicking the button shown like below.
By clicking the said button, Shopify will ask you to agree to their terms of use and conditions. Read all of them if you have time. Otherwise, check all the checkboxes and click the enable private app development button.
After enabling the private app development, you should be able this time to create a private app.
Fill-up the following form and click the Show inactive Admin API permissions and look for the Themes.
Set the theme API to Read and write.
Once set, click the save button and that should show you a modal. Just click the Create app button.
You should have an Admin API credentials like below.
Installing ThemeKit
Before we can start creating a Shopify theme project, we need to install and set up our local working environment. The first step is to install ThemeKit.
What is ThemeKit?
ThemeKit is a cross-platform command line tool used for building Shopify themes. With Theme Kit, you can use your own development tools to interact with the Shopify platform in the following ways:
Use workflow tools like Git to work with a team of theme developers.
Upload themes to multiple environments.
Watch for local changes and upload them automatically to Shopify.
Work on Linux, macOS, and Windows.
How to install ThemeKit
You can install ThemeKit using the following commands on the following operating systems:
Linux
If you’re using Linux as your operating system, you can use the following command using your terminal.
If you’re using MacOS as your operating system, you can use the following command using Homebrew.
$ brew tap shopify/shopify
$ brew install themekit
Code language:Bash(bash)
Windows
If you’re using Windows as your operating system, you can use the following command using your terminal. Make sure you have Chocolatey installed in your system.
choco install themekit
Code language:Bash(bash)
Creating the ThemeKit project
Now that we have both ThemeKit and API credentials, we can finally start creating a new ThemeKit project. To create a new project, run the following command in your terminal:
theme new --password=[YOUR_API_PASSWORD] --store=[YOUR_STORE.myshopify.com] --name=[NAME OF YOUR THEME]
Code language:Bash(bash)
By running the above command, ThemeKit will start creating the template files for your new Shopify theme like below:
Now, to ensure that the changes that you make to your theme files are sent to your development store, you can run the following command:
theme watch
Code language:Bash(bash)
If you open your development store, you should have the following:
As you can see, your store looked super empty and that’s where you can finally start working on your Shopify theme project.
Next steps
We have finally created a Shopify theme project, what’s next? Well, your next step is to start learning how to liquid programming and customize the template files created by ThemeKit.
Now, building a Shopify theme is like creating a WordPress theme, you have to work on each template files to make sure that all parts of a Shopify store are accessible by the users.
If you’re interested to learn more about Shopify Theme Development, you can enroll to our course and learn how to create Shopify themes from start to finish using ThemeKit.
Due to the pandemic, a lot of people are trying to learn how to create an online store with Shopify. These new merchants are looking for Shopify themes that are effective enough to bring them sales. Why not become one of the new Shopify developers and create an amazing Shopify theme from scratch?
In this course, we’re going to learn how to create a Shopify theme using ThemeKit and Liquid. We’re going to cover all of the important parts of Shopify Theme Development so you will be ready to create your very own Shopify theme as soon as possible.
In this course you will learn:
Private apps for theme development
Liquid files
Theme assets
Designing your own theme
Adding translations to your theme
Liquid language (Referencing asset files, loops, conditional statements, Shopify objects, filters, and many more)
AJAX API (Getting products data, Sending products to the cart, etc)
Online Store 2.0
If you think you’re ready to start, signup now, and let’s create the best Shopify theme together!
Due to the pandemic, a lot of people are trying to learn how to create an online store with Shopify. These new merchants are looking for Shopify themes that are effective enough to bring them sales. Why not become one of the new Shopify developers and create an amazing Shopify theme from scratch?
In this course, we’re going to learn how to create a Shopify theme using ThemeKit and Liquid. We’re going to cover all of the important parts of Shopify Theme Development so you will be ready to create your very own Shopify theme as soon as possible.
In this course you will learn:
Private apps for theme development
Liquid files
Theme assets
Designing your own theme
Adding events to your theme
Liquid language (Referencing asset files, loops, conditional statements, Shopify objects, filters, and many more)
If you think you’re ready to start, signup now and let’s create the best Shopify theme together!
Are you looking for a course that teaches you everything you need to know to build a premium WordPress theme? Look no more because this course will cover everything you need to know to build your own custom WordPress theme.
WordPress has been around for more than 15 years and it’s been used by a lot of businesses in the world, that’s why knowing how to create websites is very valuable. If you don’t know, WordPress developers can earn up to $115,000 per year, and if you master this skill, you’ll get a higher chance of making that much profit.
In this course, you will learn the following:
Setting up your local environment
Template files
Making dynamic navigation menus
WordPress functions & walkers
WordPress hooks
Widgets
Sidebars
Boostrap
..and many more!
Frequently Asked Questions
How long do I have access to this course?
Once you have enrolled in the course, you will have unlimited access to this course for as long as you like.
When does this course finish?
This course starts now and will never end and all of the lessons in this course will be monitored and updated frequently and so make sure you always check the announcement tab to know what’s added and what’s removed.
Changelog
February 23, 2021
Added new video titled “What we’re going to build”
February 15, 2021
Updated the course introduction
February 14, 2021
Added new lesson titled “Fixing The Design” on section “Closing”
Added new lesson titled “Screenshot” on section “Closing”
February 11, 2021
Added new lesson titled “Page Builders” on section “Other parts of WordPress”
One of the advantages of Shopify development is being able to customize your theme without programming. However, there are instances that you may want to make your store look a certain way. Now here’s the problem. Your theme doesn’t allow you to customize it. Because of that, your only option is to build the theme features yourself.
As an example, you may want to add social links under your products so customers can either bookmark the product or share it with their friends.
In this tutorial, we’re going to learn about Shopify theme development to customize or create a custom Shopify theme with Slate, all from scratch.
Getting Started
To start building a custom theme for Shopify, you need to create a partner account. You can do this by going to their official partner page and by clicking the “join now” button.
After you create a partner account, you can create a free development store to test your custom themes as you build it.
After creating a development store, Shopify will redirect you to your store admin page. There you can start adding products, collections, etc.
Now, to make this tutorial short but handy, I will assume that you already have products and collections. Why? because we want to focus on theme development. Besides, adding products and collections is very easy. You can do that by yourself 😉
Theme Development Tools
The next step in building Shopify themes is to select which theme development tools you’d want to use. Currently, there are three theme development tools for creating Shopify themes:
Slate
Shopify Theme Kit
Shopify online code editor
Slate
If you have experience with command prompt then Slate might be a good option for you. Slate is more of a command-line tool for developing Shopify themes. It works to help you speed up the process of your development, testing, and deployment to Shopify.
Shopify Theme Kit
Another tool for theme development is the Shopify Theme Kit. It is also a command-line tool that allows you to upload themes into multiple environments.
Now, what is the difference between Shopify Theme Kit and Slate?
Slate is a tool built on top of ThemeKit whereas ThemeKit is just a client with the themes API which is why it allows you to use whatever tools you need on top.
Shopify Online Code Editor
If you’re lazy downloading tools or anything, this is the tool that you may want to use. A very basic code editor for developing Shopify themes. The only disadvantage with this tool is that it doesn’t allow you to create the actual files.
Which Shopify theme development tool do you think is the best? I would say, Slate.
Why? because I believe with Slate, you have more control over your projects compared to the rest of the tools.
With that being said, we’re going to create a custom Shopify theme using Slate.
Create a New Theme with Slate
Creating a new theme with Slate is very simple. All you need to run a single command and command prompt will do all the job for you.
npx create-slate-theme name-of-my-theme
npx
A tool for using packages from npm registry
create-slate-theme
A package that allows users to create a new Slate project with a single command.
name-of-my-theme
Name of your project. (must be lowercased and no use of spaces. If so, use a dash instead)
We highly recommend using either yarn create or npx to create a new Slate project. If you don’t know any of these, we suggest you learn NodeJS.
If you already have node installed on your computer, run the following command with command prompt.
mkdir WeeklyHowCustomTheme && cd WeeklyHowCustomTheme
And then use the command
npx create-slate-theme weeklyhow-theme
Once the command-line finished processing. Use the following command to select your project:
cd weeklyhow-theme
Create a Private App
In your Shopify Admin Dashboard, navigate to apps and select Manage apps.
Then select Create a new app.
Fill up the form and make sure to change the value of theme templates and theme assets to “Read and write”
Hit “Save” and click “I understand, create the app“
Connecting to your Store
Now that you have created your Slate project and your Shopify private app. You may proceed to your project folder and open and modify the .env file.
# The myshopify.com URL to your Shopify store
SLATE_STORE={store-name}.myshopify.com
# The API password generated from a Private App
SLATE_PASSWORD=
# The ID of the theme you wish to upload files to
SLATE_THEME_ID=
# A list of file patterns to ignore, with each list item separated by ':' (optional)
SLATE_IGNORE_FILES=config/settings_data.json
# The timeout for upload theme (optional)
SLATE_TIMEOUT=2m
Code language:PHP(php)
SLATE_STORE
The URL of your Shopify store. Keep in mind that https:// or anything is not necessary.
SLATE_PASSWORD
Your password is located at the Admin API section of your private app. https://{store-name}.myshopify.com/admin/apps/private
SLATE_THEME_ID
Slate theme ID is the identification number of the theme you wish to upload your files into. You can find your theme ID by navigating to https://{store-name}.myshopify.com/admin/themes.xml
Again the value between the id tag is your SLATE_THEME_ID.
SLATE_IGNORE_FILES
This setting allows you to ignore files from being uploaded to your Shopify store. By default, we want this setting to have a value of config/settings_data.json. This JSON file contains all the data for our theme development but we don’t want this file to overwrite what’s on our Shopify store.
SLATE_TIMEOUT
Setting for request timeout. If you have large files in your project that may take longer than a few seconds to upload then you may want to increase this value. We’ll leave this to 2m (2 minutes) at the moment.
Creating a self-signed SSL Certificate
As you may have guessed it already, Shopify must be served via https. Even if we are under development, installing an SSL certificate is a must.
To create a self-signed SSL certificate, we have to install brew. Now, since we are using Windows PC, we will install chocolatey instead.
Open another command prompt and run the following command
So you’re looking for a WordPress theme for your business? Don’t worry; Today, we’ll be giving you 13 WordPress themes that are clean and modern-looking to make your business look more appealing than ever.
Best WordPress Themes for Business Category
Before wasting time, let’s take a look at 13 of the best WordPress themes that are responsive and beautifully designed in 2020.
REHub is said to be one of the best WordPress themes in the market that offers not only a nice WordPress theme but also a way of generating money through eCommerce. So if selling products is your business, then this WordPress theme will definitely serve you in a long run.
Like most people say about this theme. This WordPress theme is a money maker. Even Amazon recommends this WordPress theme.
Divi is a WordPress page builder that is very popular in the WordPress community. In fact, it’s very popular that it is being used by more than 600,000 users around the globe.
Its drag and drop builder allows you to create a professional-looking website in less than 15 minutes and if you don’t feel making a web design from scratch then Divi comes with 20 pre-structured layouts allowing you to start your new project instantly. This is perfect for businesses that wish to have this glamorous look.
Built-in layouts
Over 46 content modules
Color, style and size customization
Advanced Tools for Developers
Advanced Visual Builder
Live preview
Yes, Divi is one of the most used WordPress themes in the market but it’s not always perfect. The downside of using Divi is it tends to make your web pages very slow and its code is not SEO-friendly. Not only that, if you use Divi and you decided to change themes, it will be very difficult to transfer your content to other WordPress themes.
If you’re looking for a WordPress theme that is clean, flexible, and fully responsive then your search is about to be over. Enfold is one of the best themes that is known for having a good reputation in the WordPress community.
This WordPress theme offers a very modern design that can be used for any kind of business like corporate, e-commerce, and more. Not only that but it also offers plenty of good features such as:
Astra is no doubt one of the best free WordPress themes that you can use for any kind of business that you have. This WordPress theme provides many features that are perfect not only for beginners but also for experienced WordPress site owners.
Our favorite best features that they offer are the following:
Veen is yet another type of premium WordPress theme that focuses on a modern blog design that is super attractive thanks to its animations. With Veen, website visitors will never have an issue to navigate around your website as it is very organized and clean.
If your business is blogging, then this kind of WordPress theme is the best option for you, it offers the following great features:
Alterna is one of the hottest and best-selling WordPress themes this 2020. With Alterna, you can create any type of website for any kind of business using its drag and drop visual composer page builder. The best thing with this WordPress theme is it provides features and plugins that are more expensive than the theme itself.
It comes with an amazing slider plugin, parallax slider, premium fancyBox, waterfall Flux with AJAX, and many more!
One of the fastest-growing themes for WordPress. This extendable and lightweight theme will allow you to create different kinds of WordPress websites for any kind of business that you can think of. It can be integrated with multiple platforms such as WooCommerce and other page builders.
With Ocean, you won’t need to install external plugins because it already provides awesome features like image sliders, multiple custom widgets, color options, header layouts, and many more.
This is one of the excellent premium WordPress themes. This multi-purpose theme allows you to develop versatile websites within a few clicks. Avada comes with over 41 featured websites and more than 255 web page designs.
You can use their demo installer to set up the content. Moreover, it comes with over 1000 customization options. It is compatible with many WordPress themes.
Are you planning on making a magazine-type of blog? Then you should take Soledad as your WordPress theme.
There’s no doubt that this is the best WordPress theme that you find from ThemeForest. It comes with excellent magazine layout options, over 1000+ sliders, and many more. Its single post templates are worth mentioning that allow you to share your stories.
You can create a completely customized website using its page editor support. It is compatible with the WP bakery and Elementor page builder.
The 7 is one of the easiest to customize WordPress theme ever. It offers more than 1000+ theme options to allow you to build everything that you can think of for your website.
If you like using Page Builders then this theme is perfect for you as it offers full and seamless integration with WPBakery Page Builder and Ultimate Addons.
But of course that is not the only thing that is best with The 7. It also offers:
Are you planning on building a news website or blog? Then Newspaper is the WordPress theme that you should be using.
With Newspaper, you can create a great news website that look simple yet professional and organized. You can also use this WordPress theme for different types of websites like fashion, food blogs, travel, and lifestyle.
Bimber is yet another newspaper WordPress theme that allows you to create an attractive, high-speed, and fully functional website in less than one day. It offers a bunch of powerful plugins that can improve the functionality of your website inside and out.
With Bimber, newsreaders won’t finally have trouble reading your news day and night. Thanks to its powerful dark mode feature, readers can finally switch your website into a dark mode setting in just one click of a button.
If your niche is about viral content then this theme is perfect for you.
It’s quite hard to find a WordPress theme that matches with real estate niche right? Fortunately, it isn’t. RealHomes is a WordPress theme created specifically for real estate niche websites.
With RealHomes, you can easily create a website that showcases your properties. It’s super easy you can create a website in less than an hour.
Advanced & customizable real estate search
Google maps integration
OpenStreetMap integration
Gallery Templates
User registration & Login support
Fully documented
and more!
Conclusion
It can be a bit hard to find a great WordPress theme that fits your business requirement but we hope that in this article, you found one or two WordPress themes that you can use in a long run. If in case you haven’t found what you’re looking for, then feel free to talk to us! We offer WordPress theme development and we can help you create the theme that you’re looking for.
Disclosure: This article may contain affiliate links, which means we may receive a commission if you click a link and purchase something that we have recommended.
You are probably wanting to learn Shopify development because you either have a Shopify store that you want to improve or you just want to be a Shopify developer. Either way, you will do the same steps to learn Shopify development. Then you can choose whether you want to create a Shopify app or a Shopify theme.
But, the question still remains… How do you actually learn Shopify development as an absolute beginner?
Well, in this article, we will be talking about how to learn Shopify development in 2023 as a beginner.
Watch video
If you prefer watching video tutorials, you can watch the video version of this article below:
Otherwise, you can continue by reading my guide below.
Getting started
In order for you to be able to learn Shopify development, you’ll have to understand or at least know the fundamentals of web development (like HTML, CSS, and JavaScript).
Why? Because Shopify development is, indeed, still part of web development.
You will still use HTML, CSS, JavaScript, or frontend languages to render your Shopify development projects. You will also need to learn backend development. In other words, you will need to pick a programming language for your backend. This could be Node, PHP, Ruby, or Python.
It’s important to note though that there are more programming languages that you can use for Shopify development. The only thing that matters is the programming language should be able to communicate with the Shopify API.
Now, let’s assume you have learned the frontend and the backend. What is the next thing that you need to learn?
Well, the next thing that you should learn is database especially if your end goal is to create Shopify apps. Most of the time, when you do Shopify app development, you will be saving some data of the merchant to your database.
Once you have learned all of that, you’re pretty much ready to go and learn Shopify development.
Learning Shopify development
Good job! You have finally learned web development. The next thing that you will be learning is Shopify development. However, before you learn Shopify development, let’s understand first what is Shopify development.
What is Shopify development?
Shopify development is a way for Shopify developers to create applications or features to improve a Shopify online store.
Now, there are two things that you can create with Shopify development:
Shopify apps
Shopify themes
What is a Shopify app?
A Shopify app is what you call the “plugin” and is mostly used or installed to improve a Shopify online store. You can usually find these apps from the Shopify app store and so if you plan to create public Shopify apps, then this is where your apps are going to end up. Otherwise, if you only wish to improve your personal Shopify store, then you can just create a private Shopify app.
What is a Shopify theme?
Now, what about Shopify themes? What are they? Well, Shopify themes are what most Shopify stores used to properly display the storefront. They are the ones that control what to display and what not to display in your browser. If you’re familiar with WordPress, then WordPress theme is similar to the Shopify theme. The only difference is Shopify theme development uses its own programming language which is called Liquid.
If you want to learn more about Shopify theme development, you can enroll in our course by clicking the button below.
So now that you at least have an idea of what is Shopify development, the next thing that you should learn is Shopify especially if you haven’t truly touched a Shopify store.
Don’t worry, you don’t have to purchase a Shopify store to learn Shopify. You can go to the Shopify Developers page and there you can create a partners account so you can create a development store.
So, you might be confused a little, what is a development store?
A development store is a Shopify store meant to be used for testing your Shopify apps and Shopify themes. That’s why it’s called a “development” store.
So, what should you learn in your Shopify store? Well, you should obviously learn how to navigate through a Shopify store. You should know how to create a product, how to go to the customizer page, how to access the locales, etc. In fact, you should really master all of the sections of a Shopify store. Otherwise, you’ll end up confused about where to find these sections.
Doing Shopify development
Okay, so let’s assume that you have done everything I mentioned above. Now what?
Well, obviously, you can start making Shopify development projects but like I mentioned earlier, there are two things that you can create with Shopify development, Shopify app and Shopify theme.
Now, the question is…
Which one should you make? Apps or Themes?
I highly recommend you to start with Shopify theme development because that’s where you will be learning everything about Liquid programming and Liquid programming is very important especially if you’re going to create a Shopify app that customizes a Shopify store.
Conclusion
I know it looked pretty simple but learning Shopify development can take a lot of time. I remember it took me 1 month to learn how to create a Shopify app but obviously, everyone is not the same. So my advice for you is to just take it easy and don’t pressure yourself a lot. Learn Shopify development when you feel like it and sooner or later, you’ll realize that you are now able to develop Shopify themes or apps.
If you’re interested, you can check out my courses here, I have put out a few courses that teach you how to create Shopify apps and Shopify themes.
