tinker74 Posted December 6, 2013 Posted December 6, 2013 Hello everyone...i am new at this and have almost completed my website. Can you please have a look at it and let me know what you think? It is here http://www.tinkerplayground.com/shop/index.php Any feedback would be greatly appreciated. Thanks alot....
greasemonkey Posted December 6, 2013 Posted December 6, 2013 Couple things; 1) your social icons in the header - you should point these directly to your FB etc pages... There are a bunch of addon's for this. I use addthis. If you use an SSL (doesn't look like you do...) don't forget to turn off the addthis code off when on SSL/https to prevent un-secure content and windows warnings/errros. 2) your page speed is very slow. Spend some time optimizing queries, errors and images (looks like you may have an image thumbnailer). Just a note; addthis (above) will not help your pagespeed. Have a look at this thread; http://www.oscommerce.com/forums/topic/119077-a-store-speed-optimization-in-progress/ 3) You have a bunch of missing images (you probably know this already). 4) The link to your blog is dead (again you probably know this). 5) Your shipping policy, conditions of use and privacy notice are all blank.
♥14steve14 Posted December 6, 2013 Posted December 6, 2013 Apart from what has already been mentioned 1. On the create account page do you really need my DOB and gender. very few other sites ask for this information, and the less information I have to give you, the more chances of me signing up to your site. 2. Your about us page is all in bold, did you mean this 3. On your product information pages all of your product images are not against the right hand side of the page, if this is intentional, it leaves a lot of blank space to the right of the image. 4. On the page that contains the 7 Function Digital Multimeter some of the text is underlined, again is this intentional. It alaso looks as if this text is using the h2 tag. 5. As its not possible to see each image size, I would suggest making a small and large image for every product which will speed up the page load times, which is a bit slow. Failing that add a n image thumbnailer addon. 6. For some reason that I cannot put my finger on, your site would put me off from buying from you, as it currently is. Whether its the poor images, the overall site colours or the missing information I do not know. Saying that if you are happy with it, then leave it alone. Good luck in your venture, and I wish you well using oscommerce. Hopefully you have added something to help with seo and hopefully soon you will be selling. REMEMBER BACKUP, BACKUP AND BACKUP
tinker74 Posted December 6, 2013 Author Posted December 6, 2013 thanks alot for the feedback. I am hoping to have this site live by Jan 1st. I have never built and webpages before so this is my first go. I had to learn css, html, and php all in the last week. It can be very taxing. I am working on optimizing my pages to get faster load times. I have not added a blog yet as i dont know how to incorporate it inot OsCommerce......anyone know how to do this? I will remove the DOB and gender from the add new user... I did not realize the about us page was all bold...i will correct that straight away. ***how do i get the pictures to the right side of the page on the product information page...i have not been able to figure this out? any help there? before the site is to go live...i will have images for all the products.....hopefuly multable ones. Do others not like my color scheme? i kinda liked it but if it puts people off i will gladly change it..please let me know.. any other feedback is greatly appreciated....
♥joli1811 Posted December 6, 2013 Posted December 6, 2013 Really not sure about the blue text as for me I wear reading glasses it does strain a bit to read although blue is my favorite colour and it is nice shade . Maybe experimenting with a light different background or a small increase in text size lot written on the internet about that Think now after many years less is more in online selling so keep the design clean I used to have all the bells and whistles but now just try to keep direct and quick the key is ease of use for the customer and good SEO which is the make or break between selling and not and remember plenty of good descriptive text . Like the header and buttons just make sure all the links work before going live nothing more frustrating than broken links all in all not bad keep going you have a nice basis to build on Regards Joli To improve is to change; to be perfect is to change often.
♥GLWalker Posted December 6, 2013 Posted December 6, 2013 Keep the color scheme, and just keep on tweaking with those colors, maybe place a light grey html/body color, with just a white background for the main content. Go to jquery-ui and play around with the theme roller - (there are tutorials somewhere on this forum) Then rather than overiding the styles as you are now, you can just load them from the start. This will blend your buttons and headers and such all together very well, and if you choose your background carefully, you can get a nice "tinker" look - Just dont overdo it, very subtle is all you need. If youve done this much in a short time you'll probably find yourself going much further. Good Luck Follow the community build: BS3 to osCommerce Responsive from the Get Go! Check out the new construction: Admin Gone to Total BS!
tinker74 Posted December 6, 2013 Author Posted December 6, 2013 I have made some changes....can someone look and see if it is any better now? thanks http://www.tinkerplayground.com/shop/index.php
♥joli1811 Posted December 6, 2013 Posted December 6, 2013 @ Yes find the text easier to read consider what G.L.Walker said about getting the jquery buttons right by playing around with the theme roller http://jqueryui.com/themeroller/ could imagine that a nice silver colour taken from your logo would blend in nice but of course personal preference you may benefit from a ckeditor gives a bit more flexibility with the product descriptions Also time to consider if you would like / need left and right column or just x 1 better now as later As I said I like the general feel of the site so just tweaking now to get the basis right I would recommend you install web developer tool in firefox browser as here you can tweak the stylesheets in the browser window without committing to a change makes it easy and quick to test new ideas I like to add a shadow effect sometimes to the body wrapper etc in stylesheet to give a bit more depth but is really a personal taste thing To improve is to change; to be perfect is to change often.
♥GLWalker Posted December 6, 2013 Posted December 6, 2013 I have made some changes....can someone look and see if it is any better now? thanks http://www.tinkerplayground.com/shop/index.php Your getting there now, check out this quick mock up I did, use it and you'll have an even better understanding: http://newtheme.wsfive.com/index.php I pretty much duplicated your theme by changing these files: includes/templete_top.php includes/footer.php (only added some javascript at bottom) stylesheet.php I made a quick jquery-ui theme, and uploaded it then in template top replaced the default redmond with the new one. as for stylesheet.css - I added some classes I always like to use and destroyed a lot of stuff :) That was it, view the source, grab the files I used if you like, and have fun. Follow the community build: BS3 to osCommerce Responsive from the Get Go! Check out the new construction: Admin Gone to Total BS!
tinker74 Posted December 7, 2013 Author Posted December 7, 2013 @ could u tell me what you changed or added in these files.....i don't know how to do it.....i am now using the theme switcher and went back to the original redmon theme and replaced the image for the boxes back to my blue.....thats as far as i got.... how do u..... 1. change the font size so it is bigger? 2. make all the boxes (divs?) have a 10px radius? I fixed the image thing.....my front image was too big...i took them out till i alter the size of them to 100x80 your help is greatly appreciated. thanks...
♥GLWalker Posted December 7, 2013 Posted December 7, 2013 You need to download a jquery-ui theme, the one I made up is found here: http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CHelvetica%2CArial%2Csans-serif&fwDefault=normal&fsDefault=12px&cornerRadius=4px&bgColorHeader=%23137392&bgTextureHeader=highlight_hard&bgImgOpacityHeader=35&borderColorHeader=%23bbbbbb&fcHeader=%23fcfcfc&iconColorHeader=%23999999&bgColorContent=%23ffffff&bgTextureContent=inset_soft&bgImgOpacityContent=50&borderColorContent=%23cccccc&fcContent=%23333333&iconColorContent=%23999999&bgColorDefault=%23eeeeee&bgTextureDefault=glass&bgImgOpacityDefault=60&borderColorDefault=%23cccccc&fcDefault=%23137392&iconColorDefault=%23137392&bgColorHover=%23f8f8f8&bgTextureHover=glass&bgImgOpacityHover=100&borderColorHover=%23bbbbbb&fcHover=%23137392&iconColorHover=%23137392&bgColorActive=%23ffffff&bgTextureActive=flat&bgImgOpacityActive=0&borderColorActive=%23cccccc&fcActive=%23137392&iconColorActive=%23137392&bgColorHighlight=%23eeeeee&bgTextureHighlight=flat&bgImgOpacityHighlight=55&borderColorHighlight=%23ffffff&fcHighlight=%23444444&iconColorHighlight=%233383bb&bgColorError=%23c0402a&bgTextureError=flat&bgImgOpacityError=55&borderColorError=%23c0402a&fcError=%23ffffff&iconColorError=%23fbc856&bgColorOverlay=%23eeeeee&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=80&bgColorShadow=%23aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=60&thicknessShadow=4px&offsetTopShadow=-4px&offsetLeftShadow=-4px&cornerRadiusShadow=0px Next you can modify it anyway you see fit, maybe change your border radius to 10 px When done, hit the download option, I downloaded the v1.9.2, probably doesnt matter as we only need the styles. Once you extract the package you'll see a few folders, you want to open the css folder - there you will find another folder - this is your custom theme. Copy the custom theme folder and paste into your ext/jquery/ui directory, right next to the redmond theme. I believe the theme switcher looks in that directory, and you should be able to switch it from there. As for font size and such, you'll need to change your stysheet.css located in the root. The easiest way is to grab the one I edited, http://newtheme.wsfive.com/stylesheet.css, either copare what Ive done, or just swap it out. Now to make different elements have a radious, you need to use some javascript to append jquierys ui-corner* class to them. Open your footer.php, at bottom you'll see <script type="text/javascript"> $('.productListTable tr:nth-child(even)').addClass('alt'); </script> change it too: <script type="text/javascript"> $('.productListTable tr:nth-child(even)').addClass('alt'); $('.infoBoxContainer, #bodyWrapper, #header').addClass('ui-corner-all'); $('.infoBoxHeading').addClass('ui-corner-top'); $('.infoBoxContents').addClass('ui-corner-bottom'); </script> You can use that as an example, notice how I added different ui-corner* classes according to their posistion in the infoBox. This is not a whole lot of changes, its really very minimal, but has already brought the store into a different look, and from there you can move forth continually changing the whole theme as you get the hang of it. Theres only I few files you have to change to get a totally new look - the ones we touch on here, and then header.php and footer.php. Of course you can take it further, but one can get very far just like that. Follow the community build: BS3 to osCommerce Responsive from the Get Go! Check out the new construction: Admin Gone to Total BS!
Praful Kamble Posted December 7, 2013 Posted December 7, 2013 @@tinker74 Optimize your website for speed. Check for report here http://gtmetrix.com/reports/www.tinkerplayground.com/nHLpkkpp Like post..hit LIKE button. osCommerce | Joomla | WordPress | Magento | SEO | CakePHP | CI Guaranteed Website Speed Optimization!!
burt Posted December 7, 2013 Posted December 7, 2013 I was chatting with @@joli1811 the other day and we came to the comclusion that in many cases "less is more", and I started wondering if any osCommerce shop needs 3 columns? By playing with the placement of boxes (eg search in header, shopping cart in header, categories horizontal, information in footer (and so on)) one can easily take an osC site down to just 1 column (the main column)...anyone else like to chip in on that ? Most shop sites have so much going on that it detracts from the primary reason of having a shop: display of products leading to a sale.
♥bruyndoncx Posted December 7, 2013 Posted December 7, 2013 having just one main column keeps the clutter away. my product detail has no side columns but my listings need side columns for filtering the home page has a side column, but that is because we sell major brands, difficult to keep them handy otherwise KEEP CALM AND CARRY ON I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support). So if you are still here ? What are you waiting for ?! Find the most frequent unique errors to fix: grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt
jhande Posted December 7, 2013 Posted December 7, 2013 Hey steven, Not sure I like the Top >> Catalog links in the breadcrumb. I don't really see the need for the http://www.tinkerplayground.com/ page. Also the clicking on the product images loads in a new browser tab. Really a pain in the butt when there is multiple images (such as: USB Charger - Heavy Duty). Don't forget to change the stock osC icons (such as: Notifications, Reviews...). Humm... no log-in or create an account links? My Account Information page; are these really necessary? Company Details, Suburb, Fax Number. Also relocate the Postal Code down below the State/Province field. It would also be nice to actually find at least your address (and possibly a phone number) on the Contact Us page. I personally won't buy from an online shop if I don't know where they are located and no way of getting in touch with them. Hope I didn't come across as being harsh. I just noticed a few little things that was pointed out on my old site long ago. ;) Edit: I do like the idea of one or two columns. I will be trying to adapt that eventually to my new shop. - :: Jim :: - - My Toolbox ~ Adobe Web Bundle, XAMPP & WinMerge | Install ~ osC v2.3.3.4 -
♥GLWalker Posted December 7, 2013 Posted December 7, 2013 By playing with the placement of boxes (eg search in header, shopping cart in header, categories horizontal, information in footer (and so on)) one can easily take an osC site down to just 1 column (the main column)...anyone else like to chip in on that ? I think it all boils down to the shop owners preference, though we know that does not nessarily make for a successful set up. Ive worked with some people that just insist a shop must be three columns or it does not look proffesional for an ecommerce site. I personally feel less is more and like a 2 column layout to give more room for the goods. If you notice some of my examples, I usually go with a left and main column, and on shopping cart/checkout pages I use only one main column with nothing but what is needed to go through the checkout - I like to thjink of it as a funnel, once you go in, you keep going through - nothing to distract. While I believe upsells are good, and side columns may display a product that triggers an impulse buy, the main point is to keep them checking out. The shopping cart page is good to place any upsell items, but after that nothing but a full page to follow through with untill checkout is complete. I like to change the framework just a bit to easily allow from 1 to 3 columns with side columns having various positions. What would normally be a 3 column with left-main-right can easily swith so that the left column is actually the left and right stacked upon each other, and then the main, or left-right-main or main-left-right or main and then left-right stacked. Or just main and the left-right under and side by side, or just main and nothing more. Its actually not very difficult to achive and all controlled by adding a class to the body. In a stock osc only the template top, header and footer, need changed. Of course then you need a way of telling it what class to apply when, which gets into a lot of coding - What Ive done is add options in the admin to apply the desired class when entering products/categories or revert to defualt as difined in configuration. Really is not that difficult to change things in osc to make it very flexible, but its just not common knowledge to most new comers of how to go about it. With only having to change the template top, header and footer files one can easily place any framework they like, the 960 will easily swap out for twitters bootstrap span* class. The inner content is a different story, but as it is, it just works. Follow the community build: BS3 to osCommerce Responsive from the Get Go! Check out the new construction: Admin Gone to Total BS!
tinker74 Posted December 7, 2013 Author Posted December 7, 2013 Man...you guys are freaking awsome thank you so much for all the advise. you have helped me take my store to the next level. WebSource 5....your input has been awsome. One question.....when you are on the product info page....when you clicked on the image, it used to pop up and show the image on top of the page...now when u click the image it opens up a new page.....what have i done to mess this up?
♥joli1811 Posted December 7, 2013 Posted December 7, 2013 Yes you are correct we talked about this problem before with the latest jquery <script type="text/javascript" src="ext/jquery/jquery-1.10.2.min.js"></script> For the fancybox to work with the latest jquery-1.10.2.min.js you would have to upgrade the fancybox js the only problem with that is it is now commercial although available on git hub So the answer is to downgrade the jquery mention above found in your template top 1.10 versions will not work 1.9 versions not sure easy to test 1.8 version works!!! It will not be long until the fancy box is replaced by colorbox which will solve the problem code is available on git hub using myself now on a 2.3.3.4 site think it is great. ****************************************************************************************************** http://www.oscommerce.com/forums/topic/394288-oscommerce-online-merchant-v2331/ Unless I am very much mistaken the 2.33 version with bxGallery/FancyBox combination and updated jquery does not work with ext/jquery/jquery-1.10.1.min.js . Can test again if you want on a standard install ? As far as I remember the jquery-migrate-1.2.1.min.js also did not solve this problem the image pop up did not work until I changed the fancy box script. Maybe my configuration but lost the pop up effect Regards Joli To improve is to change; to be perfect is to change often.
♥GLWalker Posted December 7, 2013 Posted December 7, 2013 Its your jquery version, you must have changed it to the V 1.10.2 but it should be the osC stock jquery-1.8.0.min.js as the newer versions are not compatible with the fancybox image script @@joli1811 just noticed you answered - whoops Follow the community build: BS3 to osCommerce Responsive from the Get Go! Check out the new construction: Admin Gone to Total BS!
♥GLWalker Posted December 7, 2013 Posted December 7, 2013 one other thing - to get your header to fully match: in footer.php change : $('.infoBoxContainer, #bodyWrapper, #header').addClass('ui-corner-all'); to $('.infoBoxContainer, #bodyWrapper, #header, img#Image-Map').addClass('ui-corner-all'); then in stylesheet.css add this: img#Image-Map { margin-top:5px; } Follow the community build: BS3 to osCommerce Responsive from the Get Go! Check out the new construction: Admin Gone to Total BS!
tinker74 Posted December 7, 2013 Author Posted December 7, 2013 I switched back to jquery-1.8.0.min.js and now my images popup like they are supposed to.....man, i can see why you guys do this for a living....you are all pretty darn good at it...maybe one day i will be also......
tinker74 Posted December 7, 2013 Author Posted December 7, 2013 can anyone tell me why when i add a "large image" when i am in the edit product part of admin....if i add any images there my pictures show up almost in the middle of the page instead of lined up to the right of the body....this is driving me crazy..... and example would be: http://www.tinkerplayground.com/shop/product_info.php?cPath=23&products_id=33 thanks a lot
♥joli1811 Posted December 7, 2013 Posted December 7, 2013 well would help but would not do until you really decide on the site layout If you add x 2 images for each product one small one large the problem should not exist !! this is in the stylesheet just a quick way to change but maybe a better way by defining in the grid in product_info.php #piGal ul { list-style-type: none; margin-right: -210px; } as mentioned in this post at the beginning do you really need x 2 columns left and right because now is the time to decide before you start changing stylesheets etc and image sizes Regards Joli To improve is to change; to be perfect is to change often.
tinker74 Posted December 7, 2013 Author Posted December 7, 2013 @@joli1811 You are right....i have moved my boxes to the left and lined them up the way i wanted according to each page...i think it looks a lot cleaner...see what you think....http://www.tinkerplayground.com/shop
♥joli1811 Posted December 7, 2013 Posted December 7, 2013 Well was having a discussion with Burt about just simply to much info on a site we both agree that sometimes a bit less is more so yes I find better !!! you got to remember there are so many 1000's possibility 's with the osc addons and so much available now through the use of jquery To improve is to change; to be perfect is to change often.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.