Select Page

Drupal Commerce Store Setup with Drupal 10

Code, Drupal

Setting Up a T-Shirt Store with drupal/commerce:^3.0

Drupal Commerce 3.x is optimized for Drupal 10 and introduces improvements in order processing, checkout flows, and tax/shipping handling. Below are the steps to set up your T-shirt store with automatic shipping and state tax calculations.

 

1. Install Drupal & Drupal Commerce

Run the following commands in your terminal to install Drupal and Drupal Commerce 3.x:

composer create-project drupal/recommended-project my_store cd my_store composer require drupal/commerce:^3.0

Enable required modules:

drush en commerce commerce_cart commerce_checkout commerce_store commerce_price commerce_product commerce_order commerce_tax commerce_shipping address -y drush updb

 

 

2. Configure the Store

Go to Commerce → Configuration → Store Settings → Stores and create a store with these settings:

  • Name: Your T-shirt Store
  • Address: 2000 S Mill Ave, Tempe, AZ 85282
  • Currency: USD
  • Default Country: United States

 

 

3. Add Products

Using Drupal Commerce 3 how to Create Product Variation Type (Size Attribute) for a “T-Shirt” product. Add an attribute called Size: Options: SM, MD, LG, XL, 2XL, 3XL

In Drupal Commerce 3.x, you can create a Product Variation Type with a Size attribute for your “T-Shirt” product using the following steps:

3.1 Create a Product Variation Type

  1. Go to Commerce → Configuration → Product Variation Types.
  2. Click “Add Product Variation Type”.
  3. Fill in the fields:
    • Label: T-Shirt Variations
    • ID: tshirt_variation (auto-generated)
    • Order item type: Default
  4. Click “Save”.

3.2 Add the “Size” Attribute

  1. Navigate to Commerce → Configuration → Product Attributes.
  2. Click “Add Product Attribute”.
  3. Fill in the details:
    • Label: Size
    • Attribute type: List (text)
    • Variation types: Select T-Shirt Variations
  4. Click “Save”.

3.3 Add Size Options

  1. After saving, go to the “Add values” section.
  2. Enter the size options one by one:
    • SM
    • MD
    • LG
    • XL
    • 2XL
    • 3XL
  3. Click “Save”.

3.4 Assign the Variation Type to the Product Type

  1. Navigate to Commerce → Configuration → Product Types.
  2. Click “Add Product Type”.
  3. Fill in:
    • Label: T-Shirt
    • Variation type: T-Shirt Variations
  4. Click “Save”.

Now, when adding a T-shirt product, you can create variations with different sizes!

 

 

4. Set Up Taxes for All 50 US States

Drupal Commerce 3.x has better tax integration. You can manually configure tax rates or use an external provider.

4.1 Enable Tax Calculation

  1. Navigate to Commerce → Configuration → Taxes.
  2. Click Add Tax Rate → Select “Sales Tax”.
  3. Choose US State-based Taxation.
  4. Set tax rates manually for all 50 states or use a tax provider like Avalara/TaxJar.

4.2 Automatic Tax Calculation (Optional)

For automatic tax calculation, install a tax provider module:

composer require drupal/commerce_avatax

Then, configure it under Commerce → Configuration → Taxes.

 

 

5. Configure Automatic Shipping Calculation

5.1 Install and Enable Commerce Shipping

composer require drupal/commerce_shipping drush en commerce_shipping -y

5.2 Configure Shipping

  1. Go to Commerce → Configuration → Shipping.
  2. Click “Add Shipping Method”.
  3. Set Origin Address as:
    • 2000 S Mill Ave, Tempe, AZ 85282
  4. Choose Flat Rate or install real-time shipping providers.

5.3 Real-time Shipping Rates

To enable FedEx, UPS, or USPS, install their modules:

composer require drupal/commerce_fedex drupal/commerce_ups drupal/commerce_usps

Then configure API credentials under Commerce → Configuration → Shipping.

 

 

6. Test Your Store

  1. Add a T-shirt to the cart.
  2. Proceed to checkout.
  3. Verify:
    • Taxes apply based on the shipping address.
    • Shipping costs are calculated from Tempe, AZ.

Your Drupal Commerce T-shirt store is now ready!

Drupal 7 Security Configuration

Code, Drupal, Tips

Prevent Browser caching
Put this at the top of your theme template.php file:

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

 

Download and enable the SecKit module:
https://www.drupal.org/project/seckit
There are some nice default settings. We can review tweak these settings as part of a security review when we have more time.

Some Drupal SEO Considerations

Drupal, Tips

Some SEO features you may want to include in your Drupal website.  Here are a few notes I took after conducting an SEO review on one of my websites.

Title Tag
A title tag is the main text that describes an online document. Title elements have long been considered one of the most important on-page SEO elements (the most important being overall content), and appear in three key places: browsers, search engine results pages, and external websites.

