Creating non "standard" zen cart sites.

How's it going? I'm new to the forum and to Zen Cart ( firs heard about the cart a couple years ago and just now decided to give it a try) and have already been blown away by the sense of community and the power of this program... Through searching the forum I've found great tips on the program itself, installing some mods for wholesale and payment modules, and many other great uses for zen cart itself...

One area I am having trouble with is where to begin on totally overhauling Zen Cart to create a unique, non standard store front... Every thread on Zen Cart design always mentions the customizing options of Zen Cart and usually mentions one site in particular (the incredible mitea.com) but no real solutions on how that look and complete level of customization is achieved... I am not even sure what version of Zen that site uses since it's been around for years, but what steps should be taken to do something like this?

Reading a lot of template discussion threads, that consensus seems to be in favor of creating templates that keep the functionality of zen and availability of side boxes and breadcrumbs there as possibilities which in turn hinders some design..

What if you and your clients are 100 percent sure you don't want a currency box or any other side boxes and just want an amazing presentation for your particular store and won't be providing it as a template to other users.. Does anyone have any advice or links to working examples of whipping zen into shape?

mitea.com is amazing.. I've seen another coffee store by a great contributor to the site and the design community who's name escapes me at this time.. Shirtsandladders.com is pretty much everything I am looking for yet it appears to be entirely table based leading me to believe it's an old version of Zen Cart.. the way it uses it's product display and switchable photos is great, something like I want to do, but is it even possible with the new version of Zen?

Sorry to be long winded, but I figured a lot of designers might share this question and the forum would be a great source of info for doing something different with the Zen Cart stores if you don't need some of the functionality of the columns and side boxes... Thanks for your time and look forward to being a more active member!

Jonathan

p.s. if anyone has found a fix to the "double legend" bug in the Dual Pricing Cart mod I'd love to hear it!

Hi Jonathan -

Anything and everything is possible with Zen Cart. While the newest version only has one layout table, the rest is <div> based. You only have to let your imagination run free.

What if you and your clients are 100 percent sure you don't want a currency box or any other side boxes and just want an amazing presentation for your particular store and won't be providing it as a template to other users

Anything you do not want can either be turned off in the admin, disabled with CSS, or simply not used in your custom template override.

Caution: Even though your client may insist they are never going to use featureX - it should be available. I had an instance of this very problem yesterday and had to spend an hour or so changing some of the custom functionality I designed for a client even though early on and throughout the process of building their site I asked if they were sure they were never going to use the page I had to fix yesterday. :cool:

The big deal about keeping all of Zen Cart's standard functionality only strictly applies to templates for public distribution (either paid or free); if you are building one for yourself, feel free to chop & channel as much as you want! Of course, keeping any ability you don't need to disable is always a wise move.

My design concept required the header and right sidebar to go away, and three columns without a header seems rather strange, so I have not only hard-code disabled header and right sidebar, but put some header functions in the left sidebar. Plenty of people have disabled both sidebars and handle all nav etc. in the header.

I am currently reading a new book, The Principles of Beautiful Web Design by Jason Beaird, which gives a good process starting with a blank piece of paper gridded off into thirds. No web tech considerations at all until you have an idea of what you would like to see. Doing something like this would free a lot of people from stock layouts.

If you have any particular layout concepts you would like to translate into ZC, please ask.

First off let me say thanks so much for the positive replies. Coming from two people who's posts I have encountered and learned a lot from through various searches and reading of the forum I feel very honored that you'd take the time to answer my somewhat newbie questions..

Kim:

Hi Jonathan -

Anything and everything is possible with Zen Cart. While the newest version only has one layout table, the rest is <div> based. You only have to let your imagination run free.

Anything you do not want can either be turned off in the admin, disabled with CSS, or simply not used in your custom template override.

Kim, I guess what really needs to happen is I need to start digging further into the code.. I know in the admin you can turn virtually everything on and off and I knbow there are countless tutorials on removing side bars etc.. I guess I need to design a layout and start digging..

Kim:

