Weebly teaching: free website and online store building

According to statistics, there are currently more than 40 million websites/online stores built using Weebly. Weebly is not only powerful, but also its unique "what you see is what you get" function is simple and easy to use, especially in North America extremely popular with users.

Through the following Weebly function introduction and demonstration, to understand why Weebly is one of the most convenient tools and platforms to create a website, and how to edit templates, choose domain names, integrate various apps, and how to set up an online store.

1. Free registration

First enterWeebly Home, The language interface entered in different countries and regions may be different. For the convenience of demonstration, the Chinese interface is selected for the first few.

After entering the homepage, click on the upper right corner of the Chinese page"register"or"let's start"; Then click on the English page in the corresponding position"Sign up"or"get started"It's all the same (as shown in the picture above), after clicking it, you will be taken to the next page, as shown in the picture below:

weebly registration page
weebly registration page

This page is very simple, enter your name, email, password, select a country, and then clicksign up for free, Will enter the next page.

On this page Weebly will ask you:What kind of website would you like to create?(What kind of website do you want to create?).

According to your needs, chooseI just need a website(I only need a website), orI need a website with an online store(I need a website with an online store). It’s okay, this is not the final decision, because you can alwaysAdd a store on the Weebly website.

How to set up shiyongweebly
Weebly can set the type of website and online store at any time, very flexible

Weebly has a variety of plans, among which the free plan is permanent, that is, you can create, publish and edit websites and stores without paying any fees.

Or in the future, according to your actual needsUpgrade to a paid plan at any time.


  • Sign up for a Weebly account for free
  • Choose the type of website you want to create

2. Choose a theme

Weebly has about 50 themes, Are completely free, there are many categories to choose from: Business, Portfolio, Personal, Blog, etc. Based on the selection, Weebly will then give some more specific topics.

How to choose a weebly theme
Weebly has a wide selection of mobile responsive themes for almost all industries

Weebly themeIt has a sense of modernity, fashion and all mobile responsiveness. This means that the effect is excellent on any size screen; moreover, the template can be changed at any time, so it is not limited by choice.

If there is a choice barrier (like my old bean), click on the thumbnail preview, and then view the appearance on the full screen. If necessary, click on theStart Editing.

Weebly also offers industry-specific options. For example, delicious restaurant templates, fresh cleaning service designs, and beautiful personal training themes, you can think of, there are corresponding themes, these options can save design time, only need to edit text boxes and images.

The theme template is the first thing a website visitor sees, that is, the first impression of the website, so the theme template must reflect the content of the website. Regardless of the clear CTA (call to action) button, for exampleBook Now, Or a series of image effects, all have appropriate Weebly themes.

weebly tour theme preview
weebly tour theme preview


  • Learn about all Weebly topics
  • Find out if you have your favorite design
  • Choose theme

3. Choose a domain name

Before creating a website/shop, you need to select a domain name. For example, the domain name of this blog is: minghao88.com (the domain name is like this)

At this step, Weebly will automatically prompt you to enter the domain name.

When building a website for the first time, first register a weebly subdomain to get a free domain name, that is to say, your website suffix is in this form: ***.weebly.com. Although subdomains seem to be unprofessional and unattractive, it does not cost a penny to register top-level domains in the future.

Choose and register a domain name in weebly
How to choose and register a domain name on weebly

The advantage of using top-level domains is that the website looks more professional, easier to remember and more attractive.

The price of a domain name varies, but it is usually between $ 14 and $ 20 per year. Weebly's domain name prices are divided into three options:

  • 1 Year ($19.95)
  • 2 Years ($16.95/yr)
  • 5 Years ($14.96/yr)
If you think the price is high, you cannamecheapRegister a domain name, thenLink to your weely account

If you are a novice who doesn’t know anything, don’t want to bother, don’t want to study, thenRegister a domain name with WeeblyIt is the easiest and fastest option.

After solving the domain name problem, next, click at the bottom of the pop-up windowconnect or transfer nowTo connect-just enter the domain name and pressSearchThat's it.


  • Registered a free or top-level domain
  • Click onDoneComplete domain name registration
Reference article: Principles of Domain Name Selection

4. Weebly website design

After the domain name registration is completed, enter the Weebly website editing page. The picture below is the backend of the Weebly website. Here you can learn about the function of the Weebly menu step by step:

