Product Cross-selling and Layout using Panels with Drupal and Ubercart 2.x

Product cross-selling

Product cross-selling is a very powerful policy that you might be familiar with. For instance was one of the early adopters of recommendation systems in a very sophisticated manner, and it boosted its online selling rates by hundreds of millions of dollars. If we move on to more algorithmic complexity, a more sophisticated example is Netflix, an online movie rental service, and the core of its business is its recommendation system and the hype that surrounds it. Finally, the most recent and simplest to implement is with a very elegant and efficient recommendation algorithm. By adopting Drupal and Ubercart, things become pretty straightforward, as you have good modules that encapsulate the complexity of recommendation algorithms and require little configuration, and you may as well provide to your end customers a great consumer experience. In addition to that, do not forget the powerful and robust taxonomy mechanism that Drupal implements in its core and the site-wide content tagging it provides, so the relevant items and items that could be used in conjunction could be categorized. So now without further delay, we will go through all these interesting possibilities that our Drupal online shop could offer.

Using taxonomies

As we have already mentioned, taxonomies are the core of the Drupal system and grasping the high-level implementation can save us a lot of trouble most of the time. Taxonomies often help us create references for our Drupal system nodes, differentiate between them, and create easy-to-use, intuitive, and searchable views on our content. Therefore, in our example, the basic idea is to create a taxonomy not only for products that can be sold as groups (as we already have Ubercart product kit for that), but rather for the products administrator to be able to tag all these relevant products in a way that high-revenue electronic shops like ExpanSys and PixMania have adopted.

To achieve this we do not need any new module installation but rather the plain old Drupal taxonomy system. We will make two taxonomies: one for product mangers, which they can edit while they add new products, and another in which users can free tag your content. These free taxonomy vocabularies are also referred as folksonomies. Furthermore, everyday practice has shown that relevant taxonomy blocks can really boost your site traffic, page views, and eventually conversions that translate to purchases. The vocabularies that we will alter are the following:

  • Community Tagging. We need this particular free tagging vocabulary to allow our end users to tag the products of our site in order to provide non-intuitive connections.
  • Product Types. This stands for an internal tagging vocabulary with predefined terms namely offer, best price, and new product and will help create the corresponding views in order to perform product promotion in your online electronics shop.

To create the new vocabularies and change the existing one, we take the following steps:

  1. Navigate to Administer | Content management | Taxonomy. Click on Add vocabulary.
  2. Fill in the name as "Community Tagging" and provide a short description.
  3. Choose Product and Product Kit as the Content types that will be associated for tagging.
  4. In the Settings pane choose Tags to allow free tagging and Multiple select.
  5. Finally choose Not in Sitemap for XML Sitemap.
  6. To add another taxonomy for product visibility options and positioning, go back to the taxonomy page and again click on Add vocabulary.
  7. Add the name "Product Type" along with a short description and click on Product and Product Kit in the Content types section. Finally add a priority 1.0 to the XML sitemap element and click on the Save button.
  8. Navigate to your newly created vocabulary terms and add the terms "offer", "best price", and "new product".

This is an example of a user-defined term-tagging procedure on one of our products.

Drupal E-commerce with Ubercart 2.x

Use Taxonomies for Navigation and Menus
You can also use Drupal's system pages using the taxonomy view module for category listings. The end of the URL should look like this: taxonomy/term/1 or taxonomy/term/2.
Note that taxonomy URLs always contain one or more Term IDs at the end of the URL. These numbers, 1 and 2 above, tell the Drupal engine which categories to display. Now combine the Term IDs above in one URL using a comma as a delimiter: taxonomy/term/1, 2. The resulting listing represents the boolean AND operation. It includes all nodes tagged with both terms. To get a listing of nodes using either taxonomy term 1 OR 2, use a plus sign as the operator: taxonomy/term/1+2

Using recommendation systems

Recommendation systems have existed a long time and make a crucial contribution in some of the most successful online shops. In this section we will focus on examples of implicit data collection of the customer's activities that include the following:

  • Observing the items that a user views in an online store.
  • Analyzing item/user viewing time.
  • Keeping a record of the items that a user purchases online.
  • Obtaining a list of items that a user has listened to or watched on his or her computer.
  • Analyzing the user's social network and discovering similar likes and dislikes.

Having these data and customer behavior in our account, it is then easy to find the optimal item suggestions that fit people's profiles. We can then provide sections like "customers who bought this book also bought" on suggestions.