Caution: Even though your client may insist they are never going to use featureX - it should be available. I had an instance of this very problem yesterday and had to spend an hour or so changing some of the custom functionality I designed for a client even though early on and throughout the process of building their site I asked if they were sure they were never going to use the page I had to fix yesterday. :cool:

I definitely am in agreement with you on not hard coding any features out.. Clients tend to change their mind like the wind these days and the last thing I want is have to go back and correct my own mistakes I was forced to make at their request!;)

Again I want to say thanks for the reply.. I've learned a lot from both yours and Kim's post and feel honored to have you take the time to respond and share some insight.

gjh42:

The big deal about keeping all of Zen Cart's standard functionality only strictly applies to templates for public distribution (either paid or free); if you are building one for yourself, feel free to chop & channel as much as you want! Of course, keeping any ability you don't need to disable is always a wise move.

Definitely.. I would never release anything for public distribution that crippled functionality of the site.. I've read the Template Monster thread (among others) and agree 100 percent in regards to how confusing and detrimental simply removing features could be! I just know that for my own personal design and visual goals of clients non standard appearance out weighs some functionality of certain features.

gjh42:

My design concept required the header and right sidebar to go away, and three columns without a header seems rather strange, so I have not only hard-code disabled header and right sidebar, but put some header functions in the left sidebar. Plenty of people have disabled both sidebars and handle all nav etc. in the header.

That's pretty much what I am looking to do.. Remove sidebars.. Handle navigation in the header... So pretty much keeping a header, a footer, and a big content area to display not only the store, but also a tiny bit of content, news updates and the like I assume using EZ Pages.. I haven't delved that far yet because I wanted to make sure Zen Cart was the right program but the more I read the more I know it is...

gjh42:

I am currently reading a new book, The Principles of Beautiful Web Design by Jason Beaird, which gives a good process starting with a blank piece of paper gridded off into thirds. No web tech considerations at all until you have an idea of what you would like to see. Doing something like this would free a lot of people from stock layouts.

Sounds like a great read.. That's somewhat how I work in regards to standard web design.. I create how I want the design to look and fucntion then go about solving the problem of making it work.. It does at first glance appear backwards to try and find code to make a layout work, but I find it refreshing in the since that every site you create you will face different challenges that push your limits as a coder because you're simply not sticking to what you presently know will work for you. That's also what I want to do with Zen.. Maintain the incredible functionality of a well designed shopping cart capable of wholesale orders, coupons, SSL, and inventory management while making it seemlessly integrate into a non standard design.. I guess I have my work cut out for me!;)

gjh42:

If you have any particular layout concepts you would like to translate into ZC, please ask.

I don't have a design yet, but that's the easy part.. I guess i'm looking for a header with all nav (individual links to store, home news etc, using images) possibly an e-mail list form, and the log in, home, view cart, and check out buttons positioned in the header as well... the footer reserved for text links, copy right info etc.. the main content feature I would like to be able to have a large columned layout.. maybe 4-5 products in a row.. the actual product page I would like the ability to swap images from thumbnails without loading a larger image in a new window like on shirtsandladders.com and just have a clean over all look...

After getting advice from you and Kim I think the majority of my design issues might be easier than I anticipate.. The actual coding of the features in the header with the log in and view cart could be a problem.. what do you think?

Also do you know anything about possibly using a random background script for the header? Thanks again for all your time and help...

Jonathan

The actual coding of the features in the header with the log in and view cart could be a problem.. what do you think?

:D I think you will be surprised. There is a loign box and shopping cart box that can easily be added to the header. In fact there are already dynamic links to both of the full pages for those function in the header, adding images to them would be super simple.

To expand on Kim's post, the header navbar (showing Home & Login) will also show links for Shopping Cart, Checkout, My Account and Logout when appropriate.

The Categories-Tabs menu shows all the main categories, and there is at least one mod in Downloads for full CSS dropdown functionality for this.

The EZ-Pages header menu will show links to additional pages you create, and can show any other links you set up as well.

thanks to both of you for your encouragement and help! i am going to to do the simplest version graphically of what i'd like to see in a shopping cart and try and make it work.. wish me luck.. i am sure i'll be back with more questions soon haha!

