EverWeb Codebox

eCommerce

Selling On A Website

Website sales first of all require a method of collecting order info and electronic payment via credit cards. PayPal is undoubtedly the most popular. To illustrate the basic setup, RageSW have an excellent tutorial HERE.

Note that this is not the only option for accepting payments. PayPal has a facility for Invoicing for service type businesses and a relatively new method of accepting physical Credit Card payments using a Card Reader.

Although the standard PayPal buttons are certainly eye catching, they may not fit in with your web page design! PayPal allows the use of custom buttons which need to be hosted on a server.

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">

<input type="hidden" name="cmd" value="_s-xclick">

<input type="hidden" name="hosted_button_id" value="LEDGAZU7MKN6G">

<input type="image" src="{!-ASSETSPATH-!}Images/add-red.png" border="0" name="submit" alt="Add To Cart">

<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">

</form>

Custom Buttons

After setting up a button, proceed to the Customise Button section and select "Use your own button image". A URL box will appear. Enter something like "XYZ" and copy the code - Command C.

Open TextEdit.app and make sure it is set to Plain Text in preferences. Open a new doc and paste in the PayPal code - Command V.

Drag the button image into the Assets sidebar in EverWeb and control click it to "Copy Relative File Path". Drag over the "XYZ" in the code and paste the URL in its place. This is marked in red in the code below.

Button Code

Now copy all the code, drag an HTML Snippet onto the page in EverWeb, paste the code and click "Apply".

Adjust the snippet size to fit the button image and position it on the page.

Create A Custom Button

Custom buttons can be created using EverWeb and Preview.app.


Select a shape and use the Graphics Inspector to embellish it.

Add a text box with the required text.

Take a screenshot using Shift/Command/4 and drag over the image.

Open the image in Preview by double clicking it.

Use the crop tool in the Tools menu to crop it to size.

Use the Instant Alpha tool to remove the background and create a PNG.

Save the button with a suitable name.

If you really can't be bothered with all this, click HERE to download some ready made buttons with different shapes and colors.

Click HERE to see the buttons in action, how the shopping cart works and an example of digital delivery.

Shopping Cart & Digital Delivery

Create PNG Button
Instant Alpha
Remove Background
PNG Button
PayPal Button