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:

Make Your Own Shirt (MYOS) personalization

The MYOS wizard is designed to sit on a page with optional marketing modules above and below it.

MYOS Wizard

MYOS Wizard

Choose Your Fit

Classic fit

  • The new Classic fit is better than ever.
  • Long enough to tuck in (but you make the call)
  • Collar perfectly structured for a tie for times when you need to suit up
  • The shoulder is tailored a touch so it sits a bit lower & fits you more comfortably

Slim fit

  • It's a truer fit, trimmed through the body.
  • It's shorter — go ahead & leave it untucked!
  • Collar that's soft and informal — leave it open! (but it also looks great dressed up with a tie)
  • The shoulder is trimmed back for a better fit — the higher shoulder line lends an updated look

Compare sizes and measurements

Want a Pocket?

When you choose a pocket style, you will be navigated to a product detail page for the shirt that matches your selections.

Back  to Step 2: Choose Your Fabric

Out of stock example

If a fabric option is out of stock, it can be disabled so it can't be selected and a second line of text to explain that is it out of stock can be added. This is done by adding the myos-product-disabled class to the outer div, and adding this extra paragraph under the name:

<p class="myos-product-mssg availability_status availability_status-unavailable">Out of Stock</p>

Out of stock