For those of you who have used my blog setup or blog store setup services, I may have installed a store page template that looks something like this mini snap shot.
What is it?
It is really just a HTML table, in this snapshot, 3 columns wide and 2 rows long. NOTE: You will learn how to do this in the HTML for Bloggers webinar and it is also covered in both of my books – Beginning Google Blogger and Creative Blogging!
HTML Sample
The layout is something like this, 3 columns and 2 rows HTML sample:
<table cellpadding="10">
<tr>
<td valign="bottom">
Image Here<BR>
Description Here<BR>
Price Here<BR>
PayPal Here</td>
<td valign="bottom">
Image Here<BR>
Description Here<BR>
Price Here<BR>
PayPal Here</td>
<td valign="bottom">
Image Here<BR>
Description Here<BR>
Price Here<BR>
PayPal Here</td>
</tr>
<tr>
<td valign="bottom">
Image Here<BR>
Description Here<BR>
Price Here<BR>
PayPal Here</td>
<td valign="bottom">
Image Here<BR>
Description Here<BR>
Price Here<BR>
PayPal Here</td>
<td valign="bottom">
Image Here<BR>
Description Here<BR>
Price Here<BR>
PayPal Here</td>
</tr>
<tr>
<td valign="bottom">
Image Here<BR>
Description Here<BR>
Price Here<BR>
PayPal Here</td>
<td valign="bottom">
Image Here<BR>
Description Here<BR>
Price Here<BR>
PayPal Here</td>
<td valign="bottom">
Image Here<BR>
Description Here<BR>
Price Here<BR>
PayPal Here</td>
</tr>
</table>
We'll get into what all this means in the webinar and will be going through the following instructions step by step as well for Blogger, TypePad and WordPress (Creative Blogging covers all three platforms as well).
Using the Template
Although I have setup your store or installed a bunch of templates, many have asked, how do "I" change it? So I wanted to share a set of instructions that you can use regardless of what blogging platform you are using.
We are beginning again as though the template is already installed and you are viewing a snapshot like the store template above.
- Go to the Dashboard and go to your Pages area and then click to Edit your store page.
- Once opened in the normal, rich text/compose/visual view, you will first click on the image placeholder or the text "image here" and delete it (using the Delete key on your keyboard).
- Then immediately click the Insert Image button from your page editor toolbar.
- Locate the image of the product you wish to sell and insert it; setting its custom options – choose SMALL as the size setting or manually set it to 120px wide.
- Insert the image.
- Then select the Item Name text below it, and begin typing the product name (it will erase the existing template text and replace with the text you are typing).
- Do the same for the following: Item Description and Price.
- Then the last thing to do it is insert the PayPal button below the newly inserted product information.
GO TO PAYPAL
- Open a new browser window and go to your PayPal account.
- Click on Merchant Services.
- Choose the Add to Cart button.
- Enter an Item Name and Price (shipping and tax if applicable).
- Scroll down to the bottom and click Create Button.
- Then you will be sent to a screen in PayPal where you can copy a set of HTML code (the code for your new Add to Cart button).
- Select the code and Copy it.
GO BACK TO YOUR BLOG
- Go back to your blog and the page editor you have been previously working on.
- Switch to HTML in the page editor view (or Edit HTML).
- Then locate the text "PayPal Here" under the newly added product.
- Select the text and then Paste.
- This pastes in the new Add to Cart button.
- Click back to Rich Text/Compose/Visual and view you newly added item and PayPal button.
- Now continue these steps (3-20) until all the products and payment buttons have been added.
- When done, Publish your page and you have a store!!!!!
NOTE: In Blogger, when you insert PayPal buttons, extra space is added around the payment buttons. It's a pain in the butt, but detailed descriptions are given in my Beginning Google Blogger book and we'll review it in the HTML for Bloggers webinar. But in short, you basically have to condense the amount of lines of HTML code PayPal generates.
That's about it in a nutshell….Until next time…Happy Blogging!
Heather Wright-Porto
www.BlogsByHeather.com
P.S.
To view live samples of store setups I've done using a template:
Related Articles: