1-888-959-PAPA [7272]
24/7/365
Top
HostPapa Blog / Web Design & Development  / Design Your Online Boutique with 2-FREE WordPress Themes (Tutorial)
shopping-cart-combined-with-mouse-design
13 Nov

Design Your Online Boutique with 2-FREE WordPress Themes (Tutorial)
Share

(Last Updated On: November 13, 2020)

The online retail landscape is both very promising and very competitive. So, for your brand to stand out, it needs to offer a distinctive, memorable, and dynamic customer experience.

Especially if you’ve been operating a brick and mortar store for years, the prospect of going digital can seem overwhelming. But when you take a realistic look at it, you’ll find that every potential roadblock can be overcome with the right tools and practices.

In our Ultimate Guide to Online Boutiques, we introduced you to the preliminaries of how to open your digital store. In this post, we’ll take a look at how to set up a beautiful online boutique with free WordPress themes.

Read: Our Ultimate Guide to Online Boutiques

How to Open an Online Boutique

When planning to open an online boutique, research your options, and understand the project’s priorities. For instance, you’ll need your website to run on modern and scalable technology. Your site should also be affordable; it should have a clear ROI. Opening an online store will also require that you rethink your relationship with your customers. For instance, a Salesforce report noted that 74% of users are willing to switch brands if they find the purchasing process too complicated. A smooth purchasing process is essential.

When setting up your website, make sure you:

  • have a clean, easy-to-navigate interface;
  • provide simple instructions in every step of the purchasing process;
  • offer several payment methods that make for an agile purchasing process;
  • make relevant information easily available to the customer.

There are also some aspects of providing a great customer experience that the customer won’t have such a direct experience with, but that will make a big difference. For example, you need to go out of your way to guarantee that your website is secure. You can’t overlook your need for an up-to-date SSL certificate. Your website will probably include dozens of high-quality product pictures. Therefore, you’ll need a CDN to deliver this content in a fast and efficient way.

This post will focus on WordPress as a free and technically accessible tool to build quality online stores.

Why WordPress?

Almost 40% of the Internet runs on WordPress. The main reason why WordPress is so popular is that it’s a very good platform. And one of the many reasons why it’s a good platform is that it’s very popular.

WordPress is a versatile Content Management System with a very intuitive user interface. This interface makes it easy for non-developers to build functional websites. Throughout the years, WordPress’s popularity has caused thousands of developers around the world to create themes and plugins for the platform. Some of them are free, some are premium.

On the other hand, WordPress, its themes, and its plugins are open-source software. So they’re constantly revised, updated, and extended by thousands of people around the world. Thousands of people who also integrate support forums, write tutorials and create documentation.

WordPress.com sites are more limited and expensive than their alternative, self-hosted WordPress websites. What we usually refer to as self-hosted WordPress is an installation of the WordPress software on an independent server. If you want to create this sort of website, your first step should be signing up for a WordPress hosting provider.

But Isn’t WordPress Blogging Software?

While WordPress was initially meant as blogging software, you can extend its functionality through plugins. This may lead you to assume that running an online store on WordPress feels somehow forced or is inconvenient.

17.9% of WordPress websites use WooCommerce, the plugin that turns WordPress into an online store. Chances are you’ve already bought from an online store that runs on WordPress.

In fact, every aspect of what makes a good online store can be easily solved through WordPress themes and plugins. For starters, you’ll turn your WordPress blog into an online store through WooCommerce. Then, you could use a theme to design a clean, easy-to-navigate interface. WooCommerce makes it easier for you to offer simple instructions in every step of the purchasing process, allowing you to add product descriptions, as well as for instructions for every step of the purchase process, payment method, and shipping method.

But, how are you going to offer several payment and shipping methods? There are numberless plugins that integrate with popular payment platforms, allowing you to pick the payment gateways that best fit your customers. From Stripe or Paypal to Mercado Pago, if we’re selling to Latin America.

How to Start Your Own Online Boutique with WordPress

You can install WooCommerce by going to Plugins > Add New, and then using the search bar. The first result should be WooCommerce. Click on Install Now to install. Once the plugin has been installed, the aforementioned button will have been replaced by the Activate button. Click on it to activate.

Like most plugins, WooCommerce is easy to set up. But since it’s your entire shop in a single plugin, it can be a little hard to navigate at first. If you need extra help with WooCommerce, don’t hesitate to check out this guide.

Choosing the Right Theme

If you’re not a web designer, you may be inclined to pick a WordPress theme inspired by nothing else than its visuals. The theme that best resembles what your final design should look like is your best choice. Right?

Well, consider that WordPress themes aren’t just visual designs. They’re made of code. And the quality of that code will determine your website’s performance as much as its design possibilities. Let’s make a quick recap of how to pick the best WordPress theme for your website.

There are some basic considerations you should always have, regardless of our website’s topic or purpose. For instance, your WordPress theme should be lightweight, GDPR-compliant, and Gutenberg-compatible. It should be updated often, and have an active support forum. In this case, since your website will become an online store thanks to WooCommerce (WC for short), you should make sure that our theme is WC-compatible.

There are numberless Premium and free WordPress themes you can choose from. To show WordPress’s versatility and possibilities, we’ll use the free versions of two themes: Sydney and GeneratePress. We’ll try Sydney to create Wearial, a clothing store for young women. We’ll use GeneratePress to make Jewelley, a jewelry store.

How to Install a WordPress Theme