Further to our discussion we will install recommendation API and two other modules that depend on it. The Ubercart-oriented module is the Ubercart Recommender module. This module collects data through the Drupal Core Statistics module about user purchases and provides suggestions about other products that could be relevant to the returning customer. All recommendation systems assign special weights in their recommendation algorithm to purchased products since this generates returned value and we have a fully converted customer. In order to handle suggestions to users that have not made any purchases yet from our online shop we will also use the Browsing History Recommender and Relevant Content modules. You can find more information about the algorithms and the recommendation procedure implemented in the Drupal Recommender API at

Next we provide a synopsis of the added value and the functionality of each module:

  • Browsing History Recommender: This module adds two blocks in your site "Users who browsed this node also browsed" and "Recommended for you". To calculate the recommendations, this module uses Drupal statistics and in particular the history data and keeps track of 30 days of users' node browsing activity. The "Recommended for you" block provides personalized node recommendations based on a user's node browsing history.
  • Relevant Content: This module provides two ways of referencing content relevant to the node in sight. Both of these methods provide configuration to filter for specific content types and vocabularies, limit the maximum size of the result, and provide some header text. The result in both cases is a list of nodes that the module considers most relevant, based on the categorization of the current page. You can configure multiple blocks with individual settings for node type, vocabulary, maximum result size, and optional header text.
  • Ubercart Products Recommender: This module actually adds two extra block in our blocks section, one named "Customers who ordered this product also ordered", which performs a cross check between orders of customers that bought the particular product in sight and another named "Recommended for you", which provides personalized products recommendations based on a user's purchasing history.

To configure your online shop to provide content-related recommendations we need to perform the following administration steps:

  1. Download Recommender from by navigating here:
  2. Unzip the file in your site's modules directory.
  3. Navigate to the modules administration screen and activate this module.
  4. Follow the preceding procedure for the following modules also: and
  5. After you have uploaded and installed all modules you will be able to see the following blocks in your blocks page (Administer | Site building | Blocks). Although these modules have configuration screens, they do need extra configuration or property change actions and can be assigned to your theme regions as they are from the blocks section.

Drupal E-commerce with Ubercart 2.x

You can find a very thorough discussion about all recommendation modules on Drupal at

Product layout using Panels

The Panels module is one of the most controversial Drupal modules. The main reason for this is the long period this module, for Drupal version 6, has spent in beta version. Only recently has a stable version 3.2 for Drupal 6 been launched. In addition there was a dead end in the Panels version 2 development branch that forced the module developers to skip the version and jump to 3. Panels module has gained a new momentum with new and rich page customization features that address both experienced and everyday users that want to configure their home page or their inner pages as well. Experienced themers that were reluctant to use the Panels module as they were used to performing most of the layout actions using XHTML and CSS are becoming more open to adopt Panels, as it provides reusable page layouts along with the option for end users to change their site look and feel in just a few seconds. The real power of Panels emerges, of course, in conjunction with the Views module generating a fully customizable block view that can be placed in every single area of your template.

Panels in Drupal

The Panels module allows a site administrator to create customized layouts for multiple uses. In our case you may be thinking of changing the home page layout or your electronics search page. You can use the drag-and-drop content manager functionality that lets you visually design a layout and place content within that layout. Integration with other systems allows you to create nodes that use this, landing pages that use this, and even override system pages such as taxonomy and the node page so that you can customize the layout of your site with veryfine-grained permissions. Panels comes with a number of preconfigured page layouts that you can choose, in order to fully customize each page according to your needs. You can see all possible page layout configurations available in your Drupal site in the following image. This image shows the Panel administration screen at Administer | Site building | Panels | Settings | Panel Nodes.

Drupal E-commerce with Ubercart 2.x

Panels makes a wide use of contexts in Drupal. Context in plain words is a mechanism Drupal uses for the runtime engine to decide on some global variables about the page being rendered at the present time. Therefore, Panels can change its layouts according to aspects of the page rendered such as the time you see the page, the role of the users that makes the request, and the preferred language of the user. These contexts can be checked for information and used not only to make content available to be displayed, but to choose which layout to display. For example, if your site is international, you can use context to see if the node being viewed is set for a particular language and choose to display it one way if it is in French or another way if it is in English. You can also select on attributes such as node type, whether or not the user has access to edit the node, and more.

Panels also includes simpler applications of the drag-and-drop system. There is a node type (the 'panel' node) that can simply be added as content to your system. By being a node it loses a lot of the features that the more powerful page system has, but it does have the advantage of simplicity, and gaining all of the functionality that nodes normally get.

Panels can also be used for items smaller than pages. What if you have a normal sidebar, and you have two pieces of content that waste a bunch of space because they're really too narrow, and your design looks significantly better if they are side by side? That's complex to do in Drupal because what you end up having to do is create a custom block with custom code to display these two pieces of content. With Panels, you just create a "mini-panel" with a two-column layout. Add one block to the left, one block to the right, and finish. This mini-panel will then be available to your system as an ordinary block, or as panel content to go in other panels.

