Knowledgebase
How can I use an image for the Add To Cart or View Cart Buttons?
24 Aug 06 09:59 AM

We offer a wide variety of button designs for both Add to Cart buttons and View Cart buttons in our HTML Wizard, and also have an eas-to-use interface there to add your own. But if you have already generated and added your buttons to your site, you can follow these instructions to change to using a different graphic.

You can change the Add To Cart and View Cart buttons to use your own graphics or use the newer HTML BUTTON element.

To do this, you simply need to find the existing SUBMIT button in the form HTML and replace it with newer button HTML or with your own image source. 

The first step is to locate the HTML generated by the Cart Wizard. This HTML will vary dependent on which option you chose for Window Type in the wizard. The HTML should be found as show below:

    Add to Cart
      Same Window
      <INPUT TYPE="submit" NAME="cart_btn" VALUE="Add To Cart">

      New Window
      <INPUT TYPE="submit" NAME="cart_btn" onClick="this.form.cmd.value='_cartPopup';" VALUE="Add To Cart">

      Popup Window
      <INPUT TYPE="submit" NAME="cart_btn" onClick="var owin=window.open('http://www.auctioninc.com/images/site/loading_cart. gif','paid_cart','width=800,height=350,scrollbars=1'); this.form.cmd.value='_cartPopup' ; this.form.target='paid_cart'; owin.focus()" VALUE="Add To Cart">

    View Cart
      Same Window
      <INPUT TYPE="submit" NAME="viewcart_btn" VALUE="View Cart">

      New Window
      <INPUT TYPE="submit" NAME="viewcart_btn" onClick="this.form.cmd.value='_cartViewPopup';" VALUE="View Cart">

      Popup Window
      <INPUT TYPE="submit" NAME="viewcart_btn" onClick="var owin=window.open('http://www.auctioninc.com/images/site/ loading_cart.gif','paid_cart','width=800,height=350,scrollbars=1'); this.form.cmd.value='_cartViewPopup' ; this.form.target='paid_cart'; owin.focus()" VALUE="View Cart">

Once you locate the SUBMIT button HTML you will need to replace it with the appropriate HTML. There are two methods for creating buttons which are the traditional <INPUT type="image" ...> tag method or the newer style <BUTTON ...> tag method. The older method will support more browsers but is less flexible. The BUTTON tag is supported by most current browsers and offers more options. Below you will find examples of each style.

In order to use your own graphic, you will need to replace the image URL ( shown bolded in the examples below) in the 'src' attribute of the tag.

<INPUT type="image" ...> method:

    Add To Cart
      Same Window
      <INPUT type="image" src="http://imagehost.auctioninc.com/1/buttons/addtocart_blue.png" border=0 NAME="cart_btn" VALUE="Add To Cart">

      New Window
      <INPUT type="image" src="http://imagehost.auctioninc.com/1/buttons/addtocart_blue.png" border=0 NAME="cart_btn" onClick="this.form.cmd.value='_cartPopup';" VALUE="Add To Cart">

      Popup Window
      <INPUT type="image" src="http://imagehost.auctioninc.com/1/buttons/addtocart_blue.png" border=0 NAME="cart_btn" onClick="var owin=window.open('http://www.auctioninc.com/images/site/loading_cart.gif','paid_cart','width=800,height=350 ,scrollbars=1'); this.form.cmd.value='_cartPopup' ; this.form.target='paid_cart'; owin.focus()" VALUE="Add To Cart">

    View Cart

      Same Window
      <INPUT type="image" src="http://imagehost.auctioninc.com/1/buttons/viewcart_blue.png" border=0 NAME=" viewcart_btn" VALUE="View Cart">

      New Window
      <INPUT type="image" src="http://imagehost.auctioninc.com/1/buttons/viewcart_blue.png" border=0 NAME=" viewcart_btn" onClick="this.form.cmd.value='_cartViewPopup';" VALUE="View Cart">

      Popup Window
      <INPUT type="image" src="http://imagehost.auctioninc.com/1/buttons/viewcart_blue.png" border=0 NAME=" viewcart_btn" onClick="var owin=window.open('http://www.auctioninc.com/images/site/loading_cart.gif','paid_cart','width=800,height =350,scrollbars=1'); this.form.cmd.value='_cartViewPopup' ; this.form.target='paid_cart'; owin.focus()" VALUE="View Cart">

