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)
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.
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):
5. You're done!
You're ready to start selling online in less than 2 minutes. Check the final result:
In order to achieve the best results with your integration we recommend one extra step:
- 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.
</body>(ending body tag):
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".
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:
- Go to your Blogger Administration Panel
- Choose "Template"
- Edit HTML