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 making 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)

create a blog

2. Create a 'New Page' at your blog

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

create a static page

3. Copy your store embed code

Embed code is the magic ingredient to easily get your store inside your blog.
It's like embedding Youtube's videos, nothing too complicated. Just input your store url and you will get the code to paste on your blog.
If you want you can even customize the width of the store content.

Select the code and use your left mouse button for copying it.

4. Paste your store embed code

Again at your blogger admin dashboard, browse to 'Pages' and Edit your recently created New Page. Paste the code and publish the page (update it):

embed widget at blogger

5. You're done!

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

Best Results

In order to achieve the best results with your integration we recommend one extra step:

  1. Select "Fluid" template.
    • Fluid is a responsive theme which is resized automatically to the width available.
    • Besides adjusts to smaller screen sizes, like on tablets or smartphones it also adjust to the available size on the blog or website where you embed your store.
  2. or, if you are using another template, add the following Javascript code after your </body> (ending body tag):

    <script type="text/javascript" >
      $(document).ready(function() {`
        if (parent.socket != undefined){ parent.socket.postMessage(document.body.clientHeight || document.body.offsetHeight || document.body.scrollHeight);}`
    < /script >

This allows your store widget to resize it's height automatically to the height of it's content, for example, on a long "Category Page" your widget store will expand and contract on the shorter "Contact Page".

javascript resize heigh code

Platform Details

Blogger (optional)

For a faster and accurate loading of the Widget library, you should load http://assets.jumpseller.com/lib/widget.js at the <head> section of your blog:

  1. Go to your Blogger Administration Panel
  2. Choose "Template"
  3. Edit HTML
  4. Search for following Javascript's include section (inside <head> tag) and add your Widget Javascript too:
    create a blog