In this article you will know: what is Shopify, how to open a Shopify store, set up your store to start selling products, and some tips from me - a Shopify developer.
You need to create a Shopify account to be able to open a Shopify store. Using this link you will get a free trial to understand what Shopify is. Maybe it's not fit you needs. You should 100% check it before move your business on it.
If you wish to develop or to customize Shopify themes, you need to create a partner account. It will help you to store your clients store in one place and simply connect to them.
There are no paid plans for development. To work with a theme as a developer, you should change the type of store to “Development”. For easy work, it will be great to have a partner account. Partner account allows you to see all stores you have access to on one page. It’s handy when you have a lot of stores and is just nice to have.
If you have an idea to buy a theme from third-party publishers you need to be careful. From my experience, I can say that most developers sell their themes with code mistakes, with no functions that the theme should have, word mistakes in the admin panel, etc. The advantage of these themes is that that they are supported by the developers after buying a theme, each developer sets his supported time as he wishes. Mostly the support period is 60 days. But again, not all support developers make their job qualitatively.
If you are a developer, you can easily pick Dawn, or any Shopify official themes, and customize it how you or your customer desire. I worked on different themes and Dawn is the most practical for customizing in my opinion. Oh, and I did stores on Dawn way faster than on other themes.
Right after you created a Shopify account and picked a store URL go to the admin panel of your store. To do it put slash and write admin. It looks like this: yourstoreurl.myshopify.com/admin
After that, publish a theme. There will be a Dawn probably.
Before you started selling your goods, you need to put some settings in your store. The settings are located at the left bottom corner.
When you are there, you will see a bunch of different settings. The first tab is a basic setting like company name, industry, address, contact information, store currency, etc. At this tab everything is okay. Let’s see something tricky.
Let’s go to the Checkout tab and see it in detail because this setting is about placing an order in your store. Why it’s so important? When you are buying a theme or using a free theme, this tab is not obvious and you can face an issue. And the issue is the account icon in the header. In most themes, this icon is connected with this setting. The first point in this setting asks you to choose one variant about how to use a personal profile on your store:
Don’t use accounts
Customers will only be able to check out as guests.
Accounts are optional
Customers can create accounts or checkout as guests.
Accounts are required
Customers must create an account when they check out.
When I just started learning the Shopify Platform this setting is trick me over and I spent some time to understand it. Recommend you check other settings. We are going next.
If you are a developer, the information below is for you (if you are just interested, you are welcome).
Right after you set up your store, time to connect your theme with a GitHub repository.
This is a cool feature that allows you to track changes in your theme. It means you have a history of your theme and can easily back up if something breaks. And the cool thing is whenever you make some changes through customizer, it commits in GitHub automatically. All you need to do is choose Connect from GitHub when adding a new theme.
If you already connected your GitHub account to your Shopify partner account, then you need to pick a repository where your theme is stored.
Congratulations! You know how to connect a theme from GitHub now.
The next step is to learn how to work with theme code. To open a code editor choose the right theme and click Actions -> Edit code. You will see this page:
On the left side, you can see folders. Each folder contains a special type of files.
Layout store a theme.liquid
— the main theme file. This file needs to connect CSS, javascript, and more functionality to your website. Also, this file stored the footer and header of the store. Oh and this file can contain a file called password.liquid
. But I don’t know much about it.
It needs to create page templates like products, 404, cart, collection, blog, search, and user profile. You can create different templates of one media content. For example, you can create different templates for the product page and use them depending on the situation (sale, event, etc.). To change the product template go to a product page in the admin panel, look at the right sidebar and in the tab "Theme template" choose a template you have.
It needs to store sections. Sections — the main component of in-store creation, because they include the whole content of the website.
Snippet — a file, that can be rendered in any place on the website. To render it you need to paste this line of code in the place where you want to show the content of your snippet:
{% render 'snippet-name' %}
Store all styles and scripts.
The files in the folder create automatically when you make changes in the customizer. I don’t think you need to change something. But sometimes you will need it, but it’s a kind of rare case.
The folder contains translations. By default will be set to English. In the Dawn theme there are a bunch of different translations. But check your theme, you may not have them. You can translate your theme in the specific file, and the admin panel using the Edit languages button.
As you know there are no emmet, code highlighters in the Shopify theme editor. So let’s see how to work with Shopify in the code editor like VS Code.
Maybe you have a reasonable question — how to edit Shopify themes using VS code or any code editor. And now I’ll tell you how.
Shopify CLI (Command Line Interface) is a tool that allows developers to interact with the Shopify platform using command line commands. It can be used to perform various tasks such as creating, updating, and deleting products, fulfilling orders, and managing themes. The CLI also allows developers to perform actions on their Shopify store without having to access the Shopify admin interface.
One of the main advantages of using the Shopify CLI is that it allows developers to automate repetitive tasks and streamline their workflow. For example, developers can use the CLI to create new products in bulk or update product information in a single command. Additionally, the CLI can be integrated with other tools, such as continuous integration and deployment systems, to automate the process of deploying code to a Shopify store.
The Shopify CLI is available for Windows, MacOS, and Linux, and it can be easily installed by running a single command in the terminal. Once installed, developers can use the CLI to authenticate their Shopify store and begin issuing commands.
In summary, Shopify CLI is a command-line tool that allows developers to interact with the Shopify platform and automate repetitive tasks, streamline their workflow and integrate it with other tools. It is available for Windows, MacOS, and Linux and easy to install.
Before you will install Shopify CLI, be sure you have these on your computer:
1.Ruby
2.Git
3.Shopify Partner account
brew tap shopify/shopify
brew install shopify-cli
gem install shopify-cli
shopify version
If the installation successful, you will see a current Shopify CLI version on your PC, like that:
Use shopify theme dev -s https://storeurl.myshopify.com
to connect to a store:
To pull files from the store to a folder on the PC use this command: shopify theme pull
You will see a message like so:
Choose a theme you wish to pull files from.
Depending on the size of the files you need to wait some time. After success you will see the theme folders in the left sidebar.
Congratulations! You learned how to pull theme files from Shopify. Now let’s check some useful commands that will help you to work with Shopify themes.
The first command I would like to mention here is: shopify theme dev
You should remember it, we logged in to a store using this command. But it’s also “serving” it. You make changes and the page is live reloaded, it’s like a browser sync. And the cool feature is — if you make a mistake you will see an error message in the terminal.
Now we can open our store using this URL in a browser:
After you made some changes in your local theme, time to push the changes. To push files back to Shopify use this command: shopify theme push
It will ask you where to push, be careful on this step:
Run this command: shopify commands
. You will see all commands:
You might have a question about Shopify extensions. There are a bunch of them that is pretty useful. For example, liquid, Liquid languages support, shopify liquid, shopify liquid template snippets, shopify content schema.
I want to say that Shopify is a great platform to learn e-commerce development and sell products online. I have enough experience in Shopify to say that I love it. I saw a lot of themes like bad ones and good ones. Of course experience with bad themes is kind of ok. However when I work with good themes the experience is so cool.
If you like the article, you can support me — buy me a taco . Just one dollar will make me smile. Also, you can hire me as a Shopify developer or Front-end Developer. Take care!