Adding a professional looking, functional and mobile friendly storefront to an Office 365 public site is something a lot of people want to do but there isn’t much information out there about the best way to do it. I recently reviewed a couple of options for adding ecommerce functionality, and thought it would be helpful to provide a little tutorial on integrating the best of the bunch – the FREE Ecwid ecommerce widget – into a Sharepoint 2013 public site. See it: You can see a live demo store here »Get it: You can sign up for a free Ecwid account here »
Create Ecwid Account
Since my concern is integration with Office 365 (and the Ecwid interface is so intuitive), I won’t go into detail about how to build or manage your Ecwid store. A free Ecwid account has a lot of pro features including order tracking, inventory control, product galleries, product options and tax and shipping options. I also suggest you use the product import feature – it’s very easy and a big time saver. I had 20 or so demo products set up and the store operational in about 10 minutes.
Set Up A Page
If you want the same layout as my demo store », choose the left sidebar page layout. You’ll be adding the categories widget in the sidebar and the product section/cart/checkout in the main content area of the page. You can of course vary this to suit your needs. You only need to create one page – Ecwid uses ajax to display the different parts of your store in the same content area. The widgets are “smart” and interlinked – so once you add them to a page, you can navigate the entire store, view the cart and checkout.
Go back to your Ecwid account. At the top of the dashboard page, you’ll see all the code snippets you can use:
Product Browser Widget Code = Main product display – will show categories, individual products, cart and checkout in same block.
Bag Widget Code (recommended) = displays a shopping “bag” and its contents plus you can drag and drop products into it.
Categories Tabs Widget Code (optional) = Adds category tabs above the main product browser.
… or Categories Menu Widget Code (optional) = Vertical list of linked categories.
Search Box Widget Code (optional) = Displays search box for products.
Start by copying theProduct Browser Widget Code. Add a script editor web part to the main content area of your Office 365 page. Edit the snippet and paste the code.
Adding a script editor web part….
Paste the Ecwid code
Copy the Categories Menu Widget Code and paste that into a script editor web part in the sidebar area of the page.
That’s all you need for the store to look good and function. You can also add theBag Widget Code but it’s a little tricky to get it positioned right in the Office 365 editor unless you know some css. Likewise the search box.
When you’re done, save and publish the page and take a look at your new store! Now it’s set up, any editing you do in the Ecwid interface will immediately update your site.
Not bad for a free application!
Visit my forum » if you have any questions. For development work, you can contact me here ». And if you think this would be useful to others, feel free to share it by clicking one of the share buttons up top!