Ultimo is one of the best-selling themes available for Magento eCommerce online stores. It is responsive and has impressive sales and stellar reviews. At Shero Designs, we have a lot experience working with and customizing the Ultimo Magento theme, and we’d like to share our advice and recommendations for using the Ultimo Magento theme to make your online store look great and work for you.
1. How it Looks
Most people probably choose the Ultimo theme for their Magento project because of its trendy looks. Ultimo is a great example of modern web design in terms of look and feel. It uses color boldly with large, flat buttons and clear images.
Ultimo is a responsive theme, and acts as a fluid grid layout that looks great on both desktop and mobile browsers. The theme is built on a very intricate grid layout that can combine columns of different quantities and sizes. The theme also includes a very impressive mega-dropdown menu, and uses cloud zoom to highlight product images and allow users to view products up close and personal.
2. Included Features
The theme includes features that make life much easier for a front end developer. Probably the most useful of these are the 50+ CMS blocks that are already built in. Developers can import these CMS blocks and enable the blocks that will appear where you need them to be.
Brands are presented in an interesting and unique way in the Ultimo theme. You can add images for every brand that you sell, and this brand will be displayed beside the product description for that brand’s products. There’s also a cool brand slider that you can include on your home page that will display as a slider.
Speaking of sliders, Ultimo has many shortcodes that you can include on your home page to present visitors with different shopping options. There are sliders for presenting new items, sale items, or items that you pull from a specific category. You can choose the numbers of products in the carousel, the number of products displayed, whether there is an “add to cart” button, and other similar options.
Ultimo utilizes Google Fonts to provide you with an array of typography options. Google Fonts are easy to implement in the admin and look great on all browsers. If you want, you can also use an @fontface kit to install and implement your own font, so your options are endless.
Ultimo’s Admin Area is definitely the most extensive one I’ve ever seen during my time working on Magento websites. The design options it presents are extensive. Almost all color customization can be done from the admin panel, including buttons, text, headers, and links. Oh, and did I mention the 190 page Ultimo Theme User Guide PDF? It’s an excellent resource that I have turned to time and time again when customizing the Ultimo Theme. The Ultimo User Guide can show you how to use the admin to make your website look and feel exactly how you’d like it to.
Description and Reviews tabs allow visitors to review information and reviews about a product while also conserving space on the page.
Customizing the Ultimo Theme
Customizing the Ultimo Theme is generally smooth, but there are a few pieces of advice I’d give to anyone looking to style this theme. First and most importantly, It’s important to understand which elements of your Theme you should be styling in the Admin and which elements you should be styling in the CSS. If you are not comfortable customizing CSS – that’s ok. You can make this theme look great without it. If you are like me and prefer to do all of my customization in the CSS, take note that this isn’t always the best idea like it is for other themes.
Be very very careful when editing the following elements:
1. The Grid. As I mentioned before this theme is based on a grid that combines columns and areas of different widths. Be very careful when editing the grid in CSS, because you may be inadvertently affecting something you don’t want to. For example, adding padding to a grid will increase it’s total size, and while it may fit within a certain page layout, in another layout this column may push out another column. You should set max-width in the admin, but I have found it to work inconsistently so I usually end up setting max-width in the CSS.
2. The Buttons and Navigation and link colors. I wont’ recommend using the admin or the CSS, but I will recommend keeping it consistent here. The theme includes an override-theme.css file which you can use to overwrite options that are only defined in the admin and not in the regular style.css page. You can also choose these options in the admin. I have gotten myself confused more than once by using the admin to customize a few things and then trying to use the CSS to control other things, so my advice would be to stick with one or the other. All the color options are in system > configuration > ultimo > theme design
3. Product grid and list view options should be set in the admin. For example, do you want the drop shadow effect to appear? Do you want the “add to cart” button to appear? How about “sale” and “new” stickers for products? Don’t bother digging through the CSS to disable these things, you are wasting your time and slowing things down. Look in the admin under system > configuration > ultimo > theme settings
4. Product images are generated by Ultimo, so if you try to create a larger space for your product images, sizing them up will create a blurry effect. You need to regenerate them to be larger in the admin. You can find this option under system > configuration > informs extensions > zoom.
My overall assessment:
I highly recommend the Ultimo Theme for any modern Magento eCommerce store. It’s a great looking theme that is relatively easy to customize. Anyone working with this theme should read through the entire user guide before starting, so you don’t try to customize something yourself when the theme already has a solution. If you’re using Ultimo as the foundation of a completely custom design, I’d create your design based on the existing grid, and there are plenty of layout options.
From a developer’s point of view, my advice would be to be careful of javascript conflicts. Ultimo uses prototype so make sure your javascript is not using ‘$’ and make sure to either implement javascript noConflict or allow 3rd party developers, and their javascript, to be tested one module at a time to ensure compatibility. For the most part you should be fine. Here is a list of modules we use with Ultimo and our experience:
A.) Manadev Layered Navigation
No problems when installing this module with Ultimo.
B.) Aheadworks Subscription Module
We had one issue which their techs solved. An issue with the product options in a subscription led to a conflict where we could not add a product to the cart without receiving an error to make sure we choose a subscription product. This was with the 2.0 version of the Aheadworks Subscription and Recurring Payments module.
C.) Aheadworks Advanced Reviews
This module works fine without any problems with Ultimo
If you find that you are avoid conflicts with buttons such as ‘add to cart’ you should be fine. For modules that simply add data to a page such as reviews or contact forms or any admin based module, such as an advanced grid to view sales, you should be fine.
If you have a question or need help customizing your Ultimo Magento Theme, please comment below or contact us directly.
Check Out Our Work
Caitlin, Joel, and the team here at Shero Designs have worked on the following websites that use the Ultimo Magento Theme. We have another highly customized Ultimo project in the works, so check back soon to see the completed Organic Pharmer eCommerce site!
Junie Moon Shop
Tracking Dog Supply
Museum Shop (Demo site)
Customer Success Manager
