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

Classic

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

Slim

Compare sizes and measurements

Choose Your Fabric

End on End. Blue solid fabric.

End on End

Stripe. Blue striped fabric.

Stripe

Blue Gingham. Blue gingham fabric.

Blue Gingham

Pink Gingham. Pink gingham fabric.

Pink Gingham

Back  to Step 1: Choose Your Fit

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.

No Pocket

With Pocket

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

Pink Gingham. Pink gingham fabric.

Pink Gingham

Out of Stock