The Battle of the Ecommerce Giants: Woocommerce vs Shopify

This blog post is dedicated to the two big eCommerce platforms that you can use to build your business eCommerce website.

We will look at what each platform is, what each platform offers, what is it like to have a website made on each platform- the custom route and the builder route, the cost o each platform, the checkout flow for each platform, how custom widgets are added on each platform.

We will also look at the scalability, updates, security and SEO of each platform.

Towards the end of the battle The Battle of the Ecommerce Giants: Woocommerce vs Shopify post, we will look at why we at Canny use WooCommerce and why you should work with a professional agency when having an eCommerce website designed and devleoped.

Let’s get to it!

What is WooCommerce and Shopify

WooCommerce

WooCommerce is an open-source e-commerce plugin developed for WordPress, it’s made for small, medium and large businesses. It allows you to sell online.

It’s advertised as “the most popular eCommerce platform on the web” according to Builtwith.

It’s immediately obvious it’s made for store owners and developers and that it can be extended to meet your different requirements.

Remember, to use WooCommerce you need WordPress, this is because it’s a WordPress plugin.

Looking at the features section on WooCommerce’ website there are two areas; developers and users

For developers, they can:

• Build your store on WordPress
• Can contribute towards WooCommerce (remember it’s open-source)
• Integrate any extensions
• Implement custom features using actions and filters (tools developers already know)
• Developers also have access to extensive documentation that they can utilise when developing a WooCommerce store

For store owners, they can start a successful store by choosing from one of many themes, have unrestricted customisation using the WordPress customiser people know and love, have access to WordPress blogging capabilities, embed the store products, checkout and more on any page, add as many categories, tags and attributes to products as needed, have access to product ratings and reviews, customise a store for different locations, utilise product sorting and filtering and can add unlimited images, galleries and products.

Store owners can:

• Sell
• Sell physical or digital products/services, or both
• Have affiliate products (show products available on other sites with an affiliate link)
• Have unlimited variations of one product
• Import and export products
• Use built-in payment methods from leading providers
• Implement different shipping options and shipping rates
• Have different tax options
• Utilise geo-location to make shipping and tax calculations easier for different customers
• Have different points of sale
  • Online only
  • Physical store

Manage orders and customers:

• Allow users to Register and guest checkout
• Allow users to request refunds
• Store owners can easily inventory manage
• Store owners can easily manage orders
• Store owners can send out emails using the email templates
• Store owners can add shop managers

WooCommerce also has various plugins that extend the core functionality of WooCommerce.

Shopify

Shopify is a proprietary eCommerce platform meaning it’s not open-source.

Because Shopify is a proprietary website technology, it does not use WordPress. Boo hiss! We love WordPress here at Canny.

WordPress is our platform of choice for your business websites.

WordPress is generally a well known and familiar platform. WordPress websites are:

• Are super simple to update, saving you time
• Can be added to over time, growing with your business
• Perform well in search engines, giving you the best chance of success

In short, you don’t get WordPress with Shopify, you use their own platform. You will see the caveats of this later on.

It’s advertised as “one platform with all the eCommerce and point of sale features you need to start, run, and grow your business”.

It’s immediately obvious you can start your business journey, sell everywhere and market your business and manage everything with Shopify.

You get “award-winning” support, the Shopify App store and Shopify Experts to help with anything else.

Shopify is hosted by Shopify and is a platform in itself, meaning you don’t need WordPress to have a Shopify store.

Shopify is focused on users and developers.

For developers, they can:

• Have access to thorough documentation
• Develop applications for Shopify’s app store
• Develop custom themes for clients or the theme store
• Have access to Shopify’s API
• Embed apps to make seamless experiences
• Have access to Shopify’s community

For store owners, they can:

• Start a business
  • Generate a name
  • Create an online presence
  • set up an online store
• Sell
  • Sell online
  • Have different points of sale
    • Online store
    • Physical store
  • Have access to sales channels
    • Marketing platforms
  • Have access to custom “storefront” tools
    • Customise the online store
  • Implement a “buy” button on any website
    • Embed Shopify features on third party websites
• Manage
  • Orders
  • Payments
  • Insights
  • Have access to an extensive dashboard

Shopify also has various applications that extend Shopify’s core functionality.

What can you sell (quick overview of each)
WooCommerce and Shopify are developed to allow you to sell just about anything.

The types of products/services:

Physical
If you are selling physical products, WooCommerce and Shopify will help you manage and sell your physical products.

Digital
Digital products are things like downloads, this could be eBooks to films. WooCommerce and Shopify will make sure no one can access these downloads unless paid for.

Memberships
Memberships are things like a paid newsletter, could be a monthly fitness guide. WooCommerce and Shopify cater for memberships

Bookings
Bookings are things like time slots, if you run a consultancy you could set up a booking system where people can book for your time. Your customers would pick from a selection of available dates before paying for that time slot. WooCommerce and Shopify cater for these types of services.

Cost (costs of each)

WooCommerce

WooCommerce is actually free. That’s right, free.

If you have a WordPress website you can easily integrate WooCommerce into your WordPress site in minutes.

But, doesn’t this sound kind of like a plug and play platform? It can be, but you shouldn’t go about it in this way.

We will get more into this later, but for now, let’s just focus on costs.

