How to Create an E-Commerce Website Using the X Theme

- 20 Comments

This is a guest post by Aigars Silkalns.

E-commerce is booming rapidly all across the world with global sales reaching $1.5 trillion. In an economy that’s shifting towards online shopping, it’s no surprise that webmasters are taking to the Internet to establish a full-on web presence for their businesses.

X theme provides an excellent e-commerce platform for both budding entrepreneurs and reputable businessmen alike. It’s got everything you need from shopping carts and product reviews to an extensive list of payment gateways.

In this article, I’ll run the rule over X theme and highlight the features it has on offer from an e-commerce standpoint. I’ll also suggest some useful plugins and extensions you can add to supplement the in-built technology. Finally, I’ll conclude by walking you through an in-depth tutorial on setting up your e-commerce site using X theme from scratch.

Let’s put this all into context before we begin.

An Introduction to X Theme

X brings a complete WordPress e-commerce solution to the surface that lets you sell practically anything online from material goods to digital downloads. With this all-in-one theme you can establish a single storefront on your WordPress site or go big with an entire e-commerce network – no wonder it’s ThemeForest’s fastest selling theme of all time.

Themeco, the developers behind X, proudly boast that it’s the first of its kind, referring to its Stacks feature. Stacks are versatile, one-click unique designs on top of the X theme itself (not to be confused with child themes) that enable users to set up a niche-specific site in minutes. As of this writing, X theme comes with four Stacks – Integrity, Renew, Icon, and Ethos.

The theme comes with the Cornerstone page builder tool right out of the box which adds another layer of customization options ensuring your site’s uniqueness in the crowd. X offers over 20 extensions that integrate seamlessly and work to perfection with every license — and they’re all free to use!

Let’s take a quick look at why you might want to use X theme for your e-commerce site.

5 Reasons for Selecting X Theme

X theme is loaded with premium functionality and offers some of the best features you’ll find in WordPress themes. But is it really the best option when it comes to an e-commerce set up? Yes! Let’s go through some of the standout features X offers from an online shopping stance.

Endless Design Possibilities: X doesn’t have a single shortcoming when it comes to the theme’s overall design and its aesthetic appeal. Aside from its in-built Stacks functionality, the latest update of X also features the powerful Cornerstone page builder tool that enables users to fully customize their site — in the true sense of the word. This dual-customization hierarchy guarantees that no two sites created with X theme will look the same.

Marketing & Content Shortcodes: Pretty much every premium theme nowadays has the standard set of shortcodes we’ve come to adore. X theme has all of those and more. The Responsive Visibility shortcode and Table of Contents are a great addition to any e-commerce site and they’ll help your site rank better with Google.

Multiple Layouts: Although Integrity is X’s labeled business Stack, users can create an e-commerce site using the others too. Depending upon your niche and target market, the Renew shop, Icon shop, or Ethos shop may serve your viewership better. Best of all, if you can alternate between different Stacks with one click to evaluate their appearance with your site’s content.

Extensions Galore: The extensions and plugins ecosystem you can leverage with each X license is beyond extraordinary. Each extension is handpicked for its guarantee of optimal performance and premium functionality. It includes ConvertPlug, Google Analytics, Revolution Slider, Visual Composer, Smooth Scroll, Olark Integration, and many more. Valued individually, these tools would end up costing you $1,000!

Customer Support: With every license, users will be able to avail exclusive support from Themeco and get prompt assistance for any issues they encounter with the theme or any of the third-party plugins/extensions that come with X.

Assuming you’re convinced that X is the best (which isn’t too far-fetched by a long shot), let’s get on with the tutorial!

Step by Step Guide to Creating an E-Commerce Website Using X Theme

In this section, I’ll walk you through a step by step tutorial to help you set up your WordPress-based e-commerce site with the X theme. We’ll harness the powerful functionality it has on offer and pair it with selected plugins and extensions to provide you with the ideal online store and optimally maximize your customers’ shopping experience.

Step 1: Select a Stack and Style Your Site

Once you’ve installed X theme to your WordPress site, the first thing you’ll have to do is evaluate your e-commerce site’s needs and select the Stack that’s most appropriate for your online shop. X theme offers four Stacks currently, each with their own set of unique features and style:

