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

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:

• 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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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

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.

Westgate Resorts

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

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!