Whether you are a business or private individual and you sell products, then there is no better use of your website than introducing e-commerce. As Internet business becomes more and more popular, so does the use and scale of the e-shops, that enable your visitors to easily browse, choose and pay for a product at any time, from the comfort of their own home or whilst away.
In many cases, building an e-commerce site is a complex and time consuming effort, requiring bespoke databases and merchant accounts. Thankfully 350pages offers a simple solution and with the combined use of its galleries and PayPal buttons you can have your online shop up and running within minutes.
This tutorial will guide you through the process of building a four item e-shop so you can apply the process to build your own e-shop. Before you start, you need to do some preparation work.
Firstly, you will need to be a subscriber of the full version 350pages and you will need to have a PayPal account. You can subscribe to 350pages by logging into your 350pages account, clicking on the My Account button, and then click on the Services tab. You can sign up for a PayPal account from your 350pages Home Control Page or My Services or here. PayPal is a third party service, unconnected to 350pages, so you will need to read and abide by their terms. For more information about PayPal you can visit the PayPal website.
You will also need to create two web pages, one called success and one called failure. One of these pages will appear after your visitor has attempted to make a purchase. For this example, these pages need to exist, but do not need to have any specific content on them (after the tutorial you can edit or delete them as you wish). Create both of these pages using the New Page option.
Now you need to configure your PayPal information in your 350pages account as this information will be needed by the PayPal buttons on your web page. Go to My Account and select the My Settings tab then click the Show button for the PayPal setting. You can set five options that will apply themselves to every button you create, so this will save you the time of setting each individual button.
In the 'PayPal business' Box, insert the e-mail address attached to your PayPal account. This is the most important box, as it specifies the account where money will be sent upon a successful transaction. For the 'Success page and 'Failure page boxes, in the drop down menu, choose the pages you created earlier, 'success' and 'failure'. This is where PayPal will redirect your users following either a successful or failed transaction so in your real live version you will want to include a message on these pages. With those options set, click on the 'save changes' button.
With your PayPal settings complete, you can now create your four item gallery. Upload 4 photos of your items by selecting the File Manager button at the top of the screen, and then select the Upload button. Drag and drop your images from your computer into the Java uploader and you will see them appear in the list in the default medium size. Then select Upload (The Java uploader can upload up to 30 images at once and it will resize them as they are stored in your File Manager).
Now everything is in place its time to create your e-commerce web page. Click on the New Page button to go to the template selector. As you will be adding images and PayPal buttons, you could select a gallery style template or a blank free-format template. For this tutorial select a blank free-format template. We selected the third one along (the Agate template).
When the page editor opens, remove the sample paragraph text so that you have the entire body for use. To remove it, hover your mouse pointer over the paragraph until the object editor bar appears, and click on the Delete button.
Click the Insert button on the top Page Controls Bar, and from the menu select the Gallery option. When the Gallery Editor opens, select the Add button. This will take you to the Selection Box where you can add your uploaded images into your Gallery. Click on the checkboxes of the four images that you uploaded, and then click Use. The four images will be displayed and alongside you can add their captions. In our example, we labelled them 'T-Shirt', 'Sweater', 'Jeans', and 'Shoes'. You may also consider giving a brief description of each of the items. Once this is done, click on the Settings tab, and change the number of columns to 2 and the thumbnail size to Medium this displays a thumbnail image that will open into a larger image/slideshow when your visitor clicks on it. In our example, we changed the canvas color to a light grey and the frame color to a darker grey. Turn the Vary Canvas Sizes option off so that all the pictures and borders will be the same size, and then click on the Save button.
You will see your gallery displayed on your page. Hold your mouse button on your gallery and drag your pointer, to move your gallery to a new position on the page we suggest that you move it to the center.
Now you need to add the PayPal buttons so that your visitors can buy your items. Hover over the first image, and click on the Insert icon that appears on the Object Editor Bar. From the menu, select the PayPal Add-To-Cart option. This will open the PayPal editor so that you can create your first button. All of the options in the PayPal editor refer to settings within PayPal so that when someone clicks on your Add To Cart button, this information will be relayed to them.
Taking the tabs step by step you will see the Details tab first. In the Description box you need to add a short description of the item being purchased. This will show up on PayPal documents sent to you and your customers. Our first button is for the T-Shirt so we entered T-Shirt here. The Code box is for your own personal records and can be used to track inventory or any other purpose, or you can leave it blank. For our example, we left this blank and then we set a price in the Price box. This will automatically be set in the currency that you have set in your PayPal account (you can change this within your PayPal account if it is incorrect).
The next options set your shipping costs for your items. You need to set your PayPal account to allow for item based shipping in order to use these options, otherwise PayPal will consider the shipping cost as part of your price. They are best used in scenarios where you want to reduce the cost of shipping for multiple items in one order or if you want to give your users a discount on their shopping.
Handling and tax are additional fees you may want to add, especially if you have to charge a sales tax or VAT. You would set up the tax to be global from within your PayPal account but entering the amount here will over-ride any tax calculations you have set up in your PayPal account. Once again, in this example, we left both of these blank.
Moving on to the Options tab. We will explain this tab more fully when you insert the next button, but for this button simply check the Include View Cart' box, and the View Cart below box. This will add a View Cart button underneath your Add To Cart button, so that your visitors can see a list of items in their shopping cart and access the checkout to finalise and pay for their order. Using this method on each item for sale will provide multiple routes to your checkout, whereas the alternative would be to insert a single View Cart button elsewhere on your page.
The PayPal tab contains the same options that you set in My Account but if there is any variation then you can over-ride the default here. When you are happy with your settings, select Save and you will see the two buttons appear underneath your T-Shirt image. It's that simple!
Now add another button under the sweater image. Follow the same procedure as before up to the Options tab. This time, you will be setting the Label features.
Creating Labels is an easy way to offer several variations of the same item without having to insert several buttons. You can set two labels but we will set only one as an example. In the Option 1 Label box, enter the word Size, and in the Opt.1 options box, enter s,m,l,xl then select Save. The button now has a drop down box detailing the size of this item so your customers can choose the size of the sweater they want, and you only needed to add one button to do it!
Try creating your own buttons on the other two items on this page, using the knowledge you've gained from this tutorial. When you are happy with your page, select the Done icon, and then select Save to publish it to the internet. You can now see the example page that you've created, with your items for sale. Looks pretty good, doesn't it?
Remember to unpublish this page so no-one accidentally finds it and tries to buy one of the items on your page - unless you have a sweater or two you don't want! You can do this by going into your File Manager and clicking on the Pub box alongside the page - this will uncheck it and unpublish it from the internet.