Product Lists

Product Lists are used to highlight content using a “product” or “card” style box in a single, two or three column layout on a Product List Page or default two-column content page.  Product Lists create a showcase of content with a title box or card style using the [box] shortcode in combination with the [list] or [grid] shortcodes.
The first box or card will always be a title box and the boxes will automatically wrap within the grid tags based on the # of columns in the page template.

Single Column Product List

Single Column Product Lists use the list and box shortcodes and are best when highlighting a small number of areas without a lefthand menu.

Minimum Image Size: 300 x 200

Click the image to see an example page.

2 Column Product Style List

2 Column Product lists use the grid and box shortcodes and are best displayed on the default 2-column page layout.

Minimum Image Size: 270 x 180

Click the image to see an example.

3 Column Product Style List

3 Column Product Lists use the grid and box shortcodes and are best when you have a long list of products to highlight and do not need a lefthand menu.

Minimum Product Image Size: 270 x 180

Click the image to see an example.

Syntax

 

Single Column – [list type="product"][box][/box][box][/box][box][/box][/list]

Two Column Product List (on default 2-column pages) – [grid type="product"][box][/box][box][/box][box][/box][/grid]

Three or Four Column Product List – [grid][box][/box][box][/box][box][/box][/grid]

Note:  Only one open and close grid shortcode is needed. The boxes will automatically wrap based on the number of columns available on the page. The type can be changed to “card” to get a blue and white style card similar to those in the Communications Tool Kit.

Shortcode Attributes
[grid] type= Product or Card
[box] type= Product or Cardid = id of post to be featuredattachment_id= used to specify an image different from the image in the post referenced by the id attribute

href= used to specify a url instead of using the id attribute

target= used with the href attribute to specify a target window
[list] no attributes