Add a store to your blog

Embedding an online shop inside your blog is very useful if you want to promote your own products while keeping your blog for communicating with your audience. It's a more profitable way of make money by blogging as you'll be monetizing directly to consumers and not from ads.

This tutorial will show you how to have a full online store inside your own blog under 2 minutes.

1. Get a blog

For this tutorial I am using Google's blogging service, Blogger.com, but you can embed JumpSeller's stores on any web page accepting HTML (like WordPress blogs or custom HTML websites)

2. Setup a JumpSeller's shop

Point you browser to jumpseller.com and create your online store in some seconds. Then take some time adding up some products you would like to sell and configure how you'd like to get payed and where to ship your products.

"

3. Create a 'New Page' at your blog

Besides creating blog posts at your blog admin dashboard you can also create static pages that generally are use to describe the blog author, purpose of the blog and so on. We'll use one of these pages to wrap your online store. For now leave the page content in blank, we'll use it on step 5.

4. Copy your store embed code

On the the Admin Panel of your store inside 'Settings' area you'll find your store widget code. This is the magic ingredient to easily get your store inside your blog. It's like embedding Youtube's videos, nothing too complicated.

Select the code and use your left mouse key for copying it ( or press Ctrl+C on most PCs).

5. Paste your store embed code

Again at your blogger admin dashboard, browse to 'Pages' and Edit your recently created New Page.

Paste the code, using your right mouse key ( or just Ctrl+V on most PCs ) and publish the page (save it).

This is was the full code used on this tutorial. Notice the CSS styling specific to blogger.com, it hides the sidebar, expands content's width (1000px) and grants 960px width for the store itself.

<script src=”http://libvendder.s3.amazonaws.com/js/lib.js” type=”text/javascript”>
</script><script language=”javascript” type=”text/javascript”>var target_url = ‘http://demostore.jumpseller.com’;</script>
<div id=”iframe”></div>

<!–blogger.com specific CSS styles–>
<style type=”text/css”>
#sidebar-wrapper{display:none;}
#outer-wrapper{width:1000px;}
#header-wrapper{width:1000px;}
#main-wrapper{width:960px;}
</style>

6. You're done!

You'll be ready to start selling online in less than 2 minutes. Check the final result:

Give it try!

Or, if not yet convinced check our how-to video (on english):

If you still have troubles please contact us.