Things are much more easy here, than in the bx gallery case. In case you are a mini template system user, there are good news: This all and much more will be included into version 1. People do not visit online stores to login or to create accounts , so, if you still have this on your store, remove it asap! Having mini template system installed, it get really easy to configure the front page.
Using the front page manager and the banner manager we can configure the front page very quickly without having to modify any file at all. We are going to use the 2 banner modules, the first one to display a large image and message, the second one can be used to promote featured products or specials or anything.
Well, finally, the front page includes just 1 banner slider and look like this. This is however the easiest part of the whole design process, technically I mean.
The hard part is to get the right inspiration As said, this is all done using mini template system. The file we need to work on is index. You are free now to add anything you want into here, this is plain html and you can do whatever you want, no limitation.
If you want for example to add a slider, there are many nice jQuery based sliders around, I personally would use bxSlider as I did for mini template system. However, here is an other slider overview , but please do not feel limited to this, there are for sure more.
If you want to have new products, or upcomming products or any other module you may have installed, you can add it to here like this for the new products. So, we are done with the front page, not so hard, not?
Next step is no make the main navigation menu on top. This is something that I left for the end, for sure you noticed that on the final images, the header is already there. Here is how I did it. That was all. Lets see now what I had to do if not using mini template system. Here is a useful article to read, that explain the osCommerce header structure.
I used a custom ui widget theme to fit the needs of the template. This I created using themeroller , all I had to do was to install it, you can read here about how to install a new theme to your osCommerce store.
I used also custom fonts for the header section and all page headings, you can read here about how to do this. Well, people, I maybe forgot to mention some things I did, feel free to ask. Target of this post is finally to give you inspiration and not to teach you each technique step by step. Files that I had to modify starting from a default osCommerce 2. Please realize that changing just 7 files changed the overall look of the store completely.
Consider this when you are planning to purchase a template and ask before buying how many files will need to be modified or replaced by he template. Most of the poorly coded templates will require a complete reinstallation of osCommerce. A properly coded template will not require changes to more than 10 files, something aroud 5 to 10 files.
The store is live and you can visit it if you like here Mas Design Feel free to browse around and to check whatever I posted here. Please do not make any test orders because the store is live, I guess that real orders are welcome of course, I can only say that this titatium backcovers are really a nice thing. PS Please do not ask me to send you this template. This is a custom work, the design and layout are unique, the store owner participated him self at many stages of the design process, making images, suggestions, giving ideas etc.
So, there will be no second exactly same store. Follow me on twitter. I'm not tweeting all day long and guaranteed no spam and no advertising. If you like what you read and if you think it will help you in your online business, then please consider a donation. There is no obligation to do so and all information provided here is free to use.
It will however help to keep this blog alive, free of advertising and full of content. I think the new design is fab, I love the darker look of sites. I am still a little confused where you create a template and how it is uploaded into the mini template system — perhaps others will also be vague on this, could you perhaps expand that section a little when you have a moment.
What you have done so far looks really, really good! I prefer the image on the right as it feels more natural to go that way to click add to cart or checkout etc…. I love this tutorial, but striking out on some of the details. Could you provide a little more description? Was wondering about the hover effect for the subcategories. Itll be awesome if I can get more detail on it. You can use for this rules like opacity, negative bottom, transitions etc.
Well, the purpose of this article is to give a general overview of a template design process and to show the possibilities that exist in osCommerce. Going into each detail, would be too much I think, I will try however to cover different parts in future posts.
Things are easier if using the template system, but the post does not focus on that. It explains how to do things without any other tools but a plain text editor. Very Nice Tutorial. I appreciate you sharing your knowledge with us.
Keep up the good work and I will be back to see the finished store. Hi there, I discovered your web site by the use of Google even as searching for a related subject, your web site got here up, it appears to be like great.
I have bookmarked it in my google bookmarks. Getting your osCommerce files responsive is actually quite easy and you can get it done in approximately 15minutes. Mobile, Tablet, and Desktop breakpoints. It would be a good idea to read the documentation before you start too. There are 5 files to edit and 1 additional. You can download the addon at osCommerce.
Please note: Although not a must but it is preferred move the javascript to the footer and as far as possible load. STEP 3: Now we change the classes of the content and the column widths. Note the underscore to hyphen. The footer and header classes will really depend on the design of the theme and that could change but for the.
At this point if you refresh your browser you site will be responsive. You now have to decide the width of your. You will see the column percentages and the widths they go in increments of 5. The CSS code in the stylesheet. This article will explain how to change the color of the background of your osCommerce bodyWrapper content.
The first thing you will need to do is create an image for your header. Just like the last tutorial, we will make the header image duplicate across the header. The image we will use in this tutorial is found to the right. Part of the bodyWrappe r is the header section. The header section simply needs an image to make it fit the body content color. Below are the steps to set this up. Once you have the image you want for your header, you can now add the code which will style the bodyWrapper content of your site.
Upload the header.
0コメント