So, as you now know WooCommerce is free. But, in reality, it may not end up costing anything to set up a WooCommerce store.

The thing with WooCommerce, because it’s free, there are features that you will most likely need that cost.

WooCommerce by itself is kind of like a “barebones” system where you get the minimal amount of features.

But, this is a good thing. You see, you add WooCommerce to your WordPress website and pick and choose the features that you need. These features could be things like subscriptions, memberships, bookings, advanced filtering, product add-ons, multistore and much much more.

These extra features are plugins that can be added to WooCommerce to extend its vanilla functionality.

But isn’t this better than having to purchase WooCommerce and having everything thrown at you, all at once? It’s also better than having to pay for a subscription for WooCommerce, then having to purchase various other extensions after that.

For us, it’s a very good model to have, and as you scale, these extra features can always be added when needed.

To put this into perspective, premium WooCommerce plugins (they do the job properly) typically cost is between £80 to £200 per year.

Now that you know how WooCommerce works, it’s time to look at Shopify.

Shopify

Unlike WooCommerce, Shopify costs and there’s no way around this.

Shopify has a monthly subscription model and has three tiers.

• Basic Shopify (£23 per month)
• Shopify (£62 per month)
• Advanced Shopify (£232 per month)

Shopify also has applications that can be installed on your Shopify eCommerce website.

This means you are paying a monthly subscription as well as any additional applications you need (extend functionality).

You may be wondering what plugins you need for WooCommerce, or what plan and apps you need for Shopify.

This is where the next section comes in, the features.

What’s needed to use WooCommerce or Shopify (i.e. WordPress, hosting)
Now that we know the costs of each platform, the next step is to discuss what you need in order to have a running eCommerce store using WooCommerce or Shopify.

WooCommerce

WooCommerce is a WordPress plugin, therefore you need a WordPress website in order to use WooCommerce.

WordPress and WooCommerce are pieces of software and need somewhere to “live” so people can access your eCommerce website.

You will need website hosting and a domain name.

So all you need is a host, a domain name and a WordPress and WooCommerce installation.

To provide a good idea of how much the hosting and domain name would cost to go along with your eCommerce website would be we will use an average monthly cost for hosting which is £50.

This cost is for good hosting. The last thing you want is cheap hosting.

The average cost of a domain name per year I around £15.

This would mean hosting and a domain name would come in at £615 per year.

Shopify

Unlike WooCommerce, Shopify is a self-hosted solution. You can’t choose your own hosting provider.

But what this means is you don’t have to worry about whether or not the hosting is going to be good or not, well, because Shopify’s hosting is designed for eCommerce. It can handle the traffic that eCommerce sites have.
But what this also means is that you can’t shop around for the “best price”. You have to pick on of their hosting plans. For now, these plans are:

• Basic Shopify – £23 per month
• Shopify – £62 per month
• Advanced Shopify – £232 per month

We will look into these plans in more detail later, but for now, the plan you’d pick would the standard Shopify plan for £62 per month. We will explain as to why you should pick this plan later. So don’t worry about that.

You’d also want a domain name – this would be around the same cost as if you were having a WooCommerce website made – an average £15 per year.

So comparing the both, WooCommerce is a total of £615 per year and Shopify is a total of £759. This is a difference of £144 for the eCommerce software, hosting and domain name.

Features (detailed list of features from comparison)
We have previously listed out an overview of what you get with each platform, it’s time to see what you can actually do with WooCommerce and Shopify.

After this section, you should know what you need in order to begin your eCommerce project.

This means you will know what plugins you may need for WooCommerce and which plan to pick for Shopify.

To take a look into what’s needed to create a functioning store with each platform we will use a scenario – a gift store that sells physical products. This type of website will provide a solid basis to explore what’s needed.

Let’s get to it.

Gift Store
Let’s say you are setting up a business that sells a range of gifts for different occasions, could be birthdays, weddings, special events, for him, for her, or general gifts (for when you are feeling nice).

The requirements for such store would include:

• Personalised touches on each gift
• Shipping options – first class, second class, same day and you’d have different shipping rates for different products (size, weight etc.) within each class or same day
• A multi-step checkout to improve the checkout flow
• Accept different payment methods
• The ability to export products to eBay and/or Amazon

Personalised touched on each gift would be things like engravings, embroidered messages, gift wrapping with a name card and much much more.

Shipping options for different types of products will vary, you may have large heavy items or large light items or small and light or small and heavy. There are so many variables.

A multi-step checkout improves the user experience, this breaks down the checkout process into chunks and lets the user know where they currently are within the checkout process.

People want to pay using their preferred methods. You can’t just have one type of payment option, you’d end up losing sales.

You need to promote and advertise what you are selling, to do this you need to utilise marketing platforms. You will want to share what you are selling to gain exposure, social media platforms are great for this.

The types of gifts you could be selling would include:

• Hangers
• Invitations
• Phone accessories
• Scarfs

WooCommerce

With WooCommerce, you just get a “barebones” system and will need plugins in order to have a properly functioning store that will meet your business needs.

There are many plugins available out there, so to stay on point, we are going to look at different scenarios. These will be the most common scenarios that will cover the typical products/services businesses sell.

There are not many times when only the vanilla WooCommerce is needed. This scenario would be when the overall design of the website is very simple and you are selling very simple products.