weebly edit homepage
Weebly editor homepage is easy to browse and use

Edit text

Weebly is a "what you see is what you get" website generator. It means that it is produced by clicking and dragging and dropping the media without any knowledge of code. Updating the content is very simple, as long as you enter the text in the logo box.

This is a great highlight of Weebly. This "what you see is what you get" function greatly enhances the fun of website creation and simplifies the difficulty of creation, which is rare for novices, and it is also one of the important differences from other website tools.

In this regard, althoughWordPress as the platform tool with the largest number of sites, But if you want to achieve this function, you have to useelementorFor this plugin.

weebly text content editor
Use Weebly to edit text content in just a few clicks

Edit background

Customize the theme further by changing the background. Just click on the background image and selectEdit BackgroundThat's it. Here, you can change the image, scrolling effect, and page alignment.

Add element

Some interesting things can be added here. Use the leftElement Menu, Just drag and drop the selected media icon to any position on the page, and you can also delete text, video, buttons, etc. at any position, as shown in the following figure:

Weebly Elements Bar
How to use Weebly Elements Bar to drag and drop content text to the corresponding position

Weebly free plan can not use any element with lightning symbol, all other elements can be used.

If you want to add a picture, you can drag the icon to the desired position, and then clickUpload Image. Then a pop-up window appears, offering related options: upload from computer, or pressSearchFind free Weebly pictures.

weebly image search menu
Weebly provides a variety of free images to choose from to reduce design costs

To edit other pages on the Weebly website, just click on the top navigation menuPages, And then select the page. The process of adding each page is the same-just drag and drop, click.

weebly navigation menu
Use Weebly navigation menu to easily switch pages

In the navigation menu, you can take full advantage of Weebly's flexibility. Change themes, edit site settings, move pages, everything is here.

Add new page

Adding new pages is easy. Click in the menuPagesTab, and then click the plus icon on the left, a drop-down menu appears, containing different types of pages.

How to add a weebly page
Weebly can create multiple types of pages

Choose the type of page you want to create (for example, a blog page), and then name it. In this step, Weebly will automatically load the page, which contains pre-filled images and content for production.

After that, clickDoneSave the page settings. When finished, returnBuildMenu tab to edit the page.

Change the color scheme

Change the color theme of the page in the theme of the dashboard. For some themes, you can only choose light or dark, and some themes can switch between actual colors.

Because this is a basic operation, you will not see major changes in the theme, but you can add custom colors within the selection range as needed.

How to use weebly to change the color scheme
Although it is not an advanced feature, it is very easy to change the color scheme

Add new layouts (Layouts)

To truly personalize the website, you need to add a new section on the edit page. In addition to adding new elements, you can also choose to add new sections.

This element is located at the top of the left sidebar above all other elements, just drag it to the desired position on the page and let go.

How to use weebly's new section layout
The ections element is above all other elements in the left sidebar

There are a few options list to choose from here:Gallery,Contact, Menu, Featured,as well asTeam.

How to choose weebly's new layout
Select the type of section to be added to the page

Then, Weebly provides a series of different layouts to choose from, where you can choose your favorite layout. Click onlayout(Layout), then displayed on the page. Click in the pop-up boxsave(Save) before editing.

Select the layout of the section to be added

Delete Sections

Generally, errors may occur during the editing process, so it is necessary to understand how to delete and add various elements on the website.

If you add a gallery on the homepage but want to delete it later, find the blue cross in the upper right corner of the edit box first.

Click on the cross, the box will turn red, and then you can delete the element, as shown in the figure below:

Deleting elements in weebly is easy to use-just click on the cross

This is the way to delete small elements, such as galleries, text boxes, images, buttons, etc.

If you want to delete a larger part (such as the background), click the area you want to delete. You will see several options:Edit, Move, withDelete. Click onDeleteButton, a pop-up window appears, asking if you are sure you want to delete it. At this point, you can cancel or confirm-if you clickDelete, The section and all contents in it will be deleted.

How to delete weebly section
If necessary, you can delete the entire section of the entire page-clickDeleteAnd then confirm


  • Edit text
  • Edit background
  • Add new element
  • New page
  • Experiment with color schemes
  • Add new layout
  • Remove unnecessary elements
  • Customize the Weebly website!

