Discussions

How to display products as a grid.

I've installed drupal kickstart to run a t-shirt type site. Setting up product displays with variations like color and size was pretty straight forward. Tax and shipping rules were also pretty easy to setup. I haven't setup billing yet but don't see there being any major problems in setting that up.

I've got a menu called catalog that works nice. What's the recommended way to display products as a grid? I don't want to change the product display node as the layout for that look great. I'm just looking for a way to slim down the information displayed from the catalog and use a grid to show more products per page.

I noticed views is installed by default. Should I be looking into learning how views works?

I know drupal commerce's main function is commerce and everything is so well documents. Thanks everyone for having that in place. I'm just a little lost where to start looking for some minor display adjustments.

Posted: May 18, 2012

Comments

StPaulTim on May 22, 2012

I've done some work with Views and have been watching the Lynda.Com vidoe's. I've managed to set-up a view displaying product images in a grid format. However, I'm having difficulties trying to figure out how to link the image back to the Product_Display page.

I'm only seeing options to link image to:

1) content (which is the admin page)
2) file (the image)

I am assuming, that I'm having this difficulty because of how products are structured. I believe they are entities, not content types. Any help?

joshmiller Josh Miller on May 23, 2012

If you have created a view based on "Commerce Products" you need to add a relationship using the "Commerce Product: Node referencing products from field_product" and then add a content nid field, hide from display, and then use that url (we will be using node/[nid]) in the rewrite options for the product image.

See attached for exported view that does this for Commerce Kickstart.

Josh

Brian on May 27, 2012

I haven't tried it but maybe it would work to set the products wrapper div width to 50% or less on the listing pages.