The Panels module integrates with Views to allow administrators to add any view as content. Or, for uses where the layout editor needs more tightly controlled content, Views can be given custom displays to provide only what the site administrator wants the panels builder to use.

  • Panel pages are the primary Panels module; you can use this for creating single full page layouts. This replaces the standard panel that existed in the earlier versions of Panels. If you are upgrading your site from Panels 1, and you cannot find where your panels went, be sure to enable the panel pages module.
  • Panel nodes are useful for creating layouts that only occupy the content area of your pages. Frequently, it is desirable to add an area to a node layout, such as a pull quote for a newspaper or a photo block, which you don't necessarily want on every node. Panels nodes let you control the layout of a single node at a time and place content such as blog posts, images, and blogs in and around the post.
  • Mini panels are a layout mechanism for blocks. It won't take long using panels before you get to a point when you want a panel inside of a panel. Or a panel that can be used as a block. That is exactly what mini-panels do. You can create a small panel here with various pieces of content and then put it inside of a panel page or panel node.

In order to install the Panels module you need to download it from and unzip it in your site's modules directory. Take into account that the Panels module has a prerequisite of the ctools module so if you have not installed this you need to do it right now. You can find ctools at You also need to unzip ctools in your modules directory and then navigate to the modules page from your Drupal administration screen, Home | Administer | Site building | Modules. At this screen make sure you activate the following modules because to have a fully functional panels installation you need the page manager chaos tools counterpart. This is actually the old delegation module that was renamed and added to chaos tools in Drupal 6. If everything works fine you will be able to see the following modules:

  • Chaos tools
  • Page manager
  • Views content panes
  • Panels
  • Panel nodes
  • Mini panels

Drupal E-commerce with Ubercart 2.x

You probably need all of them so check them and click on Save configuration. There you are, with the Panel module installed and ready to start the action.

Panels used in theming
Creating a custom layout in your theme can also be accomplished using panels and to find out more navigate to A panel layout is a layout that can be used by the Panels module. You can add content to defined content areas within a panel. The Panels module comes with several layouts, but you can also create your own for your own module or theme. Here we will create a layout for a theme.

Panels basic configuration

Before we start developing our first page we will take some time and review all the configuration options of panel pages. Luckily, as the developer of Panels is also developing Views we will see some resemblances and same clean and intuitive design as Views. Navigate to Home | Administer | Site building | Panels where you will see the following screen:

Drupal E-commerce with Ubercart 2.x

Actually, Panels relies upon third-party modules for page administration, hence it does not provide many options in its main administration screen. You will see all three possible panel types that you can make, namely, Panel page, Panel node, and Mini panel. Panel node behaves like a plain old Drupal node but with specific layout and mini-panels, which can be assigned in blocks. By clicking on these options you will be able to navigate to other sections such as Pages from the page manager module. We take the opportunity to point out that Panels is literally a huge module that provides a great number of configuration options to the end user. Therefore, in this article our main intention is not to provide great insight into Panels operations but rather to show how Panels can be used efficiently to interact with your customers and arrange your content properly. We will not go into detail on mini-panels and other special features like context role panel layout.

Furthermore, in the basic administration configuration you can change the following features and functionality:

  1. In Home | Administer | Site building | Panels | Settings | General settings you can change the following:
    • The first option is Term hierarchy URL parsing options. Panel pages can take terms as arguments in their URL and then pass them to each view that is configured in each panel area. By changing this option, you can alter this behavior by allowing only one term in each request.
    • If hierarchy injection is checked, taxonomy term parents will appear in the breadcrumb trail. For instance, if you have a term that is the child of the term cameras, which is the child of the term electronics then by checking this option you will get electronics, cameras as your taxonomy URL entries.
    • If the last checkbox is checked, all views will be made available as content panes to be added to content types. If it is not checked, only views that have a 'Content pane' display will be available as content panes. This is actually a way of telling Drupal if all your views including the existing ones should be available for placement inside panels.

    Drupal E-commerce with Ubercart 2.x

  2. In Home | Administer | Site building | Panels | Settings | Panel pages you can alter basically the same properties as in the other two pages, Administer | Site building | Panels | Settings | Mini panels and Administer | Site building | Panels | Settings | Panel nodes:
    • Select the default behavior of new content added to the system. If checked, new content will automatically be immediately available to be added to Panels pages. If not checked, new content will not be available until specifically allowed here.

      Drupal E-commerce with Ubercart 2.x

    • Check the boxes for all layouts you want to allow the users to choose from when picking a layout. You must allow at least one layout. You can see the available layout in the previous section.

