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.
And the header is also giving me a header-ake ;- for the background I had to put in the full path before image gets displayed. Yes, the post above is valid for osCommerce 2. To your questions and issues: I suggest to get in touch via email and give me some more details about what you want to achieve and what you tried to do so far. Dear George, I like all your tutorials, they are easy to understand and to follow, especially for newbie like me.
Please also make tutorial on the header tags subject such as adding page tittle, keywords, etc to improve seo. Great tutorials. On the product information page, if i like to move the product images area under the description not on the right or left and i need a small space maybe px between the additional images thumbnails. Great stuff. I have to say however that, this particular design not the best is, for a store with many categories and products, you would need an easier navigation for this, depending on the category structure.
That is why any design has to start at the same point: the content! Search the forums. Useful threads: Store Speed Optimization How to make a horrible shop Basics for design change How to search the forums. I am thinking of buying a template from one of the sites but I haven't a clue as to what I am doing. I love three that I saw. If I buy the template am I stuck with what I see or can things be changed. I don't even know how to download it and integrate it with my storefront.
The template that I saw says Happy Valentines Day. I would want to change that and put my own graphic up there but am I limited.
How hard is it for not a dummy but a stupid to change all of this stuff. I keep reading these posts and to tell you the truth I am sure you all know what you are talking about but I have no idea of what these abbreviations stand for let alone the definition.
I just sent for the book begging OSC but I am sure it shows just the basics of how to operate the store. Which will be a good thing even though I am sure it is basic for me. I really want to change things to red instead of grey but don't even know where to go to find the files that you all talk about. Is there a book? Most of those templates are hard coded and aren't really created with OsCommerce in mind, regardless of what they say. Do a forum search for "templates" and you'll find all the people who have had a ton of trouble with them.
For example, if I create a navigation system at the top of a page from scratch, how do I know what to link each button to? I tried opening PHP files in Dreamweaver, but there is only code General Support Search In. How do I know if my payment has gone through? I do not have a phone for verification. Why do I have to undergo anti-fraud verification? Delivery and invoices. How long does it take to get the template after the purchase? How do I get an invoice? I need to return my product, cancel my order or get a refund.
Problems with download. I downloaded "get. Can I use download manager? Trouble with downloading free clipart library items I have downloaded the zip file and its not working I received no download instructions I misspelled my email while ordering "Link is inactive" message Lost files - how can I redownload? The link goes nowhere I paid for my order but I haven't got my template. Other questions. I've been billed incorrectly - what should I do?
I have purchased the wrong template. Can I exchange it? What's Inside the Template. What is a Zip File? Software Requirements. Working with fonts. Working with HTML. Working with Photoshop.
Do I need to slice the template PSD files myself? Fireworks MX and Photoshop compatibility How to add text to images. Working with Flash. FLA movie but not in published. Working with Dynamic Flash. Working with Dynamic Flash Photo Galleries. Working with CSS. What is CSS? Editing CSS. Working with OsCommerce. How to install an osCommerce template Setting up your existing shop without re-installing Changing the number of the featured products How to update images Registering globals in OsCommerce template Configure.
Working with ZenCart. Working with CRE Loaded. Working with WordPress. Working with Php-Nuke. Working with phpBB. Uploading files to a server.
How to upload files to a server Missing images after publishing How to update the template booklet. Demo movies database. Dynamic Flash. How to edit a dynamic flash template How to add special characters How to convert dynamic flash to a regular one How to create a new dynamic flash page 1st method How to create a new dynamic flash page 2nd method How to change a dynamic flash gallery.
Dynamic Flash Photo Gallery. How to work with images How to work with categories How to use gallery settings tool. XML Flash Templates. Installing Type 1. TTF fonts. How to choose a background color How to use frames for the gallery How to create an image gallery How to set up gallery thumbnails.
How to edit text How to assign a link How to change images How to change colors How to change sound How to extend a slideshow How to work with combobox How to create a contact form How to edit a text with effect How to skip header animation How to add subpages.
CRE Loaded. Installing a PHP-Nuke. How to add more pages. Unzipping your template. Click "Install" to get the next step. To hide them you should: 1.
0コメント