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

Monogram & logo buttons

Jump to:

Whale and/or Monogram Optional

$10 upcharge for one or both. Place price in the shared header, not on buttons.

Personalize It ($10)

Add Whale Add Monogram

Whale Required, Monogram Optional

Whale price should be included in product price, monogram has price on button.

Personalize It

Whale: Left Sleeve

  • Style: Red
  • Size: 1.5"
7 styles available...
Add Monogram ($10)

Logo + Whale Required

Logo and whale price should be included in product price.

Personalize It

Logo: Left Chest

  • Style: Boston B
  • Size: 2"
3 styles available...

Whale: Left Sleeve

  • Style: Red
  • Size: 1.5"
7 styles available...

If upcharge cannot be included in the product price, add to the header:

Logo & Whale ($10)

Logo: Left Chest

  • Style: Boston B
  • Size: 2"
3 styles available...

Whale: Left Sleeve

  • Style: Red
  • Size: 1.5"
7 styles available...

Logo + Whale Required, Monogram Optional

Logo and whale price should be included in product price, monogram has price on button.

Personalize It

Logo: Left Chest

  • Style: Boston B
  • Size: 2"
3 styles available...

Whale: Left Sleeve

  • Style: Red
  • Size: 1.5"
7 styles available...
Add Monogram ($10)

If logo & whale upcharge cannot be included in the product price, add to the header above them, and include a separate header for the monogram button:

Logo & Whale ($10)

Logo: Left Chest

  • Style: Boston B
  • Size: 2"
3 styles available...

Whale: Left Sleeve

  • Style: Red
  • Size: 1.5"
7 styles available...

Personalize It

Add Monogram ($10)

Monogram Selected

When a shopper adds a monogram, this component replaces the "optional" button with personalization details. Hitting the "Edit" link opens the edit monogram dialog; hitting "Remove" replaces this component with the optional monogram button.

Personalize It

ABC

Monogram: Left Sleeve

  • Size: 1.5"
  • Style: Diamond
  • Color: Lighthouse Red
  • Initials: ABC
Edit | Remove

Additional Styles of Monogram Selected

ABC

Monogram: Left Sleeve

  • Size: 1.5"
  • Style: Circle
  • Color: Lighthouse Red
  • Initials: ABC
Edit | Remove
ABC

Monogram: Left Sleeve

  • Size: 1.5"
  • Style: Elegant
  • Color: Lighthouse Red
  • Initials: ABC
Edit | Remove
ABC

Monogram: Left Sleeve

  • Size: 1.5"
  • Style: Cotillion
  • Color: Lighthouse Red
  • Initials: ABC
Edit | Remove
ABC

Monogram: Left Sleeve

  • Size: 1.5"
  • Style: Centurion
  • Color: Lighthouse Red
  • Initials: ABC
Edit | Remove
ABC

Monogram: Left Sleeve

  • Size: 1.5"
  • Style: Copperplate
  • Color: Lighthouse Red
  • Initials: ABC
Edit | Remove

Other styles included

Logo: Left Chest

  • Style: Boston B
  • Size: 2"
Choose: