Building E commerce Sites with Drupal Commerce Cookbook
Building E-commerce
Sites with DrupalCommerce Cookbook
Over 50 recipes to help you build engaging, responsive E-commerce sites with Drupal Commerce Richard CarterBIRMINGHAM - MUMBAI
Building E-commerce Sites with Drupal Commerce Cookbook
Copyright © 2013 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: June 2013 Production Reference: 1180613 Published by Packt Publishing Ltd.
Livery Place
35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-78216-122-6
www.packtpub.com
Cover Image by Asher Wishkerman ( )
wishkerman@hotmail.com
Credits
Author Project CoordinatorRichard Carter Anurag Banerjee Reviewers Proofreader
Augustin Delaporte Aaron Nash Nicolas Meyer Indexer
Surendra Mohan Rekha Nair Dave Pullen
Production Coordinator Acquisition Editor Shantanu Zagade Andrew Duckworth
Cover Work Lead Technical Editor Shantanu Zagade Ankita Shashi
Technical Editors Sharvari H. Baet Ankita R. Meshram
Foreword
Drupal, one of the most loved and trusted open source content management systems, has seen 12 years of strong growth and become a top choice for building any type of website. In many areas, Drupal has become the de-facto standard, including media, government, university, and library sites.
Since 2011, Drupal has also had an enterprise class e-commerce framework available called Drupal Commerce. The fastest growing open source cart in history, Drupal Commerce already powers a large number of very impressive sites, selling products from luxury goods (Cartier), fashion (Kenzo), online learning (Open Sesame), travel (Eurocentres), to postage stamps and fishing licenses (the Royal Mail of the United Kingdom).
This book explores Drupal Commerce through the lens of the Commerce Kickstart distribution—an out-of-the-box store, completely built and ready to go, featuring the best practices for selling shipable goods online. Commerce Kickstart will not only save you weeks of work setting up your shop, it is an invaluable resource for studying what can be done with Drupal Commerce, and how. Once you dive into the world of Drupal Commerce, you get much more than just a great shopping cart. Of all the e-commerce systems available, Drupal Commerce is by far the most flexible, leveraging key Drupal-native components such as Rules and Views to achieve much of its functionality. It is also the only system that is natively married to a content management system. In fact, Drupal’s heritage as a social collaboration tool makes it the best choice for any project that focuses on content, community, and commerce in a holistic, integrated way.
Finally, by learning Drupal Commerce now, you are making the right move at the right time. e-commerce is the quickest growing new frontier for the Drupal ecosystem. Whether you’re a seasoned e-commerce pro, or preparing for your first online shop, Drupal Commerce can enable you to address a new set of business needs and opportunities. Good luck, and enjoy yourself! Robert Douglass Director of Product Strategy, Commerce Guys
About the Author
is a web designer and a frontend web developer with a passion for a
Richard Carter
range of open source e-commerce and content management systems, including Magento, MediaWiki, and Drupal. He has worked with clients including Badminton England, University College Dublin, Directgov, NHS Choices, and BusinessLink.gov.uk.
Richard is Creative Director at Peacock Carter Ltd ( ), a web
peacockcarter.co.uk
design and development agency based in the North East of England. He graduated from the University of Durham in Software Engineering, and currently lives in Newcastle upon Tyne. He blogs at and tweets at
earlgreyandbattenburg.co.uk twitter.com/ . RichardCarter
This book is the author’s fifth; Richard has previously written MediaWiki Skins Design,
Magento 1.3 Theme Design, Joomla! 1.5 Templates Cookbook, and Magento 1.4 Themes Design and has acted as a technical reviewer on The Definitive Guide to Drupal 7, Drupal 7 Business Solutions, MediaWiki 1.1 Beginners Guide, and Inkscape Illustrator’s Guide.
A huge thank you must go to the guys behind Drupal Commerce, Commerce Guys, who put a lot of effort into ensuring modules were stable for the book’s release, as well as days or even weeks of their time reviewing the book’s content.
Finally, thanks to my friends and family for their support, in particular, Karina, who has coped spectacularly well (perhaps too well!) with my late nights and weekends of work.
About the Reviewers
graduated from INSA Lyon, one of the top engineering schools in
Augustin Delaporte France. During his studies, he worked in Shanghai as a Drupal developer.
After his internship as a project manager for six months, where he demonstrated his technical ability, enthusiasm, and communication skills, Augustin joined Commerce Guys in Paris to strengthen the Product and Training teams. He was part of the team that created Commerce Kickstart. has been a full time Drupal developer since 1997. He started his Drupal
Nicolas Meyer
career by leading the conversion of the French Primer Minister’s website to Drupal, and joined Commerce Guys at its inception. He has been a key member of the Commerce Kickstart team since the beginning of the project. is currently serving as Drupal Consultant cum Drupal Architect at a
Surendra Mohan
well-known software consulting organization in India. Prior to joining this organization, he served a few Indian MNCs, and a couple of startups in varied roles such as Programmer, Technical Lead, Project Lead, Project Manager, Solution Architect, and Service Delivery Manager. He has more than 8 years of working experience in Web Technologies covering media and entertainment, real estate, travel and tours, publishing, e-learning, enterprise architecture, and so on. He is also a well-known speaker who delivers talks on Drupal, Open Source, PHP, Moodle, and so on along with organizing and delivering TechTalks in Drupal meet-ups and Drupal Camps in Mumbai, India.
He has also reviewed other technical books, namely,
Drupal 7 Multi Site Configuration and Drupal Search Engine Optimization.
I would like to thank my family and friends who supported and encouraged me in completing my reviews on time with good quality.
Dave Pullen joined the Commerce Guys team in May of 2012 after completing a training
course intended to refocus his skill set towards software development. He brings with him more than 11 years of CMS experience (primarily focused on newspapers, magazines, and radio) from a variety of positions including technical support, quality assurance, and product management. www.PacktPub.com Support files, eBooks, discount offers and more
You might want to visit
www.PacktPub.com
for support files and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub and as a print
www.PacktPub.com
files available? You can upgrade to the eBook version at book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.
service@packtpub.com
At , you can also read a collection of free technical articles, sign up
www.PacktPub.com
for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. TM
http://PacktLib.PacktPub.com
Do you need instant solutions to your IT questions? PacktLib is Packt’s online digital book library. Here, you can access, read and search across Packt’s entire library of books.
f
Why Subscribe? Fully searchable across every book published by Packt
f Copy and paste, print and bookmark content f On demand and accessible via web browser
Free Access for Packt account holders If you have an account with Packt at , you can use this to access
www.PacktPub.com
PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.
Table of Contents
Chapter 1: Installing and Configuring Drupal Commerce
Table of Contents
Chapter 4:
Chapter 6:
Chapter 7
Table of Contents
Chapter 8: Further Configuration
Appendix:
Table of Contents
Preface
Building E-commerce Sites with Drupal Commerce Cookbook is a guide to Drupal Commerce,
the highly functional and expansive e-commerce system for the Drupal content management system. Whether you're a beginner with e-commerce and want to create an online store as quickly as possible to start selling, or you're a web designer, who is simply new to Drupal Commerce and wants to get it up and running quickly, Drupal Commerce Cookbook can help you launch your next e-commerce store with style!
What this book covers
Chapter 1, Installing and Configuring Drupal Commerce, helps you get Drupal Commerce up
and running and configured for basic e-commerce store requirements.Chapter 2, Configuring Products with Drupal Commerce, takes you through creating products
and categories in your store, and how to start customizing products to allow file uploads and other custom fields.
Chapter 3, Managing Your Drupal Commerce Store Day-to-day, includes useful hints and tips
to keep your Drupal Commerce store up to date and useful how-to's of tasks you may need to do on a regular basis.
Chapter 4, Useful Modules for Drupal Commerce, explores some of the most useful modules
you can use to extend and improve your online store.Chapter 5, Payment and Shipping Modules for Drupal Commerce, provides walkthroughs of
installation and configuration of the most common payment gateways, including SagePay and PayPal, as well as custom shipping methods.
Preface
Chapter 6, Drupal Commerce Search Engine Optimization, provides hints and tips to help boost your online store's search engine friendliness to help your store succeed online. Chapter 7, Theming Drupal Commerce, gets to grips with customizing the look and feel of your Drupal Commerce store. Chapter 8, Further Configuration, explores some further enhancements and configurations you can make to your store to improve it for both store owners and customers alike. Appendix, A Blueprint for a T-shirt Store in Drupal Commerce, pulls the other chapters together into creating a store selling t-shirts online. What you need for this book You will need access to a suitable platform to host Drupal 7 and Drupal Commerce. You can . http://drupal.org/project/commerce
find a list of up-to-date requirements at A basic knowledge of content management is assumed; pre-existing knowledge of Drupal or Drupal Commerce is not assumed. A basic knowledge of CSS and HTML may be beneficial, but is not entirely necessary.
Who this book is for
This book is for online entrepreneurs, site builders, and web designers who want a helping hand at getting their online store up and running with Drupal Commerce. This book focuses heavily on tasks that non-technical readers can achieve, bringing a fully functioning e-commerce website closer to those who have a get-up-and-go attitude thanks to Drupal.
Conventions
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning. Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "So,
sites/
or, simply,
default/files/favicon.ico favicon.ico are good values for this field."
A block of code is set as follows:
h1,h2,h3,h4,h5,h6 { font-family: "PT Sans", Arial, Helvetica, sans-serif; }
2
Preface
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
<?php print render($page['content']); ?> <p class="container-24">
<a href="javascript:history,back(-1)">Continue shopping</a>
</p> <?php endif; ?>New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Clear Drupal's cache by navigating to Site settings |
Configuration | Performance and clicking on the Clear all caches button."
Warnings or important notes appear in a box like this.
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of. To send us general feedback, simply send an e-mail to , and
feedback@packtpub.com mention the book title via the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on . www.packtpub.com/authors
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at . If you purchased this book elsewhere, you can
http://www.packtpub.com
visit
http://www.packtpub.com/support
and register to have the files e-mailed directly to you.
3
Preface Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting
,
http://www.packtpub.com/submit-errata
selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from .
http://www.packtpub.com/support Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at with a link to the suspected
copyright@packtpub.com pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at if you are having a problem with any
questions@packtpub.com aspect of the book, and we will do our best to address it.
4
1 Installing and Configuring Drupal Commerce
In this chapter we will cover the following topics:
f Installing Drupal Commerce to an existing Drupal 7 website f Installing Drupal Commerce with Commerce Kickstart 2 f
Creating your first basic product
f
Configuring the checkout in Drupal Commerce
f
Configuring the currency in Drupal Commerce
f
Changing your store's logo file
f Changing your store's favicon (favorites icon) f Adding social media icons on product pages Introduction
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.
Installing and Configuring Drupal Commerce
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. The remainder of the recipes in this book assume that you have used the Drupal Commerce Kickstart installation profile for Drupal, though you should be able to follow all recipes regardless of this.
Installing Drupal Commerce to an existing
Drupal 7 websiteThere are two approaches to installing Drupal Commerce; this recipe covers installing Drupal Commerce on an existing Drupal 7 website.
Getting started
You will need to download Drupal Commerce from
http://drupal.org/project/
. Download the most recent recommended release you see that couples
commerce
with your Drupal 7 website's core version: You will also require the following modules to allow Drupal Commerce to function:
f Ctools: http://drupal.org/project/ctools f Entity API: http://drupal.org/project/entity f http://drupal.org/project/views
Views:
f Rules: http://drupal.org/project/rules f Address Field: http://drupal.org/project/addressfield
Chapter 1 How to do it... Now that you're ready, install Drupal Commerce by performing the following steps:
1. Install the modules that Drupal Commerce depends on, first by copying the preceding directory, .
modules sites/all/modules
module files into your Drupal site's 2.
sites/all/
Install Drupal Commerce's modules next, by copying the files into the directory, so that they appear in the
modules sites/all/modules/commerce directory.
3. Enable the newly installed Drupal Commerce module in your Drupal site's administration panel ( if you've installed Drupal
example.com/admin/modules
Commerce at ), under the Modules navigation option, by ensuring
example.com the checkbox to the left-hand side of the module name is checked.
4. 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.
How it works...
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.
Installing and Configuring Drupal Commerce
Installing Drupal Commerce with Commerce
Kickstart 2Drupal 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.
Getting started
Download Drupal Commerce Kickstart 2 from its
drupal.org . How to do it...
Once you have decompressed the Commerce Kickstart 2 files to the location you want to install Drupal Commerce in, perform the following steps:
1. Visit the given location in your web browser. For this example, it is assumed that your website is at , so visit this address in your web browser.
example.com
2. You'll see that you are presented with a welcome screen as shown in the following screenshot:
3. Click the Let's Get Started button underneath this, and the installer moves to the next configuration option.
4. Next, your server's requirements are checked to ensure Drupal can run in this environment.
5. In the preceding screenshot you can see some common problems when installing Drupal that prevent installation. In particular, ensure that you create the
/sites/
directory in your Drupal installation and ensure it has permissions
default/files
to allow Drupal to write to it (as this is where your website's images and files are stored).
6. You will also need to copy the
/sites/default/default.settings.php
file to
/sites/default/settings.php
before you can start. Make sure this file is writeable by Drupal too (you'll secure it after installation is complete).
Installing and Configuring Drupal Commerce
7. 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:
8. The next step is the Install profile section, which can take some time as Drupal
Commerce is installed for you. There's nothing for you to do here; just wait for installation to complete!
9. You can now safely remove write permissions for the
settings.php
file in the directory of your Drupal Commerce installation.
/sites/default
10. 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!
Installing and Configuring Drupal Commerce
11. Below these options, you can specify the country of your server and the default time zone. These are usually picked up from your server itself, but you may want to change them:
12. 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:
13. 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).
14. 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):
15. Click on Create and finish at the bottom of the screen. If you chose to install the demo store in the previous screen, you will have to wait as it is added for you.
Installing and Configuring Drupal Commerce
16. 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.
17. Wait as Commerce Kickstart installs everything Drupal Commerce requires to run.
18. That's it! Your Drupal Commerce store is now up and running thanks to Commerce Kickstart 2.
How it works...
The Commerce Kickstart package includes Drupal 7 core and the Drupal Commerce module. By packaging these together, installation and initial configuration for your Drupal Commerce store is made much easier!
Creating your first product
Now that you've installed Drupal Commerce, you can start to add products to display to customers and start making money. In this recipe you will learn how to add a basic product to your Drupal Commerce store.
Chapter 1 Getting started 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.
Note the sample products from Drupal Kickstart's installation are displaying there.
Installing and Configuring Drupal Commerce How to do it...
To get started adding a product to your store, click on the Add product button and follow these steps:
1. Click on the Product display. Product displays groups of multiple related product variations together for display on the frontend of your website.
2. 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:
3. Optionally, you can assign the product to one of the pre-existing categories in the Product catalog tab underneath these fields, as well as a URL for it in the URL path settings tab:
4. Click on the Save product button, and you've now created a basic product in your store.
5. 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:
Installing and Configuring Drupal Commerce
6. You'll now see your product on the frontend of your Drupal Commerce store: How it works...
In Drupal Commerce, a product can represent several things, listed as follows:
f
A single product for sale (for example, a one-size-fits-all t-shirt)
f A variation of a product (for example, a medium-size t-shirt) f An item that is not necessarily a purchase as such (for example, it may represent
a donation to a charity)
f An intangible product which the site allows reservations for (for example,
an event booking)
Chapter 1 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. So, depending on the needs of your Drupal Commerce website, products may be displayed on unique pages, or multiple products might be grouped onto one page as a product display.
Configuring the checkout in Drupal Commerce
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.
Getting started
Log in to your Drupal administration panel and navigate to Store Settings | Checkout settings.
How to do it...
You can now start customizing the checkout settings for your Drupal Commerce store as follows:
1. 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).
Installing and Configuring Drupal Commerce
2. 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):
Beware that some configurations could break your store's checkout process or confuse customers. For example, moving the completion message to the first stage of the checkout process would be very misleading!
3. 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:
4. The options beneath the Display settings panel control how this panel is displayed to your customers:
1. 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.
2. 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.
3. 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.
4. 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.
Installing and Configuring Drupal Commerce
5. 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.
How it works
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 check (see for more information
http://drupal.org/project/commerce_addressbook on this module).
Configuring the currency in Drupal Commerce
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.
Getting started
Log in to your Drupal Commerce store's administration panel and navigate to Store settings | Currency settings.
How to do it...
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.
Chapter 1 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 price
module at http://drupal. org/project/currency for more information.
Installing and Configuring Drupal Commerce
1. Click on the Save configuration button to save your changes.
2. 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:
3. Note the default "Drupal Commerce" image on the bag used as the default placeholder image for products with no photograph.
How it works...
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.
Changing your store's logo file
One of the most visual elements of your store is your logo, and it can help make a great impression on your customers. This recipe will show you how to change your Drupal Commerce store's logo.
Chapter 1 Getting started Log in to your Drupal Commerce control panel, and navigate to Appearance, and then to the Settings tab at the top right-hand corner of the screen:
Installing and Configuring Drupal Commerce How to do it...
Now that you've found this screen, you can begin to change your Drupal Commerce store's logo:
1. Ensure you are under the Global settings tab; you will be presented with options.
Under the Toggle display options block, ensure that the Logo checkbox is selected:
2. Next, scroll down towards the Logo image settings block and uncheck the Use the default logo checkbox to disable Drupal Commerce's default logo.
3. Once unchecked, more options will appear below this: the Path to custom logo field, and the
Upload logo image field.
4. 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 or .
image/ sites/default/files/images/
5. Click on the Save configuration button to retain your new logo.
6. 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.
7. If you now view the frontend of your Drupal Commerce store, you will see the new logo has appeared:
Installing and Configuring Drupal Commerce Changing your store's favicon (favorites icon)
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.
Getting started
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 Driv , which can create a favicon from JPEG, GIF, and PNG formats.
Ensure you are logged in to your store's administration panel.
How to do it...
To change your Drupal Commerce store's favicon, follow these steps:
1. Navigate to Appearance and click on the Settings tab towards the top right-hand corner of the screen.
2. Ensure that the Shortcut icon checkbox is enabled in the Toggle display settings:
3. Now scroll down, and you will see the Shortcut icon settings field. Uncheck the Use the default shortcut icon field and you are presented with two options: Path to custom icon and Upload icon image.
4. To use an icon file already on your server, use the Path to custom icon field, enter the relativ part). So,
rstore.com sites/
or simply are good values for
default/files/favicon.ico favicon.ico this field.
Installing and Configuring Drupal Commerce 5.
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.
6. Click on the Save configuration button to save your new favorites icon.
7. To see your new favicon in action, navigate to the frontend of your store and refresh:
You may need to do a hard refresh of your website to see the favicon. Pressing Ctrl + F5 usually works in most browsers (or Cmd + R on Mac).
8. That's it! Your new favicon is in place.
Adding social media icons on product pages
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.
Getting started Log in to your Drupal Commerce administration panel with your administrator account.
If you didn't use Commerce Kickstart to install Drupal Commerce, you will need to.
Chapter 1 How to do it... To add your chosen social networks to your Commerce product pages, you need to use a
module package with Commerce Kickstart:
1. 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.
2. Scroll down the list of modules until you come to the Commerce Kickstart Social module, and enable it by checking the box:
3. Click on the Save configuration button in the left-hand column to enable the module; it is located under the list of module groupings:
Installing and Configuring Drupal Commerce
4. If you haven't enabled one or more of the modules required by the Kickstart Commerce Social module, you'll be prompted to enable them on the next screen. Select Continue:
5. 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.
6. By default, these link to Commerce Guys' profiles, so ensuring you are logged in as an administrator, hover over the block and then select the
List links option from the drop-down menu:
7. This will present you with a list of the links. Select edit in the Operations column: 8.
You can now edit the URL of your social media profile with the Path field and the label for the link with the Menu link title field:
Installing and Configuring Drupal Commerce
9. Click on the Save button at the bottom of the screen once you are finished.
10. Return to the frontend of your store and navigate to a product page, and you will see the share tools from Facebook, Google+, and Twitter:
2 Configuring Products
with Drupal Commerce
In this chapter, we will cover the following topics:
f Adding multiple images to a product f
Creating products with a file upload field
f
Creating products with a custom text field
f Creating products with custom attributes f Creating product categories in Drupal Commerce Introduction
Drupal Commerce is incredibly flexible, but this flexibility can be overwhelming for beginners when they start adding and customizing products to their store. In the previous chapter, you learned how to add a basic product to your Drupal Commerce store, and now you can begin to customize this product type to suit your needs, from file uploads to additional product images, and beyond.
Adding multiple images to a product
A feature of many e-commerce stores is to display more than one photograph of a product. For example, you may want to display your products from different angles, or display your product on an isolated background and in use. Drupal Commerce Kickstart 2 allows you to add multiple images to your product pages through Drupal's administration panel.
Configuring Products with Drupal Commerce
This recipe will guide you through the customization of Drupal Commerce product types so you can add more than one product image per product.
Getting started Log in as an administrator to your Drupal Commerce store. Navigate to Products.
This assumes that you have enabled the Commerce Kickstart Menu's module.
The Product tab displays the list of existing products within your Drupal Commerce store.
How to do it...
Drupal Commerce Kickstart 2 allows you to add multiple images to your product pages through Drupal's administration panel:
1. Select the Edit option from the drop-down next to the product you wish to add multiple images to:
2. This takes you to the Edit Product display view. Beneath the product display's Title and Body fields, you will see the list of Drupal Commerce products assigned to this product display; again, select the Edit option next to the product you want to add an image to:
3. The previous step will expand the product's details for you. Here, you'll see a block called Product image, under which you will see the Add a new file form: