How to Add Amazon Search Box to WordPress Using HTML

There are two ways with which you can add an Amazon search box to your WordPress site (or any site, for that matter).

  1. You can use one of the inflexible search widgets that are provided in the Amazon Associates Central, or
  2. You can create your own Amazon search box using HTML and have total control over how it works

I’ll show how Amazon search box widgets work, but I’ll then talk about the better way to create an Amazon search box using plain HTML and how to add it to WordPress.

Amazon Search Box Widgets

Amazon has two search box widgets. One is simply called Search Box and the second is called Search 2.0.

As you see in the screenshot below, all you can do with the standard search box widget is set its size and embed it somewhere on your site. You don’t have any other configuration options. That’s pretty inflexible, I think.

amazon-search-box-configuration

Amazon Search 2.0 Widget

The second option is using the Search 2.0 widget. It’s a lot different from the standard search box.

amazon-search-20-configuration

As you can see, it has a lot more configuration options, but in my opinion, it provides an awkward search experience to the user. It returns the search results within the widget itself! I, for one, don’t like that.

Enter,

So, why not just have a normal HTML search box that looks like this?

amazon-html-search-box

Or this actual live version:

It is possible. And using this normal HTML, you have complete control over the CSS and HTML.

The Actual HTML

The actual HTML for the search box is simple

<form action="http://www.amazon.com/exec/obidos/external-search" method="get">
    <input type="hidden" name="tag" value="ms084d-20" />
    <input type="text" name="keyword" size="20" value="" />
    <input type="submit" value="Search Amazon" />
</form>

Replace ms084d-20 with your own Amazon Associate ID and embed this HTML where ever you like. You can embed it in the sidebar using the WordPress Text widget that allows you to add any arbitrary text or HTML to the sidebar.

And because this is a simple HTML search box, you can modify its appearance using CSS.

When the user clicks on the Search Amazon button, they’ll be taken to the results page on Amazon.com and the commission for any purchase they make will be credited to you!

