[Shopify]ECサイト開設方法から販売まで【53枚のスクショ画像で完全ガイド】 - EC PENGUIN

[Shopify] From how to open an EC site to sales [Complete guide with 53 screenshots]

Hello, I'm EC Penguin, your Shopify Lover!

In this issue.

  • I'm curious about Shopify! But I don't know how to start.
  • I opened it but got stuck in the middle.
  • I'm just getting started, but I don't know the specific steps.

I will show you how to start an e-commerce site with Shopify with pictures.

First of all, signing up is really easy, it only takes 5 seconds.

However, even after registering, there are many hurdles to overcome, such as how to connect a domain, register products, etc., and we felt that some people would fail along the way, so we decided to write this article.

If you follow this article to the end, you should have an e-commerce site using Shopify! (By the way, it's a GIF, so the quality is rough, but it looks like this.)

(Sorry if you can't see the GIF due to your browser environment, etc.)

Are you excited?

It's a little long, but hang in there with us!

By the way, you can register with Shopify here.

Shopify Registration

Register an account with Shopify

Let's start by accessing Shopify.

As of May 2020, the screen looked like this, but it may have changed somewhat. I was greeted by a handsome brother.

shopify account register

Enter your e-mail address and click "Start Free Registration.

shopify free account register

The free trial period was 90 days during the campaign, but it is generally 14 days. The store name and URL can be left blank.

Fill in the store name and store URL.

shopify about you

The address is important, so be sure to fill it in.

shopify address fill out screen

You are now registered with Shopify! That was easy.

By the way, the following screen after registration is completed is the "Administration" screen.

shopify account admin screen

Connecting your domain to Shopify

The next step is to set up a custom domain.

If you haven't already done so, we recommend GoDaddy, a site that works with Shopify and saves you a lot of time in connecting your domain.

domain connect shopify

admin domain 管理画面

Press Connect an existing domain.

domain connect shopify site

You will now be taken to GoDaddy's admin page.

godaddy shopify partner domain

Select Setup.

domain shopify godaddy

Click Connect to an existing site.

shopify account godaddy connect

You can connect to so many services automatically. Super convenient.

Of course, we'll choose Shopify down the road!

shopify godaddy connect

Click Connect Domain.

shopify godaddy almost done

When the above screen appears, return to the Shopify administration page and press Confirm Connection.

shopify admin confirm domain

You will then see a screen like this, so wait a moment.

shopify confirming domain godaddy

When this one is complete, you are now connected in the primary domain section!

domain confirmed by shopify

However, the lower part, the domain of the external service, was not connected yet, so we need to connect this part as well. Click on "Re-establish connection.

shopify domain 外部サービス

GoDaddy automatically connects. If you use Shopify, GoDaddy is a perfect match.

shopify godaddy domain connected

Then a window like this will pop up, click "Connect".

godaddy shopify

Make sure you click the "Close" button on the pop-up window. Otherwise, it would not work while it was still processing. I didn't know that and had to wait about 5 minutes lol.

shopify 外部サービス 承認

Now you've succeeded! The domain of the external service has been linked.

*It doesn't seem to be reflected immediately, it seems to take up to 24 hours to connect the domain. After a few moments, click on the eye symbol next to "Online Store" on the administration page. (You can see a preview of the site.)

shopify admin online store

If you see a screen like this, you have succeeded!

shopify admin store preview

This will be the default screen for Shopify!

You have now connected your domain and set up your e-commerce store. You are now an e-commerce site owner! You will now proceed to designing the site, registering products, etc. The volume of the site is quite large, so please take a break and proceed at your own pace.

Prepare the design of the e-commerce site you created.

Now, let's prepare the design of the e-commerce site you have created.

First, from the administration screen, click on "Sales Channels" > "Online Store" > "Themes".

shopify admin

The default theme is Debut.

If you are interested in paid themes or other free themes, click on the Shopify Theme Store at the bottom to find one that suits your taste.

shopify admin theme 一覧

But don't worry, the basic operation is the same no matter which theme you choose. (We recommend that you follow this guide once with the default Debut theme and then change or purchase another theme once you are comfortable with it.)

Prepare the contents of the TOP PAGE

Now, let's start editing the contents of the TOP PAGE by pressing the blue button "Customize" in the Debut.

shopify debut theme

We will customize it in the " Section " section on the left and the "Theme Settings" section on the right.

Section

  • Text over
  • Image with text
  • Example of text with image
  • Featured Collections
  • Customer Testimonials
  • Gallery etc.

Each of these is called a section.

For example, if you click on the very first section, "Image with Text Overlay," you can edit the content like this

shopify customize theme from admin

By the way, if you click "Find Free Images" in the image selection section, you can choose an image from the list of free materials. (The quality of this list of free images is quite high.)

In this case, I edited the image, heading, and text.

shopify demo store preview

Shopify's greatest strength is that you can edit your site so easily without touching HTML or CSS!

The eye buttons next to the sections allow you to show/hide each section. You can also add a new section by clicking on the "Add Section" button at the bottom of the page.

shopify store customize image

Now that you have a general idea of how to use the sections, let's get started.

======EC PENGUIN example: =======

Now, as an example, let's take the case of EC PENGUIN's test e-commerce site.

The sections I used this time are

  • Slideshow
  • Image with text
  • Image with text
  • Image with text
  • Featured Collection
  • Image with text overlay

The following are All images were selected from free images.

Rough flow

Delete sections you don't want
(select a section and press the delete button)

Add sections you want from the add section button

Edit the content of each section
(images, text, placement, etc.





)

The design will look roughly like this. (The image quality is rough.)

Shopify 全体の流れ プレビュー GIF

I was able to create such a high quality site in about 10 minutes. Amazing.

When the design is ready, make sure to click the save button in the upper right corner. If you go back to the site without pressing the button, your changes will not be reflected, but will be lost.

Create About and Privacy Policy pages

Next, let's create the necessary pages.

In this case, at a minimum

  • About page
  • Privacy Policy page

We will create the above two pages because we think it would be better to have them.

Basically, when you create a new page in Shopify, you can do so from the "Pages" section of the administration page. (If you are on the customize screen, click on the Shopify logo in the upper left corner to return to the admin screen.)

shopify admin ページ

Press "Online Store," "Pages," and then "Add Page.

Create only the page at first, and enhance the contents later.

shopify adding page

Similarly, create a Privacy Policy page.

add privacy policy page shopify

This completes the creation of a new page. If you still have other pages that you need, you can create them later.

Header and footer settings

Now, the last step in the design is to set the header and footer, which are common to all pages.

Are you starting to enjoy the design now that it is much more ready? My e-commerce site is steadily being built. It's exciting!

Header and footer settings are made from the administration screen.

shopify menu modify

Go to "Online Store" -> "Menu" -> "Footer" -> "Header" -> "Footer".

  • Main menu (header)
  • Footer menu (footer)

respectively.

Click on the main menu and press Edit for the item you have changed.

main menu modify shopify

You can then edit the name of the item and the link to it. In this case, we changed them both to English because it looked cooler in English. The link destinations are not changed.

shopify menu japanese to english

By the way, as you can see when you click on the links, they are drop-down menus, so you can easily set them up!

Let's add the page we just added to the menu.

about page add to menu shopify

Now press add and save.

shopify menu added

About has been properly added to the header!

shopify menu preview changed

Similarly, add About and Privacy Policy to the footer menu.

footer shopify menu modified

Then, it was reflected like this. (You can also clear the newsletters and tweak the text from the customize screen.)

Now we've got the site design all in one place!

All that remains is to register the product!

Registering products on the site

Ladies and gentlemen, thank you for your hard work!

It has been a long road to this point, but we are almost there. Let's register your products and get it done!

Adding Products

Now return to the administration screen and click on "Product Management" -> "Add Product".

shopify 商品登録 管理画面

Once the product has been added, we will add the product information.

shopify 商品登録 商品追加

At a minimum, edit the following sections.

  • Title (Product name)
  • Description (Description details below the product)
  • Classification (Category)
  • Media (product image)
  • Price
  • Stock quantity

It will look something like this.

shopify 商品登録 プレビュー

Let's register about 4 products as a trial.

Setting up a collection

This completes the setup of the e-commerce site.

However, the featured collections section of the top page is still blank.

Shopify debut テーマ カスタマイズ コレクション

This means that the site cannot be published yet.

By the way, a collection is a grouping of multiple products. For example, if you are a fashion store, you can add multiple spring items as a "spring collection" and add them to the top page. This is a pretty handy feature!

So we will set up a collection.

First, press "Administration" -> "Collections" -> "Create Collection".

コレクション  作成方法 Shopify

This time, set the title as "Recommended Collections" and the collection type as "Manual".

Manual → Add products by yourself
Automatic → Set the conditions and the products that meet those conditions will be added automatically
.

Now, press the Save button in the upper right corner.

Shopify コレクション 作成 管理画面

After saving, you will see the Add Products column at the bottom, where you can search for products and add them to your collection.

I added these products. (All four products are duplicates...)

shopify コレクション 画面適用 テーマ

Now you have a collection named "Recommended Collection"! Let's display it on the top page right away.

Select "Customize" → "Featured Collection" and press the "Select Collection" button to add the "Recommended Collection" you just created.

特集コレクション Shopify テーマ

Now press the "Save" button and your collection will look like this!

Shopify コレクション 反映済

This means that 、、、、、

Congratulations! You now have the framework for your, and only your, e-commerce site!

Make the site public

Currently, the store is set to "Limited Public with Password" and cannot be seen by the general public.

So, let's make the site public!

Click on "Customize" -> "Online Store" -> "Various Settings". At the bottom of the page, there is a section called "Password Protection.

Shopify サイト公開 管理画面

If you are in the free trial period, you will need to select a plan, so press "Choose a plan". (Don't worry, you will not be charged if you cancel during the free period!)

Shopify トライアル 無料期間

Unless you are a very large company or something, you can basically use the Basic Shopify plan at the bottom. Click on "Select this plan.

Shopify plan 選択

Enter your credit card information and click Start Plan.

Once you have selected a plan, go back to the password protection section of the various settings mentioned earlier and uncheck the "Enable password" checkbox.

Then press save.

Your e-commerce site is now live. Now anyone can view it!

Shopify ストア 開設 完了

Complete Guide to Opening a Shopify Store Summary

Thanks for all your hard work!

This was a rather long article, but I have tried to explain it carefully so that you will not get stuck. I hope you enjoyed it.

At any rate, you are now a Shopify e-commerce store owner!

What does your e-commerce site look like now?

If you'd like, send me a screencap and link on Twitter ( @ec_penguin_ )! We might even feature you on our site! (You're getting links, aren't you?)

We look forward to seeing your e-commerce sites.

関連記事

Contact form

新規ストア構築、開発などのお仕事の依頼・無料相談はこちら