Beginning Drupal 8

Chapter 22 ■ Building a Commerce Site
4. Make the following changes to the Teaser display by clicking the Teaser link near
the top of the page:
a. Move all of the fields except for Title, Product: Price, Product variations, and
Product: Image to the Hidden area.
b. Move the Product: Image field to the first position.
c. Hide the label for Product variations.
d. Save the changes.
5. Update the Product list display on the Manage display tab as follows:
a. Move the Product: Image field to the first display position.
b. Move the Product: Title to the Hidden area, as we already have the Title
field.
c. Move Price to the last position in the fields to be displayed.
d. Save the changes.
Following the same steps as for shirts and cups, also add a hats product variation, with the exception of
the Size field, as hats only come in one size.
Creating a Product
After creating the product variations for shirts and hats, it’s time to test them to make sure they function
as desired. I’ll start by creating a new shirt, the Drupal Flys T-shirt. To follow along with the example, click
the Product link on the main menu and click “Add a product” in the drop-down menu. Select “shirts” from
the list of Actions and enter “Drupal Flys” in the Title field. Here’s where the fun begins; we need to add a
variation for every combination of color and size that we want to sell. For example, we want to sell white
T-shirts in all four sizes, so we need to select White from the Color drop-down menu and, for each size,
select one size from the Size select list. Enter a SKU for that combination of color and size, select Shirts in the
Category drop-down menu, set a price, and add an image. For purposes of this demonstration, the images
all show blue shirts. After filling out the values for the first variation, the form should look like Figure 22-10.
251