Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When we're done with the next two videos, which show you how to create both a product, and a product display, you will see something like this. It's the front page of our site, with the product itself showing up in a list of other products. It has an image of the product, a description of the product, but it also has such nice little things, like this Add to Cart button. When you click on the product itself, you see it with a larger image, and a little bit of other changes, which you can affect in the product display. Let's get started. Now, it's time to list our first product.
Our client in these videos is a company that produces olive oil, so we will sell a simple half liter bottle. Later, we will sell a variety of sizes, and flavors, along with cosmetics, and tickets to events in the Olive Grove, and so on, but let's start small. Now, when we're done with this first video, you won't see the product on your site, because Drupal Commerce separates product entry, which we're doing now, from product display. I'll show you about the latter in the next video, displaying products. The basic way that you add products is actually fairly simple.
You go up to View products, and click Add a product. Once there, you see that there are a few required fields. You have to enter a unique identifier -- I'm going to be using five digit codes throughout this video series -- a title, a price, and a status, and you can also add an image if you like. This pattern is based on what's called a product type, and if you're familiar with Drupal 7, you know that this is something called an entity. It's a lot like creating a content type for nodes. I will show you just very quickly how that works, in case you're not familiar with Drupal 7.
Go up to Store, and Products, and then click Product Types. We only have one, which has a number of fields in it, which we can see by clicking Manage Fields. There it is; the SKU, the Title, Image, Price, Status; these are the fields you just saw a minute ago. You can make changes to these fields by clicking on Edit next to the field itself. Let's put in a default image, so that if we don't have an image of the product, people will see something, instead of just a blank space. To do that, you scroll down to the area where you can add that -- this default image down here -- and click Choose File.
We have a default image in the exercise files; this one right here. So I will choose it, and open, and Save settings. Then, we close our Overlay, if we'd like. You will see how this affects our store as we go on throughout the course. Now let's go back, and actually add a product. Once again, we go up to Store, and Products, or we could simply click View Products in the shortcut bar here. But however we get there, we then click Add a product. I will make this 10001. The Title is Olive Oil, .5 liter.
In this case, I do have an image in my exercise file, so I will select that, and let's say it's $10.00, and scroll to the bottom, and Save. If you're building a full catalog, here you have an option to add another immediately, but we will just add this one for now. That's pretty much all there is to it. Now, these products, as I say, do not show up on the site yet. They're sort of like boxes of things in the warehouse. On your Drupal Commerce Web site, you have to move them into the retail store, so to speak, before anyone can buy them.
So the next thing we'll do is to create a way to display this product.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98203 Viewers
80 Video lessons · 141382 Viewers
59 Video lessons · 59730 Viewers
52 Video lessons · 72946 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.