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:

Placement toggles

2 options

Placement: Right Chest

This monogram is approximately 1.5 inches tall. The size may vary slightly based on font choice. Monogram sits on the right center of the chest.

Configuration

Radio button inputs

Attributes and values assigned to the placement toggle input elements are used to build and update other personalization components, specifically:

In addition, the following are assigned when there is only a single placement for the customization:

Description paragraph for multiple options

When there is more than one placement option, the description for each is stored in a custom attribute on the personalize-placement-description element, data-personalize-placement-[ input value ]:

<p class="personalize_form_subhed personalize_form_subhed-placement personalize-placement-description"
data-personalize-placement-rightchest="This monogram is approximately 1.5 inches tall. The size may vary slightly based on font choice. Monogram sits on the right center of the chest."
data-personalize-placement-leftchest="This monogram is approximately 1.5 inches tall. The size may vary slightly based on font choice. Monogram sits on the left center of the chest.">This monogram is approximately 1.5 inches tall. The size may vary slightly based on font choice. Monogram sits on the right center of the chest.</p>

Examples

When there's only one placement:

Single placement

Placement: Left Chest

This monogram is approximately 1.5 inches tall. The size may vary slightly based on font choice. Monogram sits on the left center of the chest.

For toggles with multiple choices, use col-* classes to specify how many toggles (2-5). The description is moved below the toggles.

Multiple placements - 2 options

Placement: Right Chest

This monogram is approximately 1.5 inches tall. The size may vary slightly based on font choice. Monogram sits on the right center of the chest.

Multiple placements - 3 options

Placement: Right Chest

This monogram is approximately 1.5 inches tall. The size may vary slightly based on font choice. Monogram sits on the right center of the chest.

Multiple placements - 4 options

Placement: Right Chest

This monogram is approximately 1.5 inches tall. The size may vary slightly based on font choice. Monogram sits on the right center of the chest.

Multiple placements - 5 options

Placement: Back Yoke

Back Yoke description goes here. This logo is approximately 1/2-inch tall and sits in the upper center of the chest pocket.