This is another point worth mentioning while we are here. The type of design can affect what plugins your WooCommerce website needs.

We will get to this point later on when we talk about designing for each platform.

The gift store website

With WooCommerce, all of the requirements listed above don’t come as standard. You simply can’t do any of the above with a vanilla install of WooCommerce.

So let’s look at what’s needed to get the site where it needs to be.

To enable personalised touches to products, you need WooCommerce Product add-ons.
Product add-ons enable personal engraving, product upgrades (could be a premium fabric for a scarf) and more. This plugin costs approximately £40 per year.

The combination of this plugin with WooCommerce variable products really makes for a customisable product.

To enable the advanced shipping options you need WooCommerce Table Rate Shipping. This plugin lets you add multiple tables of rates per shipping zone. This would be different rates (cost) for different products based on cost, weight and size etc. This plugin costs approximately £80 per year.

To enable a multi-step checkout WooCommerce Multi-Step Checkout is needed. This provides steps for the checkout process. For example login, billing, order, and payment. This plugin costs absolutely nothing.

To accept different payment types, various plugins are needed to enable the different payment types. The most common include WooCommerce PayPal Checkout Gateway, WooCommerce Stripe Gateway – this includes Apple pay. These plugins cost absolutely nothing.

To export products to other platforms such as eBay and Amazon, the WooCommerce Amazon and eBay integration plugin can be utilised.

This will automate the process of selling on multiple platforms with your eCommerce website being the main platform – you would only need to create the product once. This means you won’t have to manually create separate listings for eBay and/or Amazon. This plugin starts at approximately £25 per month.

There you have it, this is the typical physical product eCommerce site we design and develop at Canny.

There, of course, other types of website we have designed and developed for WooCommerce. These include:

• Subscriptions: This plugin allows you to create subscription products on your Woocommerce website. A subscription product allows you to charge customers on a recurring basis. As an example, think Birchbox. Our client The Shire Bakery uses this plugin for her Sprinkle Club box. This plugin costs approximately £155 per year.
• Memberships: This plugin lets you create multi-tiered memberships for your website. So if you operate a website with a Bronze, Silver, and Gold tier membership system, this plugin is for you. This plugin costs approximately £117 per year.
• Bookings: The bookings plugin lets you take bookings on your website. So if you’re a Dentist and you want to make an appointments calendar, then this is the plugin for you. Our client Snowjunkie uses this plugin to rent out snow sports clothing. This plugin costs approximately £195 per year.
• Digital: digital products include things like eBooks, this type of product can be implemented with the membership plugin where a paid-for monthly eBook is sent out to its paid subscribers. This product type comes as standard.

There are so many types of stores and combinations it’s impossible to go through every possible scenario. So, if you are serious about having a WooCommerce website designed and developed for your business, get in touch .

Shopify

Now, let’s look at the same type of website – a gift store, but using Shopify.

With Shopify, you need to pick an appropriate tier before setting up your online store.

Let’s take a look at these to see what you actually get in order to determine if any extra Shopify Apps are needed to get a fully functioning eCommerce website.

What you get	Basic Shopify	Shopify	Advanced Shopify
Online Store	Y	Y	Y
Unlimited products	Y	Y	Y
Staff accounts	2	5	15
24/7 support	Y	Y	Y
Sales Channels	Y	Y	Y
Manual order creation	Y	Y	Y
Discount codes	Y	Y	Y
Free SSL certificates	Y	Y	Y
Abandoned cart recovery	Y	Y	Y
Gift cards	N	Y	Y
Professional reports	N	Y	Y
Advanced report builder	N	N	Y
Third-party calculated shipping rates	N	N	Y
Fraud analysis	Y	Y	Y
Online credit card rates	2.2% + 20p	1.9% + 20p	1.6% + 20p
In-person credit card rates	1.7% + 0p	1.6% + 0p	1.5% + 0p
Additional fees using all payment providers other than Shopify payments	2.0%	1.0%	0.5%
Shopify POS app	Y	Y	Y
Register shifts	N	Y	Y
Hardware peripheral support	Y	Y	Y
Unlimited Shopify POS staff PINs	N	Y	Y
Third-party POS apps	Y	Y	Y

Let’s pick out the key points to make this easy.

Firstly, staff accounts. You are limited to the number of accounts you can have. WooCoomerce lets you have as many as needed. So, take into account how many “staff” accounts you need for your eCommerce website.

Gift cards. If you need gift cards for your eCommerce store you will have to pick the middle tier. The basic plan does not allow for gift cards.

Professional reports. If you are serious about running an eCommerce store you need good reports. This will let you gain a solid understanding of your customer’s behaviour. WooCommerce reporting comes as standard.

The advanced report builder only comes with Shopify’s advanced plan, this type of report builder lets you fine-tune the reports you see. With WooCommerce, there are various plugins that extend the default reporting – you can add these as needed.