Panels for product layout

Keep in mind that the Panels module provides a vast number of features and functionalities that can customize your online shop to great extent. Following our analysis on Panels module 3 and Drupal 6 we will go through some of these features focusing on first page configuration, some special product categories, and some promotional areas for new products. We need to define two things before we continue:

  • What exactly we need to show to our customers in our first page
  • The outline of this information

For the first question, in a real-life example we would need to include in our analysis a number of factors like what merchandise we want to promote, where a promotion area should be placed, what lifetime these promotion screens should have, how often they will be updated, and what other information will we show. Questions like these cannot be addressed without the presence of substantial data and reports. Large organizations, in order to perform minor changes to their corporate site profiles or their online shops, tend to get really sophisticated with direct marketing research, focus groups, and in general high-cost approaches. We on the other hand, having all these valuable statistics and reports, can take these decisions based on solid data for customer trends and behavior trends. Suppose that our customers produce a high click rate for featured products and camera electronics. We create some views using the views module and position them in our starting page in areas we think will be most visible to ensure a higher click rate.

To do so, we need to navigate to Administer | Site building | Pages. Here we can see all the active panels pages that are of type system. Another very useful feature with Panels is that you can use it to override specific Drupal core screens such as the node edit screen, or even get some new cool ways of displaying Taxonomies. You can add variants and context-dependent functionality by clicking on Edit, but we will not consider this at the moment.

Drupal E-commerce with Ubercart 2.x

Here you have two different options for creating the panel layout you need: simple panel pages and custom pages that stand for more advanced panels with all the context-aware functionality we have been discussing. So, click on the Create a new page link and you will see the new pages creation screen, where we need to add the following information to the form:

  • Administrative title: This is the name of the page and will help you to refer to this page from the "pages" screen.
  • Machine name: This is the machine-readable name of the page. It must be unique, and it must contain only alphanumeric characters and underscores. Once created, you will not be able to change this value.
  • Administrative description: This is a description of what this page is, and does, for administrative use.
  • Path: This is the URL path to get to this page. You may create named placeholders for variable parts of the path by using %name for required elements and !name for optional elements. For example: "node/%node/foo", "forum/%forum" or "dashboard/!input". These named placeholders can be turned into contexts in the arguments form.
  • Make this your home page: This is a very useful option that helps you use your customized panel page as your home page.
  • Variant type: For this choose the default value, Panel.
  • Optional features: These are the additional configuration options for your panel screen. You can associate different behavior to different roles, languages and so on. In our case, as we are creating a promotional page with access from all, we will leave this blank.

Drupal E-commerce with Ubercart 2.x

After filling out the details click on Continue. Just like every Drupal wizard screen, keep in mind that nothing is being saved until you finish all the screen sequences. You then have to choose your preferred layout and we will choose the Three column view as we would like to have results from three different views displayed in our promotional page.

Drupal E-commerce with Ubercart 2.x

Following the decision on the panel layout, in the next screen we will also be asked to choose a name for the page and configure caching settings. Caching is extremely important for panels as they consist of different views and rendering time can start increasing if we are not a little careful. Usually we will define cashing time and attributes in the Views module but you can do it in the panel section globally in the same way you are doing it in Views, that is by defining data lifetime before the next rendering. So, after you enter the title click on finish and your panel definition is ready. You will be redirected to the panel edit page, which is depicted in the following image. The resemblance to Views screens is obvious, while the configuration options span from content layout settings to access rules and positioning.

Drupal E-commerce with Ubercart 2.x

The next thing we want to do is to try to populate the areas we have assigned to our three-column panel. We will be using two system views from Ubercart and we will manually create another one ourselves for our example.

