No announcement yet.

Image instead of "Add to Cart" button?

  • Filter
  • Time
  • Show
Clear All
new posts

  • Image instead of "Add to Cart" button?

    Does anyone use a "Buy" or "Add to Cart" image button instead of the default css button that came with your template?

    If so, please post a link to your site so I can see how you integrated it.

    Any detailed instructions would be much appreciated.

    Thanks everyone.

  • #2
    I havn't tried it personally, however a step-by-step walk-through can be found here:


    • #3
      Wow, perfect. Thank you for that link!


      • #4
        That walk through doesn't work for the final checkout button. Does anyone know how to make the final checkout button an image?

        Tech support as usual is of no help.



        • #5
          There is some code on the singlepage checkout, where the "input type" is button and the "value" is the checkout3_submitbutton. This value can be changed in the checkoutStep3 store language section. I tried changing the value in the store language to <img src=> but that didn't work. It works for the free shipping icon however. So, you'll need to dig deeper.
          You can change the "input type=button" to "input type=image" in the template and that might work. I didn't want to mess with it though. You could give it a try.


          • #6
            I'm in the middle of changing all the buttons on our site. Just got the go button done on the home page search box am thinking of testing one more color before committing.

            Once done will do the checkout button and post


            • #7
              started last message and got call. when posted saw marks and that should work.

              If you place the image in the default file:

              <input type="image" name="search" src="assets/images/default/THE BUTTONS NAME" border="0" alt="checkout">

              Replace the name with the name that's in there now


              • #8
                Mark and Mondo,

                Thanks, I have already changed the other buttons. The only one that I can't get to work is the checkout button on the checkout page.

                I can change the Input Type to image as you suggested, it shows the image but then clicking on it brings up a blank popup warning and the page in the browser loads claiming the order minimum has not been reached and so the order was not placed. However this is wrong. The order actually does get placed! But the customer will never know and their cart is then empty.

                Changing the code to something similar as the add to cart button for an image inside a hyperlink, shows the image for the button but when clicked on nothing happens. The image does click but the script does not work and no order is placed. The page just sits there.

                I spent a couple of hours going through the 3dcart clients websites and looking at most of them. Of those I looked at 99% use multiple page checkout. But not one of the sites have the checkout button as an image even if they have other buttons as images. Very few sites change any of the buttons to images.

                My concern about this particular button is that it is at the bottom of the page and it is small, blending in with the rest of the page. When I first saw the page I even missed the button! So I need to change this bland button to something that stands out.

                Again thank you for your help. I really do appreciate it and any other suggestions.



                • #9
                  Changed ours today, looks nice, placed a CC order on it and it works fine,

                  <input type="submit" value="[checkout3_submitbutton]" name="B1" class="btn" onMouseOver="this.className='btn_over'" onMouseOut="this.className='btn'">

                  <input type="image" name="B1" src="assets/images/default/btncheckout.png" border="0" alt="Checkout">

                  P.S. We use multi page checkout.

                  If you use single page post your original line and what you changed it to maybe will see something
                  Last edited by mondo; 05-12-2010, 01:03 PM.


                  • #10
                    Now I'm having probs.
                    I'm up to the cart page. We have continue shopping and checkout buttons on above and below the cart contents. Have changed the top ones fine but the bottom ones display and wont work. They seem to refresh the page or do nothing.
                    I'm stumped the codes are literally the same.

                    Any one?


                    • #11
                      Be sure the code includes the comment tags fore and aft


                      • #12
                        Yea, their all there, only changed the actual button callup.
                        Talked to support. It has something to do with them being nested in the forms. Most ways I tried didn't work or submitted as recalculate buttons. Wrote one code that seems to work on the continue shopping button and should work on 'begin checkout' but it's a pretty important button so went to the other pages first.

                        I'm submitting the bottom cart button codes to tech for verification that it's ok.

                        I can't believe they have no docs on this (I asked for change the buttons instructions) but there will be this week. I'm documenting all of them and going to submit them when done.
                        Never had this much trouble changing buttons.
                        Last edited by mondo; 05-17-2010, 05:45 PM.


                        • #13
                          Just about changed all the buttons that we're going to. haven't decided on Buy it buttons on on catalog list yet. Never got the 'send' on contact us page.
                          The results:
                          Think their large enough? LOL


                          feedback welcome and please if any problems let us know.
                          Tested in IE8 and FF3.6
                          Last edited by mondo; 05-18-2010, 04:57 PM.


                          • #14
                            So do you have the codes documented? If so can you post them or email them to me? I am still trying to figure this out and tech support was of no help at all. they couldn't understand what an image is and what it is not.



                            • #15

                              Just looked at your site. I like the buttons. I am wondering about your product pages though. They do not seem to be meant for new comers. Is that right? For instance on the thread pages. You have only one image for all the threads. Then on the product listing page you have "Colors" listed as numbers. How is someone to know what color 156 is? It might be helpful to have color swatches for these so newbies can know what these are.

                              I am just pointing this out from someone that knows nothing about your products. If I was going to get started with cross stitching I wouldn't be able to shop with you since I would not know what colors those numbers represent. I would have to go to some other site and learn this and since I have to go somewhere else would I go back to your site to spend my money? Probably not since it is so much of a hassle to go back and forth between sites. It costs you more to get a customer to your site than it does to get an order and then have them come back.

                              I am only saying all this because we have learned from our mistakes over the years. Online you have to make everything as basically simple as you possibly can. Online shoppers don't want to have to figure things out and if they are forced to go somewhere else to figure it out they won't place an order with you. They'll shop where they have access to all the relevant information about the products.

                              Hope this helps.


                              P.S. PayPal had an excellent article about shopping cart abandonment and the guy compared shopping in a brick and mortar store to shopping online. So think about how you shop when you go to the store and can see, feel and touch and all the information available at the store including competing brands. That is how we need to make our stores. If someone wants a blue thread how can they know which blue is the one they want if all they have is a number listed on the cart? If they need to know what material the thread is made of and how many threads are in each strand and so on they can get that at a store because they can see it and pick it up. Since they can't do that with online stores this information needs to be passed on in other ways.