Getting Started Center

Create an Add to Cart Button

This article will walk you through the options for creating a basic Add to Cart button for selling items on your website. You will need to create an “Add to Cart” button for each item you sell, but you will only need to create one “View Cart” button to use on your website.

Steps 1-17 will show you how to create the “Add to Cart” button.

Steps 18 - 21 will show you how to create the “View Cart” button.

Step-by-Step Instructions

  1. On the button creation page, select the “Shopping cart” button option to start creating your button.

  2. In the “Item name” box, enter the name of the item you want to sell, such as “Event T-shirt.”

  3. Optional – The “Item ID” is not needed, but can be helpful for tracking items and inventory with other systems.

  4. In the “Price” box, enter the cost of your item. You can enter the price in most formats, such as “10.00” or “10”. The currency sign is displayed automatically, so you do not need to include the dollar sign.

    If you want customers to enter their own price, such as for a custom invoice or service, simply leave the “Price” box blank.

    If you need to offer different prices for different options, such as a larger size for $2.00 more, leave the “Price” box blank – pricing for options will be handled in the “Customize button” section below.

  5. Choose your currency. By default it is set to USD.

  6. Optional – Customize your button. Skip to step 11 if you do not need to add item options or text fields, or change your button’s appearance.

    There are several ways you can customize your button:

    • Add drop-down menu with price/option” – This allows you to set a different price for each option (e.g. a large version costs more than a small version). See Step 7 for instructions.
    • Add drop-down menu” – Allows your customers to choose an option when the price is the same (e.g. a large costs the same as a small). See Step 8 for instructions.
    • Add text field” – this allows your customer to enter personalized text (e.g. for a monogram or engraving). See Step 9 for instructions.
    • Customize text or appearance” – this allows you to use your own button image, change the words on the button from “Buy Now” to “Pay Now”, make the button larger or smaller, or remove the strip of credit card logos from below the button. See Step 10 for instructions.

    You can use any or all of these customization options in combination with each other – adding a drop-down with price options will not prevent you from adding a second drop-down menu with no prices.

  7. “Add drop down menu with price/option”. If your item has multiple prices (depending on size, color, etc.) check this box to set up your prices for each option.

    Enter the name of your drop-down menu – it should be a description of the kind of options available, such as “Size”, “Color”, “Style”.

    Enter your options and prices for each. The currency sign is displayed automatically on your button, so you don’t need to enter the dollar sign before the numbers (e.g. use 10.00 or 10, not $10.00).

    There are three options available by default – if you need more, click “Add another option,” up to a maximum of 10. If you need to remove one, click “Remove option” to remove the bottom option from the list.

    When you have finished adding your options click “Done” to apply these settings to your button. The example button on the right side will update to show you how your button will look to your customers.

  8. “Add drop down menu”. If your customers can choose some options for your item, but the price remains the same, check the box to use the “Add drop-down menu” function.

    Enter the name of your drop-down menu – it should be a description of the kind of options available, such as “Size”, “Color”, “Style”.

    Enter each of your options in the “option name” boxes.

    There are three options available by default – if you need more, click “Add another option,” up to a maximum of 10. If you need to remove an option, leave it blank – it will be removed when you click the Done button.

    When you have finished adding your options click “Done” to apply these settings to your button. The example button on the right side will update to show you how your button will look to your customers.

  9. “Add text field”. If you want to allow your customers to include some customized text on their item, such as an engraving or monogram, check the box next to “Add text field”.

    The name of the field can only be 30 characters long, so you will want to use something simple but descriptive such as “Your Initials”, “Please engrave” or “Custom text”.

    When you are finished, click “Done”. The example button on the right side will update to show you how your button will look to your customers.

  10. Customize text or appearance”. Click this option to change the appearance of your PayPal button.

    If you want to use the classic PayPal button, there are options to make it smaller or use a language other than English. You can also use your own button image, but it must already be hosted on a webpage URL.

  11. If you are able to use flat-rate shipping for your item, and don’t need to charge extra for shipping if a customer orders more than one, you can enter your shipping fee in the “Use specific amount” box. Make sure to enter the fee amount without the currency symbol (e.g., $, £, €, etc.), no thousands separator (e.g. 1000 instead of 1,000), and use the period (".") as the decimal separator.

    If you need to charge an incremental shipping fee if a customer orders more than one of an item, see our “Incremental Shipping Rate” guide.

    If you need to charge variable amounts based on order amount (monetary value), order weight, item quantity, or shipping distance, you will need to set up your shipping rates in your Profile using PayPal’s Shipping Calculator. Click here to see our guide: “Using the PayPal Shipping Calculator.”

    If you are using the Shipping Calculator, leave the shipping field blank.

  12. Enter the percentage to be used for your tax rate. If you need to have variable tax rates, leave this field blank and use PayPal’s Tax Calculator to help set up your tax rates.

  13. By default, payments are sent to the PayPal account that you used to create your button and are only identifiable by an email address or by a secure merchant account ID – this helps to keep your account’s email address safe and secure. It is recommended that you keep the default “Use my secure merchant account ID” option so that your email address is not exposed within your button code.

  14. Click “Create Button” to save your button and generate the code you need to add it to your website.

  15. You will need to copy the code in order to place it on your website. Click “Select Code” underneath the box containing the HTML. This will highlight all of the HTML for you.

  16. Right click on the highlighted code and select “Copy” (or press Ctrl+C for Windows, or Cmd+C for Apple systems).

  17. Above the HTML box are general instructions for placing the code on a website.

    If you need instructions specific to your website or additional help with putting the code on your site, contact your website provider (e.g. Wordpress, GoDaddy, Joomla, Yahoo, etc). They will be the most familiar with your website and how to get your button working properly on that particular platform.

  18. Once you have placed the “Add to Cart” button on your website, you will need to create a “View Cart” button so that customers can see and edit their order before they submit it. On the button code page for your “Add to Cart” button, click the link to “Create a View Cart button.”

    Note: You do not need to click the “Create a View Cart button” from the same “Add to Cart” button code page you first create. The “View Cart” button is tied to ALL “Add to Cart” buttons you create, so you can create it at anytime, after generating any “Add to Cart” button code.

  19. This will give you a very simplified button creation page, where you will be able to adjust the size or image used for the View Cart button. If you don’t want to make any changes, simply click “Create Button” to generate the code for your “View Cart" button.

  20. Click “Select Code” underneath the box containing the HTML. This will highlight all of the HTML for you.

  21. Right click on the highlighted code and select “Copy” (or press Ctrl+C for Windows, or Cmd+C for Apple systems).

  22. Follow the same instructions that you used to put your “Add to Cart” button on your site to add your “View Cart” button. Remember that each item gets a unique “Add to Cart” button, but you only need one “View Cart” code for your site – simply reuse the “View Cart” code on any page you want your “View Cart” button to appear.

Need more help?

Call Us

Our Customer Support team is ready to help.

Email us

We’ll do our best to respond within 24 hours.