Web Pattern Library:

Product Grid

Related:

• Badges
• Product Listing
• Product Grid Marketing Modules

Product Image

Use the data-alternate attribute to add a product hover image.

To use the Swatches to switch the product images on hover and click, add a data-src url on the swatchanchor link element for the primary image and optionally a data-alternate url for hover image.

Product Image on Model

Use the product-on-model class to use the taller product image aspect ratio.

Lazy Load Product Image

Add the data-scroll-activate attribute and the script will swap a low quality src attribute for the value in the data-src attribute when the image is first shown in the viewport. Make sure you also remove the inline onload event handler from the main <img> as well.

Marketing Slot Placeholder

Grid

Grid (Alternate Small Viewport Version)

To swap between a two column version at 300px–400px viewports and a single column alternate layout, use the product-grid-alternate-small on the product-grid element. This works for both the lay down and on-model versions.

Grid (Set a Maximum Number of Horizontal Images)

These maximums are available in 2, 3, 4, 5, and 6 wide. Use the following classes instead of product-grid-fullwidth:

• product-grid-2-max
• product-grid-3-max
• product-grid-4-max
• product-grid-5-max
• product-grid-6-max

Or, if the design includes a rail, use the following classes instead of product-grid-with-rail:

• product-grid-with-rail-2-max
• product-grid-with-rail-3-max
• product-grid-with-rail-4-max
• product-grid-with-rail-5-max
• product-grid-with-rail-6-max