Appearance > Themes. In this section, you should press the button Add New. This will take you to a selection of themes from the WordPress directory. Both GeneratePress and Sydney are available on the WordPress directory, so you’ll find them using your search bar. Of course, you don’t have to download both of these themes. Pick the one you like the most, and download that one alone. If neither of our picks convinces you, don’t hesitate to make your own research.

Install the theme by clicking its Install button. Once you’ve finished installing a theme, you’ll find that the Install button has been replaced with the Activate button. Click it to activate the theme.

wordpress-tutorial-online-boutique
wordpress-tutorial-boutique-2

Customizing Your WordPress Theme

If you want to customize your WordPress theme, you’ll need to visit the Appearance > Customize tab. This will lead you to a screen on which you’ll see your website as it currently looks, and a sidebar full of options. These options will depend on your theme. While some give more room for customization, some don’t.

For instance, this is the customizer for GeneratePress:

wordpress-tutorial-boutique-3

And this is the customizer for Sydney:

wordpress-tutorial-boutique-4

Both Sydney and GeneratePress have a premium version. If you buy the premium version, you’ll get many more customization features. But, when you’re dealing with the free version of these themes, you’ll have to settle for these options.

Using the customizer is easy. You just access different tabs on the customizer’s sidebar and modify different aspects of your website. Once you’re done, you can press Activate and Publish for your website to go live.

wordpress-tutorial-boutique-5
wordpress-tutorial-6

Through Sydney’s customizer, you can change several aspects of how your website looks. For instance, in this example, we modified its color palette, font combination, and menu.

A Side Note on Menus

While your colors and fonts have to be edited through your customizer, your menu is a whole different story. If you need to edit or replace your menu, you can do it comfortably on the Appearance > Menus section of your dashboard.  There, you can manage your menus, their elements, and their location within your design.

Consider that our example designs are conditioned by the fact that we’re just using three sample product categories: Tops, outerwear, and bottoms. If you’ll be running a store with lots of products in very different categories, you’ll want a theme that comes with an overlay menu out of the box.

An overlay menu is hidden and only appears when the user clicks on the menu toggle. By hiding your menu, you can provide all the options you need without overcrowding your layout.

Page Builders

We can expect all free themes to be relatively limited, especially if you won’t be editing their code. But some themes are more limited than others. While page builders can make a difference in any project, they’re a lifesaver when it comes to dealing with limited themes. Page builders are plugins that allow you to create design elements and pages by dragging and dropping their components. 

WordPress’s new editor, Gutenberg aims to replace page builders, by offering several design elements and patterns that you can include in your pages and posts with no hassle. You just have to click the Plus button on your editor. But still, page builders are interesting tools that deserve your attention.

For instance, this is what we could create for Jewelley with our free version of GeneratePress:

wordpress-tutorial-boutique-7

We can take it to the next level by installing Elementor, a page builder. Let’s take a closer look.

Elementor can be found in the plugins directory, just like WooCommerce.

wordpress-tutorial-boutique-8

After you’ve installed and activated it, you’ll find two new tabs on your dashboard: Elementor and Templates. To start working on your website, you’ll want to go to Templates > Add New.

wordpress-tutorial-boutique-9

Create a new page, craft a slideshow, two text columns, and a button. This can be done quite easily with Elementor’s customizer. Once you’re done, simply click on Publish and your page will be online.

wordpress-tutorial-boutique-10
wordpress-tutorial-boutique-11

You can also open Elementor seamlessly in your page editor, by going to your Pages tab, editing or creating a new page, and clicking on the Edit with Elementor button.

wordpress-tutorial-boutique-12

The Pros and Cons of Page Builders

Consider that, while page builders make designing a functional website possible for non-coders, they can have some drawbacks. For starters, the free versions of these plugins have their own limitations. If you ever wanted to replace your page builder, you may face problems such as having your design break.

On the other hand, while most plugin developers have acknowledged and worked on this potential problem, page builders can cause performance issues. All these functionalities have to come from somewhere. They’re made possible through code. Code that we’ll need to load every time you load your website.

Practical Takeaways

In this post, we took a look at a simple way to design a website for an online boutique. We used two free themes: Sydney and GeneratePress.

Before we started, we noted that the first step to designing an online store powered by WordPress is adding e-commerce functionalities. These functionalities – having a catalog of products, shipping and payment methods, managing sales, etcetera – are made possible by WooCommerce, a free and very popular plugin. You can install this and other plugins by visiting the Plugins > Add New section of your WordPress dashboard.

First, we installed and activated these themes on the Appearance > Themes tab.  Then, we visited Appearance > Customize to customize the designs. Here, we found a preview of the website and a customization bar. The theme’s customization options often include everything from its color palette to its menus. You can also manage your menus on the Appearance > Menus tab.

There are numberless free WordPress themes for stores. But, you sometimes want elements that you can’t get through your theme, or through the Gutenberg editor. Using a page builder makes creating beautiful pages as simple as dragging and dropping elements. You can install a page builder just like any other plugin, through your Plugins > Add New tab. 

Conclusions

WordPress is the most versatile and accessible solution for small business owners who want to take their brand online. In this guide, we covered how to open an online boutique using WordPress, two free plugins, and two free themes. The results were two perfectly functional websites made without touching a line of code.

Needless to say, our examples aren’t but mere foundations on which a business owner would build a characteristic website. Don’t hesitate to explore your options, adapt your WordPress installation to your needs, and infuse your design with your brand’s personality.

Aaron Arias

Freelance writer and designer based in Buenos Aires. Helping build memorable brands through content & UX.

No Comments

Sorry, the comment form is closed at this time.