5. Add App

Click on the navigation bar and thereAppsEnterWeebly App Center. No matter what niche market your website is in, Weebly has corresponding apps to improve website performance and expand related functions. It is recommended to add some popular apps, such asSite Booster(Website promotion).

You can also create your own independent affiliate program on the website/store to let others (that is, those affiliates) join yoursaffiliate programTo promote the product to you, and you only pay the relevant commission after they have successfully promoted the sales. It can be said that there is no profit, thisReferrals plugin, This function is played.

Weebly App Center
Weebly has more than 300 App applications, used to improve the function and appearance of the website

Weebly has more than 300 apps, more than 50 are free, and Weebly is always adding new apps.

How to search for what you need in so many apps? Very simple, you can search by Popular, Highest Rated, New, and Free, and you can categorize them on the left.

weebly app application search bar
Can search for specific Weebly app

In addition, you can find out by checking the user level on each thumbnail. If you are a professional, you can also design an app and upload it to weebly.

To install the app, click the desired app, then find the Add button, a pop-up box appears-agree to the terms, and then clickConnectTo install.

How to install the weebly app
Install the app on Weebly-just clickConnect, Weebly will do the rest

After the app is installed, it is taken back to the background of the website, and the app is displayed under the Installed Apps section at the bottom of the left sidebar.

Weebly app installed
After the weebly app is installed, it will be displayed here

After the App is installed, it can be dragged onto the page just like placing other elements.


  • Browse App Center
  • Install the required App
  • Add the app to the website

6. Add Store

Go back to step 1, choose to set up an online store here. Now close the editor, go to the account dashboard, open the menu in the upper left corner, and clickStore,​Enter the store settings page.

How to install store in weebly
This is the Weebly dashboard/backend, and also the page to add a store to your website.

Another way to add a store is: in the editor, selectProductselement. If you do not have a store yet, Weebly will direct you to the store settings page.

If you don’t want to set up a store, you can skip this step.

weebly online store setting page
A simple operation button can clearly explain the setup process of the weebly online store

From here, you can seeCreate an online storeAll the steps required, including everything from adding a product to setting up taxes. Each function can be integrated with just a few clicks, just use the operation buttons on the right.

The following options are to set up an online store in a natural order:

  1. Add store information
  2. Add product
  3. Accept payment
  4. Set up shipping
  5. Set up taxes
  6. Post and start accepting orders

Some features need to be upgraded toprofessional plan, You can use advanced tools, such as shipping calculator, sending abandoned cart emails, and advanced analysis.

As shown in the figure below, the sales function corresponding to each Weebly plan...

Free planPersonal planProfessional planPerformance plan
shopping cart✔️✔️✔️✔️
Item badge✔️✔️✔️✔️
Project options✔️✔️✔️✔️
Fast store✔️✔️✔️✔️
Inventory management✔️✔️✔️✔️
In-store pickup✔️✔️✔️✔️
Automatic tax calculator✔️✔️✔️✔️
Square gift card✔️✔️✔️✔️
Transport calculator✔️✔️
Shipping label✔️
Shipping discount✔️
Abandoned shopping cart mail✔️
Product Reviews✔️
Receive payment via PayPal✔️
In-depth ecommerce insights ✔️

Weebly's paid plan has many features such as exemption of advertisements, free domain names, unlimited storage space, and page password protection. And here, the most cost-effective is the Performance plan.

weely plan upgrade button
Use the "upgrade" prompt to change the Weebly price plan


  • Add store
  • Follow Weebly's steps to open a store
  • New product
  • Upgrade plan when necessary/needed

Learn about Weebly e-commerce tools

7. Weebly Fees/Price Plans

There is no time limit for the Weebly free plan, and it does not cost 1 cent to use weebly to create and publish websites and stores. In some cases, the website or store may need to be upgraded to unlock advanced features.

Let's take a brief lookWeebly price, And how to upgrade.

weebly price
Weebly's detailed pricing plan

However, free ones always have some disadvantages:

The website/shop cannot use its own top-level domain name, has limited functions, and the website/shop will display advertisements, which will look very unprofessional.

