Designing a Template with the Miva Merchant CSS Framework

Our new stock Cascading Style Sheet (CSS) framework allows a web designer with basic CSS knowledge to easily design and implement an e-commerce template to a new Miva Merchant store. Because it is a template, and you are working with a default CSS framework, we are only covering the basics; however, there is plenty of room to expand your design and functionality.

The items that can be customized include the logo, top header background, search button, phone number, top navigation bar, left navigation bar, promotion graphic, featured products section, best sellers section, and footer. Each element can be styled using images and some CSS tweaking.

Top Header Background Customization

The top header background is customizable to meet your needs or design preferences. For this template, I chose to use a subtle textured highlight over the background color to give the design a little depth. The logo is a separate image from the header background graphic. Also resting on the header background are the search bar, search button, sign in, order history, and phone number. In your design, the header background can also be used to announce a promotion, a new sale, or a holiday coming up.

Search Button Customization

By default, the search button is a box with text over it that says “Search.” You can design this button however you wish by having CSS hide the default “Search” text and using your custom text instead.

Top Navigation Bar Customization

The appearance of the top navigation bar can also be decently customized to look as fancy as you like. We are still using text as our links (default text is Home, About, Contact, Account, Basket, and Checkout), but the background is easily customizable. In the template design, I added a nice gradient, an outline, a very minimal drop shadow, and rounded corners on both ends. Each navigation item is separated by lines to define the sections. See my pixel perfect web design post that accurately describes how this is done.

Left Navigation Bar

The left navigation bar is made up of categories, and, by default, lists each of your store categories. The CSS adds a graphic header with the word “Categories.” Below that are custom graphic bullet points that line up in front of the text and link to each category.

Right Column Customization

The main body of the design, the right column area, is made up of a promotional graphic with “Featured Products” and “Best Sellers” underneath. Like the top header background, the content of the promotional graphic is for you to choose and customize as you wish. This is a great place to promote new sales or holiday specials coming up. The “Featured Products” and “Best Sellers” sections have stylized text within the CSS as well as a custom “Buy” button for each of the four products described in the sections.

Footer

The footer on the CSS template simply adds styling to the text and makes everything center-aligned.

Conclusion

Overall, this template was designed using best practices for creating clean, pixel-perfect, web design. Other Web 2.0 design trends can be viewed in my “Web 2.0” blog post.

My next post will outline how to prepare your template design for implementing within the new CSS framework.