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 Personalization:

Logo toggles

For selecting a logo or whale customization. The personalize preview is dynamically updated each time a selection is made.

Radio button configuration


In the personalize panel, all options are visible.

Left Chest Logo: Boston B
Left Sleeve Whale Color: Green

When used as in-page toggles in the PDP, some options visible with "more" link.

Logo & Whale ($10)

Left Chest Logo: Boston B - Preview
Left Sleeve Whale Color: Green - Preview

Configure the preview image size

Image logos and whales are scaled using data-personalize-scale, which is simply a number indicating a multiplier. For example, data-personalize-scale="2" would double the size of the image in the hotspot.

Larger personalizations

Use a value greater than 1 to increase the image size relative to the hotspot (dotted line circle). This example uses data-personalize-scale="1.6":

Smaller personalizations

Use a value less than 1 to decrease the image size relative to the hotspot. This example uses data-personalize-scale=".6":