Friday, February 20, 2009
Beautiful day in south Florida
Using Drupal 6 and Ubercart to build a T-Shirt store
Hi my name is Luke and I'm a blogger...
*crowd murmers "hi Luke"*
So I've started diving into Drupal 6 as an e-commerce solution. Paired with Ubercart, it actually works very well to my surprise. I tried struggling with magento and just ran into so many problems. Not that it wasn't workable, nice looking, feature rich, and well developed... it was just daunting to get it up and running smoothly. It was too easy to break and not easy enough to fix. Also the admin interface just seemed like you needed to take lessons in order to wrap your head around it. Before I get flamed here, I'm sure it works great once you know your way around, but honestly I thought it should be more welcoming than it is.
I wanted to write a very quick and dirty starting guide for anyone just trying to get drupal and ubercart working for a t-shirt company. This post assumes you have a basic installation of drupal up and running - I'm using Drupal 6 or course. There are tons of tutorials out there on this so I'm not going to get into that, plus the installer works so well its almost a moot point altogether.
First off, here's the store for your viewing pleasure, CoverYourSkin.com
T-Shirt websites have some unique problems. Here's what I wanted to add out of the box:
1. Stock levels for t-shirts can be tricky. You have many attributes such as size, color, or style and all of them have different stock levels most of the time. Needed this to work.
2. You need the thumbnails to by crystal clear so your customers can see the design or lettering on the shirt.
3. I wanted to give out promotional codes to potential customers at events, or in the customers' packages when their shirt arrives.
4. I wanted seamless shipping integration to return live shipping prices to customers.
5. I needed my own customized theme.
6. I wanted to embedd youtube videos.
7. I wanted to make it easy to find products and give the users some options. I decided a taxonomy cloud for tagging would do nicely.
Modules Used
Ubercart 2.0 Beta 4
Lightbox2
video filter
ubercart attribute stock filter
Ubercart Discount Coupons
Taxonomy Cloud
Modules required to work with Images:
CCK, FileField, ImageField, Image, Imagecache (turn on: Imagecache, Imagecache UI), Imageapi (turn on ImageAPI and ImageAPI GD2)
1. Stock Levels Based on Attributes
To achieve my goals for this I used a module called Attribute Stock Filter. Essentially this module will allow you to set individual stock levels for each attribute combination and hide any attribute combination that are not in stock. Here's how to get it working:
- Install the module by uploading the files to your modules directory.
- Go into Administration > Modules and activate the module.
- Go to a product and add some attributes (clieck edit on the product page, then click attributes, then add attributes).
- On the options tab, select which options will be available for this product.
- Now go to the adjustments tab, and give each product a unique SKU number. If they are not all unique, you will not see anything listed on the stock tab and you can't set the individual stock quantities.
- Now go to the stock tab and type in the quantities for each product variation, and check the activate box for each variation that you want to be available on the site.
2. Creating clear thumbnails
First, you will need to make sure all the standard image modules you will need are installed. Once you have them installed there are a couple configuration changes you'll need to make.
Next, make sure the ImageAPI module is configured and is able to find the binary needed for the Image API you're using like Imagemagic. I'm using the built in PHP GD2 support and it just worked for me out of the box, but you may have to change the path to the binary if you're receiving an error message when going to configure the ImageAPI module. The configuration for the Image API is found under Administer > Image API (Under Site configuration). If you do not know the path to the binary, you may need to ask your web hosting provider.
Then, add the Image field to the 'product' content type. To do this automatically, go to Administer > Store Administration and you will see a notification on the bottom of the screen saying the image field needs to be set up in CCK and click here to do this automatically. This will create a new field for the products content type and give it the correct name so Ubercart can find it etc. Now if all went well, when editing a product you will have an image field which will allow you to upload an Image file.
JPG thumbnails tend to get heavy artifacts on the default quality settings. This isnt a big problem if your selling lamps or computers, but T-Shirt need to be clearly legible. Here's how I worked around this issue:
- Use squares as your main image instead of displaying the design on a shirt. This will allow the design to appear larger, even compared to an image of the same width that is shown on a shirt as opposed to in a simple square.
- Create images in nice even numbers. I create all my large images on 600x600 squares. Then I set my product image to a nice even multiple of that, like 300x300 (exactly 50%). This greatly reduces the amount of jagged lines and artifacts that appear on the product image, and of course when you click for a full sized image, the original is nice and sharp. Thumbnails for the 'product list' page I have set to 200x200, again exactly 1/3rd of the original. You'll want to make the image sizes configured on your website to match the sizes you choose. Do this in Administer > Images (Under Site Building).
- Use lightbox2 for image display. Lightbox2 is a nice way to display images and it is very customizable through the admin interface. After installing lightbox 2 dont forget to go into Administration > Input formats, click configure next to filtered html, and check the lightbox filters to turn them on. This screen shows little example of how these filters can be used in your content to use the lightbox script.
You will also want to go to Administer > Store Administration > Configuration > Product Settings and turn the Product Image widget to Lightbox2
3. Creating Promotional Codes
At first I searched around for a promo code module and found uc_discounts. This works well for giving certain users or groups discounts in general but doesn't support promo codes.
Instead I used the uc_coupon module. This did exactly what I wanted. Simple install the module and creating promo codes is a synch. More documentation on that can be found here. At the time of writing this I am using the development snapshot 6.x-1.x-dev (2009-Feb-20).
4. Seamless Shipping Integration
At the time of writing this, the ubercart fedex module was in existance, but trouble and not supported for Drupal 6. Instead, I signed up for a UPS account, and configured the ups module. The hardest part about this is finding where to go on the UPS website to sign up and receive your API key! Here are some helpful links to get you moving in the right direction.
- First create a UPS account in general if you dont already have one (ups.com)
- The register for a developers key here
- Then you need an XML Access Key which you can get here (youll need to have a developer key already)
Now just install the UPS module and fill in the ups account number, access key etc. into the confuration screen. Nice and easy.
5. Installing & Customizing a Theme
The honest truth here is, if you dont know CSS, XHTML and are handy with photoshop or something comparable, you're not going to want to dive into this. Your best option would be to either choose one of the free Drupal themes listed here, or purchase a professional drupal theme. Your best bet is to purchase a theme, or find a free one that is built with ubercart in mind. Many of the free themes are just for Drupal in general and do not take into consideration all of the extras that ubercart and its modules provide.
For free themes, check out ThemeGarden.org's Drupal 6 Section to see the themes in action - again not all will be suitable for ubercart out of the box. You can also try Monster Templates as they have a Drupal section but again many of them will not take ecommerce into consideration.
One excellent resource for high quality themes at a reasonable price is Top Notch Themes. Many of these themes will take ubercart into consideration and will just work perfectly and even offer additional customization beyon what most other themes will provide. They even offer a couple free themes that work very well for ecommerce, my favorite being Acquia Marina which was used for the spread firefox website for quite a while.
I'm going to go into a little more detail soon on getting into the nuts and bolts of Drupal 6 theming, but I've still got quite a few things to work through myself before I'd be able to help someone else so stay tuned for that one.
6. Embedding Videos
I understand this may not be a typical request for a T-Shirt company but, I needed it so I'll tell you what I did. I installed the video filter module located here. Just install the module, turn it on in the admin > modules page and then go to administration > input formats (under site configuration). Click the configure button next to filtered html, and check the box that says video filter. After installing lightbox2, you can embed videos into the lightbox as well as long as you turn on that filter also (see #2 above).
7. Tags!
I then started hunting around for a solution to the categorization. I wanted to have a bunch of different categories, but didnt want a crowded catalog. For example a shirt that had a nice graphic design, but also a funny saying would belong in 2 categories, maybe even more. The best way to achieve this is with tagging. I installed tagadellic. It creates a nice tag block that will increase the font size of the tag diaplyed depending on how many product in your store carry that tag. This makes popular tags stand out, and fringe tags fade into the background instead of having equal prominance. Once installing the tagadellic module, you'll need to visit the blocks section (administration > site building > blocks) and select where you want the tagadellic block to be displayed. Now just visit each of your products and start tagging them. Note it takes a little while for the new tags to start showing in the tagadellic block.
In addition to this, I also used the Taxonomy Menu module to create my menu based on the tags I assigned my products. This makes managing the menus a lot easier. The only thing I really need to edit are the individual product pages and the menu pretty much takes care of itself.
Product Display Tips
Every time you create a product, you will have to go through the motions of setting up the different attributes. Adding all the different sizes and colors. This is all fine and good, but what if every product is always available in white and black and has small, medium and large sizes? Wouldnt it be nice to have these added by default? Enter product classes. I'm not going to do a whole tutorial on this, instead just look at Administer » Store administration » Products > Manage classes, and read about it in the Ubercart documentation here.
You may want to remove the post information from the 'product' content type so it doesnt show the 'posted by username on 01/01/2001' or whatever. To do this go to Administer > Themes > click configure next to the theme you are currently using > click global settings > and unclick 'product' under the "display post information on" menu.
Search Engine Optimization
By default, your urls of your products will use node numbers instead of names. This is not ideal for search engines to pick up what exactly each page is about. We can use the Pauthauto module to make this a bit better. There is an excellent article with some great tips on Drupal 6 search engine optimization here, including a walk-through on setting up and using pathauto.
Conclusion
All in all I have to say this is the most rewarding ecommerce system I have ever worked with. There is a lot of good info out there on the ubercart website, on the drupal website, in the module documentation, and even on youtube that its really easy comparatively to pick this up and run with it. Hopyfully this article helps someone someday. If it was helpful to you, let me know in the comments! Bloggers love comments I hear, and now I'm officially a blogger.
*crowd murmers "hi Luke"*
So I've started diving into Drupal 6 as an e-commerce solution. Paired with Ubercart, it actually works very well to my surprise. I tried struggling with magento and just ran into so many problems. Not that it wasn't workable, nice looking, feature rich, and well developed... it was just daunting to get it up and running smoothly. It was too easy to break and not easy enough to fix. Also the admin interface just seemed like you needed to take lessons in order to wrap your head around it. Before I get flamed here, I'm sure it works great once you know your way around, but honestly I thought it should be more welcoming than it is.
I wanted to write a very quick and dirty starting guide for anyone just trying to get drupal and ubercart working for a t-shirt company. This post assumes you have a basic installation of drupal up and running - I'm using Drupal 6 or course. There are tons of tutorials out there on this so I'm not going to get into that, plus the installer works so well its almost a moot point altogether.
First off, here's the store for your viewing pleasure, CoverYourSkin.com
T-Shirt websites have some unique problems. Here's what I wanted to add out of the box:
1. Stock levels for t-shirts can be tricky. You have many attributes such as size, color, or style and all of them have different stock levels most of the time. Needed this to work.
2. You need the thumbnails to by crystal clear so your customers can see the design or lettering on the shirt.
3. I wanted to give out promotional codes to potential customers at events, or in the customers' packages when their shirt arrives.
4. I wanted seamless shipping integration to return live shipping prices to customers.
5. I needed my own customized theme.
6. I wanted to embedd youtube videos.
7. I wanted to make it easy to find products and give the users some options. I decided a taxonomy cloud for tagging would do nicely.
Modules Used
Ubercart 2.0 Beta 4
Lightbox2
video filter
ubercart attribute stock filter
Ubercart Discount Coupons
Taxonomy Cloud
Modules required to work with Images:
CCK, FileField, ImageField, Image, Imagecache (turn on: Imagecache, Imagecache UI), Imageapi (turn on ImageAPI and ImageAPI GD2)
1. Stock Levels Based on Attributes
To achieve my goals for this I used a module called Attribute Stock Filter. Essentially this module will allow you to set individual stock levels for each attribute combination and hide any attribute combination that are not in stock. Here's how to get it working:
- Install the module by uploading the files to your modules directory.
- Go into Administration > Modules and activate the module.
- Go to a product and add some attributes (clieck edit on the product page, then click attributes, then add attributes).
- On the options tab, select which options will be available for this product.
- Now go to the adjustments tab, and give each product a unique SKU number. If they are not all unique, you will not see anything listed on the stock tab and you can't set the individual stock quantities.
- Now go to the stock tab and type in the quantities for each product variation, and check the activate box for each variation that you want to be available on the site.
2. Creating clear thumbnails
First, you will need to make sure all the standard image modules you will need are installed. Once you have them installed there are a couple configuration changes you'll need to make.
Next, make sure the ImageAPI module is configured and is able to find the binary needed for the Image API you're using like Imagemagic. I'm using the built in PHP GD2 support and it just worked for me out of the box, but you may have to change the path to the binary if you're receiving an error message when going to configure the ImageAPI module. The configuration for the Image API is found under Administer > Image API (Under Site configuration). If you do not know the path to the binary, you may need to ask your web hosting provider.
Then, add the Image field to the 'product' content type. To do this automatically, go to Administer > Store Administration and you will see a notification on the bottom of the screen saying the image field needs to be set up in CCK and click here to do this automatically. This will create a new field for the products content type and give it the correct name so Ubercart can find it etc. Now if all went well, when editing a product you will have an image field which will allow you to upload an Image file.
JPG thumbnails tend to get heavy artifacts on the default quality settings. This isnt a big problem if your selling lamps or computers, but T-Shirt need to be clearly legible. Here's how I worked around this issue:
- Use squares as your main image instead of displaying the design on a shirt. This will allow the design to appear larger, even compared to an image of the same width that is shown on a shirt as opposed to in a simple square.
- Create images in nice even numbers. I create all my large images on 600x600 squares. Then I set my product image to a nice even multiple of that, like 300x300 (exactly 50%). This greatly reduces the amount of jagged lines and artifacts that appear on the product image, and of course when you click for a full sized image, the original is nice and sharp. Thumbnails for the 'product list' page I have set to 200x200, again exactly 1/3rd of the original. You'll want to make the image sizes configured on your website to match the sizes you choose. Do this in Administer > Images (Under Site Building).
- Use lightbox2 for image display. Lightbox2 is a nice way to display images and it is very customizable through the admin interface. After installing lightbox 2 dont forget to go into Administration > Input formats, click configure next to filtered html, and check the lightbox filters to turn them on. This screen shows little example of how these filters can be used in your content to use the lightbox script.
You will also want to go to Administer > Store Administration > Configuration > Product Settings and turn the Product Image widget to Lightbox2
3. Creating Promotional Codes
At first I searched around for a promo code module and found uc_discounts. This works well for giving certain users or groups discounts in general but doesn't support promo codes.
Instead I used the uc_coupon module. This did exactly what I wanted. Simple install the module and creating promo codes is a synch. More documentation on that can be found here. At the time of writing this I am using the development snapshot 6.x-1.x-dev (2009-Feb-20).
4. Seamless Shipping Integration
At the time of writing this, the ubercart fedex module was in existance, but trouble and not supported for Drupal 6. Instead, I signed up for a UPS account, and configured the ups module. The hardest part about this is finding where to go on the UPS website to sign up and receive your API key! Here are some helpful links to get you moving in the right direction.
- First create a UPS account in general if you dont already have one (ups.com)
- The register for a developers key here
- Then you need an XML Access Key which you can get here (youll need to have a developer key already)
Now just install the UPS module and fill in the ups account number, access key etc. into the confuration screen. Nice and easy.
5. Installing & Customizing a Theme
The honest truth here is, if you dont know CSS, XHTML and are handy with photoshop or something comparable, you're not going to want to dive into this. Your best option would be to either choose one of the free Drupal themes listed here, or purchase a professional drupal theme. Your best bet is to purchase a theme, or find a free one that is built with ubercart in mind. Many of the free themes are just for Drupal in general and do not take into consideration all of the extras that ubercart and its modules provide.
For free themes, check out ThemeGarden.org's Drupal 6 Section to see the themes in action - again not all will be suitable for ubercart out of the box. You can also try Monster Templates as they have a Drupal section but again many of them will not take ecommerce into consideration.
One excellent resource for high quality themes at a reasonable price is Top Notch Themes. Many of these themes will take ubercart into consideration and will just work perfectly and even offer additional customization beyon what most other themes will provide. They even offer a couple free themes that work very well for ecommerce, my favorite being Acquia Marina which was used for the spread firefox website for quite a while.
I'm going to go into a little more detail soon on getting into the nuts and bolts of Drupal 6 theming, but I've still got quite a few things to work through myself before I'd be able to help someone else so stay tuned for that one.
6. Embedding Videos
I understand this may not be a typical request for a T-Shirt company but, I needed it so I'll tell you what I did. I installed the video filter module located here. Just install the module, turn it on in the admin > modules page and then go to administration > input formats (under site configuration). Click the configure button next to filtered html, and check the box that says video filter. After installing lightbox2, you can embed videos into the lightbox as well as long as you turn on that filter also (see #2 above).
7. Tags!
I then started hunting around for a solution to the categorization. I wanted to have a bunch of different categories, but didnt want a crowded catalog. For example a shirt that had a nice graphic design, but also a funny saying would belong in 2 categories, maybe even more. The best way to achieve this is with tagging. I installed tagadellic. It creates a nice tag block that will increase the font size of the tag diaplyed depending on how many product in your store carry that tag. This makes popular tags stand out, and fringe tags fade into the background instead of having equal prominance. Once installing the tagadellic module, you'll need to visit the blocks section (administration > site building > blocks) and select where you want the tagadellic block to be displayed. Now just visit each of your products and start tagging them. Note it takes a little while for the new tags to start showing in the tagadellic block.
In addition to this, I also used the Taxonomy Menu module to create my menu based on the tags I assigned my products. This makes managing the menus a lot easier. The only thing I really need to edit are the individual product pages and the menu pretty much takes care of itself.
Product Display Tips
Every time you create a product, you will have to go through the motions of setting up the different attributes. Adding all the different sizes and colors. This is all fine and good, but what if every product is always available in white and black and has small, medium and large sizes? Wouldnt it be nice to have these added by default? Enter product classes. I'm not going to do a whole tutorial on this, instead just look at Administer » Store administration » Products > Manage classes, and read about it in the Ubercart documentation here.
You may want to remove the post information from the 'product' content type so it doesnt show the 'posted by username on 01/01/2001' or whatever. To do this go to Administer > Themes > click configure next to the theme you are currently using > click global settings > and unclick 'product' under the "display post information on" menu.
Search Engine Optimization
By default, your urls of your products will use node numbers instead of names. This is not ideal for search engines to pick up what exactly each page is about. We can use the Pauthauto module to make this a bit better. There is an excellent article with some great tips on Drupal 6 search engine optimization here, including a walk-through on setting up and using pathauto.
Conclusion
All in all I have to say this is the most rewarding ecommerce system I have ever worked with. There is a lot of good info out there on the ubercart website, on the drupal website, in the module documentation, and even on youtube that its really easy comparatively to pick this up and run with it. Hopyfully this article helps someone someday. If it was helpful to you, let me know in the comments! Bloggers love comments I hear, and now I'm officially a blogger.
