Web Pattern Library

Github Repo

Menu


Global styles

Global components


Template Structure


Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides

Personalization

My Account / History

Static pages


JavaScript Helpers

Web Pattern Library:

Product Grid

Related:

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

On Model

Grid

On Model Images

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.

(Alternate Small Viewport Version)

On Model Images (Alternate Small Viewport Version)

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:

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

On Model Images (Maximum 2 Images Wide)

On Model Images (Maximum 3 Images Wide)

On Model Images (Maximum 4 Images Wide)

On Model Images (Maximum 5 Images Wide)

On Model Images (Maximum 6 Images Wide)