<BUTTON ...> method:
    Add To Cart
      Same Window
      <BUTTON name="ViewCart" type="submit" style="BORDER-RIGHT: #ffffff 0px; BORDER-TOP: #ffffff 0px; BORDER-LEFT: #ffffff 0px; BORDER-BOTTOM: #ffffff 0px; BACKGROUND-COLOR: #ffffff">
      <IMG src="http://imagehost.auctioninc.com/1/buttons/addtocart_blue.png" border=0 alt="Add To Cart">
      </BUTTON>

      New Window
      <BUTTON name="ViewCart" type="submit" style="BORDER-RIGHT: #ffffff 0px; BORDER-TOP: #ffffff 0px; BORDE-LEFT: #ffffff 0px; BORDER-BOTTOM: #ffffff 0px; BACKGROUND-COLOR: #ffffff" onClick="this.form.cmd.value='_cartPopup';" >
      <IMG src="http://imagehost.auctioninc.com/1/buttons/addtocart_blue.png" border=0 alt="Add To Cart">
      </BUTTON>

      Popup Window
      <BUTTON name="ViewCart" type="submit" style="BORDER-RIGHT: #ffffff 0px; BORDER-TOP: #ffffff 0px; BORDER-LEFT: #ffffff 0px; BORDER-BOTTOM: #ffffff 0px; BACKGROUND-COLOR: #ffffff" onClick="var owin=window.open('http://www.auctioninc. com/images/site/loading_cart.gif','paid_cart','width=800,height=350,scrollbars=1'); this.form.cmd.value='_cartPopup' ; this.form. target='paid_cart'; owin.focus()">
      <IMG src="http://imagehost.auctioninc.com/1/buttons/addtocart_blue.png" border=0 alt="Add To Cart">
      </BUTTON>

    View Cart

      Same Window
      <BUTTON name="ViewCart" type="submit" style="BORDER-RIGHT: #ffffff 0px; BORDER-TOP: #ffffff 0px; BORDER-LEFT: #ffffff 0px; BORDER-BOTTOM: #ffffff 0px; BACKGROUND-COLOR: #ffffff">
      <IMG src="http://imagehost.auctioninc.com/1/buttons/viewcart_blue.png" border=0 ALT="View Cart">
      </BUTTON>

      New Window
      <BUTTON name="ViewCart" type="submit" style="BORDER-RIGHT: #ffffff 0px; BORDER-TOP: #ffffff 0px; BORDER-LEFT: #ffffff 0px; BORDER-BOTTOM: #ffffff 0px; BACKGROUND-COLOR: #ffffff" onClick="this.form.cmd.value='_cartViewPopup';" VALUE="View Cart">
      <IMG src="http://imagehost.auctioninc.com/1/buttons/viewcart_blue.png" border=0 alt="View Cart" >
      </BUTTON>

      Popup Window
      <BUTTON name="ViewCart" type="submit" style="BORDER-RIGHT: #ffffff 0px; BORDER-TOP: #ffffff 0px; BORDER-LEFT: #ffffff 0px; BORDER-BOTTOM: #ffffff 0px; BACKGROUND-COLOR: #ffffff" onClick="var owin=window.open('http://www.auctioninc. com/images/site/loading_cart.gif','paid_cart','width=800,height=350,scrollbars=1'); this.form.cmd.value='_cartViewPopup' ; this.form. target='paid_cart'; owin.focus()">
      <IMG src="http://imagehost.auctioninc.com/1/buttons/viewcart_blue.png" border=0 alt="View Cart">
      </BUTTON>

To create your own custom buttons there are a number of sites that offer free or paid for services. One such service is ButtonGenerator.com.

(3071 vote(s))
Helpful
Not helpful

Comments (0)