Here are my personal preferences for Configuration > Site information:

  • Site name: Project Name | ASU
    The page title will the render as [Page Title] | Project Name | ASU.

Metatag Description and Keywords
While most search engines now ignore the metatag keywords but the page description is still very important.  I add a teaser field to a node which I use to generate this content. Install the Metatag module.

  • Install the Metatag module with the follow submodules enabled: Metatag, Metatag verification (see below)
  • Click configuration on Metatag.
    • Global > Content select the Override link.
    • Set the Description field to your custom field in my case it is [node:field_news_teaser].
  • Site Ownership Verification
    • Enable the module Metatag verification (part of the Metatag package)
    • Follow the HOWTO links available on the documentation: https://www.drupal.org/node/1774342

XML Sitemap
The XML sitemap module creates a sitemap that conforms to the sitemaps.org specification. This helps search engines to more intelligently crawl a website and keep their results up to date. The sitemap created by the module can be automatically submitted to Ask, Google, Bing (formerly Windows Live Search), and Yahoo! search engines.

  • Enable the following modules included in the package: XML sitemap, XML sitemap custom, XML sitemap engines, XML sitemap menu, XML sitemap node
  • Update your content types to rank the priority of each: Structure > Content Types > Click Edit on your content type you want to be included in the site map.
  • On the bottom configuration tabs you will click XML sitemap. Use the following settings
    • Inclusion: Included
      This indicates that this content type will be included in the site map.
    • Default priority: 0.5 normal
      The priority is the importance value of your content. Basic pages I leave at the default 0.5 normal setting. News I rank at that same value. On one website I rank Research Centers at 0.8 because this content type is the most important for the website. The default setting for the home page is 1.0 which is the highest importance.
  • Configuration Settings: Go to Configuration > Search and Metadata Section > XML sitemap and review the settings. If everything looks good you can click Rebuild Links and run that to get your initial sitemap built.
  • Click the Search Engines tab and click the Bing and Google checkboxes and save the submission settings.

Copy Drupal site to local Dev

Drupal, Tips

Local Development Environment: MAMP Pro

  1. Download a copy of your drupal public folder to your computer.
  2. Export a copy of your database.
  3. Create the database on your local machine.  Import your database from the file you just downloaded. For larger databases please reference my blog post about how to increase the memory allowance on MAMP.
  4. Copy the drupal root folder into your MAMP htdocs folder. Rename it to “dev.websitename” to keep things organized.
  5. Create your MAMP Host entries so your site will load at “http://websitename.local:8888”.
  6. Files to update:
    • .htaccess – update all references to the live URL and update them to your local URL.
    • settings.php – update all references to the live URL to your local URL. Set $cookie_domain to “localhost”.
      • update database settings
      • $base_url = “http://websitename.local:8888”
      • $cookie_domain = “localhost”
  7. Launch your site and everything should be working as expected.

Reset Bootstrap Padding/Margins for Theming

Code, Drupal, Theming

I use Twitter Bootstrap as a base theme for most of my sites in Drupal.  There are a ton of build in features that make theming a quick and enjoyable process.  One thing that bugs me is the default padding and margin settings.  They are a headache to deal with so here is a CSS reset to remove some of the more annoying settings.

Place this at the start of your custom CSS file and set your own padding/margins!

html,body {
  height: 100%; margin: 0px; padding: 0px; }

#navbar {
  margin-bottom:0; }

.alert {
  border-radius: 0; }

.container {
  width:100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto; }

.col-xs-1, .col-sm-1, .col-md-1, .col-sm-1, 
.col-xs-2, .col-sm-2, .col-md-2, .col-sm-2, 
.col-xs-3, .col-sm-3, .col-md-3, .col-sm-3, 
.col-xs-4, .col-sm-4, .col-md-4, .col-sm-4, 
.col-xs-5, .col-sm-5, .col-md-5, .col-sm-5, 
.col-xs-6, .col-sm-6, .col-md-6, .col-sm-6, 
.col-xs-7, .col-sm-7, .col-md-7, .col-sm-7, 
.col-xs-8, .col-sm-8, .col-md-8, .col-sm-8, 
.col-xs-9, .col-sm-9, .col-md-9, .col-sm-9, 
.col-xs-10, .col-sm-10, .col-md-10, .col-sm-10, 
.col-xs-11, .col-sm-11, .col-md-11, .col-sm-11, 
.col-xs-12, .col-sm-12, .col-md-12, .col-sm-12 {
  position: relative;
  height:100%;
  min-height: 1px;
  padding-right: 0;
  padding-left: 0; }

.row {
  margin-right: 0;
  margin-left: 0; }

.footer {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top: none; }

.panel {
  border:none; }