- By
A few years ago, just about any serious eCommerce store would have been built using Magento. And then came along WooCommerce (an extension of WordPress) and Shopify: both of which are now dominating the space! But which is best? Which should you use? What are the differences and how do these two platforms work?
Fear not, we’ve put together a video that will hopefully explain all…
Shopify vs WooCommerce:
– (note: video credits to Joe Casabona – creator of WordPress In A Month)
Video Transcript:
Launching an online store even a few years ago was no easy task. You needed to set up your website, build a shopping cart and catalog, integrate a payment gateway (most likely with code), test a lot, launch, and hope for the best. Today, it’s easier than ever to create an online store. In many cases, you don’t even need to know how to code or be tech savvy. Two of the most popular platforms are Shopify and WooCommerce. In this video, we’re going to setup a simple three product store with both. In each instance our goal will be to get setup as quickly as possible to start selling. We’ll complete these tasks: configure our store (including shipping, taxes, and other settings), choose a design or a theme, and add our product. Let’s start with Shopify. Shopify was founded in and touts that it powers over , businesses which have sold billion dollars in revenue. It also bills itself as the all-in-one ecommerce platform with no technical skills required. Let’s set up our shop Pricing for Shopify is pretty straightforward. It starts at $ a month and goes up from there offering lower payment processing fees and other add-ons. Each account comes with a free -day trial. In this video we’re going to be using Basic Shopify. Let’s get started by configuring our account. We’re going to add our email address, password, and store name to start our free trial. Once we do that, Shopify will create our store. Once our store is created, Shopify is going to ask us a few questions to customize our experience. We’re going to select that we’re “not selling any products yet”, but we do “have products and that we’ll be ready to launch”. We’ll also state our current revenue, which for this demo will be “$, to $,” and then we’ll click Next. Next, we’ll put in our business information. We’re going to need to add this in order to get paid. Once we do that, Shopify will bring us to their dashboard. You can see that they’re very clear about the steps they want us to take in starting our shop. The first thing they’ll ask us to do is select a plan which — as stated earlier — we’re going to choose the Basic Shopify plan. We won’t be charged at this moment because we get a free -day trial, but we will need to put in our credit card information. Once we do that, we can start adding stuff to our store so we’re going to click on Add Product. You can see that it gives us a pretty familiar interface. We have a title and a description for our products. We’re going to create a t-shirt shop and so we’ll add a title and description for our first t-shirt. We’ll also create a product type called “T-Shirts”. We’re going to skip the vendor since we’ll be selling the t-shirts ourselves. Shopify makes it very easy to drop photos into the featured image area. They will arrange it based on the order in which the images were uploaded. Next, we’ll add a price and we’ll make sure to charge taxes on that price. We’ll have Shopify manage the products inventory, we’ll add some shipping information, and we’ll say that the fulfillment service is “Manual” which means that we’ll be shipping our products ourselves. Now it’s time to add some Variants. We’re going to add two: Size and Color. When we add our variants, Shopify will create combinations of those variants in case we want to do different pricing based on the variant of the product. So once we add all of our colors, you can see that we have variations for small in all the colors, medium in all the colors, etc. We’re going to keep the pricing the same except for the xxxl shirts, which we’ll be charging $ more for. We’ll see an SEO preview and then we’re all set. We will click Save and then we can view the product on the front end. You can see that we need to pick a different theme for our products. We’ll do that next. When we go back to the Shopify admin area, the next step that we should take is to customize our online store. We can do that by clicking on the Customize Theme button in the admin area. Once we’re brought to the Themes page, you’ll see our current theme is Debut. This is Shopify’s default theme. If we scroll down, you’ll see that we have a few options to customize our theme. We can upload a custom-made theme, we can view the Shopify theme store to purchase a theme, or we can explore Shopify’s free themes. We’re going to do that. So let’s click on Explore Free Themes and then we’ll be brought to a modal that has a directory of free themes. Each of these themes has a different purpose depending on what type of Shopify shop you want. We’re going to select Simple because we’re creating a simple clothing store. When we click on Simple, you’ll see that we have the feature list as well as two styles available to us. This will make customizing the color scheme and fonts a bit easier. So, let’s click Add Simple and then that theme is added to our Shopify account. Once it’s added, we can go ahead and customize the theme. When we click Customize Theme, you’ll notice a few things. Our site now has the new theme applied on the right-hand side, we have a left-hand panel with lots of options, and you’ll notice that the color scheme is the one that we selected using the radio buttons when we added the Simple theme. Our left-hand panel is divided into two different sections: the Sections panel and the General Settings panel. Under General Settings, we can do things like modify the color scheme, change the fonts, and modify the cart, navigation and social media buttons. We can also fully change the theme’s style. So if we decide that we want the light version of Simple, we can simply do that here. We’re going to keep the Beauty style. Under General Settings, the only thing that we’re going to do is add Social Media. You’ll see that there’s a section where we can add Social Accounts so we’re going to add those so our icons show up on the left-hand side. You’ll see that as we add links, the icons show up. Now we’ll click Save Changes. If we go back to the Sections part of the panel, you’ll notice that we can modify the header and sidebar as well as the content on the Home page. If we click Header, we can select a simple logo if we want to upload one. Since we don’t have a custom logo made, we’re just going to stick with the plain text. We can also choose to show an announcement bar. So if we’re having a big sale for launch, we can choose to show that. We can also choose a link that we want to send our users to. Finally, we can add a tagline. Depending on the theme you choose the tagline is going to show up in different places. For us, it’ll show up right of the logo. We’ll click Save Changes again and then we’ll go back to the sidebar. Here we have a few settings to choose from. You’ll notice that the Social Media is showing up under the General Settings because that’s also part of the sidebar. We can also modify our Menu. There are a few different menu sections in our theme including the Main menu on the left and a Footer menu on the bottom. If we want to modify these menus, we can click Edit Menu and a new window will open up. Right now we have Home and Catalog. If we want to create a Sales page or a Blog we can do that here. However, we would need to create the pages first. If we go back to our Theme Modification area, you can see that we’re going to keep the Home and Catalog links as the only links in the sidebar. Now it’s time to modify the content on our Home page. By default, we have a Featured Collection and Rich Text area. Rich Text is freeform text that we can use to write any messages to our customers. The Featured Collection is a curated list of all of the products that we’ve decided to add. Similar to modifying the Menu, we can click Edit Collection to add products to or from our collection. We can also create brand-new collections. Because we only have one product, we’re going to stick with the single Home page collection we have. As we add more products, we will also add them to the Home page collection. Modifying the number of rows for a collection determines how many products are shown from that collection. So if we have a collection of products, but we’re only showing two rows only six products from that collection will be shown. The sort order depends on the settings for that specific collection. If we click on the Rich Text area, the panel turns into a section with a heading and body text. Here we can write whatever we’d like for our users. Once we have our text, we’ll save our changes. Finally, if we want to add another section to our Home page, we can do that by clicking Add Section. You can see that the sections are broken up by category so we can choose blog posts, another collection, an image, a featured product, and more. We’re going to choose a Featured Banner. This will allow us to upload an image to display on the Home page. Shopify allows us to select from our Library of uploaded images as well as choose from free stock images that they offer for their customers. To choose a free stock image, simply click on the category that you want and then find an image that most appeals to you or your customers. Once we have the image we like, we can click Select and now we’re all set. The last thing we can do in this editor is modify the Footer. So right now we have a group of links which are modifiable from our Menus area. We can also add content like a newsletter signup or more text. We’re going to add the Newsletter Signup. Shopify automatically has a newsletter signup area for users to subscribe to your list so you don’t have to worry about integrating with any third-party options. We’ll click Save Changes and now our Home page is set. The last things that we might want to do here are add more pages to our shop to add in the sidebar and link area. Now, you might notice that we made all of these changes, but our theme is still the same. If we go back to the Online Store area where we see our theme, that’s because we’ve modified the theme, but we haven’t enabled it or published it. So if we click Publish, we will change the Debut theme to the Simple theme. So we’ll click Publish and now our shop should look the way it did when we were viewing it in the Preview area. Our last task here is to add two more products to our Shopify shop. After going ahead and making some modifications to our current products and adding a new one, we’re all set. Our shop is now fully operational and users can start buying our products today. The last thing you might want to do is add a custom domain. Shopify gives you a free sub domain that is the “name of your shop” .MyShopify.com. If you want to add a custom domain, you could do that by clicking Add Domain and then buying a brand new one from Shopify or connecting one that you’ve previously purchased. To add an existing domain, you could do that by adding the domain that you bought and then clicking Next. Now that you’ve told Shopify that you want this domain to be your main domain, you can follow the provided instructions to modify your DNS. This will make sure that your domain is properly pointing to Shopify servers (and this is a little bit of an advanced setup). Once you make the connection, you can verify it to make sure that your domain is pointing properly to your shop. If you prefer to go the all-in-one route, you can do that by clicking Buy New Domain. Then you could search for the domain that you want and Shopify will do a search to let you know if it’s available. It will also make recommendations for domains that are available if the chosen one for you is not. Once you find a domain you like, you can click Buy and go through the purchase process. Your account will be charged and your domain will be automatically configured. Now, it’s time to set up our shop on WooCommerce which is a plugin for WordPress. A few notes on setting up a site using WordPress. Unlike Shopify, you’re going to need to have a little bit of technical background because you’re going to need to purchase hosting, buy a domain, and then install WordPress. While WordPress is incredibly powerful, it’s not an all-in-one solution where you can sign up for an account and go. If you are choosing hosting, WinningWP has a few videos and articles which you can find in the description. But there’s a few things that you might want to look for. Many hosts offer one-click or easy install for WordPress. This will make the process a lot easier. If your host does not, you’ll need to download WordPress from WordPress.org and then FTP it to your server, you’re going to need to create a database on that server, and then modify the wpconfig file. Then, you’ll need to run the installation process. We’re going to start right after the installation process, but note that these steps require at least some technical knowledge. Once WordPress is installed, you’re going to need to download the WooCommerce plugin. You can do that by going to Plugins, add New. Then, you can search for WooCommerce. It should be the first plugin that pops up in the keyword search. So click Install and then Activate. Once WooCommerce is activated, it’ll take you through a simple setup process. The first thing you’ll need to do is say where your store is located. It will then ask you for your address and type of currency as well as the products that you plan to sell. Once you fill in that information, you can click Let’s Go! The next thing that WooCommerce will have you do is set up payment gateways. There are two that we’re going to recommend here. The first is Stripe. Then PayPal Standard. Both of these are very easy to get up and running and both come native with WooCommerce. If you don’t have a Stripe account, WooCommerce can also create one for you. Next, it’ll have you configure your shipping. You can choose to do live rates, a flat fee, or free shipping. We’re going to choose a “Flat Rate” here and we’re going to make it $. If you decide to do the live rates, WooCommerce Services and Jetpack will be installed for you to get accurate local shipping prices. You’ll also want to make sure that your weight and dimension units are the correct measurements. Finally, WooCommerce will recommend some extras for you. The first is the Storefront theme. It will automatically detect if your current theme is compatible with WooCommerce. They will recommend the Storefront theme which is free and compatible with WooCommerce. This is the recommended theme for this video. It will also ask if you automatically want to calculate and charge the correct tax rate. I strongly recommend you do this. We’ll click Continue and then the store will be configured and activated. The last thing that you’ll need to do in order to use some of WooCommerce Services is connect with Jetpack We’re going to skip that step for now. Once your store is fully activated, WooCommerce will ask you if you want to sign up for the mailing list and then it’ll ask you to create your first product. If you’re transferring existing products, WooCommerce also makes it very easy to import products using a CSV file. Since we’re starting from scratch, we’re going to click Create a Product. The first time we re-enter the WordPress dashboard, we’re going to see several notifications necessary for configuring our website. Most of these we can dismiss. We will need to configure our Stripe account which we’ll do towards the end of this video. You’ll also get prompted to design your store using Storefront. Again, that’s something we’ll do later on in the video. Now let’s get to the most important part: creating our product. We’re going to use the same products that we created for our Shopify store so the first one is going to be a t-shirt. We’ll add the title and the description. You’ll also notice some similar attributes to what we saw in Shopify including product categories and tags as well as a featured image and a product gallery. This is slightly different from Shopify because we’re going to set a main product image and then add other product images to the gallery which will display below the main product image. That means that we’ll have to go through the upload process twice. WooCommerce also offers a short product description which will be displayed in designated areas for your theme depending on the theme you’re using. This allows us to create a short excerpt for the product and then go into more detail in the main description. You’ll also notice that the product data is a little bit more complicated than the Shopify product data. All of the information here is totally customizable and relegated to this box. We can choose from different types of products as well as note Virtual and Downloadable product. In order to do that in Shopify, you actually need to get a separate add-on. Because we’re creating a t-shirt, we want to create a Variable product. When we select the Variable product, you’ll notice Variations show up. This is similar to the Variants that we saw in Shopify. The first thing we’ll do is have WooCommerce manage our inventory and then go to Shipping. You’ll see that we are asked for the dimensions of the product as well. This is so that WooCommerce can generate accurate shipping information if we’re using the live rates. We can skip over Linked Products which allows us to do up and cross-sells and go to Attributes next. Attributes are required for variations so the first attribute that we’re going to create is size. We’ll also need to check that this is “used for variations”. We’ll add our values separating them by the pipe key or character. We’ll create one more attribute for color. Again, we’ll select “Used for variations” here. Once we save the attributes, we can go to Variations. Then, we can choose to “create variations from all attributes”. This will do the exact same thing that Shopify did. It’ll create pairs of variations for all of our sizes and colors. WooCommerce will warn us that this might take a little while and then it’ll get to work. Once the variations are added, we can click on one to expand it and you’ll notice that we have individual information here for each product. If we leave any of this blank, WooCommerce will use the default information that we added from the other tabs. However, we will need to add a price for each variation individually. We’ll go ahead and do this changing the price just for the xxxl shirts once again. Once our prices are set, we’ll save the changes. With that, we’re ready to publish our first product so we’ll click Publish and then we can view the product on the front end. You’ll notice that WooCommerce has generated several pages for us including a Cart, Checkout, Account, and Shop page. Our shop page is where all of our products are going to show up. Since WordPress by default is a blogging system and content management system and not just an ecommerce platform, our Home page is still going to list the blog posts. With our first product created, let’s go ahead and customize our shop. We can do that one of two ways: by clicking the Customize button in the WordPress admin bar or by going to the Dashboard, Appearance, and Customize. Here we’ll be able to control a lot of the display like the site title and tagline. You can add a logo and a site icon and more. You can also change the colors in your header and footer. We can also modify everything from the background, typography, buttons, and layout. There’s going to be a few key changes that we make here. The first is changing our static front page. Right now if you visit our top-level domain, you’ll see a list of blog posts. We’re going to change that to a static page. Namely, the Shop page. Now when users show up the very first thing they’ll see is our product. We can then move the Blog Post page to another page that we’ve created. We’re also going to modify the widgets that are displayed in the sidebar. Again, they’re very blog-centric. We want to make this more of an ecommerce shop. Once we remove all the widgets, our shop automatically resizes to take advantage of the full width. That’s how we’re going to leave our shop page. But the sidebar isn’t the only place where we can modify our widgets. You can see that we have a widget area below the header as well as four columns in the footer. Right now, there’s nothing in those areas, but if you want to add auxiliary information, I would recommend you add it there. Feel free to experiment with the header and footer colors, the background color, and typography in order to make the site look more in tune with your brand, but these are the changes that we’re going to make in this video. Next, we’re going to add another type of product to our page. In the Shopify section, you might have noticed that we added two new products a barista shirt and a sticker. Since creating products is pretty similar across the board in Shopify, we didn’t show those. However, we are going to show creating a sticker product because it is a different type of product. We’re going to go back to the Add Products page and create a new product called, “Pants Optional Sticker”. Then, we’re going to add the description, we’re going to create a new category, and upload our images just like we did last time. However, for product data, we’re going to keep this as a Simple product. You’ll notice that we don’t have the Variations tab and now we can set the price right from the General tab. That’s because a Simple product does not require variations. It’s going to have one price across the board. Everything else will remain the same. We can choose to manage the stock within WooCommerce and we can make sure to choose the right shipping information. Once we do that, we can click Publish. You’ll notice that we can’t see the entire image unless we hover over it. That’s because Storefront automatically uses square images. You’ll want to keep this in mind if you decide to use WooCommerce for your store. You’ll want to create square images for the previews. One advantage of this is that all of our images are the same height and width which gives us a cleaner looking grid compared to what we saw on the Shopify page. With all of our products created, it’s time to do one more thing and that’s connect our Stripe account. To add our Stripe keys, we’re going to go to the dashboard and then click on “Set Your Stripe Account Keys.” This will take us to the Checkout settings area of WooCommerce. Here we can have Stripe enabled and then we can add our Test and Live keys. We’re going to want to add both because we’ll need to test our site thoroughly before we make it live. Unlike Shopify, we’re using our own instance of WooCommerce which means that, while very flexible, it won’t be the same instance across every WooCommerce site. To add your test and publishable keys, you can click on the link above the Stripe title and then copy the keys that you see here. These are going to be your Live keys. If you want to view the Test keys, you can click View Test Data. Simply copy these keys into your WooCommerce shop area. Make sure that the Live keys line up with the Live publishable key and secret key and the Test keys line up with the Test keys. You don’t want to mix those two up. Once you add the keys, you can click Save Changes. The last thing that Stripe is going to tell you to do is add an SSL certificate. There are several ways you can do that, but the best way is through your hosting provider. You can get a free or paid SSL certificate through them. Once that’s enabled, you can check the “force SSL option” in the WooCommerce settings area. Make sure to only do this after you have a valid SSL certificate or you may get locked out of your WooCommerce site. With your payment gateway configured and your SSL certificate installed, you’re now ready to start accepting orders on your WooCommerce site. But, again, remember to test thoroughly. You don’t want to have any launch issues where people cannot pay you for products. With both our Shopify and WooCommerce sites set up, let’s take a look at some of the pros and cons of both. For Shopify, the pros are that everything happens within Shopify.com. You don’t need any technical knowledge to get a Shopify site up and running; it handles everything for you, most notably payments and security. You can get started in a couple of minutes (a lot faster than you can with WordPress and WooCommerce). And there’s support. As for the WooCommerce pros, WordPress and WooCommerce are free, open-source software, which means they technically don’t cost anything to get up and running. There are a lot of themes and extensions. WooCommerce is also a very popular platform. It gets frequently updated and has a lively community of developers and users. And it’s extremely customizable. As for the Shopify cons, you never really have full control over your shop because Shopify owns the platform. The customization possibilities are limited compared to WooCommerce and you’ll need to add extensions to do things like have downloadable products. You’ll still need to hire a developer for a truly custom design and that can get even more expensive on top of the minimum $ a month you’ll be paying to use Shopify. For the WooCommerce cons, launching a site on WordPress, and therefore WooCommerce, requires additional costs like a domain and hosting. You’ll need to do some technical heavy lifting because WooCommerce is its own separate platform. You’ll also need to be at least somewhat familiar with shipping and taxes and you’ll need to set up your own payment method. There’s also no support per se. You can get some support through WooCommerce.com and you can hire out third parties to support your WooCommerce site. So which one should you use? The winner is Shopify if you need a site for your shop up and running quickly and easily. There’s no better platform than Shopify for that because they handle everything for you. However, WooCommerce is better if you want complete control over your platform to customize it or sell non-traditional products like digital products, memberships, or courses. Or if you want a content site like a blog along with your shop, WooCommerce is the way to go because it’s built on top of WordPress. That’s it for this video. If you have any questions, make sure to post them in the comments, subscribe to this channel, and to learn more head over to WinningWP.com.
Anything to add?