One theme with four unique designs.

One theme with four unique designs.

  • Integrity. The business Stack featuring an all-purpose design that is available in both light and dark versions.
  • Renew. The Stack with the flat design and clean lines that is ideal for blogging sites and creative agencies.
  • Icon. Modern and minimal, this Stack is big on styling enabling users to leverage its custom colors and unique layout options.
  • Ethos. This Stack’s built-in carousel feature and real-time category filtering are suitable for photography and magazine based sites.

Let me take a moment to recap on our earlier discussion of X’s Stacks from an e-commerce perspective and state that each and every one of these is suitable for creating an e-commerce site on top of X. I strongly suggest that you select the most appropriate Stack after analyzing your site, the products you’re going to sell and the market you’re aiming for.

For the purpose of this tutorial, I’ll use the Integrity Stack with X theme to demonstrate how you can set up an e-commerce site.

  1. Login to your WordPress Dashboard and navigate to Appearance > Customize.
  2. From the customization panel on the left, click Stack.
  3. Select the Stack you’d like to use and view it in the preview area.
  4. Click Save & Publish.
Select a stack from the WordPress Customizer.

Select a stack from the WordPress Customizer.

Once you’ve saved your Stack of choice, explore the other customization options in the WordPress Customizer and style your e-commerce site accordingly. By default, Integrity is a professional-looking, monochromatic design. You can mess around with the layout and design settings to make it coherent with your business’s brand.

Step 2: Add WooCommerce Functionality

WooCommerce is the most popular plugin that’ll transform your WordPress site into a full-on e-commerce site in minutes. Once you’ve selected a Stack and tinkered around with its default design, it’s time to get down to business — adding WooCommerce functionality.

In this section, we’ll install the WooCommerce plugin, set it up on our site using its in-built setup wizard and add our first product! Sound good? Let’s begin.

  1. Navigate to Plugins > Add New from the WordPress Dashboard.
  2. Search for ‘WooCommerce’ in the Search Plugins located in the top-right corner of the screen.
  3. The WooCommerce plugin is the first search result. Click the Install now button to proceed with the installation.
  4. Once the plugin is installed, click the Activate Plugin link.
Click Install now to install the WooCommerce plugin

Click Install now to install the WooCommerce plugin

You will be prompted with a WooCommerce Setup Wizard. Click the Let’s Go! button to start setting up the plugin.

The WooCommerce setup wizard

The WooCommerce setup wizard

On the next screen, Page Setup, you’ll be asked to add a few essential pages. Click Continue and the wizard will do it for you automatically. You can manage them later on from the Pages screen.

WooCommerce will automatically add the essential pages.

WooCommerce will automatically add the essential pages.

Next, you’ll be asked to provide a few details about your soon-to-be e-commerce site in the Store Locale Setup screen:

  1. Location of your store.
  2. The currency you’re using.
  3. Unit for product weights.
  4. Unit for product dimensions.

Click Continue once you’ve entered all of the required information.

Enter store location and currency details in the Store Locale screen.

Enter store location and currency details in the Store Locale screen.

In the next screen, you’ll be able to customize your store’s Shipping & Tax Setup which enables users to set up options for shipping products and charging sales tax on purchases. Click Continue to move on to the next step.

Add shipping and tax options, if necessary.

Add shipping and tax options, if necessary.

Setting up payments with WooCommerce is super easy. By default, you can opt for online payments through PayPal or select from one of the three offline payment gateways:

  1. Cheque payments.
  2. Cash on delivery.
  3. Bank transfers (BACS).

Note: If none of these payment options appeal to you, click Skip this step and install a WooCommerce extension later on that features additional payment gateways.

Click Continue once you’re done setting up payment options.

Select your preferred payment option.

Select your preferred payment option.

That’s it! The setup wizard should be complete now and you’ll be prompted with a screen that says ‘Your Store is Ready!’ and calls you to create your first product. Click on the Create your first product! button.

Woohoo! You’ve completed the setup. Time to create your first product.

Woohoo! You’ve completed the setup. Time to create your first product.

