In this video, we will customize the "Shop" view and select which fields we'd like to show.

  • Go to "Structure => Views => Shop" (admin/structure/views/view/shop)

Display name

The Display name is not visible to site visitors. It is for internal uses only and will appear only in the administrative interface for the view. To change the name and description of this display:

  • Click the "Page" link on the Displays section
  • Name: Shop Page
  • Description: Products for sale page display
  • (Apply)

Title

This is the title that will be used wherever titles are used. ie: If you are displaying the view as a page, this will be the page title. If you are displaying the view as a block, this will be the block title.

Format

Format gives you options on how the views results are displayed. A standard Views installation has five view formats:

  • Grid (This displays the view results in grid format)
  • HTML List (This formats the view as either an ordered or unordered HTML List)
  • Jump menu (A jump menu is a dropdown list containing links to commonly accessed content.)
  • Table (This creates a table of the view data.)
  • Unformatted list (This gives you a list of the results without any special markup.)

There are also contributed modules that provide additional view formats, like Views Slideshow, but we'll stick to the core formats for now.

Let's change the format from unformatted list to Grid:

  • Format: Grid
  • (Apply(all displays))
  • Number of columns: 3
  • (Apply(all displays))
  • Show
    • Click "Content"
    • [x] Fields (This will display individual fields instead of teasers.)
    • (Apply(all displays))
  • (Apply(all displays))

Scroll down and see the live preview, we now have a grid with 3 columns that displays title field. Next, let's take a look at the Fields settings.

Fields

The Fields section is where you can select the fields you want to display in the view. To add a field:

  • Click "Add" next to Fields
  • Filter: Content
    • [x] Content: Availability
    • [x] Content: Price
    • [x] Content: Product Image (Make sure that this is the image that appears in the node product)
  • (Apply(all displays))

Views provides you a configuration settings for each field that will be displayed.

  • Content: Availability
    • [ ] Uncheck Create a label
  • (Apply (all displays))
  • Content: Price
    • [ ] Uncheck Create a label
    • Thousands marker: Comma
  • (Apply(all displays))
  • Content: Product Image
    • [ ] Uncheck Create a label
    • Image style: Medium (220 x 220) (This will render the image as a 100x 100 image to save bandwidth.)
    • Link image to: Content (This means that the image is clickable, and when clicked will take the user to the full page display of that product. I we chose "File", when clicked, the image iteslf would open in the browser window.)
  • (Apply(all displays))

Next, we'll rearrange the order of fields.

  • Click the dropdown arrow next to Field
  • Choose "Rearrange"
  • Select the move gear and rearrange to
    • Content: Product Image
    • Content: Title
    • Content: Price
    • Content: Availability
  • (Apply(all displays))

Now when we scroll down to the live preview we'll see that the view is displaying the Image, Title, Price and Availability fields. The next step is to define the Filter Criteria.