Installation and Setup

To use OrderStorm you will need to have WordPress already installed on a web server. This can be a server anywhere in the world! WordPress is a free, open source CMS (content management system) commonly used by small and medium size businesses (SMBs) and is excellent for building a search engine friendly website. You can download a free copy of WordPress from the main website: http://wordpress.org/

Video: OrderStorm WordPress eCommerce- Part 1: Installation

Install the Plugin

  1. From your WordPress dashboard, under Plugins, select Add New. Search for OrderStorm. Click on Install Now.
  2. or

  3. Download the plugin from the WordPress.org repository.
  4. Log in to your WordPress dashboard and click on the ‘Plugins’ tab and then ‘Add New.’
  5. Click on ‘Upload’ near the top of the page.
  6. Click the ‘Choose File’ button and find the OrderStorm e-Commerce plugin .zip file.   Click ‘Choose’ followed by the ‘Install Now’ button.  WordPress will now upload and install your plugin.
  7. Once the installation of your plugin has finished click the ‘Activate Plugin’ link. You will now see OrderStorm e-Commerce in ‘Plugins>Installed Plugins’

Setup

  1. The plugin creates 2 pages: Orderstorm-ecommerce-product-page and Orderstorm-ecommerce-category-page.  Set the Product page so it does not display in your menu – it has nothing on it but shortcode.  The Category page shows all of your root categories.  You can either use this page or set it to not display if you are using the Categories Menu widget in a sidebar.  Reminder:  These pages are necessary for the plugin to work.  You must not put them in either draft mode or the trash.  Simpley do not display them in the menu if you don’t want them to show on your website.
  2. You should rename these pages to something that is SEO friendly for your particular site. Note: If you change the slug in the permalink, go to the OrderStorm system administration area to Settings and enter the new slug so the plugin will continue to find these pages.
  3. The Key you see is an example key.  To add your categories and products to the shopping cart, sign up for a subscription at Plans and Pricing. After you sign up and login through the OrderStorm.com home page, you will find your key under ‘Admin>WordPress/API keys’.   Replace the example key with your new key.  Note that because this is SaaS software, even the free version requires a subscription and key.

Appearance

  1. Two widgets are added to the Widgets page during the initial installation. One for the Categories Menu and another for the Shopping Cart Status box. You can put them anywhere you want plus put them in multiple places on your site.
  2. To display the Categories Menu, go to Appearance, Widgets. Drag the Categories to a sidebar wherever you want it. Note: Your Category page must be set up with the same sidebar in order for the categories menu to display.
  3. To change the Categories Menu settings, click the arrow on the widget to open up the settings box.
  4. Maximum menu level depth can be set as 0, which displays all menus or any other number to limit the number of menu levels that fly out before a customer has to click on something.
  5. The Parent Category Key can be set if you want to display only a subset of the menu.  The Key is found on the edit category page.  Use {} around the key.
  6. An individual category can be added as the content of a specific page using this shortcode:

  7. All the root categories can be added as the content of a specific page – like the home page – using this shortcode:

  8. To change the look of the categories and products, go to the Plugin page. Then go to OrderStorm e-Commerce, click on ‘Edit’.
  9. You do not need to use the category menu widget if you have only a few products.  You can put a link to your products on any page of the site including the home page and in the header.
    • To add individual products to pages, first create the link.  The link is the product page URL/product_slug.
    • Example: http://www.orderstorm/orderstorm-ecommerce-product-page/product_seo_slug
    • Note that you create the SEO slug when you create the product.  The slug is right below the product name on the product detail page.
  10. The .css files controlling the appearance of the categories, subcategories and products are available from the plugin page. Go to OrderStorm eCommerce and select Edit.  You can completely customize colors, fonts, product display, product box sizes, alignment etc. See CSS Help.
  11. Exceptions – The font and layout of the product detail come from your theme’s css.  You can remove the page titles from the product and category pages using your theme as well.
  12. Important! Backup your .css files correctly! After you have your .css files changed the way you want them, create a copy of your .css files in a separate folder so they can be restored after an update. OrderStorm will overwrite the main plugin .css files when we issue updates. Alternately, you can use the OrderStorm eCommerce Custom Files Manager plugin.  This plugin will create a second copy of the css files.  You can make all your changes in these css files instead of in the main e-Commerce plugin files so they are not overwritten in an update.
  13. The OrderStorm Shopping Cart Status widget draws a box that shows how many items are currently in the customer’s shopping cart and the total dollar amount. Customers will click on this box to check out. Drag the widget to a sidebar. The box will appear in the side bar as soon as a product is added to the shopping cart.
  14. The Shopping Cart Status box can be included in any part of a theme. This example shows the way to include it in PHP.<?php orderstorm_ecommerce_shopping_cart_status('topright'); ?>The ‘topright’ value you see is an argument for the function’s $idSuffix parameter, used to provide a unique ID for the DIV containing the status box. Each instance should be named differently, using this suffix, in order to allow for styling or coding for them separately. The resulting ID for the container DIV element will be something like:ostrm_shopping_cart_status_$idSuffix,which for the PHP code example above would translate into:ostrm_shopping_cart_status_topright.

More on the OrderStorm e-Commerce .css Files

Note on Borders and backgrounds: Each category and product item has a border and a background that you can change as you see fit. If you are not a fan of borders and backgrounds, you can make them transparent or the same color as your background. We included default colors for the category pages so you can see where the borders and backgrounds are. The product detail page (where you add it to your cart) is pre-set to white but you can change the color of the background here also.

Visit CSS Help for information on where to change those items that affect the look and feel of the category and product pages. Be sure to pay careful attention to the instructions for backing up your .css files.

Go back to the WordPress eCommerce User Manual Table of Contents


Didn’t find what you were looking for?

For more help on the OrderStorm WordPress eCommerce Plugin checkout our Videos OR Contact Us.