One of the best ways to convert shoppers into buyers is to have your "buy now" or "donate" button act as a rollover button. Some claim having a rollover image for purchase/donation increases clicks by 40% or more. PayPal does not (at this writing) provide this ability. But with WB and a little code work, it's possible to create this effect yourself.
Here are the steps:
- Create two images identical in size for your custom button. One represents the "off" or normal image, the second is the "on" image visitors will see when the mouse pointer is over the button.
- Create your PayPal button as you normally would in Web Builder. Choose "Custom" as the image type and specify the "off" image you created in Step 1.
- Create an HTML box. I recommend changing the ID to something like "buy-button" so you can locate it easily. Select the HTML box and set the size equal to the size of the PayPal button. This is not absolutely necessary, but it helps in visualizing the position of the button on the page.
- Right click the HTML object and select "Object Properties" from the context menu. On the Properties dialog under "Type", select "Use <div> to set position and size of the HTML" from the drop down box. This is very important!
- Right-click the PayPal button and select "Object HTML" from the context menu. Select ALL of the code and then press Ctrl - C to copy it, then close the dialog.
- Right-click the HTML object and use Ctrl - V to paste the code you copied from the PayPal button. This duplicates the PayPal button's functionality.
- In the code you just pasted, locate this line (at the end of the code block):
Code: Select all
<input type="image" name="submit" src="images/buynow-off.png" style="position:absolute;left:0px;top:0px;" alt="Make payments with PayPal, it's fast, free, and secure!">
- Immediately after src="images/buynow-off.png" add the following:
substituting the file names of the custom images from Step 1. (Note that the "images" folder may be different, depending on how you have set up your options in WB. Be sure to use whatever path is showing immediately after "src=" in the original PayPal button code.)
Code: Select all
onmouseover="this.src='images/buynow-on.png';" onmouseout="this.src='images/buynow-off.png';"
The full line should now appear as:The key change is: src="images/buynow-off.png" onmouseover="this.src='images/buynow-on.png';" onmouseout="this.src='images/buynow-off.png';Code: Select all
<input type="image" name="submit" src="images/buynow-off.png" onmouseover="this.src='images/buynow-on.png';" onmouseout="this.src='images/buynow-off.png'; style="position:absolute;left:102px;top:0px;" alt="Make payments with PayPal, it's fast, free, and secure!">
Note the mouseover/mouseout sections each end with ';" (a single quote, semicolon, and double quotes). Make sure you get the syntax correct or the code will not execute. - Move a couple of lines up until you find this line:This line controls the positioning of the button (your numbers may be different). But now we're going to let the HTML <div> handle the positioning for us. Change the left and top values ONLY to:
Code: Select all
<div id="PayPal1" style="position:absolute;left:577px;top:295px;width:165px;height:64px;">
left:0px;top:0px; Leave all other numbers as they are. - Position the HTML object on the page as desired.
- Select the original PayPal button and delete it. (As a safety precaution, you might want to paste a copy of the button on a separate non-publishing page in case you later need to make edits.)
- Create a file publisher object on the page. In the file publisher, create a new folder that matches the name of your image folder in WB.
- Add both the rollover images you created in Step 1 to the image folder of the file publisher. This is needed as WB doesn't "know" those images are being used and won't be able to display them unless they are added to the image directory of the site by the file publisher object.
- Upload your page (all files) and test.
To see the effect: http://www.radio3k.com/purchase_scooter.php