I've personally found adding menu links in the header to be one of the easier things I've ever done in template customization. LOL

I think the main thing now is to get down and dirty with Zen Cart and start playing with it to see if I can make it happen.. I guess my main question with this thread was "Can it be done" haha... I now know that it can.. Thanks for all the help... Not sure if i'll be doing anything like mitea.com or shirtsandladders.com, but hopefully I can come up with something non standard enough! I am sure i will be back with specifics in about .5 seconds now that my trial design is finished.. Wish me luck!

Test stores are a wonderful thing. LOL

As with any software, the more you play with it, the easier it gets. If you play with it 5 minutes a month, you will get frustrated. If you can even just spend a whole weekend doing nothing but playing with it, it will help you figure it out.

That, and using FireFox with Firebug. LOL

Good luck!

This one was submitted to the Zen Cart Showcase today and is beautiful, functional and still breaks the traditional mold. Enjoy! www dot helenahillgiftboxes dot com

Wow! That is neat! Very clean design, loaded fast, nice page graphics that are easy on the eyes.

Okay, so what they did -- please correct me if I'm wrong -- is they just have a few items to sell, so they created them as top-level products so the category nav tabs could be used and they ditched the category sidebox?

Yep, that's what they did (though you meant to say "top-level categories"), and each category has only one product; so with Configuration > Layout Settings > Skip 1-prod Categories - true, clicking a category link goes straight to the product.

In fact, that would be a way to get the effect of products and subcats in the same category: make the products you want to show each live in their own subcat named the same as the product; then they all show in the top cat listing, and the individual ones go to the product when clicked instead of to a listing of multiple products.

So i've taken the obvious first step and best advice and jumped right in experimenting with a test store.. so far so good...

I've been able to get dual pricing installed (which is a must for some future clients) as well as the column layout grid contrib (which is a must for me visually haha)..

I've removed both side boxed, set a fixed width, installed a full header length image.. change some nav from left to right and all sorts of goodies.. By looking through the css (and using Firebug! great suggestion) i've found alot of places where i can use css background images, set fixed widths and heights to make them seemless and flow into one header and all sorts of interesting things I am finally glad I am able to do...

It has of course left me with a few other questions, but I guess that's the point of discovering right?

right now i'm mainly interested in figuring out how to customize the look of my categories.. my test store only has two categories right now, which is fine... what i'd really like to do is strip it down to give it a cleaner look..

remove the options for adding each product to cart from the main category page..

remove the filer results box..

remove the add selected products to cart buttons..

and remove the displaying 1 of xxx products...

I'd also like to possibly use an Image to display the category name as opposed to text and remove the product description for each item leaving only the name and price displayed for a cleaner look..

haha whew.. is that enough? still using the search function for the majority of my learning.. about to work on using some sample roll over images instead of the text based nav now if anyone has some pointers for me...

it's actually just like you guys said.. not nearly as hard to change it from the standard version as you think.. just gotta get your hands dirty, dig around, and get some help from those that know... thanks again for everyones help!

Jonathan

p.s. that site kim posted was very nice...

"right now i'm mainly interested in figuring out how to customize the look of my categories.. my test store only has two categories right now, which is fine... what i'd really like to do is strip it down to give it a cleaner look..

remove the options for adding each product to cart from the main category page.."

• Configuration > Product Listing > Display Product Price/Add to Cart
• Display Product Price/Add to Cart Column Width

"remove the filer results box.."

• Display Category/Manufacturer Filter (0=off; 1=on)

"remove the add selected products to cart buttons.."

• Display Product Add to Cart Button (0=off; 1=on; 2=on with Qty Box per Product)
  Display Multiple Products Qty Box Status and Set Button Location

"and remove the displaying 1 of xxx products..."

