How to create your e-commerce site on Shopify and make your first sale
When we talk about creating an ecommerce site, we immediately have two or three references in mind. Shopify is part of of the range of CMS like Prestashop, Magento or Woocommerce. Shopify is a hosted Ecommerce CMS, unlike Magento and Prestashop (although it has been offering a Cloud offer recently). Entering the ecommerce CMS market in 2004, Shopify quickly emerged as a major player in the online store creation industry with more than 600,000 active users to date.
With an ergonomic and intuitive creation interface, you can create a Shopify site, edit it and put it online simply and quickly. Shopify has chosen to address users who do not require special technical skills. The focus is on ease of use and ergonomics. Shopify offers a wide range of features and themes to create and grow its online store. It is therefore a very popular solution for media specialists in the creation of websites.
If you embark on the realization of your first ecommerce site, you will surely need some help in order to understand the software. In this resource, I accompany you step by step detailing the different steps to create a Shopify site.
Step 1 – Setting up your Shopify account
I detail step by step all the steps necessary for the realization of an ecommerce site on Shopify. The steps are sufficiently detailed and illustrated, which allows you to embark on the realization of your first ecommerce site, without the need for special technical skills.
Register on Shopify
Shopify registration is fast and easy. On the Shopify home page, you can create your site in just a few clicks. Just enter an email address (which will be the reference address to connect to the editing interface of your ecommerce site).
1. Adding personal information
Once your email address is entered, Shopify asks you to enter your personal information on the “Few more details” page. Classically, one must have to enter one’s first and last name, address, city, postal code, etc.
Then, on the second part of the “Few more details” section, Shopify asks you to say a little more about the status of your project. Two informations are required:
Do you already sell products?
How much income does your activity have in the last year?
To validate this information once the entry is made, click on “Enter my store”.
2. The beginning of the configuration of your ecommerce site
Once this personal information is entered, you will land on the home screen of your admin area. From this online portal you will be able to directly create and customize your ecommerce website (customize appearance, add products, configure payment and delivery system, etc.).
Choose the theme of your shopify ecommerce site
Choosing the theme for your ecommerce site is a crucial step. Your theme is the identity of your site, your brand. Make sure to select a theme that you like (and yes it is important) and in agreement with your ecommerce website creation project. Shopify offers its own themes via an interface. In addition, Shopify guarantees that the themes are certified by the designers, a guarantee of quality.
Each theme is proposed with a list of changes that you can make without ever having to enter the theme code. Premium themes obviously offer more possibilities in terms of modifications, but you can quite satisfy yourself with a free theme, enough for a small project, or a project of creation of ecommerce site not very complex.
If, however, you wish to make important changes to your theme, you will need to modify the site’s HTML and CSS. For this type of change, do not panic if you do not have skills in these languages, Shopify has an international network of design agencies (called “Shopify Experts”) that you can contact so that they modify your site.
1. The Shopify Theme Browser
The Shopify Themes Browser is available from your admin portal or directly by going to themes.shopify.com. It exhibits more than 150 different themes. As mentioned above, there are free or premium themes. The themes can be filtered according to the type of activity as well as according to recency and price criteria. For example, in the “Electronics” category, the Jumpstart and Palo Alto themes are more suited to Tech-oriented activities, innovative products, etc.
2. The features of a Shopify theme
Once you have chosen the theme you like, you can get more details by clicking on the theme directly from the browser. Thus, you will get precision elements on the theme like the fact that it is responsive, adapted for mobile use, as well as opinions of other users of the same theme by scrolling the page.
3. Visualization of the rendering of your theme
You can even immerse yourself in the theme with the demo tool available for each Shopify theme. The navigation on the different pages of the demo allows you to get a good idea of the possibilities of the site both in terms of the layout of the elements as navigation and animations. You can also test the rendering of the theme on a web browser or on mobile. In order to make the right choice, it is important to know the trends in terms of design and ergonomics on ecommerce sites currently.
If the theme has multiple appearances, you can switch from one to another by clicking on another style.
Little advice here:
The choice of theme is crucial in the success of your ecommerce project. I do not recommend choosing a poor theme visually, for the sole purpose of saving a few dozen euros. Indeed, a quality template will always be a profitable investment.
4. The final validation of the choice of theme for your ecommerce site
To install the theme, it’s very simple, just click on “Install Theme” on the theme’s detail page when it’s a free theme or “Buy theme” if it’s is a premium theme. A confirmation will be requested by Shopify. Then click on “Publish as my shop’s theme” to install the selected theme on your Shopify online store.
As a reminder, the choice of theme is not final. By this we mean that it is not because we have chosen a theme that we will never be able to change it. You will then have the opportunity to revisit your initial choice and choose another theme more suited to the evolution of your business.
5. Finalizing the initial configuration
Finally, a page is displayed with a “Go to your Theme Manager” button. By going to this page you will be able to modify the appearance of your theme. Your theme manager will show you the most recently installed theme (and uninstall older ones).
Change the appearance of your theme
On most themes offered by Shopify, you have the option to change the appearance of your online store. So rest assured, your site will not look like thousands of others!
In your administration panel, you will find the section that allows you to change the appearance of your theme in the menu on the left, entitled “Themes”. The interface will automatically display the theme used by your Shopify site. You can see at the top right several buttons:
- The three small points “…” (1. On the screenshot): this button allows you to make basic changes like changing the name of the theme, editing the HTML / CSS, the language, downloading the theme file or even duplicate the theme (very useful when you want to make big changes on the theme, and you want to have a backup of the initial theme for security).
- The eye (2. On the screenshot): this second button allows to simply visualize the rendering of your theme. A new window opens and displays the site of your shop.
- “Customize Theme” (3. On the screenshot): This button is important. It allows to access the settings of your theme in front (direct visualization). This section is very interesting when you want to perform quick tests of color and typography choice for example, but also edit the footer / header, logos, menu, etc. In any case, it is an interface that must be tested in order to become familiar with the Shopify site editor and to know all the features on offer.
Some themes even offer the possibility to customize the positioning of the elements (product image on the right / left, center the elements or align them on the left / right, etc.).
Step 2 – Build your Shopify ecommerce site
An ecommerce website without products is not really an ecommerce site. Here we will explain how to add products to your Shopify online store.
Add products to your ecommerce site
To add products to your Shopify online store, go to the “Products” interface from the menu on the left (the logo takes the form of a product label). On this page appears a blue button “Add a product”. Click on it to add a new product to your shop.
Once in the interface, it is now necessary to fill in the different fields (the title of the product and its description, the images, the price, etc.). On the right side of the editor, the category “Visibility” allows you to choose whether the product will be published automatically on the site after validation or if you want to publish it at a specific future date.
Below, there is an important section entitled “Organization” in which the product can be assigned to a category as well as a brand. If this is your first product, you can enter a category in the “Product type” field such as T-shirt. Thus, you will assign the product to this category and at the same time, you will create the new category T-Shirt (without having to go to the category creation section). The process is the same for the “Vendor” field (product brand for sale). Below, the search field allows you to place the product in a collection (created before), as well as to assign different tags to the product (Ex here: #cotton, #black, #vintage, etc.).
Once the characteristics of your product are met, you can save it by clicking on the blue “Save Product” button located at the top left of the interface.
If you have not created your product collections yet, do not worry, you can create all of your products, and then assign several products to a collection from the “Products” interface by selecting the products and by clicking on “Bulk actions”> “Add to collection”.
Configure product collections on your ecommerce site
To create a shopify site in the rules of the art, it is necessary to determine collections of products. A collection is a repository common to many products in your Shopify store. For example for a clothing store, you may decide to create collections depending on the type of person to whom your products are addressed (Men / Women / Children), product families (Pants, T-Shirts, Underwear, etc. .), the color or the size of the article, the seasonality of the products (Summer, Winter, etc.).
Products may appear in more than one product category. As a reminder, generally the categories that you have determined appear on the home page of your site and in the navigation menu. This is a crucial step to better guide your future customers without having to click several times to find a product category. One tip, try to minimize the number of clicks between the homepage and a product.
Automatic or manual collections
When you add a new collection of products to your Shopify site, you can decide how the products will be included in those categories.
- Add manual: You must add and remove the products manually in a category.
- Auto Add: You can set conditions to include products automatically in a particular category.
Little Advice here: Before you launch your products online, it is better to have defined in advance the different categories of products and collections. You can do this job from an Excel file, for example, to group, combine, and categorize your products. This is a significant time saving, since it will avoid you to modify products already online if you suddenly decide to create a new category.
Create pages and add content to your Shopify online store
The creation of pages and the addition of content is not a feature put forward by shopify. To add pages to your Shopify ecommerce site, go to the “Online store”> “Pages” section and click on the “Add Page” button. After defining the name of your page, as well as its contents, you can save your page by clicking on “Save”. The operation is the same to add a blog post (“blog post”).
Once the page has been created, you can choose to include it in the main navigation menu from the “Navigation” section. The menu of your ecommerce site is very important, it is the main gateway to your products. It must be clear and sufficiently detailed to facilitate the search process of your users. You must then Add an item in the “Menu items” sub-menu and assign the new created page to the new menu item. To define a tree structure on your site, you can choose to link your page to a “Web address” in the “links” section and define the path of your page. For example, if a catalog page is created, we will define “Web address” then in the right field “/ collections / all”.
Assign discounts to products on your Shopify site
If you want to benefit your customers promotions, the entire management is done from the “Discounts”. You can then add a discount by clicking on the “Add discount” button.
Once in the promotion codes editor, click on “Generate code” to have Shopify choose a code that will have to be entered by your visitors if they want to receive the promotional discount. You can decide the form that will take this reduction: Fixed discount in €, percentage of reduction or even free shipping. Then you decide on the value of the reduction, as well as its area of action (in other words, which products will be subject to this reduction). You can apply the discount to all of your products, a single collection or even a single product.
In addition, you must decide if this reduction is usable an infinite number of times or configure a limit of uses. The box below will allow you to prevent visitors from using the same code multiple times, thanks to tracking email addresses. Last field to define, the period on which will extend the reduction, available on the right part of the editor.
Step 3 – Manage payment methods for your Shopify ecommerce site
Set up payment methods
The payment gateway Shopify (or payment interface) allows you to receive payments made by your customers via your ecommerce website. The two important elements to take into account are the price and the commission rate. One can add to the elements to take into account the functionalities of each means of payment (because all means of payment are not equal). Here’s a look at the different types of payments you can make for your Shopify online store.
Fees taken during transactions
When you opt for the commission system, some payment systems will take a small percentage of the transaction or a fixed amount in exchange for using their payment service. To evaluate this type of payment system, you must take into account the amount of sales you expect to make.
The different types of payment cards
You need to know the different types of cards accepted by your payment gateway. All gateways accept VISA and Mastercard. The PayPal solution, which has become very popular for online transactions, is also available.
Orders placed outside your ecommerce site
ome of the payment gateways will receive payment on their own server via one of their forms. This means that in this case, the customer will be redirected to a page outside your site (from the payment page) to enter their bank details and validate their order. However, they will be redirected to your order confirmation page once the transaction is completed. In other words, it allows you to have a little more control over the payment process. About your confirmation page, Shopify only allows you to change the CSS of the page.
The fees charged by the payment gateways are in addition to the commissions charged by Shopify. Depending on the tariff formula for which you have opted, the amount of commissions charged will change. Transaction fees are decreasing. The higher your subscription, the lower the fees charged:
Basic Shopify: 2.0%
Advanced Shopify: 0.5%
Little Advice here: It is important to remember that depending on the number of sales you plan to make, it may be more advantageous to opt for a lower formula, even if the fees are higher. Indeed, if you plan 100 sales in the first year, the solution “Basic Shopify”, less expensive, remains the preferable solution.
Step 4 – Configuration of the elements to remember before moving to your ecommerce site
Before going on to put your site online (patience, patience …), you still have some elements to add, including information about your company, the delivery method and the tax system applied to your products. .
Enter the general information of your company
In your administrator interface, you can add details about your business from the “Settings”> “General” section. It is better to fill in all the fields contained in the 3 sections:
- “Store details”: the name of your shop as well as the email addresses.
- “Store address”: everything is in the title, fill in your details.
- “Standards and formats”: definition of the time zone, the currency used, etc.
Manage taxes applied to products in your online store
In the same section “Settings”> “Taxes”, you have to define how taxes are applied to your products. The “All taxes are included in my prices” box is checked, which means that the sales price displayed on your products contains the tax. For example, if you sell pants 100 € and this box is checked, it means that the price excluding tax (for a French online store) will be 100 / (1 + 0.2) = 83 €, so an amount of taxes around 17 € (20% of the total sales price).
You can check on a product sheet that this tax system is applied correctly. By going to a product sheet, you must then make sure that in the heading at the bottom “Pricing” the box “Charge taxes on this product” is checked.
Choose a delivery method
Delivery management is done from the “Settings”> “Shipping” section. Normally, having entered your address by creating your shopify ecommerce site, the fields of the subheading “Shipping origin” are pre-filled. If you want to change the order sending address, you must edit this field by clicking on “Edit address”. Below, the information about the delivery amount appears. Depending on the zone and the weight of the products sent, the amount of the delivery varies significantly. This amount is declined in two: “Domestic” (France in our case) and “Rest of world” (for a shipment outside France)
Test your order process
Nothing is worse than realizing after the fact that your payment process is not working properly. To make sure there is no problem, you can do a simple test using the Bogus Gateway.
- From the administrator interface, go to the “Payments” section.
- Click on the “Select a Credit Card Gateway” drop-down menu in the “Accept credit cards” sub-menu.
- Select “Bogus Gateway” in “Other” to perform a test.
- Click on “Activate” and then on your online store.
- Make an order in the same way that a customer would have done.
- Once on the payment validation interface (Checkout), you must enter the following details (instead of actual bank details):
Credit Card Number: Each of these numbers simulates a different scenario.
1: simulation of a successful transaction
2: simulation a failed transaction
3: simulate an exception (generating a message indicating that an error occurred on the payment gateway)
CVV (verification code on the back of your card): enter a random 3-digit number (Ex: 333).
Expiration Date: Enter a date after random.
You can also test a transaction with your real bank details.
- Select the payment gateway you want to test in the “Payments” section
- Make a purchase on your store by entering your real bank details in the payment validation interface.
- Once the payment is validated, make sure to immediately cancel the transaction, to reimburse you and avoid paying the transaction fees.
- Finally, check that the payment has been entered in the payment interface.
Perform this test is completely free. Make sure you have canceled your order directly after validating the payment.
Step 5 – Uploading your Shopify ecommerce site
Choose a domain name
To put your Shopify ecommerce website online, you need a domain name. Two solutions are available to you.
Buy a domain name via Shopify
With this option, the purchased domain name will automatically be attached to your online store. This is obviously the simplest and fastest solution, especially if you do not have technical knowledge of website hosting. For the purchase of a domain name, it takes between $ 13 and $ 54 a year.
Little Advice here: If this is your first website realization, it is better to buy his domain name directly on Shopify, this will save you having to transfer a domain name bought elsewhere, which requires time, and is not everything not so simple!
Buy an external domain name from Shopify
You can also decide to buy a domain name through a third-party vendor. I think of providers like GoDaddy, IWantMyName or Gandi. This solution is certainly much less expensive (starting from $ 0.99 the domain name), but you will have to redirect your DNS registration yourself, which can scare at first, it must be admitted. Here’s how to go step by step to get your Shopify ecommerce site online with a domain name acquired from a third-party provider.
1/ Add a new domain in Shopify
In the Shopify administrator interface, go to the “Online Store”> “Domains” section and add an existing domain by clicking on the white button located at the top right “Add existing domain”.
2/ Update your DNS server
You then need to register the previously purchased domain name from a third party provider and make some changes to your DNS records:
Replace the @ or the main record with the following IP address: 188.8.131.52
Add or replace the www CNAME with mymagasin.myshopify.com (i.e link to your shopify store without the http)
3/ Delete home passwords
Without performing this step, no one will be able to access your site, even once online.
4/ Configure your default domain
From the “Online Store”> “Domains” section, select your domain name from the drop-down menu. It must also ensure that all traffic will be redirected to this area by checking the box. This is a crucial step in terms of SEO because it will give importance to the domain selected by default.
5/ Add other domain names
You can repeat the process multiple times depending on the number of domains you want to add. All domains will redirect to your main domain (“Set as primary”). Please note that the number of domains you have has no impact on SEO.
With all of these explanations, you can build elaborate Shopify ecommerce sites. The interface is intuitive, simple categories and features very well thought out. By training for a few hours, you will be able to create a complete site and perfectly personalized according to your needs.