Web Pattern Library

Github Repo


Global styles

Global components

Template Structure

Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides


My Account / History

Static pages

JavaScript Helpers

Web Pattern Library:

Product Swatch Toggles

Color Swatches

Round Color Swatches

Large Color Swatches

Large Color Swatches w/ selected icons

Image Swatches

Image swatches

Hover Border

Show More

Include a <li class="swatch-more-toggle"> element to hide extra swatches from the default interface. All swatches that are siblings after the toggle element in the markup will be hidden.

Image swatches with More

Larger img variation

Largest img variation

See also the Sizes component.