Note: This kind of advertisement is notAffiliate marketingThe advertisements in making money talked about in the article were added by myself. And this ad is not, it's Weebly. For example, you wear a new dress to go out, but forgot to tear up the tag, which makes the website look a little amateur.

The free plan is perfect for cost-conscious website creators, but the paid plan is also very affordable! HaveThree price plansAvailable:

  • Personal: $6/month
  • Professional plan: $12/month
  • Performance: $26/month

Weebly price plan:

  • Personal: Suitable for hobby websites and personal blogs. The only difference between this plan and the free plan is that you can connect a custom domain name, but there are still advertisements on the website. This plan is not suitable for building professional websites.
  • Professional: Suitable for corporate websites, professional portfolios or any websites that are taken seriously. The plan has no ads, free top-level domains, unlimited storage space, password protection and shipping calculators, etc. This is the most common plan used by weebly users.
  • Performance: Suitable for online stores and large enterprises. This plan unlocks advanced sales features, such as abandoned shopping cart emails and shipping discounts, and advanced e-commerce analysis.

$12 per month professional plan, Provides higher cost performance and features than the Personal plan. This is the cheapest plan to create a truly professional website.


  • Explore and compare various Weebly prices
  • Decide if you want to upgrade
  • Choose a price plan

8. Website/Online Store Release

At this point, if you are satisfied with the website built according to the above steps, you can now publish it. After the release, it is found that there is a problem with the website, it does not matter, you can modify it in the background of the weebly website.

Click the blue in the upper right cornerPublishButton to publish the website.

After clicking Publish, weebly will pop up a window to tell you that the website has been published and "professional tips".

Weely website publish pop-up window
After the website is released, Weebly will provide relevant professional tips

After the Weebly website is released, it can also be updated and edited at any time. You can also upgrade the plan as needed.

After publishing the website, you can also cancel the publishing status of the website: scroll down to the bottom in Settings and click the option to cancel the publishing of the website. It is very simple.


  • How to publish a website

9. Website growth and expansion

After the website is put into use, it will be adjusted and modified regularly to keep the website fresh and relevant.

Edit content

Edit content-update old information, write new articles, and add other sections to old pages. Innovative content will not only satisfy visitors, but will also show Google that your site is relevant and active-that is, there must be a certain frequency of updates.

Optimize for Google

Master SEO (Search Engine Optimization) to make your website rank in Google's search results. This is the best way to get a large amount of accurate traffic and improve your website's image. .

SEO is an opportunity process to improve the ranking of a website in search results, which involves many factors. Some methods are simple, such as using headings to organize content, while others are more complicated.

Weebly providedA series of SEO tools toHelp rank the website, and the relevant introductory guide, guide step by step through each step, through the learning of these weebly SEO professional pages, novices will also become Google optimization experts.

Promote via social media

Choose a few social channels that suit your website: For example, Instagram is suitable for photographers, while Pinterest is suitable for selling handmade products, etc. Then share content, blog posts, images, etc. to attract visitors and gain followers.


Email marketing can be your best friend. This is a great way to publish new product information to keep visitors informed about news and events or to attract them through sales and discounts.

Weebly has its own email marketing system calledWeebly Promote, Build mailing lists based on this, create custom e-mails and track the performance of e-mails.

Weebly also has a variety of excellent blogging tools that can combine articles with email campaigns and newsletters to effectively attract website visitors and convert them into customers.


  • Update website
  • Familiar with SEO
  • Share the website on social media
  • Set up blog and email activities

Summary: How to use Weebly

Following the above steps, the Weebly website and online store have been built. Here is a brief summary:

How to make a Weebly website and online store

  1. Register and create for free
  2. Choose theme
  3. Choose a domain name
  4. Use Elements Bar to build a Weebly website
  5. Add apps to enhance the website
  6. Add online store
  7. Choose a price plan
  8. Publishing website/online store
  9. Website/online businessStore growth and expansion

From registration to publishing, these are just a few simple steps to create a Weebly website.

If novices are not confident, look at what ordinary people use Weebly to createVarious website/store types.

Overall, as a reliable website/shop building tool, Weebly provides everything needed to build a stylish and professional website without the need for professional skills.

Use Weebly to create an ordinary free website for free, and then use itAdvanced planCreate more advanced and personalized professional websites and online stores.

Leave a Comment

error: Content is protected !!