In this chapter we will cover the following topics:
Installing Drupal Commerce to an existing Drupal 7 website
Installing Drupal Commerce with Commerce Kickstart 2
Creating your first basic product
Configuring the checkout in Drupal Commerce
Configuring the currency in Drupal Commerce
Changing your store's logo file
Changing your store's favicon (favorites icon)
Adding social media icons on product pages
Drupal Commerce (http://www.drupalcommerce.org) is a collection of modules that extend the Drupal content management system to support an e-commerce-style store.
Drupal Commerce provides a much more stripped back alternative to the Ubercart module (http://www.ubercart.org), which became the most popular e-commerce package for Drupal 6. Ryan Szrama was the lead developer on the UberCart project before moving to work on the Drupal Commerce framework. As a relatively new project, Drupal Commerce is only supported from Drupal 7 onwards.
In particular, an obvious initial difference between Ubercart and Drupal Commerce is that the latter does not come with shipping or payment gateways pre-installed. It is left to the site builder to install the modules they want to use to fulfill these features. As such, Drupal Commerce is presented as more of a framework than Ubercart, which is designed to be more functional out of the box.
This chapter will guide you through the basic configuration your Drupal Commerce store may need to function, from installation to checkout, and currency configuration options.
You will need to download Drupal Commerce from http://drupal.org/project/commerce. Download the most recent recommended release you see that couples with your Drupal 7 website's core version:
You will also require the following modules to allow Drupal Commerce to function:
Now that you're ready, install Drupal Commerce by performing the following steps:
Install Drupal Commerce's modules next, by copying the files into the
sites/all/modulesdirectory, so that they appear in the
Enable the newly installed Drupal Commerce module in your Drupal site's administration panel (
example.com/admin/modulesif you've installed Drupal Commerce at
example.com), under the Modules navigation option, by ensuring the checkbox to the left-hand side of the module name is checked.
Now that Drupal Commerce is installed, a new menu option will appear in the administration navigation at the top of your screen when you are logged in as a user with administration permissions.
You may need to clear the cache to see this. Navigate to Configuration | Development | Performance in the administration panel to do this.
Drupal Commerce depends on a number of other Drupal modules to function, and by installing and enabling these in your website's administration panel you're on your way to getting your Drupal Commerce store off the ground.
You can also install the Drupal Commerce modules via Drush (the Drupal Shell) too. For more information on Drush, see http://drupal.org/project/drush.
Drupal Commerce requires quite a number of modules, and doing a basic installation can be quite time-consuming, which is where Commerce Kickstart 2 comes in. It packages Drupal 7 core and all of the necessary modules.
Using Commerce Kickstart 2 is a good idea if you are building a Drupal Commerce website from scratch, and don't already have Drupal core installed.
Once you have decompressed the Commerce Kickstart 2 files to the location you want to install Drupal Commerce in, perform the following steps:
Visit the given location in your web browser. For this example, it is assumed that your website is at
example.com, so visit this address in your web browser.
You'll see that you are presented with a welcome screen as shown in the following screenshot:
Next, your server's requirements are checked to ensure Drupal can run in this environment.
In the preceding screenshot you can see some common problems when installing Drupal that prevent installation. In particular, ensure that you create the
/sites/default/filesdirectory in your Drupal installation and ensure it has permissions to allow Drupal to write to it (as this is where your website's images and files are stored).
You will also need to copy the
/sites/default/settings.phpbefore you can start. Make sure this file is writeable by Drupal too (you'll secure it after installation is complete).
Once these problems have been resolved, refresh the page and you will be taken to the Set up database screen. Enter the database username, password, and database name you want to use with Drupal, and click on Save and continue:
You can now safely remove write permissions for the
settings.phpfile in the
/sites/defaultdirectory of your Drupal Commerce installation.
The next step is Configure site. Enter the name of your new store and your e-mail address here, and provide a username and password for your Drupal Commerce administrator account. Don't forget to make a note of these as you'll need them to access your website later!
Click on the Save and continue button to progress now; the next step is Configure store. Here you can set your Default store country field (if it's different from your server settings) and opt to install Drupal Commerce's demo, which includes sample content and a sample Drupal Commerce theme too:
Further down on this screen, you're presented with more options. By checking the Do you want to be able to translate the interface of your store? field, Drupal Commerce provides you with an ability to translate your website for customers of different languages (for this simple store installation, leave this set to No).
Finally, you can set the Default store currency field you wish to use, and whether you want Commerce Kickstart to set up a sales tax rule for your store (select which is more appropriate for your store, or leave it set to No sample tax rate for now):
There are now options to allow Drupal to check for updates automatically, and to receive e-mails about security updates. Leave these both checked to help you stay on top of keeping your Drupal website secure and up-to-date.
Wait as Commerce Kickstart installs everything Drupal Commerce requires to run.
In this recipe you will learn how to add a basic product to your Drupal Commerce store.
Log in to your Drupal Commerce store's administration panel, and navigate to Products | Add a product:
This book assumes you enabled the Drupal Commerce admin menu at installation stage. If you haven't, navigate to Site settings | Modules and ensure that the Commerce Kickstart Menu module is enabled for your store.
To get started adding a product to your store, click on the Add product button and follow these steps:
Fill in the form that appears, entering a suitable Title, using the Body field for the product's description, as well as filling in the SKU (stock keeping unit; a unique reference for this product) and Price fields. Ensure that the Status field is set to Active. You can also optionally upload an image for the product here:
Click on the Save product button, and you've now created a basic product in your store.
To view the product on the frontend of your store, you can navigate to the category listings if you imported Drupal Commerce's demo data, or else you can return to the Products menu and click on the name of the product in the Title column:
You'll now see your product on the frontend of your Drupal Commerce store:
A single product for sale (for example, a one-size-fits-all t-shirt)
A variation of a product (for example, a medium-size t-shirt)
An item that is not necessarily a purchase as such (for example, it may represent a donation to a charity)
An intangible product which the site allows reservations for (for example, an event booking)
Product displays (for example, a blue t-shirt) are used to group product variations (for example, a medium-sized blue t-shirt and a large-sized blue t-shirt), and display them on your website to customers.
Like any flexible e-commerce platform, Drupal Commerce has many options you can configure to control how your store works. The checkout is a very flexible part of your store, with the ability to change the checkout process to suit your organization's needs.
This recipe will guide you through the basic items you will likely want to configure in your Drupal Commerce store.
Log in to your Drupal administration panel and navigate to Store Settings | Checkout settings.
You can now start customizing the checkout settings for your Drupal Commerce store as follows:
The view you can see indicates in which order the various elements of the checkout process appear. Firstly, ensure you have the Commerce Checkout module enabled (navigate to Site settings | Modules for this).
To re-order these, you can drag and drop each stage using the arrows icon to the left-hand side of the screen (highlighted next to the Shopping cart contents option as shown in the following screenshot):
You can also see a configure option to the right-hand side of each checkout phase. Select the one next to the Shopping cart contents phase, and you will be presented with options on how the checkout phase is displayed:
Display this pane in a non-collapsible fieldset: This option is the default, and displays the checkout phase in full, with no option to collapse it from view.
Display this pane in a collapsible fieldset: This option shows the checkout phase in full by default, but provides an option to collapse it from view if the customer prefers.
Display this pane in a collapsed fieldset: This option hides the phase from the view of the customer, but allows itself to be viewed in full by clicking on it to enlarge it within the page.
Do not display this pane in a fieldset: This option removes the
<fieldset>element from around the HTML elements used to display this checkout phase, which may be of use when theming your Drupal Commerce store.
The Include this pane on the Review checkout pane checkbox underneath these options controls whether this block is shown on the checkout overview page, where the customer is required to confirm their order details.
Drupal Commerce's checkout process is divided into a series of phases. Each phase can contain one or more panes which can be used to display information (shopping cart content) or to get information from the user (billing address). If a phase doesn't have a pane assigned to it, it will not be displayed during checkout.
It's worth noting that some contributed modules can add settings to panes associated with Drupal Commerce's checkout too, such as the Commerce Addressbook module (see http://drupal.org/project/commerce_addressbook for more information on this module).
One of the fundamental settings in your Drupal Commerce store is the currency your store uses. This recipe will guide you through changing and configuring the default currency for your Drupal Commerce store.
Log in to your Drupal Commerce store's administration panel and navigate to Store settings | Currency settings.
The Default store currency setting provides a drop-down menu of currencies you can pick from; select your preferred option here if it has changed since your installation of Drupal Commerce.
The currency settings also allow you to specify additional currencies when creating a product by selecting none, one, or more than one checkboxes, but Drupal Commerce will not convert between currencies by default:
You can install a contributed module to automatically convert the currencies with the current conversion rate, or choose to manually fill in the prices in all currencies. See the
Currency Exchange module at http://drupal.org/project/currency for more information.
Click on the Save configuration button to save your changes.
If you view the product on the frontend of your store, as customers would see it, you will see that the cost is displayed in the currency you specified here:
Changing the default currency on your store changes the symbol shown before or after the price value you set for each product, but does not attempt to convert values between currencies (see the Drupal Currency Exchange module for related functionality). So, if you change the default setting from United States Dollars (USD) to Hong Kong Dollars (HKD), the costs you specified when creating the product would remain the same (so $9.99 USD would become $9.99 HKD).
Depending on the currency you have set, Drupal Commerce will change the number of decimal points in the price displayed, as well as whether the currency symbol appears before or after the price on your store.
This recipe will show you how to change your Drupal Commerce store's logo.
Now that you've found this screen, you can begin to change your Drupal Commerce store's logo:
Next, scroll down towards the Logo image settings block and uncheck the Use the default logo checkbox to disable Drupal Commerce's default logo.
Once unchecked, more options will appear below this: the Path to custom logo field, and the Upload logo image field.
To use an image that is already on your Drupal Commerce installation's server, simply enter the path to your logo file in the Path to custom logo field. Good directories to store your store's logo in could be
Click on the Save configuration button to retain your new logo.
To upload a logo from your computer to your Drupal Commerce site, use the Upload logo image field and click on the Save configuration button to save this choice of logo. Ensure that the Path to custom logo field is empty before saving, as otherwise it will produce an error. Either Path to custom logo or the Upload logo image field can be used, but you cannot use both together.
If you now view the frontend of your Drupal Commerce store, you will see the new logo has appeared:
Alongside your logo, your store also has a favorites icon, also known as a favicon or a shortcut icon, which is a small graphic you can use to distinguish your store from other websites in a number of contexts, including in lists of the visitor's bookmarked websites.
By default, the favicon image is Drupal Commerce's logo. To see it, visit your Drupal Commerce store website in a browser and you will see it appear in one of a number of positions depending on your browser. In Chrome, the favicon appears in the tab next to the web page's name:
In Internet Explorer 9, the favorites icon appears both in the page's tab and in the address bar:
You will need to create a graphic for your favorites icon. There are a number of online favicon generators you can use, such as Dynamic Drive's tool at http://tools.dynamicdrive.com/favicon/, which can create a favicon from JPEG, GIF, and PNG formats.
Ensure you are logged in to your store's administration panel.
Navigate to Appearance and click on the Settings tab towards the top right-hand corner of the screen.
Ensure that the Shortcut icon checkbox is enabled in the Toggle display settings:
To use an icon file already on your server, use the Path to custom icon field, enter the relative URL (that is, with the http://www.you rstore.com part). So,
favicon.icoare good values for this field.
To upload a file on your computer for use as the favicon for your Drupal Commerce store, use the Upload icon image field. Ensure that the Path to custom icon field is empty before saving this, otherwise your icon will not be saved and you'll see an error message.
Click on the Save configuration button to save your new favorites icon.
That's it! Your new favicon is in place.
With the popularity of social networks such as Twitter, Facebook, Google+, and Pinterest remaining strong, integrating tools to help your customers share your products with their friends can be an excellent way to grow your customer base.
This recipe will show you how to customize your Drupal Commerce store to include social media share buttons on your store's product pages.
Log in to your Drupal Commerce administration panel with your administrator account.
To add your chosen social networks to your Commerce product pages, you need to use a module package with Commerce Kickstart:
Navigate to Modules in your administration panel. In the menu in the left-hand column, you'll see a tab for Commerce Kickstart modules. Click on this to view a list of available Commerce Kickstart modules.
Click on the Save configuration button in the left-hand column to enable the module; it is located under the list of module groupings:
Enabling the module does two things: it adds a block to your store's footer with links to various social media platforms, and it adds share tools on your product pages. View the frontend of your website and look in the footer, and you will see them as follows:
If you can't see these appear, you may need to assign them.