You’ll be redirected to WooCommerce’s Products page which looks a lot like the Add New Posts page. Here, you can enter your product’s details.

Adding a new product to your store is super easy!

Adding a new product to your store is super easy!

Click the Publish button to display your first product on your new e-commerce site. Once you’re done, the product will be added to your store. You can view it by navigating to your site’s Shop page.

Click on a product to view its details.

Click on a product to view its details.

It’s as simple as that. You can add more products to your store by following the same method. For more in-depth guide on how to setup WordPress powered website you might want to read this step-by-step guide.

Step 3: Enhance X Theme Functionality

Installing and setting up WooCommerce was the first (and most important) step. In this section, I’ll introduce you to some extensions you can install (all free with your X theme purchase) to further enhance your e-commerce site’s functionality and boost user experience.

Let’s take a look at what’s in store. Navigate to Addons > Extensions from the WordPress Dashboard.

  1. Content Dock — The Content Dock extension is designed specifically for X theme. It enables users to elegantly display content and marketing offers to their customers. Users can leverage this powerful functionality to advertise upcoming offers and sales on their e-commerce site.
  2. ConvertPlug — ConvertPlug is an opt-in form plugin for WordPress that guarantees more leads and subscribers. The plugin features Exit Intent Detection, Reduce Cart Abandonment, Offer Coupons — all of which are essential add-ons for an e-commerce site.
  3. MailChimp — MailChimp is an all-rounder when it comes to boosting sales. This plugin enables users to target customers based on their personal preferences, behaviors, and buying history. Instead of intrusive pop-ups that’ll lessen your customers’ user experience, send them promotional emails with MailChimp’s automated email campaigns.
  4. Envira Gallery — Webmasters can utilize the Envira Gallery extension to display product catalogs or new additions to their stock elegantly while saving a ton of screen real estate. This extension is a must-have for anyone who’s all about strategic marketing.

Step 4: Use Shortcodes to Improve Your Site’s Design

Putting together an entire well-designed page using shortcodes is possible with X theme. Themeco understands that shortcodes are a webmasters best friend. X theme comes with all of the essential shortcodes we expect every premium theme to have in addition to their very own, powerful set of shortcodes.

Once you have the functionality in place, you can enter the realm of finer design elements to give your site that extra zing. The Entry Share shortcode enables users to add social sharing buttons anywhere on the page. This is essential for e-commerce sites as it allows customers to easily share your shop’s products on their social media accounts.

Adding social share buttons has never been easier.

Adding social share buttons has never been easier.

Responsive Pricing Tables eliminates the need for users to pay for premium pricing table solutions by allowing them to create visually appealing tables using a simple shortcode. This wonderfully thought up solution is exceptionally fitting for e-commerce webmasters who are selling product bundles or services.

Responsive Pricing Table shortcode enables users to create engaging tables without installing an extra plugin.

Responsive Pricing Table shortcode enables users to create engaging tables without installing an extra plugin.

Responsive Slider shortcode is a lightweight solution for displaying multiple products without exhausting your screen real estate. E-commerce sites can leverage its functionality to display featured products or new shop additions. The Responsive Slider has several customization options including, fade animation, slide animation, automatic slideshow, random order, control navigation, and slider with no container.

Responsive Slider to display featured products.

Responsive Slider to display featured products.

X theme’s powerful shortcode-filled functionality makes it one of the easiest to use themes that doesn’t compromise on visual appeal, performance, or user experience.

Real-World Examples

Now that you’ve gotten a fair idea of how to get started using X theme to create an e-commerce site, let me introduce you to some real-world sites that did the same using the Integrity Stack (the same one we used in our tutorial!).

Space Wallet

image_15

First up we have Space Wallet — an online store that specializes in selling, you guessed it, wallets. The web designers behind this professional-looking website leveraged a Slider Revolution slide to to create theirs (one of the many premium plugins included for free with your X Theme purchase). It’s neat, clean, and looks amazing on devices of all sizes.

image_16

Westgate Resorts

image_17

Westgate Resorts use X theme’s Promo shortcode to display information about Resorts, Special Offers, and their Vacation Blog neatly on their homepage.

image_18

Wrapping It Up

