Drupal and Ubercart 2.x: Install a Ready-made Drupal Theme

Exclusive offer: get 50% off this eBook here
Drupal E-commerce with Ubercart 2.x

Drupal E-commerce with Ubercart 2.x — Save 50%

Build, administer, and customize an online store using Drupal with Ubercart

$26.99    $13.50
by George Papadongonas Yiannis Doxaras | March 2010 | MySQL Drupal e-Commerce Open Source PHP Web Development

Consider that you have built an e-store, and it is full of products, has great functionality, and offers the client a great browsing experience. The only problem is that you're still using the default Drupal theme, so your website looks too ordinary and rather ugly. People won't be able to perform proper searches and you cannot interfere with the UI by simply promoting items from your stock or communicating special deals and offers.

This article by George Papadongonas and Yiannis Doxaras, authors of Drupal E-commerce with Ubercart 2.x, shows you how to install a ready-made theme, free or commercial, and use it as is.

Install a ready-made Drupal theme

We have to admit that Drupal was not famous for its plethora of available themes. Until recently, the Drupal community was focused on developing the backend, debugging the code, and creating new modules. The release of Drupal 6 made theming much easier and helped the theming community to grow. Now, there are not only thousands of Drupal themes, but also dozens of themes designed and customized especially for Ubercart.

Basic principles when choosing a theme

Choosing a theme for your online shop is not an easy task. Moreover, it can be even harder considering that you want to promote specific items from your catalog, you need to change first page items often, and you need to rapidly communicate offers and loyalty policies and other business-related stuff. Ubercart-specific themes mostly target the following special areas:

  • Product catalog
  • Shopping cart
  • Product-specific views

You should keep these layout regions in mind, while going through the following section on theme selection. Before you search for any kind of theme layout, provide your neurons with enough input to inspire you and help you decide. Perform a quick Google search for online shops in your target market to get some inspiration and track down sites that make you, as a customer, feel comfortable during product searching and navigation. If you decide to search for professional help, a list of existing sites will help you to communicate your preferences much more directly.

What better place to search for inspiration and successful practices than Ubercart's live site repository! You will find good practices and see how mostly people like you (without any development background) have solved all the problems that might occur during your search for themes.
http://www.ubercart.org/site

