A few weeks ago we posted about the new PayPal Labs program and widgets for Facebook and MySpace. Yesterday, PayPal officially launched their Storefront Widget Beta. These widgets allow users to embed virtual PayPal storefronts into blogs, sites, social profiles and anywhere else where HTML can be embedded in the code.

Basically, blog, site or profile shoppers select products or items from the widget to add into the shopping cart, then they checkout and pay using PayPal. The idea for storefront widgets was suggested by PayPal users as a way for them to sell easily from MySpace profiles, Facebook profiles and more (Note: At this time, the PayPal Storefront is not available for MySpace, you can get notified when it is by clicking here).

Create your own online store with the PayPal storefront. Upload products, set prices, and start selling on your website or blog. Features include quick store setup, fast browsing, fast checkout and simple payment processing.

Here’s a sample Storefront Widget, items cannot be added or checked out from this example…

Here’s a quick rundown of new Storefront Widget features…

• Viral storefront distribution – Fans of a seller’s products can click on the “Help sell these items” link on the badge to copy the storefront HTML code for hosting on their websites. The storefront is an exact replica of the original and all orders and funds are securely delivered to the owner of the original storefront widget.
• Storefront display – Sellers can display thumbnail images of all of the items for sale through the storefront widget. When a buyer hovers over an item with the mouse, an enlarged view of the item is shown.
• Item navigation - If a buyer pauses while viewing an item, the other items in the storefront will rotate into view.
• “Sold Out” items – When an item is sold out, sellers can define whether the item is suppressed in the storefront or appears with the “sold out” label.
• “Store Closed” display – When a seller is not able to process orders, for instance, due to a vacation, the “store closed” sign communicates to buyers that while they may shop at the storefront, they may experience delays in receiving items.

Creating a PayPal Storefront Widget:

Before You Begin: Login and click “Create New Storefront” button

Go to the Paypal Storefront Widgets Beta page and login to your PayPal account using the appropriate email address and password. You will get redirected back to the PayPal Widgets Beta page and you will see that the “create new storefront” button is now not grayed out, and should be showing a yellow button you can click to begin step 1.

Create Your Storefront (Themes & Colors)

Simply select 1 of the 25 available themes or 1 of the 23 available colors for you to use on your new storefront widget. You will see the sample widget to the right of the theme and color chooser change as you go through the different colors or themes and select one or the other to try out on the widget.

Create Your Storefront (Title & Logo)

Simply type your company name or title text into the appropriate box, called ‘Store title’. Then enter the path to your store logo on the Web to a file location where you have a logo uploaded that is 60 pixels wide by 35 pixels high. After that, you can choose the color to change the store title text to if you want, or you can just leave it to default, which is black. You will see the example widget to the right change as you add the title, logo and title text color options.

Create Your Storefront (Store Policies)

Simply type your company shipping, contact and any additional store information you wish shoppers to view while buying from your new widget. When you update the information in the shipping, contact and additional policy sections you will see the example widget to the right update as well.

Create Your Storefront (Products)

First, you will need to configure the product settings for the widget. Simply select to show all products, currently selected product and alternatively you can choose whether to rotate your widget products every 3 seconds. Next, set the inventory configuration by selecting one of the choices for instances when the product inventory runs out or reaches 0. Choose either to show the product as sold out or to hide the product until inventory is restocked.

Next, you will need to figure out how many products you wish to offer through this widget. Product are represented by the ‘Sample’ images near the top of the product details and inventory sections. To add more products simply click the plus button and another ‘Sample’ image will appear. Each image represents one product, so you will want to make sure the first image in the horizontal list is highlighted before entering in information for the first item in your widget. To remove products, simply use the minus button next to the plus icon that you clicked to add more products.

Once the number of products are selected, simply enter in your product information for the first item including its product title, price, description and image path. Images should be 188 X 168 for best results. After that, you will need to click on the inventory tab next to the details tab in order to set the inventory for the product you just added, along with any additional notes about that item. Once you have finished one, click the Sample image for the next product and fill in the information for that item. You will continue following the same steps until all the Sample images are changed to actual product images and have the corresponding information under each item.

Create Your Storefront (Open or Closed)

The last step for creating your storefront asks whether you want to display the storefront widget as ‘Open’ to shoppers or whether you want the storefront to appear ‘Closed’. The closed temporarily choice has two other options including the ability to type a custom message to shoppers and a feature that allows shoppers to shop and place orders when the store is closed. Once you have selected one of the two choices and any alternate options, the store widget will reflect the changes and show shoppers an open or closed message, depending on what option you chose.

After Storefront Is Created: Click “Step 2 Update Your Storefront” and “Update Storefront”

To publish your new widget simply click “step 2 update your storefront” followed by the “update storefront” button. If something happens during the update or your widget gets accidentally deleted, you can still re-publish your storefront by clicking the corresponding anchor text in italics.

That’s it, you’re done. Simply grab the HTML and embed it into your blog, site or profile pages!!