There’s no better time to start your online business than right now. E-commerce is trending and establishing a web presence for your store or setting up a purely online shop can prove to be quite profitable. We looked at how you can get started with setting up your e-commerce site from scratch using X theme. Hopefully, you can take things further now and launch your e-store in a matter of days.

Do you use X theme for your e-commerce website? Which X theme’s Stack did you use? We’d love to hear from you so let us know in the comments section below!

20 Comments on “How to Create an E-Commerce Website Using the X Theme”

  1. loren

    I’m really glad I read this. I’ve already built a few ecommerce sites using X but didn’t know about convertplug. How did I miss it! I can offer some really valuable AB conversion testing to my clients now. Awesome!

    1. Themeco

      ConvertPlug is an awesome tool, and we’re proud to be the exclusive theme with it currently.

      Cheers!

  2. Alfredo

    this is great article! I have been wanting to see real life use of the short codes, this is the first such reference.
    Please post examples for good use of as many short codes as you can. Thanks

  3. Max

    Hi, great article. I already created two e-commerce websites using X. Still thinking of what´ the best way to update theme X. Because an update process is always not an easy thing. When updating a theme the website will always go in maintenance mode. So what do you think how to update X and keep your Website and Shop running?

    1. Themeco

      Hi Max,

      Glad you enjoyed it! I’m not familiar with automatically going to maintenance mode on update, but if you’d like one of our developers to take a look in the forum, they’d be happy to do so.

      Cheers!

  4. Michael R Becker

    Great post! Thank you.

    Does anyone know the pluses and minuses of WooCommerce vs. WP Download Manager Pro?

    I’ve got both and I need WPDM to manage my eBook giveaways.

    Thanks for any advice.

  5. Jesse

    Great article. I am definitely sold.

    I would like to do a E-commerce site with X. Can anyone explain to me how safe doing an E-commerce site with X is supposed to doing one with a trusted platform such as Shopify?

    Thanks.

    1. Themeco

      Hi Jesse,

      One fundamental difference between X and WooCommerce vs something like Shopify is control and ownership. With Shopify you are using a service, with X and WooCommerce you run and own your own site. There are many reasons we feel this end-to-end control is better, but ultimately it falls back to your own preference. We look forward to the prospect of working together!

  6. Darran

    We are looking to move to a new theme for our site, which will mostly be an eCatalogue sort of place.
    Does this theme work with the latest WordPress and Woocommerce versions?
    4.7.4 and 3.0.4 respectively at time of writing!

    1. Themeco

      Yes, we always keep our products working with the latest versions of WordPress and WooCommerce. At times, there may be a slight delay as we have to test to make sure everything is working (generally only for big updates like the recent one with WooCommerce), but we definitely keep our customers up to date!

  7. Matthew

    Great article. Thanks.

    I would like to build a marketplace E-commerce site with the functionality to allow users to list their own products for sale. I know there are other themes such as Makery & Marketica but I would like to build it with X. Is this possible?

    Thanks.

    1. Themeco

      Sure! Building something as complex as a marketplace will definitely involve some custom or 3rd party solutions but X is a great foundation for a site of any size!

  8. Shay

    Hi, I understand this is a post on X theme, but I want to ask if the Pro theme also includes the 4 stacks to choose from and if it is possible to do an E-commerce site with subscriptions on the Pro theme?

    Thanks.

    1. Themeco

      Hi Shay,

      Stacks are represented in Pro but they function somewhat differently as in Pro you are given whole builder to customize the header and footer parts of Stacks. You can definitely build a full-fledged eCommerce with with Pro!

  9. Jeremy

    Thanks! I have Woocommerce on X running. Now, if I want to add an extension to Woocommerce, will that work? For instance, I want to extend Woo with their “Product Add-ons” extension. Will X work correctly with that?

  10. Dainesy

    Can you tell me if latest products, popular products etc can be added using elements please? I’m looking to purchase and this would be an advantage

  11. Sabina

    I noticed that SpaceWallet is now on Shopify. So that leads me to think that there is limited growth with WordPress as an ecommerce solution.

Leave a Reply

Your email address will not be published. Required fields are marked *