• Prev/Next Split Page Navigation (1-top, 2-bottom, 3-both) (you can't entirely remove it, but you can put it at the bottom of the page)

"I'd also like to possibly use an Image to display the category name as opposed to text and remove the product description for each item leaving only the name and price displayed for a cleaner look.."

• Display Product Description
• image: coding required, not very complex. I did this for product names on the product info page for someone recently. The code would not be too hard to transfer.

"haha whew.. is that enough? still using the search function for the majority of my learning.. about to work on using some sample roll over images instead of the text based nav now if anyone has some pointers for me..."

• the Categories Dressing mod includes category menu link CSS rollovers which you could use for an example in the header nav.

Glenn, thanks so much for your help! I really appreciate it.. I have implemented most of your suggestions and am very happy to say they are working great...

I am assuming that cleaning up the spacing between product name and price etc, will all be a CSS issue and not a Zen Cart backend item correct?

gjh42:

"remove the filer results box.."

• Display Category/Manufacturer Filter (0=off; 1=on)

For whatever reason this is not working for me and I still have the Filter Results by: box with "Items starting with" and the alphabet in the drop down.. any ideas?

gjh42:

"I'd also like to possibly use an Image to display the category name as opposed to text and remove the product description for each item leaving only the name and price displayed for a cleaner look.."

• Display Product Description
• image: coding required, not very complex. I did this for product names on the product info page for someone recently. The code would not be too hard to transfer.

For this I meant the actual main category name.. say t-shirts or accessories, not the individual product name.. while a very cool feature, that would be a lot of image editing.. i was hoping just to dress up the category title in the upper left corner.. any thoughts?

gjh42:

"haha whew.. is that enough? still using the search function for the majority of my learning.. about to work on using some sample roll over images instead of the text based nav now if anyone has some pointers for me..."

• the Categories Dressing mod includes category menu link CSS rollovers which you could use for an example in the header nav.

will download the mod now and check it out.. any suggestions on hot to implement the rollovers in the header itself? I assume they would go in the "nav cat tabs" div where the unordered list currently resides but i am not sure what php file that corresponds to nor how to remove the text links that are automatically generated...

I also had one more question i needed to pose.. More of a functionality issue but one I figured i would ask the experts... I know i want to be able to usefully implement the gift certificate mod. Since my layout calls for removing the side columns, how would a user know what gift certificate funds they have available without the box showing up in the right column? is there an obvious way to let them know.. do they check the my account page? can you put a gift certificate box pop up in the header? any functional advice would be great... thanks so much for all the help! i just wish i could somehow repay the favor...

Jonathan

"use an Image to display the category name as opposed to text"
As I said, the code would not be hard to transfer to this use.

"implement the rollovers in the header itself? I assume they would go in the "nav cat tabs" div"

Yes, this would be in tpl_header.php, and the Categories Dressing code and CSS for rollovers could be adapted for use there.

gjh42:

"use an Image to display the category name as opposed to text"
As I said, the code would not be hard to transfer to this use.

any advice you have on this would be great!

gjh42:

"implement the rollovers in the header itself? I assume they would go in the "nav cat tabs" div"

Yes, this would be in tpl_header.php, and the Categories Dressing code and CSS for rollovers could be adapted for use there.

finally was able to wrangle something close to working after a while.. i used the code from the category dressing code, added it to my css, then put the div links in the "tpl_header.php". i ended up removing the nav category tabs and added the new roll over navigation to a header I css bottom justified in the logo wrapper...

i am having a problem in IE where the first time the roll overs are activated the image goes blank then the hover status shows up... any idea as to why that could happen or is an IE bug?

through a lot of searching i was able to clean up and eliminate the space and ...more info links by editing my css and my columns listing file.

i also found a disble fix for the filter results alphabetical search so that's good...

i am moving on now to the actual individual products page.. using the panel i've been able to remove a lot of the extra information i don't need right now, like reviews, tell a friend etc... i really want to work on some sort of extra image display with a mouse over to change them , but everyone i have seen has problems with displaying the correct size image or the click to enlarge feature.. any suggestions on dressing up the product listing?

Seriously Glenn.. I have no way of telling you how much you have helped me.. Not only on this post, but virtually every other question I have has been answered by you in the past..(for example how to put image links on top of your header haha.. you had an entire post on this subject that helped me so much!) Your and several other users here (kim, ajeh, madmumbler, etc etc..)are a literal godsend to people in my position coming from a design background trying to make this work and I honestly don't know how to begin to thank you, but thank you none the less!

Jonathan