INSTALL THE TEMPLATE
Download the file, extract file to spesific folder on your computer, login to your blogger account and select one blog that will be installed with this template, click on template menu and point your eyes to upper right corner, you will see Backup/Restore options.. Click that button and select the XML file from your directories and click upload.
After the template installed succesfully, now it’s time to start a costumizations..
CUSTOMIZE THE TEMPLATE
1. Shopping Cart Setting
The code for Shopping Cart setting is appear after opening <head>, it look like :
<script type='text/javascript'> //<![CDATA[ /* SIMPLE CART SETTING >>>>>>>>>>>>>>>>>>>>>>>>*/ simpleCart.email = 'rifkiblogger@gmail.com'; simpleCart.checkoutTo = PayPal; simpleCart.currency = USD; simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment', 'decrement','Total']; //]]> </script>
simpleCart.email
Replace with your email address.
simpleCart.checkoutTo
It have three payment method options, Paypal, GoogleCheckout and Email method. But for blogger only can using Paypal and GoogleCheckout only because using Email methode it required PHP code.
simpleCart.currency
You can set the currency by replace this line with your currency, sample usage if you using Poundsterling Currency:
simpleCart.currency = GBP;
List of available currency is located on download folder. and specifically for Indonesian Rupiah you can set to IDR, but it just a fake because Indonesian Rupiah currently not listed on paypal.
simpleCart.cartHeaders
No required any customize here.
2. Customize Background and text
This template is support for Advanced Blogger Template Designer and available for 3 customizations:
a. Body Background Color
b. Main Menu Background Color
c. Text Link Color
d. Blog Description Color
e. ShoppingCart Border Color
f. ShoppingCart Background Color
Now lets customize yor template color scheme, click Customize and you will redirect to Blogger Template Designer. You can see the option on screenshot below :
3. Dropdown Menu and Social Menu
I’m using jQuery superfish menu for drowpdown menu, superfish make it have smooth animate.
a. Top Dropdown Menu.
For edit link on top menu, find code like this :
<ul id='top-nav'> <li><a href='#'>Home</a></li> <li><a href='#'>Category</a> <ul class='sub-menu'> <li><a href='#'>Category 1</a></li> <li><a href='#'>Category 2</a></li> <li><a href='#'>Category 3</a></li> </ul> </li> <li><a href='#'>Contact</a></li> <li><a href='#'>About</a></li> </ul>
b. Main Dropdown Menu.
<ul class='nav'>
<li><a class='current' href='/'>Home</a></li>
<li><a href='#'>Product Category</a>
<ul>
<li><a href='#'>Camera</a></li>
<li><a href='#'>Gadget</a></li>
<li><a href='#'>Electronic</a></li>
<li><a href='#'>Phone</a></li>
</ul>
</li>
<li><a href='/p/sample-page.html'>Sample Page</a></li>
<li><a href='#'>How To Use ?</a></li>
<li><a href='#'>Get it !</a></li>
</ul>
c. Social Menu
<ul id='top_social'> <li class='social_facebook'> <a href='#' tooltip='facebook'><span>facebook</span></a></li> <li class='social_twitter'> <a href='#' tooltip='twitter'><span>twitter</span></a></li> <li class='social_linkedin'> <a href='#' tooltip='linkedin'><span>linkedin</span></a></li> <li class='social_rss'> <a href='#' tooltip='linkedin'><span>linkedin</span></a></li> </ul>
4. Featured Content
As you know my framework is using Automatic Slider or Featured Content on all my template with JavaScript, this is a new revolutions for blogger.
How to activate the slider?
For default it will showing your latest post, and you can change to showing your post by spesific label/category or showing post from another blog. I’m using two following code for it.
<script type='text/javascript'> //<![CDATA[ random = true; product_image = new Array(); product_image[0] = "/noimage.png"; // Image URL for product wich have no a thumbnail. product_image_width = 110; // Product image width. product_image_height = 110; // Product image height. product_image_number = 9; // Value to show item. //]]> </script>
and
<script src='/feeds/posts/default?orderby=updated&alt=json-in-script&callback=featured_product' type='text/javascript'/>
How to make it showing your post by spesific label/category?
<script type="text/javascript" src="/feeds/posts/default/-/YOUR LABEL HERE?orderby=updated&alt=json-in-script&callback=featured_product"></script>
How to displaying post from another blog?
<script src='BLOG URL/feeds/posts/default?orderby=updated&alt=json-in-script&callback=featured_product' type='text/javascript'/>
POSTING
After finished with customizable templates now is the time to try to create a post.
Notes : This template is required template post for best result.
1. Create a template post.
Go to Setting and select Post and Comments options, copy the template post bellow to your template post field.
<div class="item_image"> <img border="0" class="item_thumb" src="product_image.jpg" /> <span class="item_price">$00.00</span> </div> <div class="item_Description"> Descriptions... </div>
2. Create a Post
Now lets start to create one test post.
Step 1. Create Product Title
Give the title for this post on Post Title field. Example : Product 1.
Note : this title will used for product name on ShoppingCart, so i suggest to create short title.
Step 2. Create Product Image and Thumbnail
Upload an image as usual, set the field to HTML and copy the image URL, then paste it to your template post, recommended to use square image size ex : 140×140
Example :
<div class="item_image"> <img border="0" class="item_thumb" src="http://example.com/product_image.jpg" /> </div>
Step 3. Set The Price
Set your product price using span tag after image.
Example :
<div class="item_image"> <img border="0" class="item_thumb" src="http://example.com/product_image.jpg" /> <span class="item_price">$00.00</span> </div>
Step 4. Product Descriptions
Give a description for your product by using div tag.
Example :
<div class="item_Description"> Mauris sit amet orci arcu, nec imperdiet quam. Praesent luctus orci sit amet lectus accumsan id auctor purus rhoncus. In lorem dui, bibendum sit amet tempor vitae, tincidunt eu nulla. </div>
Step 5. Publish
check back all the code from your post and make sure everything is arranged properly. And whole should look like this
<div class="item_image"> <img border="0" class="item_thumb" src="http://example.com/product_image.jpg" /> <span class="item_price">$00.00</span> </div> <div class="item_Description"> Mauris sit amet orci arcu, nec imperdiet quam. Praesent luctus orci sit amet lectus accumsan id auctor purus rhoncus. In lorem dui, bibendum sit amet tempor vitae, tincidunt eu nulla. </div>
And then click publish.
CONCLUSION & DISCLAIMER
In making this template I spent a lot of time and effort. so I hope you appreciate me and did not remove the credit in the footer. I do not give warranty for this template.
If you think this template is useful for you, please give $2 donation for me to buy a cup of coffee so that I can keep working via Paypal to rifkiblogger@gmail.com.
Thanks for using my template !!!
Hi there, i think my future content hv some error, can u take alook? http://myrcmall.blogspot.com
Thanks
Pretty nice post. I just stumbled upon your blog and wished to say that I’ve truly enjoyed browsing your weblog posts. In any case I will be subscribing on your feed and I hope you write once more very soon!
Hi Rifki,
Thanks for the tamplate, I have try thi template and work well,
This template only can work well in for one account blog, we can’t using this template more than 1 on one account, cause the second blog that using this blog the cookies will not work normally, the item that we have aded on chart will be reset when we go to new pages. Bellow may blog to look the effect:
1. http://boysgirlsdistro.blogspot.com/ (account A the first Blog work normaly)
2. http://klinkklorofil.blogspot.com/ (account A the second Blog that using same tempalte not work normally)
3. http://www.sophieparisstore.co.cc/ (account B the first Blog work normaly)
I hope my opinion will helping all, and note if you have 2 online business and you want using this template for all your business, please make diferent account
Thanks
Hey Can u please tell me how did u achive to get more info. Whenever I try this blog address..More info button wont work..
Find
class=’more_info’ href=’javascript:;’
and replace it with
class=’more_info’ expr:href=’data:post.url + "#more"’ expr:title=’data:post.title’
It will work.
Hi Ismail I really like how you set up the category links on your blog how did you do that I have been trying to figure that out. When you have time please email I would like to also set mine to work with the links on the categories on top. Thank you
Hi Ismael…i don´t speak so well english, I hope you undestand me. I just have download the Blogger Store Template, I´m new with javascript and i don´nt know how can i add the 4 files js in the template. Can you help me please…i have customize some part of my template, but with the js i have problems…please help…i speak spanish…but i understand english more than I can speak…
Thanks…
María Angélica.
how to change the account??
Kang Rifki, hatur nuhun pisan, template nya sangat berguna dan pas banget.
Semoga semakin sukses dan bertambah rezeki
salam ti Bandung
Hi Rifki~
thank you so much for the template!! Everything is working great!
I just have a problem with the slider, it’s not showing up =( I tried everything! from setting the labels having more than 6 posts and using the template for my posts and it’s not showing up!
also is it possible to have an email check out rather than straightaway pay with paypal since I have to add the postage in
thanks soo much in advance!!
i’ve fixed the slider =)
just wondering if it’s possible to make the slider change a bit slower and also is it possible for an email checkout rather than straight to paypal because I need to add in postage costs and also any possible discounts
thank u soo much in advance =)
Hi Yuki,
can you share to me ow you fixed the slider not showing? I’m having the same problem. I would really appreciate it.:)
hi jizelle,
i had the same problem before but it was fixed automatically,
you just need atleast 8posts, not 6
gan, kl kembangin menu dropdown ke sub-sub lg caranya gimana?
when you click “more info” below the product. nothings happen. how can i make it work? thanks
agan rifki, mau nanya nih
kalo untuk total harga kan dalam USD ya?pengen dijadiin Rupiah gmn yak?thanks
//>>>>>>>>>>>>>>>>>>>>>>>*/
simpleCart.email = ‘your_mail@email.com’;
simpleCart.checkoutTo = PayPal;
simpleCart.currency = IDR;
simpleCart.cartHeaders = ['name','thumb_image','Quantity_input','increment', 'decrement','Total'];
//]]>
Untuk Rupiah tidak bisa di ubah karena pembayarannya menggunakan Paypal
Kang, hapunten abdi tos ngangge template nu iyeu, teras siga masih aya nu kirang keneh, teu terang naonna sareng kedah dikumahakeun? blog abdi :prota-promes.blogspot.com. hatur nuhun sateuacanna.
Why re-assigned right siderbar show like this so you? I have resized the image is 200x90px but again not showing the correct size and frame members not entire widget is not the entire picture, please help me.
This is my picture error of blog: http://i176.photobucket.com/albums/w191/izuka_ren/Error.jpg
http://buystoreindia.blogspot.com/ This is just a demo!!!
Hey Rifki,
See the Red Label for Price is set acording to pixel from height!!!
You can see in 1 post on my site it comes in middle!!! Set the attribute such that “pixel from Bottom:5px” so that such error does come and uniformity occures
My Facebook Id: Facebook.com/Ishanplus
Salam keal ya kang. Bagus templatenya kang. Mau nanya kang, mudah”an di jawab. Gini kang saya kan newbie. saya mau jualan produk-produk amazon make template ini bsa ga? soalnya cari sana sini buat sistem pembayarannya bisa ga di integrasikan ke keranjang belanja Amazon langsung? klo bsa caranya gmana kang? makasi
Hi! Love your template but one question. Is there a way to stop a customer from ordering more than 1 piece of a product if, for example, there is only 1 in stock of that product?
the slide not fount, help
Hi, here at my site: http://soloimp.blogspot.com , i dont know why only i can see 7 products at the first page when i have for 8 slots. Thanks.
hi there, your problem is happening to my blog on grid view.
i think it happens when the title is too long it uses 2-4lines so the product’s grid expands so it is taking more space on the grid itself…while other product’s title are only 1-line..
Is there any chance to add products in Argentinian Peso(ARS) ?
wonderful template! really love it!
Thanks for the tutorial, look at the porch entry is not made up my blog, how do regular? I created this blog http://polunshop.blogpot.com
Hi Rifki,
Very good job with this template.
However, I installed the template on my blog and it is not the way it should. I wonder what might have happened? Notice how is the appearance of the store with the template instaldo correctly.
http://coffeeindiestore.blogspot.com/
hi rifki
how can delete the “more info” button since if i click on the post/product title it will open to the products information anyway. i want to replace the button with an option of color or size instead.
Thank you