Instructions how to create website referring to this example below include photos .
Example:
Here a sample how to create an
Explain how to create an E-Commerce website using Wix
•
•
•
Introduction
Setting up a website now can be as easy as 1, 2, 3 or it can be hard for people who make it using the ways it is taught in the NYCCT current syllabus. Nowadays there are websites where you only need to drag and drop the suggested item such as a textbox, image section, video section and so much more. There are so many websites that utilize these tactics where a novice who does not know anything about programming languages can make a website and if you are knowledgeable about the languages you can edit and be more creative while creating these websites. Some of these websites
are Shopify.com (an e-commerce store), Wix.com(where you can create anything from an e-commerce store to something personal), Square.com (very similar to Wix).
Requirements:
• Internet
• Computer / Tablet (but I will show it using a computer)
• Wix.com account
• Product or service you want to sell
• If you are going to host your site, set aside $500 to host it. It will be a yearly payment. I will not host it but if you are willing follow the steps given from Wix after you click publish. (For more information follow the instructions fully.
Contents
1. Getting Started
1. Create an Account
a. Option 1
b. Option 2
2. Confirm Email
2. Create my Website
1. Mainframe
a. ADI
b. Wix Editor
3. Navigation
4. Main Page
a. 1st Strip
b. 2nd Strip
c. 3rd Strip
d. 4th Strip
e. 5th Strip
f. 6th Strip
g. 7th Strip
h. 8th Strip
i. 9th Strip
5. Add Products
5.1. Inventory
6. Menus and Pages
7. Publish
8. Glossary
1. Getting Started
To start we will visit www.wix.com. This is the website we will use to create our first e-commerce store. The reason I used Wix is that it is used by many to create products or services which can represent a business to many clientele. Wix is also used for users to connect to Instagram, Facebook, and many social media platforms where the business owner can promote their business to more people.
1.1. Creating an account
a. OPTION 1
Signing up is very easy. If you follow the instructions you will be able to create an account and 1 step closer to being an entrepreneur. As many of us have an email account in Gmail, yahoo, outlook, or apple. Use that email in the “email section” and retype your email in the “retype your email section”. Next, create a strong password for your account so you will feel secure in knowing the purchases and the profits that your site has are secure. Now type your password in the “password section” and confirm it in the “confirm your password section”.
b. OPTION 2
If you don’t want to create a new password and a whole new account on the right-hand side you will see options such as “Continue with Facebook”, “Continue with Google” and “Continue with Apple”. You can just click on the account you prefer and use it to connect to your account.
1.2. Confirm Email
Now you just need to confirm your email so we and the site agree that we are the ones requesting to create an account and not someone who is impersonating us. So go to your email and verify the email sent by Wix.
2. Create my Website
As soon as we sign up for our new Wix account. We will be given three choices. Choice 1 where we create our website from scratch by ourselves or Choice 2 where we hire a professional in creating our website. In this instructional manual, we will not use choice 2 since Choice 2 is not free and the prices for hiring professionals will be a grand or more. The last choice is to skip the step and go to the main menu where we can pick a design template for our account. Many of us will not know what kind of store we will be creating and many will skip this step. So now let’s skip and go to our accounts’ main page.
2.1. Mainframe
The mainframe is the template of the website. It is usually a layout that shows different templates created by the developers. In Wix, you don’t have to worry about this since many Wix developers are not Computer Science students and are not knowledgeable in developing websites. So Wix has 2 methods it uses to create a mainframe. In Wix, there are 2 ways to show a template ADI and Wix Editor.
a. ADI- ADI uses Artificial Intelligence to show different templates by using the information you will provide. In this method, you will need to know your business information beforehand such as the Name of the website, the domain address, physical address, logo, and other information. You can skip this part by only providing the information you have or clicking skip. This will bring 3 template options that help you choose faster and save time for you so you don’t have to look at more than 1000+ templates. Also, you can change the site name, address, and logo afterward but changing a website domain address will be a lot more work. So do not put the site address till the end where you are comfortable in knowing your site is finished.
b. Wix Editor- This is for developers who are new to Wix and are not knowledgeable in different templates that are provided by Wix. It shows 1000+ templates where you can filter out templates using the options: Business and services, Store, Creative, Community, and Blog. They have subcategories as well if you are knowledgeable about the type of business you are creating. The type of template can be free and some also cost some money
The template I will be using is called the “Backpack Store”. In this first, we will click “view” to see the site’s features by hovering our cursors. If you still want to see more, click the full demo, but we will start to edit our site.
3. Navigation
1. ADD – This button is what we will use to add pictures, text, buttons, strips to divide a page and so much more. It all is up to your imagination.
2. MENU & PAGES – This is to make different pages for your site. You can visit to store, the home page, about us page, if you want you can create subpages to divide products for gender, age, or things
3. THEME MANAGER – To choose the color and text sizes
4. BACKGROUND – Choose a background so you can make your website feel like what you want to represent
5. ADD APPS – This helps you to create traffic by putting deals or analyzing the data. Some people create different apps so we can increase our revenue. Make sure you review your app before applying it to your site.
6. MEDIA – So you can add images and share stories about your store on social media
7. START BLOGGING – Tell stories and connect with your customers,
8. MY STORE – Add products to your website.
9. ASCEND BUSINESS TOOLS – This is used for marketing.
4. Main Page
Main Page/ Home Page is what you use to describe who you are and what you are selling. In the template, we see 9 strips. Remember you do not have to use each strip if you feel it is not necessary you can delete it and start dragging the strips up. Also, remember to undo any changes you made just press Ctrl + Z or Cmd + Z.
a. 1st Strip – The 1st strip is the one where you put the logo and the menu bar. The 2nd strip is the one where you display images or deals for your products.
b. 2nd Strip – You can change your 2nd strip into sliding images just by deleting the current image and going to the Add button from Navigation (see Chap. 3) goto the galleries and select slider. To stretch the image just click on the image and select stretch and to increase the length or width select and drag from the bottom or the side of the image, just the way you do it in word or PowerPoint.
c. 3rd Strip – The 3rd strip is about the new arrivals. To Change the picture double click on the picture and click change background to select a new image. To change the text from New Arrivals to anything such as Best Seller or Feature Item Double click on the text and select click edit text. If the text gets highlighted just start typing.
d. 4th Strip – the 4th Strip is where people are promoting your product by images using the gallery. Just double-click on the gallery strip and click Manage Media where you can add, delete or reorganize the images.
e. 5th Strip – The 5th Strip is when you already added your product (Come back here after Chap 5). Now Click on the product and select Manage products. Choose The item you want on sale and go to the pricing section and select the discount in percentage or in dollars. To edit text click on the text and select click edit text.
f. 6th Strip -The 6th Strip is about About us. It is a story about you and the store. To edit text click on the text and select click edit text.
g. 7th Strip -The 7th Strip is for contacting you if any problems occur. This is mainly used for letting the customer feel their opinions and problems matter. Respond as quickly as possible to your customers
h. 8th Strip -The 8th Strip is used to subscribe the customers to your mailing list. This may be used for informing them about new deals or new products.
i. 9th Strip -The 9th Strip is the footer of your website. This can be used for social media, the location of your store, or as the template has been used to create different pages on your site.
5. Add Products
In Navigation (see Chap. 3) Click My Store and select add products. Before we add a new product we should delete the products from the template since we do not have any of those products. Select the three dots and click delete.
Now click New Product select Digital or Physical. Choose digital if you are selling an ebook, picture anything you can email. Choose physical if you have to ship them the product. For this example we are selling a physical product. Add some images and the title for the product (A warning donot put an image from google since someone owns that image they might sue you for copyright. Same for the digital product). The Ribbon section is where you can tell the customer of what is new or feature item. Make sure you describe the product to the best way possible. For descriiption, name, images you can copy the wholesaler since you are selling his product. Put the price on the pricing section with discounts if any. Click Add Option for adding size and colors. When you select Add option the list is for size and color is for the colors of the product. If you donot find a color just write the name of the color and drag the color picker till you find the color you are looking for or select the hex values from “https://www.w3schools.com/colors/colors_shades.asp”. Before clicking save make a collection. Click create collection and name the
Collection. The collection is used to make filters or separate pages for example lets say you are selling apparel and this product is men shoes the name of the collection will be “Men Shoes”.
5.1. Inventory
This is basically used to make sure your item is in stock sogo to inventory and click in stock for the items you have and out of stock for the items you don’t.
6. Menus and Pages
In Navigation (see Chap. 3) Click Menus and Pages. Select the 3 dots and delete the pages from the templates since we are selling apparels in this example. Also we can remove/hide FAQ and Forums since we don’t have any questions to answer yet. Now click Add Page and choose a blank page. I named my page Mens Shoe and dragged the box inside Shop since it is a sub category of Shop. Instead of Shop you can name it Men and make another page for Women. I would do this if I was selling shirts pants and hoodies for both men and women in my site.
Once you have created the page go to the page by selecting Page right below the Wix logo and choose the page you want to go to. Select Add from Navigation (see Chap. 3) Go to store section and add a Product gallery or Widget. If you select Product Gallery you can share the whole collection but the widget shows only one image.
7. Publish
Once you click publish it will create a Wix domain if you would like a Professional Domain Click Upgrade now Select a Plan and fill out the form with your information and you will be a proud owner of a site.
Glossary
ADI – ADI uses Artificial Intelligence to show different templates by using the information you will provide.
SKU – A stock-keeping unit (SKU) is a scannable bar code, most often seen printed on product labels in a retail store
Templates – something that serves as a model for others to copy.
Wix Editor – This is for developers who are new to Wix and are not knowledgeable in different templates that