It should be clear by now that the rich usability of panels in Drupal emerges from the integration with the Views module. Literally the best content that you would like to add in your panel areas is a views block. Therefore, we will step right into creating the three views we will assign to the different areas of the panel. Navigate to the views creation page, Administer | Site building | Views. To create a view with the most visible products of the day do the following:

  1. Click on the Add view button.
  2. Add to the view a name, the identification "daily products" and the description "daily most viewed products" and click on Next.

    Drupal E-commerce with Ubercart 2.x

  3. In the view configuration screen add a block display by selecting block from the drop-down option list on the top left of the screen, and then click on Add display.
  4. Ignore the error generated and continue to add a sorting criterion. Click on the add icon on the sorting criteria box and in the option list that appears choose "Node Statistics", click on View today and choose ordering as descending, then click on Add.
  5. Then we continue to add a filter. Click the add icon on the filter box and in the option list that appears choose "Node", click on Node:Type and choose "is One Of" and the type "Product" then click on update default display.
  6. At Block Settings box click on caching and choose Cache Once for everyone.
  7. Finally, as we are using fields display options (the default) we need to define these fields for our view. We choose to display the product title and the product teaser in our view. To do so click on the Add button on the fields box and select Node from the drop-down list and then click on Node:Title and Node:Teaser. Afterwards, click on Add. Then in the title field click on Link this field to its Node option. Click on update default display and everything should be set.
  8. After we have created our custom view we will go through and populate the content areas in our panel; we go back to Administer | Site building | Pages and click on the page we just created. Go to Variants | Content and then click on the little gear-like icon on the top left of the content screen. You will be provided with the following option:

    Drupal E-commerce with Ubercart 2.x

  9. Choose Add content and a pop-up modal window will appear with all the available blocks of your site. The blocks are categorized so feel free to change between categories and see all blocks available to you. Also keep in mind the option to add new custom content, which stands for manually added HTML and adding existing nodes inside the panel block. We will choose to add from the Views tab the following:
    • popular_products
    • new_products
    • dailyproducts

Drupal E-commerce with Ubercart 2.x

In order to add the view to our panel display we perform the following steps for each view on our panel:

  1. Choose the view you want to add to the particular panel area.
  2. On the modal pop-up window choose the view you want to add. Usually custom views are found in the views tab. Click on the view you want to add.
  3. Afterwards, you will be prompted to choose a display type for your current view. Choose block and click on Continue.
  4. The next screen provides a large number of configuration options. In our case we will narrow down our changes only to the block title and the view title. You can see the administration options in the following image. Some very interesting options are:
    • The feed icons, especially if this is a feeds view—we recently created a node view in our shop.
    • The argument passing capabilities and how Panels module lets you associate URL parameters to view exposed filters.
  5. After you have finished configuring the look and the feel click on Finish. Congratulations! You have successfully associated your panel area with the view we created in the previous steps.

Drupal E-commerce with Ubercart 2.x

After you have finished adding all the three views the result will be very elegant and will definitely resemble the work of an experienced web designer.

Creating custom functionality using Views

Ubercart creates a default Catalog page to help site visitors to browse through categories and subcategories. This is the default functionality for most e-stores and it's absolutely necessary for ours. Customers are used to this way of navigation and it's very convenient for them. If you analyze the stats of your store you'll confirm that the two most common methods that visitors use to locate your products are browsing the product catalog and searching through the search form. Now, if you want to use advanced marketing methods and suggest specific products to your clients, you have to create custom functionality. We'll show you how to enable new custom views and how to create your own.

Before we start working, we need to download and enable two new modules, Drupal Views Slideshow and Ubercart Views.

  • First navigate to and right after you download the module upload it and unzip it to your site's /sites/all/modules folder. Then, activate the module from Administer | Site building | Modules.
  • Navigate to and right after you download the module upload it and unzip it to your site's /sites/all/modules folder. Then, activate the module from Administer | Site building | Modules.

Ubercart Views is a module that creates some very useful views for Ubercart. It also lets you create your own ones for your store, using the user interface for views. Let's see the five default views that this module provides. To view or edit them go to Administer | Site building | Views.

  • New products: This view creates a custom block that shows the latest products of your shop as a slideshow. If you want to enable this block, go to Administer | Site building | Blocks, and find the block named new_products. Assign it to a region and click on Save blocks.
  • Popular products: This view creates a custom block that shows the products with the most sales in your shop as a slideshow. If you want to enable this block, go to Administer | Site building | Blocks, and find the block named popular_products. Assign it to a region and click on Save blocks.
  • Product pairs: This view creates a custom block that suggests products based on the items that you put in your shopping cart. If you want to enable this block, go to Administer | Site building | Blocks, and find the block named product_pairs_block. Assign it to a region and click on Save blocks.
  • User products: This view creates a custom block that shows the products with the most sales for this particular user. If you want to enable this block, go to Administer | Site building | Blocks, and find the block named user_products. Assign it to a region and click on Save blocks.

    Drupal E-commerce with Ubercart 2.x

  • Store orders: This view creates a page, with a more convenient list of the orders in your store. You can access it at


This article helps you to implement more complex marketing technique such as cross-selling using taxonomy and recommendation systems for Drupal with Ubercart. We examine how to create an layout for products using panels and enhance user interface using views. In the next article we will see User Interface Enhancement Techniques with Drupal and Ubercart 2.x.

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

You've been reading an excerpt of:

Drupal E-commerce with Ubercart 2.x

Explore Title