Replace 'your cart' with text or logo?

kanjigirlkanjigirl Member
in Help edited May 2009
Is it possible to replace the 'your cart' image with my store name or logo?
Comments
  • lukeluke FoxyCart Team
    Definitely. Check out the screencasts we have on the wiki that walk you through how to override the css to include any unique styles you want. Also, some of our featured stores should give you some ideas as to what's possible as far as styling the cart and checkout.
  • Excellent screencasts, thank you!
  • Is this specifically listed in the screencasts? I have watched them and didnt see this mentioned. I know there is some issue with the iFrame or something but I am able to override all the other css image values to edit the foxybox contents, but cant seem to edit this one. It is the background image on the top left. Where or how is this modified. Thanks!
  • Found it. You need to overwrite the background parameter for #fc_cart_container in your css file.

    i.e.
    #fc_cart_container {
    background:url(http://www.domain.com/location/image.png) no-repeat top left;
    }
  • brettbrett FoxyCart Team
    Glad you got it.
  • FYI - this is harder to figure out than it should be, I had to search the wiki and forums for an answer. I think you guys should include instructions for doing this on the cart template page.
  • brettbrett FoxyCart Team
    Indeed. We'll be working on improving our docs and the admin as we can.
  • Can someone please explain this more clearly (i.e. step-by-step)? I am trying to replace the "your cart" image in the standard foxycart cart with my company logo. I've watched the screencasts and searched the forums. I'm very surprised that something this common is not addressed clearly for the amature...it's frustrating. I've taken what krum said above and applied it to the cart template just before the </head> tag and it just ends up showing coded text. Any help would be very appreciated.
  • lukeluke FoxyCart Team
    Hey ballard. Which store is this for so we can take a look?

    Honestly, we never thought so many people would use our standard template design. The text only design was setup in such a way that you can customize anything and everything. The screencasts explain how to use FireBug to inspect exactly which css is being applied and let you write your own css to override it and include that css in your cart template... but as the many posters on this thread have made clear, we still need to do a better job of explaining the process. Without seeing exactly what you're trying to do and why it may not be working for your template, it's hard to give specific advice.
  • fc_adamfc_adam FoxyCart Team
    @ballard, it's actually only a small amount of code to achieve what you're after so there's not much of a step by step involved with this, but here goes.

    Paste the following above the
    </head>
    
    tag in your cart template, editing the path to the image to the actual path:
    <style type="text/css">
    #fc_cart_container  {
    background:url("http://example.com/path/to/image.gif";) no-repeat scroll left top;
    }
    a.fc_cart_update {
    float:none;
    }
    </style>
    

    Cache and save the template, and you should be all good!

    Worth noting, if you're not using the automagicache functionality (ie: you're not caching then saving) the path to the image would be something like the following:
    https://YOURDOMAIN.foxycart.com/cache.php?url=http://example.com/path/to/image.gif
    
  • @fc_adam

    thanks so much...this worked!

    @foxycart

    the problem for me is that i only have a limited knowledge of html and am ignorant of css altogether. it would have helped me a lot if foxycart had a simple explanation like this. all i wanted was to brand my shopping cart. let me state the obvious...most people will want the same thing. so, it might be wise to make it easier for the lay-person to find out how to do it (i.e. cut this and paste it here) without having to learn css. so far i like your product though!
  • brettbrett FoxyCart Team
    @ballard: We understand, and it's come up before (typically for more advanced javascript/JSON customizations), but the issue is kind of that FoxyCart just isn't designed for a user with _no_ HTML or CSS knowledge. It's a tricky situation, and we don't want to lead you down the path to cart customization if that path is truly a multi-year effort to master (and is far beyond the level of support we could conceivably offer).

    I'm not disagreeing. It's just an interesting and difficult thing for us to figure out how to best balance what FoxyCart _is_ with the needs of beginning web designers/developers (or even non-web-professionals entirely). We're definitely here to help. We just have a "minimum knowledge requirement" that most other turn-key systems don't really have.

    That said though, what you're describing I think is a very worthwhile thing, and we already have a placeholder for a store logo that's set in the store settings. We should use that in the default templates to make this very basic and quick level of customization easier. So I'm glad you brought it up. We'll keep it in mind as we move forward.
Sign In or Register to comment.