In this guide, I’ll show you how to build an eCommerce website from scratch. This step-by-step tutorial is conception to creation!
Don’t worry; I’m here to help you if you’ve never created a Website before. I’ve chosen an easy-to-use, drag-and-drop website builder that doesn’t require any knowledge of HTML or web design.
I’ll show you how to set up your store’s homepage, how to add products, and set up your shipping information. You’ll even learn how to create your logo in just a few minutes.
The theme I’ll be using today as a demo is bright, clean, and can be customized with various colors and styles.
You’ll have a fully working shop that you may use to make sales by the end of this lesson.
What You’ll Need Build An eCommerce Website From Scratch
While some of the items on the list can be done with free versions, there may be reasons to upgrade early, or down the road.
- Domain Registrar (This tutorial teaches GoDaddy)
- Domain Hosting (This tutorial teaches WPEngine)
- WordPress Platform (Free! Hooray!)
- WordPress Theme (This tutorial teaches Astra Pro)
- A Pagebuilder (This Tutorial teaches Elementor Pro)
- An eCommerce Plugin (This Tutorial teaches WooCommerce)
If you find yourself overwhelmed by the process, you can hire my brothers Jeff and Paul Helvin at Ballen Brands to build your e-commerce website for you. You can call them at 702-917-0755.
Domain Name
This tutorial will teach you how to register your domain name using GoDaddy.com. If you prefer video, you can open the ‘How To Register a Domain Name for eCommerce Websites’ Here.
Your domain name is the website address. Generally, I suggest you choose a website that ends in .com, is short, and easy to remember. You can brand a domain with your business name or something cute and quirky.
There are several places to register your domain name, but today, I’ll use GoDaddy. All of my domains are registered and managed at GoDaddy.
With GoDaddy, I can change the Domain’s DNS settings to work with any website hosting service.
I like this because if I become unhappy with the server, I choose to host my website (more on that in a big). I can move the website to a new host and keep my domain name.
The first step is to pull up GoDaddy on your computer. Next, enter some domain ideas into the search bar.
For example, let’s say your store is going to sell costumes.
While your costumes may be focused on Halloween, you want to keep your domain a little broader so you can build it up to more products like accessories, cosplay, lingerie, or whatever else makes sense in that niche.
If your business already has a name, begin by checking for brand name ideas on Google. Then, make a list of several domains with your brand name and search to see if anything is available.
Remember, 2-3 words are ideal.
The odds are, you will likely need to register a domain name that is a play on words rather than registering a brand if it has popular words.
In some cases, GoDaddy will show you that the domain is available for a premium fee.
In this example, I started with the word disguise for my costume shop. But, of course, someone already has that domain.
I played around with variations like:idisguise.com disguiseme.com, mydisguise.com. But, of course, all were taken or are for sale at premium pricing.
Buying a domain name with specific keywords to better rank on the search engines isn’t relevant today like it was in the past.
Buying a premium domain because you think it has better chances of ranking isn’t a great strategy.
However, paying a premium price for a brand or a catchy name that you love could be.
Once I played with the word disguise and couldn’t find what I wanted, I went to Google and typed in ‘words like disguise.’
Then, exploring the synonyms, I found and liked the word charade.
Wanting to keep the domain at two words, I tried CharadePlay.com, and it was available.
Google also showed me that the domain name could be valuable as “Play” is a high-value keyword.
When people sell a domain name with the word Play, it has an average sale price of $2,265.00.
It could be more valuable if you ever decide to sell a domain name (even without the website). Domains with 2 – 3 words in them typically sell for the most money.
Now that I’ve chosen a domain, I’m ready to make my purchase.
GoDaddy will try to sell you a website, which you don’t need in this case. For today’s example, we are going to use another host for our website.
Your domain name includes basic privacy registration. If you would like more privacy features, you can upgrade.
Proxies are used to conceal your personal information. For example, your contact information is changed to proxy data when you upgrade.
You’ll be given a private email address that you may use to filter, block, or forward emails to your primary address. Ownership Protection will also be provided so that your domain does not get hijacked or lost due to an expired credit card expiration.
Full Protection also prevents certain domain activities from being completed without further verification, such as moving away, canceling, or changing contact information.
If you don’t know which you need and are OK paying the additional fees every year, upgrading provides extra benefits.
Upgrading is not required.
Once you have added your domain name to the cart and have chosen your privacy registration, you can uncheck the button to start a website.
If you want to use your domain as an email extension and aren’t using an email platform like Gsuite, you may also want to add the email address here.
Once you have chosen your options, click continue to cart.
Next, choose the length of your domain registration.
Some say that it looks good to Google to have a more extended domain registration, while others say it has no relevance. And so it goes the typical SEO debates.
To obtain the discount in the second year, you must purchase a domain name for two years. You can then use your GoDaddy account to auto-renew your domain each year or manually select if you wish to renew it.
If you have the cash and plan to keep your business for a long time, it may be beneficial to get a longer registration.
If you pay for the registration yearly, your domain will be yours if you keep it active each year. The advantage of registering for a more extended period is that you lock in the annual fee by paying upfront.
You can put any additions they added to your cart in the trash by clicking the trash can. Then, all you need is the domain name and whatever privacy registration upgrades you might have chosen.
You can sign in if you already have an account or set up a new account using social log-in or email. There may be a 2-step verification that sends a code to your phone. Next, enter your billing information and check out.
Now, you can leave that website while we set up your WordPress website. We will set your domain name up to work with the website in a future step.
Choosing A Host
Once you have registered a domain name for your e-commerce website, it’s time to choose a web host.
Your web host is the server that makes your website go live.
Therefore, choosing a reputable host that doesn’t suffer “down-time” is essential.
There are many web hosts out there, and most of them will work fine. However, I will use WP Engine today for its ease of use and its compatibility with WordPress.
Once you set up your hosting plan, you will get your WordPress Platform installed for free.
You are paying for the managed WordPress hosting, not the WordPress platform itself.
WP Engine is famous for its security and speedy loading times, along with its ability to scale quickly.
SSL Certificate
Each plan includes an SSL certificate. If you intend to sell merchandise or accept credit cards, I highly recommend having SSL.
SSL, which stands for Secure Sockets Layer, is essential for your website because it encrypts the data sent between your customers and your website. This security prevents hackers from stealing information such as credit cards numbers and personal information.
All of the hosting plans with WP Engine include SSL.
CDN
Another reason I chose WP Engine for this tutorial is the CDN.
CDN stands for content delivery network. The Content Delivery Network allows faster loading speeds on your website.
It works by decentralizing the web pages on your site and serving them from multiple locations.
The CDN prevents the heavy traffic load from being in one centralized location, significantly slowing down your site’s speed.
The MANAGED HOSTING STARTUP plan is going to be the way to go for most beginners. The significant differences in plans are how many websites are included, the total number of visits to the website, the bandwidth, and the storage.
If you know you are building more than one website, I suggest you opt for the MANAGED HOSTING Professional, which includes ten websites, allows for more visits, has increased local storage and bandwidth.
Otherwise, the managed hosting startup is best for most beginners.
If you purchase the yearly plan upfront, the price is discounted. However, if you make that leap rather than paying monthly, you should be very committed.
Visits Per Month
When it comes to hosting, the total number of visits to the website is called “traffic.” The more traffic your website generates, the more expensive your hosting plan becomes.
A good problem to have is when you need to upgrade because you have so much traffic.
Twenty-five thousand visits per month are plenty for most beginning websites.
Bandwidth
Bandwidth is basically how many people will be coming to your site, especially at the same time. For most beginning website builders, the bandwidth is not going to be an issue. You can upgrade this as you go as well.
Local Storage
Local storage is where your Media files are stored.
These include images, videos, files, and audio that you upload into your site’s library, such as the Media section under Posts and Pages in WordPress.
An eCommerce website with many product images may require more local storage after some time, but probably not when you are first getting started.
Once you have chosen your plan, click ‘Get Started.’ You may be asked to upgrade to the Managed Hosting Plus plan, which includes automatic plugin updates.
WordPress introduced plugin and theme auto-updates in version 5.5. Individual plugins and themes may now be enabled for auto-update on the Plugins or Themes page in versions 5.5 and later.
Therefore, you can pass on that upgrade. There is also an offer to upgrade to the Genesis Bundle.
While I’m a fan of the Genesis Framework, themes, and blocks, we will use the Astra theme and Elementor page builder, and therefore won’t need this upgrade.
I have made several Youtube videos modeling the Genesis framework and studio press child themes.
Next, set up your account to purchase your plan.
Congratulations! You now have a Host.
Connecting your Domain Name
WP Engine will send you multiple emails once you have retained their hosting services. You’ll receive your log-in information to access WP Engine, along with your data for logging into your website.
You’ll also receive an email from WP Engine that will guide you through the WordPress Installation.
- Log in to your User Portal
- Choose the environment name (your website)
- Click the Go Live checklist to follow the steps.
Add Your Domain
If you aren’t already in domains, click domains. Next, choose ‘Add Domain’, and enter the domain (URL) that you registered in the previous step at GoDaddy. Then, select the ‘I’ve purchased this domain’ option and click next.
The system may recognize that your domain has been registered at GoDaddy. If it doesn’t, you may need to wait a day to set up the domain connection or follow the manual steps.
You should see the option ‘Set [yourdomain.com] as the primary domain for traffic and WordPress admin.’
When you are routed to GoDaddy, you will follow the steps to change the DNS servers to WP Engine’s servers.
After arriving at GoDaddy, you will need to click ‘Your Account’ (the icon is a blue head), ‘ My Products ‘, and choose the primary domain you purchased with GoDaddy.
Next, choose the Manage button under nameservers.
Copy WP Engine’s Nameservers.
Enter the copied nameservers on GoDaddy. You’ll see these in your email or your WP Engine account. They change depending on your setup.
Return to WP Engine, and click the Continue button on the DNS management page.
You should see a message that tells you that your domain is now pointed to our servers.
Learn how to point DNS to WP Engine in the extended guide.
Install WordPress
Now it’s time to install WordPress! First, you need to go into your hosting plan, then click the ‘Go Live’ tab. Next, scroll down to WordPress, and click the button ‘Launch WordPress.’
Log in to the backend, usually known as the “wp-admin” or “admin dashboard,” to begin building in the “bones” of your website.
You can modify both the content of your website and its appearance and feel using the wp-admin.
I highly suggest using the seamless log-in.
The WP Engine User Portal has a new feature called Seamless Login, which allows you to access your WordPress environments with a single click.
With Seamless Login, you don’t have to keep track of numerous passwords for each WP Engine WordPress website. Instead, simply click a link and access your website’s dashboard securely.
Installing Up Your Theme
Astra is an excellent theme for WordPress. It is easily customizable with the Elementor page builder, which is my go-to page building tool.
A WordPress theme refers to the design of your site, whereas WordPress plugins, which we will get to later, are bundles of code that add additional functions and features to a WordPress website.
Astra is a free theme with premium upgrades. You can install the Astra theme for free by going to appearance -> themes.
Then, click the ‘Add New’ button in the top left corner below your screen, search for Astra, click on it to install it, then click on ‘Install.’
However, I’m suggesting you go directly to Astra and upgrade to Astra Pro.
Here’s why:
- More layout possibilities, including boxed, fluid, and cushioned.
- Make your header accessible to visitors even when they scroll down using the sticky header.
- With page headers, you may create a gorgeous Page Title area, as well as meta fields, breadcrumbs, and other exciting choices.
- You can now change the color of every aspect of the website from the customizer.
- With one module, you can choose from various typefaces to make it easier for your audience to read.
- You can use custom layouts to add your content or shortcode conditions.
- Advanced Footer module adds more footer widget areas and creative designs to your site.
- For an improved user experience, add a Scroll to Top Link on your lengthy pages.
- Create stunning mega menus for your websites that require additional space for navigation.
- You have complete control over WooCommerce templates.
Since we will be installing Elementor PRO as well, you will only need the Astra PRO plan at this time.
Get Astra PRO here.
To install Astra Pro:
- In your WP Admin dashboard, find appearance on the left-hand side of the screen.
- Then, click on Appearance -> Themes.
- Next, click on the ‘Add New’ button in the top left corner below your screen.
- Next, choose Upload Theme.
- Browse for your Astra.zip File.
- Click Install Now.
- Click Activate after you have installed the theme.
Installing Elementor Pro
There are many page builders for WordPress, but I recommend Elementor. It has more features than other page builders; it’s faster, easier to use and never breaks my site.
Head over to the Elementor website, and choose Elementor Pro for your plan. You don’t need the website plan, only the page builder (Pro version).
Once you have purchased the Elementor page builder, you’ll get a welcome email, and you can download your .zip file.
To Install the Elementor Pro Plugin:
- Log in to your WP Admin Dashboard.
- Click on Plugins -> Add New.
- Click the Upload Plugin button.
- Find your Elementor Page Builder .zip file, and click Install Now.
- Click Activate after installation is complete.
Enabling the WooCommerce Plugin
WooCommerce gives you the ability to create an online store with WordPress, making it ideal for selling products through your website.
Here’s how to set up WooCommerce:
- First, go to Appearance -> Plugins.
- Click on the ‘Add New’ button in the top left corner below your screen.
- Type in ‘WooCommerce’.
- Click ‘Search Plugins’.
If you have purchased WooCommerce, it will automatically come up, and you can Install and Activate it.
Otherwise, click ‘Install Now’ and then click ‘Activate Plugin’ after installation is complete.
Congratulations! You now have all the key components to begin designing your e-commerce website!
Adding the Astra Child Theme
It’s best to use a child theme for your website when using Astra.
The child theme will give you the ability to upgrade your template without losing any of your customizations.
Here’s how to set up a child theme:
- First, go to Appearance -> Themes.
- Then, Hover over Astra and click ‘Create Child Theme.’
- Name it ‘Astra Child Theme’ or anything else of your desire, and click the ‘Create New’ button below.
- You’ll see a new screen where you can customize the settings for your child theme.
- Check all three boxes, then click ‘Save Settings’.
- In the following window that comes up, choose to Submit from the left-hand side menu.
- Then click Update File on this same page on the right-hand side of the screen.
- Check the box that says ‘Enable Child Theme’.
- Scroll to the bottom and click Update File.
You’ve successfully set up your child theme!
Choosing Your Starter Kit
Your Astra Pro bundle included starter templates.
These are small website kits that include several key pages for your website.
These include pages such as the homepage, about page, and contact page.
Starter Kits are great for getting your website off the ground quickly.
To choose a starter kit:
- Go to Astra -> Starter Kits.
- Click on Choose Starter Template.
- If you use the filter to drop down to e-commerce websites, choose the DNK starter kit for this tutorial.
Any starter kits will work, and as you get comfortable designing, you can come back and choose a different kit.
You can click here to view a demo of the DNK starter kit from Astra Pro.
To Import, select the ‘Import Complete Site’ button.
You’ll get a popup message asking which components you want to import. Check all three boxes, then click ‘Import’ at the bottom right of the screen.
Your website template is now imported!
Customizing your Starter Kit
Your kit includes the Home Page, About Us Page, and Contact Page.
- To Edit the home page, go to Astra -> Home Page.
- To Edit the about us page, go to Astra -> About Us.
- To edit the contact page, go to Astra -> Contact.
When you open your pages, you’ll see that WordPress downloaded some extra pages besides the three we are shown in the kit.
To avoid confusion, we need to delete a few of these pages. In addition, a few pages installed with the WooCommerce Plugin would be duplicates and, therefore, confusing.
These are:
- My Account
- The Sample Page
- The Shop Page (we will use the store page instead)
- Additional Cart Page (Keep the one that says elementor).
To delete a page, check the box to the left. Next, choose the bulk actions and then the ‘move to trash’ option.
If you make a mistake, you can install it again from the starter template.
We will add products in the next step rather than customize our theme because it will help you understand the flow of product creation when you customize your website.
Congratulations, you are now ready to add products!
Adding Products
Woocommerce is powerful because it’s customizable but also very easy to use. The first step in setting up your inventory (physical or virtual) is to
- go toWooCommerce -> Products -> All Products from the left hand column.
- Start by deleting the demo products by selecting each, then choosing bulk actions, and move to trash.
- Next, it’s time to add your products. For the sake of setting up your website, don’t worry about setting up all of your products now.
- Instead, choose a few to get started so you can learn the process and set up your shop.
Types of Products:
Simple Product: This is a product that only has one possible variant. An example of this is a coffee mug. There are no sizing or design options.
Group Product: A bundle of goods is a collection of related items that may be purchased individually and only includes simple things. A collection of six dinner plates, for example.
Virtual Product: This product is most often service-related. It’s not shipped, nor is it downloaded.
Downloaded Product: A digital download such as an ebook, a course, or a checklist. It’s not shipped, and the customer has instant access.
External or Affiliate: My personal favorite is a product that you don’t carry or ship, such as an affiliate product.
Variable Product: A variation of a product is a variant, and each may have its own SKU, price, stock option, and so on. A t-shirt with various colors and sizes is an example of a variant.
Adding a Simple Product with WooCommerce:
1. Click ‘Add Product.’
2. Enter your product title, price, and description.
Now that you have added the product information, there are two options for adding images.
1. Go to Media -> Add New
2. Upload your images and click ‘Insert into post.’
3. You can also add a gallery if you have a lot of images.
Adding A Variable Product with WooCommerce:
- Click ‘Add Product.’
- Enter your product title, price, and description.
- Scroll down to the Variations section on the right side of this page.
- Choose an image for your default variation, and enter its information under the name, price, etc. To add more photos, copy and paste the SKU into the ‘Other Product Options’ section.
Adding a Downloadable Product with WooCommerce:
- Click ‘Add Product.’
- Enter your product title, price, and description, etc.
- Scroll down to the Product Data section and tap ‘Link to File/External Checkout.’
- Choose your downloadable file from your computer, and add its information below it.
- If you want to add multiple files (pdfs, ebooks, courses), click ‘add file’ at the bottom of this box and repeat step 4.
- Make sure to publish your product for it to register as downloadable.
Adding an External Product with WooCommerce:
Like a downloadable product, you can link directly from the customer’s checkout screen on another site. An affiliate link is an excellent example of this.
Provided you have established an affiliate relationship; you will receive a commission on the sale once the customer pays for their purchase.
- Click ‘Add Product.’
- Enter your product title, price, and description, etc.
- Scroll down to the Product Data section and click External/Affiliate Link
- Paste in your affiliate link (or any other link you’re trying to sell)
Adding a Group Product with WooCommerce:
- Click ‘Add Product.’
- Enter your product title, price, and description, etc.
- Scroll down on the left side of this page until you reach the Shipping section.
- Copy and paste the names of these products into the Grouped product box.
- Click ‘Add to cart and repeat these steps for each variant you want to sell as a group.
Now that this is done, it’s time to add the additional links that will connect your customer directly from your product page to whichever variant they’re trying to buy (e.g., the red shirt).
- Underneath your ‘Add to cart button, you’ll see a box with the product’s unique SKU and its name.
- Copy and paste this code into the HTML/text view of your single product page (you can find it by clicking ‘Text’ in the visual editor)
- Replace the SKU with a variant’s unique SKU for your chosen product.
- Repeat this process to add additional links to other variants on your product page, and you’re all set!
Adding Upsells and Cross-sells
Woocommerce offers the popular features of Upsells and Downsells. The purpose of an upsell is to provide an incentive to sell more than one product simultaneously or a better, more expensive version of the product.
The purpose of a cross-sell, however, is to offer related products to increase the total purchase.
For example,
Upsell: You could sell a t-shirt and offer an edition/upgrade variant for +$20. This way, customers can choose between the primary and upgraded version of your product.
If you are selling a laptop, cross-selling might be a computer backpack, keyboard, or a special adapter.
The images are displayed on the cart page below the cart products table with a thumbnail image, depending on your theme template.
Adding an Upsell
- Click ‘Add Product’
- Enter your product title, price, and description, etc.
- Scroll down on the left side of this page until you reach the Upsells section under Product Data.
- Click add upsell to add a new one or click ‘Up-sells,’ adding all of your upsells to the product at once.
- When you’re finished adding upsells, click ‘Add to Cart.’
Adding a Cross-sell
- Click ‘Add Product’
- Enter your product title, price, and description, etc.
- Scroll down on the left side of the page until you reach the Cross-sells section under Product Data.
Ratings and Reviews
The goal of reviews is to help you improve your eCommerce site by obtaining consumer comments. You may ask for general comments or limit them to only positive, negative, or mixed evaluations.
You can accept or deny a review left on your website.
Tracking Products
Check out your product page to make sure your variant links are working correctly.
You can also use the enhanced eCommerce features within WordPress to track how many times a particular link was clicked, which will help you see which variants are the most popular, thus making your inventory management more effortless.
Go to WooCommerce → Settings → Products → eCommerce Tracking Product data to see all the enhanced analytics you can track with this plugin.
Now that you have added products, we can begin to customize your website.
Editing the Sidebar
The sidebar is made up of widgets. You can drag and drop the widgets where you want them on your sidebar.
- Add a new widget by clicking ‘Add Widget.’
- Choose the one you would like to use (e.g., Categories or Recent Reviews).
- You can then set specific options for that widget (e.g., ‘Categories’ displays the number of categories you want to show in the sidebar).
- Click ‘Save’ when you’re all finished.
Your template came with a sidebar. While this sidebar is completely customizable, you’ll want to edit the default widgets.
From the WordPress dashboard, Go to appearance -> Customize ->
From the sidebar tab, choose WooCommerce and choose the left or right-hand column for your sidebar. The right sidebar is more common today.
Next, go to the widgets -> WooCommerce sidebar.
The widgets are drag and drop style.
If you want your pricing widget to be at the top, you can click it and drag it to the top. Then drop it in place.
Creating your Header Menu
In WordPress, a header menu allows the customer to find what they need on your website. While you won’t have every page, product, or category in your menu, you’ll want to include some key starting points.
Here’s how:
The first step is to remove any menu items imported from your template that you don’t need.
1. From the WordPress dashboard, go to appearance -> Menus.
2. In this box, you will see your current menu items. Hover over a menu item you would like to edit and click ‘Remove.’
3. When you’re finished removing the items that aren’t needed, click ‘Save Menu’ at the bottom of the Menus screen.
4. You now have a blank menu where you can begin adding new links to your site. To add a new item, click ‘Add item’ and enter an item title and URL (e.g., ‘Home,’ which would take the customer to your home page). Click Save when you’re finished adding menu items.
5. To rearrange your menu items, hover over the Title of the item you would like to move and click ‘up’ or ‘down.’
6. To change the order of how your menu appears, go to Appearance -> Menus again, but this time click Screen Options at the top-right of your screen. Check the ‘Cascade’ option where you can choose how your menu appears on different screen sizes (e.g., to put it in a dropdown on mobile).
For an e-commerce site, it’s worth adding the product categories under the STORE menu item.
You’ll also want to keep your HOME page, About Page, and Contact page menu items in the menu. Make sure they are linking to the proper pages on your website by checking the “Open link in a new tab” box.
You can also add your social media links to the menu (e.g., Facebook, Twitter, Pinterest).
Click ‘Save Menu’ at the bottom when you’re finished.
Creating Your Logo and Favicon
Using Canva, you can easily create a logo and favicon for your website. A logo is the biggest brand representation of your business.
Adding a Logo
To create a logo in Canva, type the logo in the search bar. You’ll see a large selection of premade logos. You can choose a logo based on color or set up specific dimensions, etc. When you’ve chosen your design, click ‘Use this template at the bottom of the screen.
You’ll see blank boxes with different shapes and colors. You can drag and drop items into these boxes to create your own unique look for your logo.
To add text to your logo, click on the word ‘Text’ at the top of the screen. You can change what font and style (underline, italicize, etc.) you want for each element of your logo.
To add images or photos to your logo, click ‘Upload an Image’ under ‘Image.’ Select a photo or image from your computer and drag it into the logo design.
To add shapes to your logo, click ‘Shapes’ at the top of the screen. From here, you can select a rectangle or square and change the size and opacity (or fill). You can also choose a different color for each shape.
When you’ve finished designing your logo, click ‘Download.’ You’ll be prompted to download your logo in PNG or JPG format.
To make the logo appear on the browser as it does on Canva, you need to save it as a . PNG file (if you choose JPEG, it will look blurry). Once saved as a . PNG file, you can upload the image file to WordPress using the ‘Add Media’ button in your post editor.
After uploading your logo, make sure to change the settings under ‘Display Settings’ so it’s not pixelated when people view it on different screen sizes. Under ‘Crop Image,’ select ‘No Crop.’
In the customizer, choose the header. Next, under the upload image section, click ‘Browse’ and find your logo file on your computer.
When you’re finished, click ‘Save Changes.’ Your logo will now be visible at the top left of your site on all pages.
Adding a Favicon
A Favicon or site icon is a small logo that appears in the browser tab. These are simpler versions of your logo, or something related, and do not have text. You can find great favicons to use online, or you can create your own.
To add a favicon in Canva, head to the Favicons section located under ‘Images.’ You’ll see different sizes for different browsers. Upload your logo and drag it into the browser tab spot. When you’ve finished, click ‘Download.’
To make a favicon in Canva from scratch, create a new canvas, and play with the various graphics such as a star, rainbow, set of circles, etc.
Take a look at the favicon for Facebook. It’s the simple f from the Facebook logo. Canva’s favicon is the letter C in a blue circle.
You can also add a favicon to your website by clicking ‘Add Favicon’ under appearance -> Install Plugins. Upload your favicon as a . PNG file and click ‘Save.’
Now, when you go to a website, check out the different logos or buttons at the top that represent that brand. Your logo should be included in this lineup!
Customizing Elementor
Elementor is a page builder made up of free and premium widgets. It’s a great tool because you can see your changes live while editing, which speeds up the process of creating a website design. You can also add different elements to your website such as sliders, header options, contact forms, etc.
This process is very simple and intuitive, but I’ll walk you through it!
The live drag and drop editor allows you to customize your website to look exactly how you want it! The left column is your widget panel.
Elementor widgets are used for different elements of your website, such as headers, sections, sidebars, and contact forms.
The primary building components are Sections, which represent a collection of Columns. The widgets are placed inside the columns.
Each widget has custom controls referred to as handles. When you click on a handle, you can drag it to change the element’s position.
Right-click their handle to modify the Section, Column, or Widget.
To add a section, click the plus sign icon: To use a pre-designed Page or Block, click the folder icon.
Changing Your Header
In this template, the header includes a call to action. Using the layout option, you can change the height and width of the heading. You may want to edit this to be a full-screen CTA. You can also change the size of the columns by clicking on a column border and dragging it in or out.
To edit any of the widgets in the heading, click on the pencil icon in the upper right-hand corner.
Edit the widget that contains your Title, now to match your offer.
To save your work as you go, use the UPDATE button at the bottom of the page.
After you have changed your title and subtitle, it’s time to edit the buttons.
Changing the Buttons
Again, use the pencil to edit the button.
In the text field, change the text to match your offer.
In the link field, delete the hashtag and enter the link to the page you want to send them to.
This could be another page on your website, an external landing page you created, an affiliate offer, a subscriber form, etc.
In this case, you’ll want to link to your SHOP page for the first button. The About page may be appropriate for the second button.
Changing the Background Image
Click on the 6 dots at the top in the center to edit the background. Click on the Style tab to see the picture that is currently loaded. You can now change that picture to a picture on your computer.
The background overlay tab will allow you to overlay color to filter your image and change the opacity.
You’ll want to edit each section of the home page to match the content that you desire. Do the same with your about page, and contact page.
Adding Featured Products
Exiting the elementor editor (after updating to save), go back to your WordPress dashboard.
Next, click on Products (All Products).
To feature any product on your home page, click the STAR ⭐️ next to the item in the list.
Now, you can go back to your home page, and see your selections under the Featured Product sections.
Setting Up The Payment Methods
WooCommerce offers extensions to add functionality to the plugin. This is similar to plugins adding functionality to WordPress.
To add payment extensions to Woocommerce, go to Extensions (Plugins) and search for Payment Gateways.
Install and activate the extensions for the payment gateway you want to use to accept payments.
Stripe is a popular payment gateway.
The WooCommerce Stripe plugin allows you to accept credit card payments, but you will need to set up your merchant account with Stripe. It’s a simple walk-through that includes your business information and banking info for deposits.
Stripe will charge a transaction fee which you can learn more about when you sign up.
Setting Up Coupon Codes
With Woocommerce, you can set up coupon codes to use throughout your website.
First, you must create the coupon codes themselves. Go to Products (All Products).
Next, click on Add New under Product Data.
Enter in your product description, price, etc. Like all of Woocommerce’s products, you can change this information whenever necessary.
Before you save the product, scroll down to Product Data
Click on Coupon Codes.
Fill out the general information for your coupon, including the expiration date, if necessary.
Once you have saved the coupon code details, move down to WooCommerce-generated link(s). Here is where you’ll be able to generate any number of coupon codes with unique links.
Repeat the process to create as many codes as you like.
Now, you can move on to creating coupon links throughout your shop.
Go to Woocommerce (Settings). Next, go to Product Links under General Settings. Now, click on Product Categories (tab at top of page) and choose all categories that you want to add to the coupon code. Any time a customer uses one of your coupon codes, it will automatically apply to items in these categories when you enter the code at checkout.
Now, when somebody clicks on a product from your site and enters in your coupon code, they’ll receive money off their purchase!
Setting Up Shipping Charges
You can set up shipping charges with Woocommerce.
Go to Products (All Products).
Next, click on Add New under Product Data.
Under Shipping, choose a product from the drop-down menu for each of your countries/regions.
You will need to add a price for each of these products.
Under Shipping, click on Show Advanced Options
Here you can set up the shipping classes that determine the price of your shipping. For example, if you want to charge more for heavy items, you would create a new shipping class and change the weight limit at the top.
Now that you’ve added weight and dimensions for each variation you have set up, go back to your products and assign these variations their appropriate shipping class.
If you want to charge multiple rates for shipping, you can create a flat rate by adding weight limits at the top of the Shipping section under General Product Data.
Now that you have set up shipping charges, go to Woocommerce (settings). Under Check out, go to Shipping Methods. Here you can choose between flat rate and weight-based shipping methods.
You can also set up free shipping thresholds here.
If customers reach your free shipping threshold by buying more than one item, they will receive a discount code for their second purchase!
Creating Tax Rules
- Go to Products (All Products).
- Next, click on Add New under Product Data.
- Scroll down to Tax Classes. Here you can add tax classes for your products by clicking on the + symbol under Manage.
- If you want to charge a flat rate for all of your products, simply leave the tax class at No Tax.
- For location-specific tax classes, select the correct product from the drop-down menu under Taxable.
- Next, choose the appropriate country/region from the drop-down menu under Country/Region. This will change the tax rate on your product.
- If you want to charge different rates for different products, first choose the correct product using the drop-down menu under Taxable. Next, scroll down and click on Include in cart. This will create a new field where you can select one or more additional products that will be taxed at this rate.
- The last thing to do with taxes is choosing a tax class at checkout. Go to Checkout under Settings, and scroll down to Tax Classes. Here you can select the correct tax class for your customers. If a customer doesn’t fall into one of these categories, they will automatically be charged the No Tax rate that you set up above.
Congratulations! You now have a fully functioning store, and are ready to launch!
