Last updated May 16, 2013. Created on February 5, 2011.
Edited by, Scott J. Log in to edit this page.

Add content type for product display

The node will associate all variations of a product to display them on a single node. When the user picks a variant from the pull-down list, the associated data is updated on the page using Ajax.
We need to add a content type for displaying our new products in a specific content type. Navigate to the "Content Type" section (Structure > Content Types > "Add content type", or and enter the details of your product type. In our example, we name this new content type "Product display". Then click "Save and add fields".

Manage Fields

You should be on the Manage Fields tab of your content type (Structure > Content Types > [Your Content Type] > Manage Fields Tab, or[YourContentType]/fields).
 'Select list'
In order to reference one or more products (product variations) with this content display, we need to add a "Product Reference" (field_product) field to this content type. Be sure to set the field type to "Product reference" and the corresponding widget to "Select list" or "Autocomplete text field.". If you choose "Select list", you will get a rolling list of your products for all products you will want to display. This is easier if you have few products to display with this content type. You can label this new field "Product reference". Don't add again the fields defined in the product type. Click on "Save".
In the next window, just click on 'Save field settings.'

Note: You may want to select "unlimited" references in order to associate several variations of the product to one single display (e.g., several sizes and/or several colors). The field should also be set to required.
At the bottom of the next window, configure the field 'Number of values

Manage Display

By clicking the Manage Display tab (Structure > Content Types > [Your Content Type] > Manage Display Tab, or[YourContentType]/display), we can change the way the fields for our content type will be displayed. Change the display format for the "Product Reference" field to "Add to Cart form."

Looking for support? Visit the forums, or join #drupal-support in IRC.


miaoulafrite’s picture


in the example, i added two fields in the product : size and color

but when displaying the produt, the dropdown selection has a very high amout of variants (all colors x all sizes)
wouldn't it be possible to split the variants in different dropdown lists, ie: one for size, another for color?

i couldn't set up this in the display settings.

thanks for your help

EDIT 02.20.12 :
Found! Needed to check "Enable this field to function as an attribute field on Add to Cart forms." in product fields configuration. See example on drupal commerce :