Next we describe the main user interface components that you should keep in mind when deciding for your online shop:

  • Number of columns: The number of columns depends on the block information you want to provide to your end customers. If you need widgets that display on every page, information about who bought what, and product or kit suggestions, go with three columns. You will find a plethora of two-column Drupal themes and many three-column Drupal themes, while some of them can alternate between two and three columns.
  • Color scheme: From a design perspective, you should choose a color scheme that matches your company logo and business profile. For instance, if your store sells wooden toys, go with something more comic such as rounded corners, but if you are a consulting firm, you should go with something more professional. Many themes let you choose color schemes dynamically; however, always keep in mind that color is a rather easy modification from the CSS. You can get great color combination ideas from COLOURlovers online service (http://www.colourlovers.com/) that match your logo and business colors.

    Be careful though. If you choose a complex theme with rounded corners, lots of images, and multiple backgrounds, it may be difficult to modify it.

  • Drupal version: Make sure the Drupal theme you choose is compatible with the version of Drupal you are running. Before using a Drupal theme, look up notes on the theme to see if there are any known bugs or problems with it. If you are not a programmer, you do not want a Drupal theme that has open issues.
  • Extra features: Many Drupal themes expose a large set of configuration options to the end users. Various functionality such as post author's visibility or color scheme selection are welcome for managing the initial setup. Moreover, you can change appearance in non-invasive ways for your online marque.
  • Regions available: We have discussed column layouts, but for the Drupal template engine to show its full capabilities and customization, you definitely need multiple regions. The more regions, the more choices you have for where to put blocks of content. Therefore, you can have space for customizing new affiliate ads for instance, or provide information about some special deals, or even configure your main online shop page, as we will see in the next section.

    Drupal and Ubercart 2.x Theming

  • Further customization and updates: When you choose your theme, don't just keep the functionality of version 1.0 in mind, but consider all of the future business plans for approaching your target market and raising sales figures. Make a three-year plan and try to visualize any future actions that should be taken into account from day one. Although you can change themes easily, you are better off choosing a more flexible theme ahead of time than having to change the theme as your website grows.

Always bear in mind that the famous razor of Occam also applies to online shop theme design. Keep it simple and professional by choosing simple layouts, which allow ease of use for the end user and ease further customize designs and themes (changing colors, adding a custom image header, and so on).

Before you start, clearly define your timeline, risks, total theme budget, and skills. Theming is usually 25-40% of the budget of an entire online shop project. Drupal's theming engine closely integrates with actual functionality and many features are encapsulated inside the theme itself.

There are a number of different ways in which you can get yourself the best theme for your online store. We will go through all these approaches with useful comments on what options best suits your needs.

Drupal E-commerce with Ubercart 2.x Build, administer, and customize an online store using Drupal with Ubercart
Published: March 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

Do it yourself

If you have moderate skills in XHTML/CSS and you also know how to operate a graphics editor, you may very well be able to create your own Drupal theme. Knowing how Drupal's bits and pieces work is more important than any kind of advanced PHP knowledge. If you have decided to experiment and do it yourself for the first time, probably it is best to install and modify a ready-made theme.

Total time spend on theme selection

Time will vary from one week to one month, especially if you create your theme from a Photoshop template (PSD) and cut the layers to XHTML/CSS. It also depends on the number of different page themes you create.

Budget

If you do not count your personal time in the project budget, then total budget spend is zero.

Places to look

Drupal theme documentation (http://drupal.org/theme-guide/6) and especially the page Anatomy of a Drupal theme (http://drupal.org/node/171194) will get things started.

Get it for free

The Drupal theming community is expanding and many themes are ported from other popular CMSs like Wordpress and Joomla!. This is the fastest way and you are advised to go with it if you are short on budget or time to spend.

Total time spend on theme selection

Time will vary from one hour to two days max; most of the time will be spent on installing a theme and then changing it, in order to find the most suitable one for your site.

Budget

The budget would be the same as if you were to do it yourself.

Places to look

You can visit the following pages:

  • Drupal Themes (http://drupal.org/project/Themes): Here you can find the most updated and fullest repository of ready-to-use Drupal themes. Use of search filters is strongly advised; you can search for popularity, recent activities, and target Drupal version.
  • Theme Garden (http://themegarden.org/drupal6/): Theme Garden is a project that provides useful information and insight about Drupal themes along with theme previews, a very clever feature that saves time.

Buy it

You can go with the nearly free theme route, downloading a theme from an inexpensive theme seller, or you can buy a premium, high-quality theme. The former will get a site up and running for little to no cost, but you may fi nd yourself limited by the number of regions, quality, and features of the inexpensive themes.

Total time spend on theme selection

Time will vary from one hour to two days max; most of the time will be spent on downloading and installing a theme, and then again changing to new one to suit your needs.

Budget

From $30 for a basic theme, to $400 for a premium theme, along with a few hundreds of dollars if you choose to get a Drupal themer to alter an already-purchased theme in order to suit your needs and stand out from similar templates.

Places to look

You can visit the following pages:

You can find high-quality themes especially designed for Ubercart at: http://www.topnotchthemes.com/drupal-ubercart-themes

Hire a designer

Finally, you can hire a designer or themer to make a completely custom Drupal theme for your site. This will give you the maximum control, but is the most time-consuming and expensive option. There are many Drupal design and theming shops out there. A custom theme involves having a design created for your site from scratch, usually by a designer who then provides mockups (or mockups and CSS) to a Drupal themer.

Total time spend on theme selection

Time taken may vary from one week to two months depending on the communication between the themer, the designer, and you.

Budget

Trying to provide a rough estimation about the cost of a custom theme is not straightforward and depends on a number of factors. The bare minimum for an extremely basic, single-page design would be a few hundred dollars. The average cost for a small business site design plus Drupal theme would be in the lower range of thousands. This can vary widely due to things like number of unique pages, whether or not Drupal module support required, if you need a logo, and so on, but hopefully that gives you a general idea.

Places to look

There are a small but rapidly emerging number of Drupal theming shops out there. We suggest you make a quick search and ask for references and portfolios. Be careful to ask for XHTML/CSS-strict themes and make a detailed list of what you want developed before signing the contract to save both parties from misconceptions.

Don't forget to take a look at online marketplaces, such as http://www.elance.com or http://www.odesk.com.

Another recent and extremely helpful option, especially for agile and rapid theme development, is Artisteer (http://artisteer.com). Artisteer is a web design automation product that instantly creates Drupal themes.

Installing a Drupal theme

After you have decided the best theme to go along with your online store, you should follow these steps to install it. This is a very straightforward procedure:

  1. We will go through installing the second most popular Drupal theme according to Drupal.org statistics. Go to http://drupal.org/project/acquia_marina and click on the download link next to the 6.x-1.9 version.

    Drupal and Ubercart 2.x Theming

  2. Secondly, you have to upload the theme to your local site theme directory using FTP. Theme should be unzipped and placed in the [DRUPAL ROOT]/sites/all/themes path of your Drupal site installation.
  3. After you extract the zipped file in the themes directory, navigate to the themes administration screen (Home | Administer | Site Building | Themes), or hit a page refresh if you are already there. Select the theme that you want to install and press Save configuration.

Drupal and Ubercart 2.x Theming

After you apply the theme, your online shop will look like the following:

Drupal and Ubercart 2.x Theming

For those of you coming from another CMS such as Joomla!, where you are more familiar with a separate administration interface, you may also simulate this behavior in Drupal. Another good reason for doing so is that, this way you will be able to perform administrative tasks without any distraction that eye-catching e-shop features will pose. To do that, go to Home | Administration | Site configuration | Administration Theme and choose a light-weighted theme, such as Garland. This theme will be activated only when you authenticate using a user with administration privileges.

Summary

In this article we saw how you can install a ready-made theme, free or commercial, and use it as is. In the next article we will cutomize the theme.


If you have read this article you may be interested to view :


Drupal E-commerce with Ubercart 2.x Build, administer, and customize an online store using Drupal with Ubercart
Published: March 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


George Papadongonas

George Papadongonas is the owner of a small web development firm, located in Athens, Greece. He started his career as a freelancer web developer in 2000 and works with small and medium size enterprises. He has experience in many development platforms, but felt in love with Drupal in 2007 and with Ubercart in 2008. He is a member of Drupal Association and an active supporter of the open source community.

Yiannis Doxaras

Yiannis Doxaras has studied theoretical physics at University of Athens and University of Cambridge. He is co-founder of OSIS, a Greek open source startup company that provides turn-key solutions in industries like travel, e-learning, and e-government. Yiannis is an active committer in various open source projects mainly with Java, Python and PHP technologies. He is a serial entrepreneur and innovation broken in Greece and the Balkans.

Books From Packt


Drupal 7 First look
Drupal 7 First look

MySQL Admin Cookbook
MySQL Admin Cookbook

Magento 1.3 Sales Tactics Cookbook
Magento 1.3 Sales Tactics Cookbook

Drupal 6 Performance Tips
Drupal 6 Performance Tips

PHP 5 E-commerce Development
PHP 5 E-commerce Development

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

TYPO3 4.2 E-Commerce
TYPO3 4.2 E-Commerce

Drupal 6 Attachment Views
Drupal 6 Attachment Views


Your rating: None Average: 5 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
w
V
M
f
G
n
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software