Lastly, the point of sale (POS). These are features that are needed if you have a physical store and sell in-store. With Shopify, you will need to determine whether or not you need to register shifts (a period of time in which transactions take place in your store and if you need unlimited POS pins for your staff.

With WooCommerce such features can easily be added as and when needed with the use of plugins.

Now that we’ve analysed the different plans, it looks like the mid-tier plan is suitable for the gift store. This is because you need professional reports for your business.

To enable personalised touches to products, you need a Shopify Product Options App. A popular option is infinite options. This will let you enable personal engraving, product upgrades (could be a premium fabric for a scarf) and more. This app costs approximately £60 per year. £20 more than WooCommerce Product Add-ons.

To enable the advanced shipping options you need a Shopify Shipping app. Just like WooCommerce, advanced shipping options don’t come as standard in Shopify. A Popular Shopify app is Bespoke Shipping. This app lets you add multiple rates for different products per shipping zone. This would be different rates (cost) for different products based on cost, weight and size etc. This app costs approximately £144 per year.

Upon looking into Shopify’s checkout process, it looks like the multi-step checkout process comes as standard. This provides steps for the checkout process. For example login, billing, order, and payment. WooCommerce needs an additional plugin for this feature, but remember, it’s totally free forever.

To accept different payment types, nothing needs to be added to Shopify, the payment gateways come as standard and just need to be enabled. These include Paypal Checkout Gateway, Stripe. And Apple pay This means no additional apps are needed to accept different payment methods.

To export products to other platforms such as eBay and Amazon, the Shopify Amazon and eBay integration app can be utilised – this is developed by the same company as the WooCommerce variant.

Just like the WooCommerce example, this will automate the process of selling on multiple platforms with your eCommerce website being the main platform – you would only need to create the product once. This means you won’t have to manually create separate listings for eBay and/or Amazon. This plugin starts at approximately £25 per month.

That’s all that’s needed in order to have a fully functioning eCommerce website with Shopify.

Just like WooCommerce, there are other types of Shopify eCommerce websites that you can have designed and developed. These include:

• Subscriptions by ReCharge: this app provides seamless integration with Shopify and lets you charge customers on a recurring basis. This will cost approximately £30 per month.
• Bold Memberships: this app adds memberships programs to your Shopify store. This lets you create multi-tiered memberships where you could have Bronze, Silver and Gold membership options. This costs approximately £8 per month.
• BookThatApp: this app lets you make bookings on your Shopify website. Just like the WooCommerce example, if you’re a dentist and you want to make an appointments calendar, then this is the app for you.
• Digital: just like in WooCommerce digital products can be sold on Shopify and again, these are things like eBooks. These types of products can be implemented with memberships where a paid-for monthly eBook is sent to its paid customers. This product type comes as standard.

Just like with WooCommerce there are so many different types of stores and combinations it’s not appropriate to go through every scenario. If you are in need of an eCommerce website, get in touch with us.

Bear in mind, as you probably already know, we use WooCommerce to build your eCommerce website.

Now that we’ve looked at what you get, what you can do and what extra functionality is needed with WooCommerce and Shopify in order to have a fully functioning eCommerce website, it’s time to compare these results side by side.

Comparison
The elements needed to create a standard eCommerce website (gift store).

Feature	WooCommerce	Shopify	Difference
eCommerce service	Free	£62 per month	£62 per month
Product addons	£40 per year	£60 per year	£20 per year
Advanced shipping	£80 per year	£144 per year	£64 per year
Multi-step checkout	Free	Free	0
Payments	Free	Free	0
eBay and Amazon	£25 per month	£25 per month	0
Total	£420 per year	£1248 per year	£828

We previously looked at the cost of eCommerce software, hosting and domain name. For WooCommerce this was a total of £615 per year and for Shopify, this was a total of £759.

So the grand total for WooCommerce is £615 (hosting and domain name) plus the £420 per year for the extra functionality you need for WooCommerce in order to have a properly functioning eCommerce store.

This grand total is £1035.

For Shopify, the grand total is £1248 (remember hosting comes included so the cost is already accounted for) plus the £15 per year for hosting.

The grand total is £1263 per year.

This is a difference just £15.

So in terms of cost, either platform is at the same level as each other.

Before we look at what you should pick we are going to look at what’s involved when setting up each platform, the checkout flow and various other areas.

We are actually going to split each platform up into two different sections. The custom route and the builder route.

eCommerce websites that use WooCommerce or Shopify can either be built from scratch (building out all the page files and adding the logic) or by using a drag and drop page builder eliminating the need for coding.

For the following points, we are just going to look at brief examples to keep the points “short and to the point”.

Setting up the platforms (the process of setting up the platforms)
We are going to focus on the custom route first then the builder route.

WooCommerce

The custom route
In order to have a fully custom bespoke eCommerce site made with WordPress and WooCommerce, you either need an agency or seriously know how to code.

If you are having your eCommerce website built with WordPress and WooCommerce, WooCommerce falls in line with the developer’s workflow very well.

This is because WooCommerce lets the developer use the familiar templating system that WordPress uses.

On a clean WordPress install, there are basic templates. But, your developer will make custom templates i.e. home-page.

In WordPress, templates make up your webpages. So, for example, your home page, there would be a template named “home-page”.

This home-page template would have all the logic in it to fetch the data from the database and present it in a nice way.

The developer has to build out this logic, such as creating the query that gets the data from the database.

The data that makes up your home page can be added via the admin panel using the pages section.

When you click onto a page, the home page, you will be presented with input areas where you can enter data.

This is the data that’s stored in the database and fetched to the front end via the templates, the home-page template.

Once your WordPress templates are set up, the developer can move onto your shop pages.

With WooCommerce, unlike WordPress where the developer has to build out the page templates such as adding a query to the home-page template. They have access to pre-defined templates that contain the logic needed to get all the product data from the database.

These predefined templates make up your WooCommerce shop. These include

• Shop listing page
• Shop single page
• Checkout pages
• Account pages

So to get these templates to work with your WordPress website, all the developer needs to do is set a specific page template to be used as the shop page.

So for example, let’s say the developer created a page template called “shop” for the shop listing page. They would set this page to your shop page, then WooCommerce will add all the data to that page.

These default templates have a basic look to them. However, the shop page can be highly customised.

To let this make sense a nice simple example will be used.

Let’s say on your shop page the developer needed to change the number of columns per row (for the individual shop items), as per the design (different to the default number of rows the standard WooCommerce templates provides).

The developer can access a hook, a hook is a piece of code something (output the items in your shop) and from there the developer can access“hook” this hook and have access to all the data within that hook.

Once the developer has finished working with this data i.e. changing the number of columns on your shop page, this modified data can be returned back to the hook.

Take a look at the image below to put this into perspective.

The apply filters are the hook that the developer can hook into, you don’t need to know how this works, but just understand that the “columns” holds the number of columns that can be changed.

Think of columns as something similar to a box that holds something, all columns are doing is holding the “number” of columns.

The add_filter is the function that lets the developer hook into the apply filters function. From here the number of columns can be returned – 3. The default column count is 4. All this add_filters is doing is updating the number that’s stored inside columns.

Here’s the visual result.

Using hooks saves the developer from having to modify the theme files directly.

This means any custom logic is kept separate from the core template files.

This is very efficient because if for any reason, you as the client decide you don’t like how something looks, all the developer has to do is delete this hook.

This is more efficient than having to re-modify the core theme templates – any direct changes made to the template files override the core functionality. This means the developer will have to find the original code elsewhere and apply it.

There are other reasons as to why hooks are the recommended way, but this isn’t the post to discuss this.

There you have it, this is the streamlined workflow the developer goes through when making a custom WooCommerce website.

There are much more complex examples, but to keep things understandable a basic concept was used in order to understand how custom WooCommerce websites are developed.

So, with the combination of the WordPress templates and WooCommerce templates, you will eventually end up with a fully functioning WooCommerce website with a WordPress blog.

The drag and drop route
You can actually design and develop a website using a drag and drop builder. But here’s why you should work with a professional agency.
WooCommerce doesn’t come with a built-in drag and drop website builder, unlike Shopify. You need to install additional software to do this.

What this means is that you can pick the drag and drop software of your choice.

For this example, we are going to look at Beaver Builder. One of the best drag and drop page builders around.

This works really well with WordPress and WooCommerce. We will just look at the WooCommerce example as we are focusing on WooCommerce.

With the beaver builder for WooCommerce, instead of having to modify or add to code (hooking into hooks) like in the previous example.

You can drag and drop and edit the page visually.

Let’s take a look at the same example as before but using the beaver builder method.

Previously we mentioned the developer works with logic within page templates i.e. the home page and the shop page. We showed a brief code snippet as to how the developer would modify the column count for a simple example.

No extra fancy pants code snippets are needed as it probably wouldn’t make sense. Just know everything the developer does is work with code (such as the hooks to do something, as you saw earlier).

Now for the builder route. With the Beaver Builder, you would create the homepage page within the WordPress admin panel and instead of working with code logic (like the developer does) to get data to display on the front end of your website (the web page itself) from the database (where the data is stored). You would use the drag and drop builder.

Once the standard pages were built out (homepage, services, about, contact etc.) you’d move onto the shop pages.

Let’s say you were building out the listing page, with beaver builder you can display all products on a given page by:

1. Adding a page in the admin panel called Shop
2. Edit this page and click and drag a Beaver Builder layout module
   • Full width
3. Inside this layout module, you copy and paste a WooCommerce Product shortcode
   • This will output all the shop items within the Beaver Builder layout module

What is a short code, you may be asking? A shortcode lets you do powerful things with little effort. A shortcode simply executes a block of code. This could be displaying all your WooCommerce products, for example.

You can even pass attributes to shortcodes to modify their output.

So, to modify the number of columns for the shop listing page using the WooCommerce shortcode. Instead of having to hook into a hook (which is what the developer did from the previous example) to modify the number of columns. You simply pass an argument to the shortcode (the attribute).

To change the default number of columns using the WooCommerce shortcode, you simple add columns=3 to the shortcode.

From a non-developers perspective, this is a very simple way to build a shop page and have the desired number of columns per row.

There you have it, this how you’d make a site using Beaver Builder and WooCommerce.

Shopify

The custom route
After investigating what it takes to develop a custom Shopify theme, it seems like a tightly closed ecosystem.

Unlike traditional web development where you can choose your own host and use your own FTP software (software used to upload files from your local machine to a web server). You have to use Shopify’s protocols.

So, to start the custom route, you need to create a Shopify account and select Shopify’s default starter theme.

Shopify has a default theme just like WooCommerce’s default templates.

Once you have chosen the default theme on Shopify, you need to set it up in order for Shopify to let you (the developer) customise the theme.

Let’s start at the very beginning. A developer likes to develop on their preferred text editor.

So, to get the theme files on the developer’s computer an API access point is needed.

This lets Shopify’s theme kit modify the code of the theme.

The theme kit is a command-line tool for Shopify theme and lets the developers computer communicate with Shopify. Don’t worry too much about this at all (it’s just for the developers).

The result of this means the developer’s computer can change or modify data on Shopify’s server (host).

This means when the developer makes any changes on their text editor of choice, the modified files will be uploaded to Shopify’s server.

Once all this scary stuff has been set up by the developer, they can begin building out a custom eCommerce site your business.

Now for the part of actually customising a Shopify theme.

Unlike WooCommerce where the developer has access to hooks to change how something looks, such as the column count on the shop page. Instead of having to directly modify the theme files directly.

With Shopify, the default theme files have to be modified.

Let’s take a look at how the number of columns on the shop listing page would be set.

To change the number of columns on a Shopify template you would have to either update a variable (a container that stores some data – could be the number 3 for the 3 columns) or to hard code this value in (like in the WooCommerce example where the developer set the number of columns using the hook).

In this example, the collection_grid holds the number of columns to output. This is the variable that holds the number of columns.

To stop this value ever change this can be deleted and the developer can “hard-code” a value in, meaning it can never be changed. Unless the developer updates this value.

This is a very basic example of what the developer needs to do in order to start creating a custom design.

But it shows you the process needed to modify a Shopify theme.

The drag and drop route
Just like WooCommerce, in order to enable the drag and drop page builder experience extra software is needed.

We are going to look at PageFly which is a page builder for Shopify.

To create a product page using PageFly, all you need to do is go to your Shop listing page once it has been created and add a Shopify product listing element.

This will output all the shop items in your shop.

To change the default number of columns, all you need to do is go to the page outline section and go to row, column and then products. From here you can type in the desired number of columns.

As you can see, from a non-developers perspective this is a very simple way to build a shop page.

WooCommerce vs Shopify Custom route.

The custom route is the recommended route if you want a bespoke business eCommerce website.

Here’s why.

For both WooCommerce and Shopify, coding knowledge is required. But, the difference is the language used.

WooCommerce uses PHP (WordPress’s traditional language) and Shopify uses Liquid.

The language does not affect how your website performs, but it comes down to what a specific developer knows. One may prefer Liquid and another may prefer PHP.

It also comes down to the agency you are working with.

In reality, don’t be put off which platform is used for your eCommerce site.

It boils down to what the agency uses and your budget.

The Checkout Flow

Now that we’ve discussed what it takes to start developing a custom eCommerce site for each platform, you may be curious as to what the checkout process/flow looks like on each.

The checkout process is very similar for each platform.

For Shopify and WooCommerce the process goes as follows:

1. Product single page
2. Add product to cart
3. Cart notification
4. The cart page
5. The checkout page
6. Account page

Depending on the design of your eCommerce website, each of these pages/steps will look different. But the core functionality remains the same for each.

When buying something, it’s expected to see an obvious “add to cart” button and a nice and simple checkout process. Each platform provides this.

Now that we’ve explored what each platform is, what it offers you, what’s required to make a standard eCommerce site, what’s involved with the creation of an eCommerce site and the checkout flow. It’s time to look at how well they work for you (as the client/business owner).

The first thing we will look at is the ability to add your own functionality (shop filter options), how well each platforms scale and what it’s like to update each platform, taxes and currency options.

WooCommerce
Customising the themes (general customisation i.e. Widgets – sidebar)
WooCommerce Widget Areas
Because WooCommerce uses WordPress you have access to a good choice of widget areas that can be added to your sidebar.

For example, in WooCommerce you can easily add your own ways that customers can filter your products by.

In the picture above, a search field, custom HTML (more advanced features), Categories, Price and fine-tuned filtering based on attributes.

Take note of the sidebar 1. When a developer is developing a theme, they can create widget areas and choose where these areas are displayed. In the example above, the sidebar is named sidebar because anything added to this is displayed in the sidebar on the website.

Here is the final result, you have a nice user interface with different options to filter products by.

Adding your own filtering options in WooCommerce is really a breeze and the best thing about them is that they just work. If you do happen to need some more advanced features such as HTML blocks, these can be added by your developer.

A simple example is a custom label that can be placed above a filter option or a custom shortcode (you know what these are from earlier).

This is another reason you should hire a professional agency, you more often than not need custom code to have a bespoke website with unique features.

Shopify Collections
Unlike WordPress where you have the built-in WordPress widgets (also including default WooCommerce widgets). In Shopify, there are a set of “automatic” filtering options. According to Shopify, these are “An automated collection uses selection conditions to automatically include matching products. You can add up to 60 selection conditions, and you can specify whether products need to meet all conditions or any condition to be included in the collection.”

To create a filtering system in Shopify (from a users perspective), you need to tag your products based on how you want to filter them. Collections let you group products into collections that make it easier for customers to find them. Some collections can include:

• Clothes for men, or women
• Items on sale
• Items in a certain size or colour

So, using an automated collection, you can create a way to filter by product price, weight or inventory stock.

Just like with WooCommerce, it’s very easy to let customers find these collections on the front-end of the website.

To add collections to a navigation element (like adding items to the WordPress menu if you are familiar with WordPress) you need to add a link to the collection:

• Admin > online store > navigation
• Click the menu item you would like to add the collection to
• Click the add menu item
• Enter the name of the collection, then select the collection that you are adding the link for
• Click add then save

If there are any sidebars set up on your Shopify website, you will be able to add these collection items to that. Again, this will depend on the design of your website.

So, the ability to add your own filtering options is available on both platforms. There are no winners here, just a draw.

Scalability and updates

WooCommerce
WooCommerce eCommerce websites are designed for all business sizes from small, medium and large. WooCommerce can handle unlimited products and adding more and more products does not slow down your site.

So, you don’t have to worry about WooCommerce being able to cope with your future business demands because it most certainly can.

Updates also go hand in hand with scalability.

There are two types of updates that can happen to an eCommerce website. The WooCommerce theme updates (updates to the core files that allow your eCommerce website to function) and plugins.

With WooCommerce, whenever an update is released it’s not recommended that you carry out the update yourself. You should let your web developer do this for you.

This is because WooCommerce updates can actually break your eCommerce site.

This is another reason you should hire a professional agency, if you don’t know what you are doing you can end up breaking your website.

The reason this happens is that whenever you have a custom theme developed, the template files used within the custom theme (templates make up your webpages, remember from earlier) also need updating.

If they are not updated they simply won’t work with the newer version of WooCommerce.

In regards to plugins, before we discuss these, there is a fine line of when plugins should be used and when custom code should be used.

In a previous blog post , we discussed the implications plugins can have.

An example of when custom code can be used instead of a plugin is in regards to the product gallery within the shop single page. This can efficiently be custom coded rather than implementing a plugin.

If you are using a website builder and want a gallery slider for your product gallery for a single product, you will more than likely end up using a plugin. This plugin adds more code than what’s really necessary in order to add the gallery slider.

This is because many options are available to you, whereas the custom route means only what’s really needed is added.

There are times when plugins should be used. A prime example of when a plugin should be used is when you want to really enhance the filtering capabilities on your WooCommerce eCommerce website.

If your website is really starting to grow and want to start accepting different payment methods, these can easily be implemented through plugins.

Two good examples include Apple and Sage Pay.

WordPress is known for its extensibility through plugins, WooCommerce is built on top of WordPress and you get the same extensibility.

One thing worth mentioning about WooCommerce is the hosting you have for your eCommerce website.

As you know from earlier, you need to pick your own hosting for a WooCommerce website.

Simply put, you need good hosting for an eCommerce website because these types of sites have high volume.

If your WooCommerce site seems slow with high volumes of traffic it could be down to two things. Your hosting or a poorly built theme.

Shopify

Just like with WooCommerce, whenever updates are released, theme files also need to be updated to reflect any Shopify updates. If not your eCommerce site can break. This is because future versions of Shopify may not work with an older theme (it could be the theme does not support a new features Shopify has released).

So if you have an app installed or have had a developer develop your site, any changes.

The other caveat to updating a theme is you need to uninstall and reinstall any apps that add code to a theme.

It even specifies on Shopify’s site you need to do this.

If you have had a custom theme made by a developer, they can easily handle this for you.

If you’ve used a theme or builder, you’ll probably have to work this out yourself.

Because Shopify is self-hosted, you don’t need to worry about the hosting capabilities for high volumes of traffic. Shopify needs its platform on hosting that can handle eCommerce sites.

But this isn’t really a good thing.

1. You are tied to predefined plans that Shopify provide you

You are always going to be locked into the Shopify ecosystem if you have a Shopify website, you aren’t free to choose your own host.

Plans/packages aren’t always a good thing either.

Even though Shopify’s hosting is designed for eCommerce, you are stuck with them and their pricing. You can’t shop about for the hosting that is just right for you.

With WooCommerce you can easily migrate to another server if the situation calls for it.

Updates and Security

WooCommerce and Shopify are built by professionals, updates are crucial and must not be ignored.

Updates also improve the security of your eCommerce website.

A prime example of how important updates really are is the recent addition to SCA – strong customer authentication.

This is a mandatory feature means customers must verify their identity using two of three methods.

1. Something the customer knows (password or pin)
2. Something the customer has (phone or hardware token)
3. Something the customer is (fingerprint or face recognition)

Payment gateways that are used on WooCommerce and Shopify implemented these updates. This means the payment gateways used on your eCommerce website needs to be updated.

If not, customers will not be able to buy off your eCommerce website.

If you are looking to have an eCommerce website designed and developed and are lost where to start, reach out to us .

Shipping, Taxes and Currency

Both WooCommerce is designed to work local to globally. There are really no limits on shipping options, taxing and currency options.

The requirements of your eCommerce website will dictate what shipping options are needed, what tax calculations are needed and what currency/currencies can be used.

The currency used in WooCommerce can be set, if multiple currencies are needed plugins can be added to enable this feature.

With Shopify, multiple currencies can be enabled by using Shopify Payments. Payments does not have to be used, but if it is you get access to the multiple currencies.

SEO

Search Engine Optimisation is relatively easy to manage on both WooCommerce and Shopify.

WooCommerce
With a WooCommerce eCommerce website, you have access to Yoast SEO. With Yoast SEO you have the ability to rank higher, get more buyers and sell more.

Using Yoast SEO for your products lets you set the focus keyword, title and meta description.

You can also check the readability and set titles and descriptions for social media platforms (if sharing products on social media platforms).

Shopify
With a Shopify website, you have access to Plug in SEO. With this app, you can edit the title and meta description, have access to keyword tools – focus keyword.

You can also check for readability issues.

There are many other features available for both of these add-ons.

This blog post is not focused on SEO, but it’s important to know you have access to good SEO tools for both platforms.

SEO should be organic and this doesn’t happen overnight and takes time and effort.

If you would like help with SEO, check out our digital marketing services.

Why we use WooCommerce

We at Canny use WooCommerce. Here’s why.

Let’s pick out points from this post as to why we use WooCommerce.

1. WordPress is the platform we use. WooCommerce is built for WordPress and both work in harmony together.
2. WordPress is one of the top platforms to have your blogging website developed on, it can be extended to cater for an eCommerce website.
3. WooCommerce can be integrated with WordPress.
4. WordPress uses a template system to display your website webpages. WooCommerce follows this model.

On top of WooCommerce following the familiar template structure WordPress uses, WooCommerce comes with a set of predefined templates with all the logic needed to make your eCommerce site work.

These template files can be highly customised with the use of hooks, this saves the developer from having to update core template files, thus, making the customisation efficient.

Because WooCommerce is lightweight, additional features can be implemented on a per-project basis. This is done through the use of plugins (payment gateway options, using the example from earlier) or by custom code (the gallery slider on the single product page, using the example from earlier).

You are not tied to a plan that comes with the features you need. You see, a plan might come with some features you need, but the others are redundant.

On top of not being tied to a plan, you are also not tied to one host (you can choose your own). We recommend good, not cheap hosting.

This means you don’t have to contemplate which plan (Shopify) to use and be tied to one hosting solution.

On the topic of hosting, if an agency gets to choose a hosting provider of their choice, they will be able to pick a hosting solution based on how well they get on with support and how the hosting solution works (how the admin panel works and what it looks like etc.).

With Shopify, the only option is to deal with Shopify.

If you choose a professional web design agency that uses WordPress and WooCommerce, you don’t have to worry about picking and choosing a plan.

All the requirements will be laid out on the table and the necessary plugins are chosen for you. This means you only pay for what you really need and you can either choose to use the agency’s hosting or choose your own (total freedom).

You will also never ever pay for any redundant features, this can happen with plans and packages.

It doesn’t require an alternative programming language (liquid) to develop custom themes, it uses the familiar PHP language that developers are used to.

There is no faffing on generating API access keys just to access and modify the theme files locally on a computer. Files instead can freely be uploaded to your choice of host using traditional methods.

Remember when we said Shopify is proprietary and is hosted by themselves? Well, this means you don’t really own the site.

With WooCommerce, we can have your eCommerce site on your servers, not someone else’s.

The problem with Shopify is that if it goes bust or gets sold, your site goes with it – because you can only have a Shopify site on their servers.

Why use an Agency

This is the final section to this blog post, so we’ll keep it short and to the point.

If you are serious about your business and your eCommerce website, you want to work with an agency that focuses on partnership.

• If you are working with this type of agency, you get to build a solid relationship with real people, not just one person or someone at the other end of a chatbox
• You get straight answers from people who know what they are doing
• You get dedicated team members communicating with you at different stages
  • Designer during the design stage
  • Developer during the development stage
• You get dedicated support during and after your website launch
• You get people working on your project who have extensive knowledge
• You get your project completed efficiently
  • Not a one-person team
• You get a dedicated website design process all throughout your project
  • Website discovery session
  • Wireframing and web design
  • Bringing your website to life
• The agency will learn about you and your business, and in turn, be able to continuously contribute to improving your business and it’s website

Lastly, if you want a blazing fast, well structures eCommerce website it’s best to go down the custom route and have your website designed and developed by an agency.

In the end, site speed also comes down to how well your eCommerce website is developed.

The problem with builders and themes is that you have no control of the code output. Builders spit out their own code, which more often than not is not clean code.

Themes, on the other hand, are catered towards a larger target market – they need to work for all business types. Therefore there is generally a lot of different templates to choose from and a lot of additional code to make the theme customise work. The theme customiser lets you customise a theme by changing its colours, adding different logos (your business logo) and HTML blocks.

If you have a bespoke web design designed and developed for your business, it will be made ground up for your business, eliminating any code bloat.

Conclusion

Phew! That certainly was an extensive read. There are different platforms out there and WooCommerce and Shopify are amongst the top choices to use.

When looking to have an eCommerce website made, it can be overwhelming picking a platform. Hopefully, this blog post has helped you determine which platform is right for you.

Ultimately, in the end, it comes down to which model you prefer.

If you are working with an agency who uses Shopify, they will pick a plan that’s right for you, then you’ll be in Shopify’s hands for hosting your website.

You may like the idea of this integrated ecosystem (everything on one platform)

If you are working with an agency that uses WordPress and WooCommerce, they will pick out plugins (only the ones you really need) that provide extra functionality.

You will then have the option of choosing the agency’s hosting or move to your own.

Here’s what we can do for you.

Finally:

Get your eCommerce site made.