How can I add a custom button with a web editing tool?

To add a custom button with a web editing tool like; Dreamweaver, Code CC and others:

  1. Click on the “Get Code” button.
  2. Next, click on the “Copy Code” button.
  3. To add the code, you will need to now access the HTML view in your editing tool.
  4. Go to the page where you want your button to be displayed and open it.
  5. Find the button within your editor’s tool bar that allows you to place your code within the page. For some it will say “split”, “edit”, or “insert”. Click that button now.
  6. Most programs will have two windows open at this point; one that allows you to see the coding and one that allows you to see what the site looks like. The cursor will display in the same area in both views to help make sure you are placing the button in the right place.
  7. Go to the code pane.
  8. Click your cursor where you want to insert your button.
  9. Find the button within your editor’s tool bar that allows you to place your code within the page. For some it will say “split”, “edit”, or “insert”. Click that button.
  10. Paste the HTML code.        
  11. The design page should now show the button.
  12. If the editing tool you are using does not have a design window, it should have a “preview” button in the tool bar that will allow you to see your website with the changes in a separate browser tab.
  13. If you are happy with the placement, hit save and/or publish.
  14. If your button did not display properly or if you see the HTML code on your published site, you did not install it properly. Go back into your editing tool and try again.

NotePad or TextEditor
If you do not want to use a website editing tool, you can still add the check-out button to your website. Window users can use NotePad and Mac users can use TextEditor. This option may take a bit more coding knowledge than using a website editing tool.

  1. Find the item/service within your Merchant Portal (MP) that you want to sell online and select it.
  2. The “Sell Online” feature must be turned on. If it is not, do so now.
  3. You may now add an additional item image and description.
  4. Select the title of the button. You can choose “Buy Now”, “Pay Now”, or give your button a custom name. Hit save.
  5. Click on “Get Code”.
  6. Click on “Copy Code”
  7. Open your editor file with plain text editor so that you can see the HTML code.
  8. Paste the code within the program.
  9. Be sure to “save as”, name the file and save it as an .htm, not a .txt.
  10. The code must be saved in the same file where the webpage you want to place the button is.
  11. Go back to your desktop and double-click the icon for the file you just pasted the HTML into.

You will be able to see your button in a separate browser. If you are happy with how the button looks, upload the page to your website. If the button did not land in the correct place, you can go back and manipulate it until it is correct.

Once you have successfully added the Web Checkout button to your site, you can start selling that item online. If you do not have coding knowledge, don’t worry, we have you covered. You can simply use a custom link that you can share via email or on any social network and get the same custom feel and easy user experience

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Article is closed for comments.