25 comments. You can post one, too!

  1. Matt

    How do I center the “search amazon” button under the search box?

  2. Hi,

    Is it possible to customize the search function so that when you enter your search query, it produces a list of results, but limited to a keyword?

    For example if I wanted users to be able to search anything “left handed” I would limit the search results to keyword “left handed”.

    Also, I was wondering if you could customize this html so that it returned the results on another frame in your website instead of a new page, and if you could customize how the search results were displayed.

    Any insight would be really helpful!

    Thanks,

    Alden

  3. Will

    MK, I’m confused where I have that form action code. I already see the wp file through wp dashboard ( widget.php, sidebar.php).. But I don’t know on what file I have to put that form action code.
    Would you mind let me know on what file I should paste that code?
    Thanks

    -Will-

  4. Will

    MK, in order to place the search from, you said we have to have complete control of the CSS. I wonder where should we place that HTML you give it to us. I mean on what file of our WP theme?

  5. C.A

    Awsome cool info. I will use it to it’s fullest. thanks.:]

  6. Thanks for the simple way of doing this search box! Cheers!

    – Andy

  7. Hi MK,
    truly awesome tutorial for me anyway can you tell me how to make appeareance of search box more proper…my “search amazon” in the box not centered yet…any suggestion really appreciated.

    regards.

  8. NJD

    Can this form be revised to return a list of Amazon “customers who bought similar items”? Thanks!

  9. Hi Winkpress, Is it possible if I want to enter specific keywords into the search results?
    Thanks

    • What do you mean? This search box is for users to search for stuff on Amazon from your own website. If you want to refer your users to a specific search result page on Amazon based on a certain keyword, perform the search on Amazon yourself and then generate an affiliate link for that results page. Then paste that link on your site.

  10. Hey M.K. Thanks for the guide. I was wondering if you ever noticed the search field rendering in different widths depending on the browser used. For example when I add the custom html amazon search to my side bar and load it in chrome the field is within the sidebar however when I check it out in firefox the field width escapes the sidebar. I tried altering the size value and when I do that and make it look presentable in Firefox it looks very small in chrome. Could the source of this problem be font related?

    Sincerely,
    Alex

    • Hi Alex, There’s an example of an Amazon HTML search box right on this page. If you view that search box in Chrome and Firefox, you’ll notice that there’s small variation in the appearance. But it’s not that bigga deal. It certainly doesn’t mess up the layout of the page. At any rate, this is a CSS/design problem more than anything—and I suck at that. Sorry.

  11. Bill

    I tried your script – and it returns results throuigh yahoo – but if I do a “link cvheck” it fails – which means I will NOT get paid – the search is located on a test page

    http://www.webuytosell.com/test.html

    • M.K.

      I tried your search box. It seems to be working fine. Your Amazon ID is “httpwwwthes0e-20″, isn’t it?

  12. While I have your attention, I would like to ask you one question: what has been your experience with the Omakase links? I tried them long ago and the ads they provided were no match for my content, no matter what. Have they improved since then? Just curious :)

    • Honestly, I have never tried Omakase on a live website. But I can totally understand if Omakase links didn’t match your content. It’s not easy analyzing a web page’s content and determining its topic in order to show relevant ads. I guess you have to make sure that the Amazon web crawler can access your pages and read them. If you use too much flash or unsemantic markup, it’s gonna be hard for machines (like Google and Amazon bots) to understand and analyze your content.

  13. Awesome! Just the information I have been looking for. You did not mention that their flash widgets terribly slow down the webpage – one of the reasons I don’t like them. And the plain HTML search form does not have a target_blank option so that is also not an option for me. Yours is perfect! ;-)

    One thing: I would like to provide a link to Amazon homepage and Amazon’s privacy policy right below the search form: I think I read it somewhere in Amazon TOS that it is a requirement to display either a link/logo (and you can link the logo/text straight to the amazon.com homepage, tagged with your affiliate ID of course!) as well as a link to privacy information of amazon on any ad/widget you use as part of your affiliate promotion (if I am wrong I would like to be corrected lol, but almost all of their ads have those links anyway, so I would include them just to be on the safe side and also to comply with the “FTC guidelines’ of ‘full disclosure”).

    Other than that, it is great! If I ever write a post on the subject I would be sure to link to your blog :D

    • Hi Arindam, I’m glad this tutorial meets your requirements. You can go ahead and include any number of links below the search box, even one to the privacy policy. I personally try to not worry about legal stuff until someone complains–usually it’s still not too late to fix stuff then…

  14. Mark

    Is it possible to keep the search results showing up on your site as well? Like possibly an iframe or something? The target new option is good but would really like to keep the whole experience on site… thanks in advance.

    • M.K.

      Hmmm, I’m certain that it is technically possible with the use of perhaps a WordPress plugin in combination with Amazon Advertising API, but there is no simple and clean way to do it.

  15. Chelle

    Hi there,

    I used your search box html and it works great in using my affiliate link to the amazon general page but I don’t see it after that when a product is clicked on. Also.. is it possible to make the search open on another page instead of moving the reader off of my site?

    Thank you for a great post. I am new to all this [Amazon] and found it very interesting. Excellent.

    • M.K.

      Hi Chelle, You only have to use your Amazon affiliate link once. When your visitor browses Amazon after having used your search box, they will still carry your affiliate information with them, so when they make a purchase it will be credited to you.

      If you want the search results to open in a new window, use this HTML:

      <form action="http://www.amazon.com/exec/obidos/external-search" method="get" target="_blank">
          <input type="hidden" name="tag" value="ms084d-20" />
          <input type="text" name="keyword" size="20" value="" />
          <input type="submit" value="Search Amazon" />
      </form>

      The difference is target="_blank".

    • Chelle

      Thanks so much! It works perfectly now….

      No surprise : )

    • M.K.

      You’re welcome :)

Leave a comment

Your email address will not be published. Required fields are marked *

Read this to make your comment cool.