No announcement yet.

Add to cart button background colour

  • Filter
  • Time
  • Show
Clear All
new posts

  • Add to cart button background colour


    I am new to the forum and here to learn as much as I can. I have been trying to change the background colour of my "add to basket" buttons etc.

    I have worked out how to change the text of the button by going through
    Setting, Design, Themes & Styles and then modify style, edit “btn” but I cant
    workout how to change the background colour of the button.

    Any advice on this would be appreciated.

    Click here to see the button

    Last edited by fw1980; 06-03-2009, 08:37 AM.

  • #2
    Buttons are images

    Hi Finlay,

    Your site is great, you've done a really nice job!

    The add to cart buttons are actually image slices that are tiled. You need to have ftp access in order to change them. If you look in your CSS for .btn, you will see a tag that says background: url(images/BG_.gif) repeat-x; There is a different image for button_over as well.

    If you have ftp access, just look for the bg_.gif and bg_btn1.gif files and download them to your computer. You can then edit them in Photoshop - change the colors etc. That's what I did for our site. Just don't forget to use "save for web" to make sure the file sizes are nice and small.

    Actually, you could probably remove the url(images/BG_.gif) repeat-x; reference and replace it with background-color: and whatever color code you wanted. I'm not proficient in CSS, so I'm not sure if it would work, but it's worth a try. Don't forget to save a copy of the original CSS before you go fiddling with it in case it doesn't work, that way you won't have to remember what the original code was!

    Good luck!


    • #3
      Hi Jennie,

      Just had a look at your site it looks great, I like the way you have done your buttons.

      I tried to remove the url(images/BG_.gif) repeat-x; reference and replace it with background color: and then color code but it didn't make any difference to anything :-(

      I am not sure what you mean by ftp access as thats something I haven't done yet but I am learning new things all the time.

      Last edited by fw1980; 07-21-2009, 09:08 AM.


      • #4
        Hello Finlay,

        Usually, when you get the 3dcart set up for the first time, they will send you email (welcome email) about your account information, like temporary password, and all sort of stuff.

        I give you an example email that contains that info:
        Store Manager
        Login: 3dcartadmin123456
        Password: *****
        NOTE: you will be prompted to change the password the first time you log in.

        FTP information (Only necessary for making template changes)
        login: baby
        pass: **********
        Ok, now if you get this email, you can download the FTP software (if you don't have it), the freeware and easy is filezilla :
        After that, open that software, and put the FTP information above on the text field. Host means same with server, username means login, password means password. Don't need to put Port number, and click "quick connect".

        Ok, so, if you connected you will see on the right hand side (that is 3d server for your store) and just look for the bg_.gif and bg_btn1.gif . You may ask the 3dcart tech support where they located. And when you find it, copy / download to your computer, then you edit it, and upload again to the same place.. but I suggest you to save the original button for back up, in case you make the wrong size / design or stuff like that, so you just can go back to the original color / shape.. Good luck :)


        • #5
          Thanks for the advice Dan, I followed your instructions and found bg_btn.gif and bg_btn1.gif and downloaded them on to my pc, only problem is they don’t seem to be the "add to basket" button I am looking for :mad:

          This is what they look like on the pc.

          Anyone any idea's

          Thanks in advance


          • #6
            Originally posted by fw1980 View Post
            I tried to remove the url(images/BG_.gif) repeat-x; reference and replace it with background color: and then color good but it didn't make any difference to anything :-(
            you were pretty close here. to change the background color, you need to change (in the CSS file, under the "btn" class)

            PHP Code:
            background:transparent url(images/BG_.gifrepeat-x scroll 0 0
            PHP Code:
            Last edited by djandrew; 07-18-2009, 09:54 PM.


            • #7
              Thanks Andrew,

              I got the color changed at last :) Thanks for everyones help


              • #8
                Can someone tell me where exactly the BG (add to cart image) is located.

                I am using ftp.

                Thank you.


                • #9
                  pretty sure it depends on your template. some are just buttons and don't use images.

                  a lot has changed since 2009


                  • #10
                    We did this last year. I didn't want to start a new thread for this, that is why I piggy backed on this one.

                    UPDATE: We found it. We are posting this to help anyone else who is looking.

                    Via FTP:

                    web/assets/templates/[YOUR TEMPLATE]/css/images/BG_btn.

                    Thank You.
                    Last edited by damiencaz; 01-19-2014, 09:09 AM.


                    • #11
                      You can likely right click on your button and depending on browser get something like view image, inspect element, etc. At least one of these should show the image with file location in the address bar or the HTML and or CSS associated with it.
                      Last edited by mondo; 01-18-2014, 02:03 PM.