<!-- BEGIN CommonJSToInclude.jspf --> <script type="text/javascript" src="/wcsstore/SGH/experiences/ISG/js/utag.js"></script> <!-- Upgrading jQuery --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <!-- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> --> <script> <!-- BEGIN CommonJSToInclude.jspf --> <script type="text/javascript" src="/wcsstore/SGH/experiences/ISG/js/utag.js"></script> <!-- Upgrading jQuery --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <!-- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> --> <script> </script> <!-- END CommonJSToInclude.jspf --> <!-- BEGIN ExperienceMetadata.jsp --> <!--Begin Jeffs code--> <!-- END DELIVERY --> <!-- START DELIVERY AREA --> <!-- DELIVERY: Page Specific CSS --> <!-- TODO: update/verify path to experience css --> <link rel="stylesheet" type="text/css" href="/wcsstore/SGH/experiences/ISG/css/normalize.css" /> <link rel="stylesheet" type="text/css" href="/wcsstore/SGH/experiences/ISG/css/isg.css" /> <!-- END DELIVERY --> <!-- START DELIVERY AREA --> <!--[if IE 7 ]> <div id="content" class=" ie7 ie"> <![endif]--> <!--[if IE 8 ]> <div id="content" class="ie8 ie"> <![endif]--> <!--[if IE 9 ]> <div id="content" class="ie9 ie"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <div id="content" class="isg-page"> <!--<![endif]--> <div class="isg-wrap"> <div class="world-view"> <!-- Controlled by breadcrumbview.js --> <ul class="isg-breadcrumb breadlinks"> <li class="isg-active"><a href="#js" >step.01</a></li> <li class="isg-disabled"><a href="#js" >step.02</a></li> <li class="isg-disabled"><a href="#js" >step.03</a></li> <li class="isg-disabled"><a href="#js" >step.04</a></li> <li class="isg-disabled"><a href="#js" >step.05</a></li> <li class="isg-disabled"><a href="#js" >step.06</a></li> </ul> <!-- End NavView --> <div class="isg-nav"> <a href="#" class="isg-prev isg-black">Prev Step</a> </div> <div class="isg-stage"> <!----------------------------------------------------------> <!-- 1. GENDER --> <div class="isg-page isg-gender isg-landing isg-active"> <!--EDIT: This used to say 'seven quick steps', change it to what you see below--> <h1>Six Quick Steps to Find your Perfect Style</h1> <!--End edit--> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 01</span> <h2>Frame</h2> <h3>Your Style</h3> </div> <div class="isg-beta"> <p>Tell us if you are a guy or girl</p> </div> </div> <ul class="isg-choices" data-choice-key="gender"> <li class=""> <a href="#JS" data-choice-value="male" class="isg-circle-arrow"> <span>Guy</span> </a> </li> <li class=""> <a href="#JS" data-choice-value="female" class="isg-circle-arrow"> <span>Girl</span> </a> </li> </ul> </div><!--.isg-gender--> <!-- END GENDER --> <!----------------------------------------------------------> <!-- 2. LOCATION --> <div class="isg-page isg-location"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 02</span> <h2>Set Your</h2> <h3>Scene</h3> </div> <div class="isg-beta"> <p>Where do you want to be?</p> </div> </div> </li> <li class="isg-urban"> <div class="isg-aside"> <h2>urban</h2> <h3>landscape</h3> <p>The city's energy with its hip, new finds fires up your urban edge.</p> </div> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/location/bg_urban.jpg" /> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/location/bg_urban.jpg" /> --> <a href="#js" class="isg-next">Select this scene</a> </li> <li class="isg-historical"> <div class="isg-aside"> <h2>historical</h2> <h3>city</h3> <p>Stunning historical cities are now and forever your favorite sites.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/location/bg_historical.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/location/bg_historical.jpg" /> <a href="#js" class="isg-next">Select this scene</a> </li> <li class="isg-city-beach"> <div class="isg-aside"> <h2>city</h2> <h3>beach</h3> <p>Beach by day, city by night - your ultimate, non-stop hotspot.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/location/bg_citybeach.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/location/bg_citybeach.jpg" /> <a href="#js" class="isg-next">Select this scene</a> </li> <li class="isg-secluded-beach"> <div class="isg-aside"> <h2>secluded</h2> <h3>beach</h3> <p>A secluded stretch of sun, sea, and sand is your paradise found.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/location/bg_secludedbeach.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/location/bg_secludedbeach.jpg" /> <a href="#js" class="isg-next">Select this scene</a> </li> <li class="isg-city"> <div class="isg-aside"> <h2>city</h2> <p>Towering skyscrapers, shopping galore - your go-to glamour destination.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/location/bg_city.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/location/bg_city.jpg" /> <a href="#js" class="isg-next">Select this scene</a> </li> <li class="isg-small-town"> <div class="isg-aside"> <h2>small</h2> <h3>town</h3> <p>The laidback ease of a quiet town is your favorite chillout zone. </p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/location/bg_town.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/location/bg_town.jpg" /> <a href="#js" class="isg-next">Select this scene</a> </li> </ul> <ul class="isg-choices" data-choice-key="location"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="urban"> <img src="/wcsstore/SGH/experiences/ISG/img/location/icon_urban.jpg" width="137" height="80"/> <span>urban landscape</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="historical"> <img src="/wcsstore/SGH/experiences/ISG/img/location/icon_historical.jpg" width="137" height="80"/> <span>historical city</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="citybeach"> <img src="/wcsstore/SGH/experiences/ISG/img/location/icon_citybeach.jpg" width="137" height="80"/> <span>city beach</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="secludedbeach"> <img src="/wcsstore/SGH/experiences/ISG/img/location/icon_secludedbeach.jpg" width="137" height="80"/> <span>secluded beach</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="city"> <img src="/wcsstore/SGH/experiences/ISG/img/location/icon_city.jpg" width="137" height="80"/> <span>city</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="town"> <img src="/wcsstore/SGH/experiences/ISG/img/location/icon_town.jpg" width="137" height="80"/> <span>small town</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div><!--.isg-location--> <!--END LOCATION--> <!----------------------------------------------------------> <!--3. FASHION/PERFORMANCE LANDING --> <div class="isg-landing isg-page isg-fashion-performance"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 03</span> <h2>Looking good<br/><span>or performing</span></h2> <h3>your best</h3> </div> <div class="isg-beta"> <p>Tell us what you are about</p> </div> </div> <ul class="isg-choices" data-choice-key="fashionOrPerformance"> <li class=""> <a href="#JS" data-choice-value="fashion" class="isg-circle-arrow"> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/location/icon_urban.jpg" width="137" height="80"/> --> <span>Fashion</span> </a> </li> <li class=""> <a href="#JS" data-choice-value="performance" class="isg-circle-arrow"> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/location/icon_urban.jpg" width="137" height="80"/> --> <span>Performance</span> </a> </li> </ul> </div> <!--END FASHION/PERFORMANCE LANDING --> <!----------------------------------------------------------> <!-- 4. FASHION/PERFORMANCE --> <div class="isg-page isg-fashion-performance"> <!--PERFORMANCE--> <div class="isg-performance isg-branch"> <!--MALE PERFORMANCE--> <div class="isg-male isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 04</span> <h2>Pick Your</h2> <h3>Playground</h3> </div> <div class="isg-beta"> <p>Choose your sporting style</p> </div> </div> </li> <li class="isg-golf"> <div class="isg-aside"> <h2>Performance</h2> <h3>golf</h3> <p>Perfecting that swing is your driving ambition.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_golf.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_golf.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-running"> <div class="isg-aside"> <h2>Performance</h2> <h3>running</h3> <p>Finish first. Take it all in your stride with these high-endurance stars.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_running.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_running.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-court"> <div class="isg-aside"> <h2>Performance</h2> <h3>court &amp; field</h3> <p>When you're on the field, it's serious game on.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_field.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_field.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-cycling"> <div class="isg-aside"> <h2>Performance</h2> <h3>Cycling</h3> <p>Your love of cycling has you ahead of the pack.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_cycling.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_cycling.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-driving"> <div class="isg-aside"> <h2>Performance</h2> <h3>driving</h3> <p>The fast (minus the furious) gets your motor running.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_driving.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_driving.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-extreme"> <div class="isg-aside"> <h2>Performance</h2> <h3>extreme</h3> <p>Bend and stretch, you're always up for flexing your muscles.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_extreme.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_extreme.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-beach-water"> <div class="isg-aside"> <h2>Performance</h2> <h3>beach and</h3> <h4>water</h4> <p>With sun, sea, and sand, you're in your natural element(s). </p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_beach.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/male/bg_perfMan_beach.jpg" /> <a href="#js" class="isg-next">Select</a> </li> </ul> <ul class="isg-choices" data-choice-key="fashionPerformanceChoice"> <li class="isg-empty isg-active"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class=""> <a href="#tabs-1" data-choice-value="golf"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/icon_perfMan_golf.png" width="137" height="80"/> <span>golf</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="running"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/icon_perfMan_running.png" width="137" height="80"/> <span>running</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="court"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/icon_perfMan_field.png" width="137" height="80"/> <span>court &amp; field</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="cycling"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/icon_perfMan_cycling.png" width="137" height="80"/> <span>cycling</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="driving"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/icon_perfMan_driving.png" width="137" height="80"/> <span>driving</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="extreme"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/icon_perfMan_extreme.png" width="137" height="80"/> <span>extreme</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="beach"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/male/icon_perfMan_beach.png" width="137" height="80"/> <span>beach &amp; water</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!--END MALE PERFORMANCE--> <!--FEMALE PERFORMANCE--> <div class="isg-female isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 04</span> <h2>Pick Your</h2> <h3>Playground</h3> </div> <div class="isg-beta"> <p>Choose your sporting style</p> </div> </div> </li> <li class="isg-golf"> <div class="isg-aside"> <h2>Performance</h2> <h3>golf</h3> <p>Perfecting that swing is your driving ambition.</p> </div> <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_golf.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_golf.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-running"> <div class="isg-aside"> <h2>Performance</h2> <h3>running</h3> <p>Finish first. Take it all in your stride with these high-endurance stars.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_running.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_running.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-court"> <div class="isg-aside"> <h2>Performance</h2> <h3>Court &amp; Field</h3> <p>When you're on the field, it's serious game on.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_field.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_field.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-cycling"> <div class="isg-aside"> <h2>Performance</h2> <h3>Cycling</h3> <p>Your love of cycling has you ahead of the pack.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_cycling.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_cycling.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-driving"> <div class="isg-aside"> <h2>Performance</h2> <h3>Driving</h3> <p>The fast (minus the furious) gets your motor running.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_driving.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_driving.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-perf-active"> <div class="isg-aside"> <h2>Performance</h2> <h3>Active</h3> <p>Bend and stretch, you're always up for flexing your muscles.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_active.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_active.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-beach-water"> <div class="isg-aside"> <h2>Performance</h2> <h3>beach and</h3> <h4>water</h4> <p>With sun, sea, and sand, you're in your natural element(s). </p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_beach.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/performance/female/bg_perfWoman_beach.jpg" /> <!--EDIT: NEED TO ADD THIS--> <a href="#js" class="isg-next">Select</a> <!--END EDIT--> </li> </ul> <ul class="isg-choices" data-choice-key="fashionPerformanceChoice"> <li class="isg-empty isg-active"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class=""> <a href="#tabs-1" data-choice-value="golf"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/icon_perfWoman_golf.png" width="137" height="80"/> <span>golf</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="running"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/icon_perfWoman_running.png" width="137" height="80"/> <span>running</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="court"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/icon_perfWoman_field.png" width="137" height="80"/> <span>court &amp; field</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="cycling"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/icon_perfWoman_cycling.png" width="137" height="80"/> <span>cycling</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="driving"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/icon_perfWoman_driving.png" width="137" height="80"/> <span>driving</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="active"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/icon_perfWoman_active.png" width="137" height="80"/> <span>active</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="beach"> <img src="/wcsstore/SGH/experiences/ISG/img/performance/female/icon_perfWoman_beach.png" width="137" height="80"/> <span>beach &amp; water</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!--END FEMALE PERFORMANCE--> </div> <!--END PERFORMANCE--> <!--FASHION--> <div class="isg-fashion isg-branch"> <!--FASHION MALE--> <div class="isg-male isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 04</span> <h2>Own Your</h2> <h3>Look</h3> </div> <div class="isg-beta"> <p>What speaks your language?</p> </div> </div> </li> <li class="isg-street"> <div class="isg-aside"> <h2>Street </h2> <h3>Style</h3> <p>Street style that's anything but pedestrian.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_street.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_street.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> <li class="isg-classic"> <div class="isg-aside"> <h2>Classic </h2> <h3>Casual</h3> <p>Casual classics for old-school cool.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_classic.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_classic.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> <li class="isg-rocker"> <div class="isg-aside"> <h2>Rocker</h2> <p>Rock 'n' roll, fashion's full-throttle hit.<p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_rocker.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_rocker.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> <li class="isg-gq"> <div class="isg-aside"> <h2>GQ </h2> <h3>style</h3> <p>Considered chic for a sleek silhouette.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_gqstyle.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_gqstyle.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> <li class="isg-hipster"> <div class="isg-aside"> <h2>Hipster</h2> <p>Unlike the rest, unique in every (fashion) sense</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_hipster.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/male/bg_fashMan_hipster.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> </ul> <ul class="isg-choices" data-choice-key="fashionPerformanceChoice"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="street"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/icon_fashMan_street.png" width="137" height="80"/> <span>Street Style</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="classic"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/icon_fashMan_classic.png" width="137" height="80"/> <span>Classic Casual</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="rocker"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/icon_fashMan_rocker.png" width="137" height="80"/> <span>Rocker</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="gq"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/icon_fashMan_gqstyle.png" width="137" height="80"/> <span>GQ Style</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="hipster"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/male/icon_fashMan_hipster.png" width="137" height="80"/> <span>Hipster</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!--END FASHION MALE--> <!--FASHION FEMALE--> <div class="isg-female isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 04</span> <h2>Own Your</h2> <h3>Look</h3> </div> <div class="isg-beta"> <p>What speaks your language?</p> </div> </div> </li> <li class="isg-chic"> <div class="isg-aside"> <h2>Classic</h2> <h3>Chic</h3> <p>The timeless appeal of iconic must-haves.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_classic.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_classic.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> <li class="isg-glitz"> <div class="isg-aside"> <h2>Glitz</h2> <h3>&amp; Glam</h3> <p>Sparkling fashion to outshine in.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_glitzglam.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_glitzglam.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> <li class="isg-avant"> <div class="isg-aside"> <h2>Avant</h2> <h3>Garde</h3> <p>Fashion-forward flair that steals the spotlight.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_garde.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_garde.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> <li class="isg-boyish"> <div class="isg-aside"> <h2>Boyish</h2> <h3>Style</h3> <p>Gamine-gorgeous looks borrowed from the boys.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_boyish.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_boyish.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> <li class="isg-retro"> <div class="isg-aside"> <h2>Retro</h2> <h3>Glam</h3> <p>A modern riff on Retro cool.</p> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_retro.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/fashion/female/bg_fashWoman_retro.jpg" /> <a href="#js" class="isg-next">Select this look</a> </li> </ul> <ul class="isg-choices" data-choice-key="fashionPerformanceChoice"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="classic"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/icon_fashWoman_classic.png" width="137" height="80"/> <span>Classic Chic</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="glitz"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/icon_fashWoman_glitzglam.png" width="137" height="80"/> <span>Glitz and Glam</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="avant"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/icon_fashWoman_garde.png" width="137" height="80"/> <span>Avant Garde</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="boyish"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/icon_fashWoman_boyish.png" width="137" height="80"/> <span>Boyish Style</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="retro"> <img src="/wcsstore/SGH/experiences/ISG/img/fashion/female/icon_fashWoman_retro.png" width="137" height="80"/> <span>Retro Glam</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!--END FASHION FEMALE--> </div> <!--END FASHION--> </div> <!--END FASHION PERFORMANCE--> <!----------------------------------------------------------> <!-- 5. FACE SHAPE --> <div class="isg-page isg-face"> <!-- Provisional Placeholder for skip step --> <!--<div class="isg-nav"> Skip Step </div> --> <!-- FACES A--> <div class="isg-subpage isg-active isg-face-a"> <!-- MALE --> <div class="isg-male isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 05</span> <h2>Your Facial</h2> <h3>Features</h3> </div> <div class="isg-beta"> <p>What describes the width of your face?</p> </div> </div> </li> <li class="isg-narrow"> <div class="isg-aside"> <h2>Narrow</h2> <h3>Width</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_bg1.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_bg1.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-average"> <div class="isg-aside"> <h2>Average</h2> <h3>Width</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_bg2.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_bg2.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-wide"> <div class="isg-aside"> <h2>Wide</h2> <h3>Width</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_bg3.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_bg3.jpg" /> <a href="#js" class="isg-next">Select</a> </li> </ul> <ul class="isg-choices" data-choice-key="faceWidth"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class=""> <a href="#tabs-1" data-choice-value="narrow"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_thumb1.png" width="137" height="80"/> <span>Narrow</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="average"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_thumb2.png" width="137" height="80"/> <span>Average</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="wide"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06a_select_thumb3.png" width="137" height="80"/> <span>Wide</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!-- END MALE --> <!-- FEMALE --> <div class="isg-female isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 05</span> <h2>Your Facial</h2> <h3>Features</h3> </div> <div class="isg-beta"> <p>What describes the width of your face?</p> </div> </div> </li> <li class="isg-narrow"> <div class="isg-aside"> <h2>Narrow</h2> <h3>Width</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_bg1.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_bg1.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-average"> <div class="isg-aside"> <h2>Average</h2> <h3>Width</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_bg2.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_bg2.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-wide"> <div class="isg-aside"> <h2>Wide</h2> <h3>Width</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_bg3.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_bg3.jpg" /> <a href="#js" class="isg-next">Select</a> </li> </ul> <ul class="isg-choices" data-choice-key="faceWidth"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="narrow"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_thumb1.jpg" width="137" height="80"/> <span>Narrow</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="average"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_thumb2.jpg" width="137" height="80"/> <span>Average</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="wide"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06a_select_thumb3.jpg" width="137" height="80"/> <span>Wide</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!-- END FEMALE --> </div> <!-- END FACES A--> <!-- FACES B--> <div class="isg-subpage isg-face-b"> <!-- MALE --> <div class="isg-male isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 05</span> <h2>Your Facial</h2> <h3>Features</h3> </div> <div class="isg-beta"> <p>What about your jawline?</p> </div> </div> </li> <li class="isg-pointy"> <div class="isg-aside"> <h2>Pointy</h2> <h3>Jawline</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_bg1.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_bg1.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-square"> <div class="isg-aside"> <h2>Square</h2> <h3>Jawline</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_bg2.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_bg2.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-round"> <div class="isg-aside"> <h2>Round</h2> <h3>Jawline</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_bg3.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_bg3.jpg" /> <a href="#js" class="isg-next">Select</a> </li> </ul> <ul class="isg-choices" data-choice-key="jawline"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="pointy"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_thumb1.png" width="137" height="80"/> <span>Pointy Jawline</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="square"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_thumb2.png" width="137" height="80"/> <span>Square Jawline</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="round"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06b_select_thumb3.png" width="137" height="80"/> <span>Round Jawline</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!-- END MALE --> <!-- FEMALE --> <div class="isg-female isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 05</span> <h2>Your Facial</h2> <h3>Features</h3> </div> <div class="isg-beta"> <p>What about your jawline?</p> </div> </div> </li> <li class="isg-pointy"> <div class="isg-aside"> <h2>Pointy</h2> <h3>Jawline</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_bg1.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_bg1.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-square"> <div class="isg-aside"> <h2>Square</h2> <h3>Jawline</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_bg2.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_bg2.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-round"> <div class="isg-aside"> <h2>Round</h2> <h3>Jawline</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_bg3.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_bg3.jpg" /> <a href="#js" class="isg-next">Select</a> </li> </ul> <ul class="isg-choices" data-choice-key="jawline"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="pointy"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_thumb1.jpg" width="137" height="80"/> <span>Pointy Jawline</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="square"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_thumb2.jpg" width="137" height="80"/> <span>Square Jawline</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="round"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06b_select_thumb3.jpg" width="137" height="80"/> <span>Round Jawline</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!-- END FEMALE --> </div> <!-- END FACES B--> <!-- FACES C--> <div class="isg-subpage isg-face-c"> <!-- MALE --> <div class="isg-male isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 05</span> <h2>Your Facial</h2> <h3>Features</h3> </div> <div class="isg-beta"> <p>Finally, what's your prominent feature?</p> </div> </div> </li> <li class="isg-jawline"> <div class="isg-aside"> <h2>Prominent</h2> <h3>Jawline</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_bg1.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_bg1.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-cheekbone"> <div class="isg-aside"> <h2>Prominent</h2> <h3>Cheekbone</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_bg2.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_bg2.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-forehead"> <div class="isg-aside"> <h2>Prominent</h2> <h3>Forehead</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_bg3.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_bg3.jpg" /> <a href="#js" class="isg-next">Select</a> </li> </ul> <ul class="isg-choices" data-choice-key="prominence"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="jawline"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_thumb1.png" width="137" height="80"/> <span>Prominent Jawline</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="cheekbone"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_thumb2.png" width="137" height="80"/> <span>Prominent Cheekbone</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="forehead"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/male/step06c_select_thumb3.png" width="137" height="80"/> <span>Prominent Forehead</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!-- END MALE --> <!-- FEMALE --> <div class="isg-female isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 05</span> <h2>Your Facial</h2> <h3>Features</h3> </div> <div class="isg-beta"> <p>Finally, what's your prominent feature?</p> </div> </div> </li> <li class="isg-jawline"> <div class="isg-aside"> <h2>Prominent</h2> <h3>Jawline</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_bg1.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_bg1.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-cheekbone"> <div class="isg-aside"> <h2>Prominent</h2> <h3>Cheekbone</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_bg2.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_bg2.jpg" /> <a href="#js" class="isg-next">Select</a> </li> <li class="isg-forehead"> <div class="isg-aside"> <h2>Prominent</h2> <h3>Forehead</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_bg3.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_bg3.jpg" /> <a href="#js" class="isg-next">Select</a> </li> </ul> <ul class="isg-choices" data-choice-key="prominence"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class=""> <a href="#tabs-1" data-choice-value="jawline"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_thumb1.jpg" width="137" height="80"/> <span>Prominent Jawline</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="cheekbone"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_thumb2.jpg" width="137" height="80"/> <span>Prominent Cheekbone</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="forehead"> <img src="/wcsstore/SGH/experiences/ISG/img/faces/female/step06c_select_thumb3.jpg" width="137" height="80"/> <span>Prominent Forehead</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!-- END FEMALE --> </div> <!-- END FACES C--> </div> <!-- FACE SHAPE --> <!----------------------------------------------------------> <!-- 6. HAIR --> <div class="isg-page isg-hair"> <!--HAIR MALE--> <div class="isg-male isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 06</span> <h2>Pick Your</h2> <h3>Shade</h3> </div> <div class="isg-beta"> <p>The shade that rocks your locks</p> </div> </div> </li> <li class="isg-red"> <div class="isg-aside"> <h2>Red</h2> <h3>Hair</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_red.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_red.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-silver"> <div class="isg-aside"> <h2>Silver</h2> <h3>Hair</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_silver.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_silver.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-brown"> <div class="isg-aside"> <h2>Brown</h2> <h3>Hair</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_brown.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_brown.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-black"> <div class="isg-aside"> <h2>Black</h2> <h3>Hair</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_black.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_black.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-blonde"> <div class="isg-aside"> <h2>Blonde</h2> <h3>Hair</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_blonde.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_blonde.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-chestnut"> <div class="isg-aside"> <h2>Chestnut</h2> <h3>Hair</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_chestnut.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_chestnut.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-copper"> <div class="isg-aside"> <h2>Copper</h2> <h3>Hair</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_copper.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_copper.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-blue"> <div class="isg-aside"> <h2>Blue</h2> <h3>Hair</h3> </div> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_blue.jpg" /> --> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/male/bg_hairMan_blue.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> </ul> <ul class="isg-choices" data-choice-key="hair"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="red"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/icon_hairMan_red.png"/> <span>Red</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="silver"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/icon_hairMan_silver.png"/> <span>Silver</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="brown"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/icon_hairMan_brown.png"/> <span>Brown</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="black"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/icon_hairMan_black.png"/> <span>Black</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="blonde"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/icon_hairMan_blonde.png"/> <span>Blonde</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="chestnut"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/icon_hairMan_chestnut.png"/> <span>Chestnut</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="copper"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/icon_hairMan_copper.png"/> <span>Copper</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="blue"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/male/icon_hairMan_blue.png"/> <span>Blue</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!--END HAIR MALE--> <!--HAIR FEMALE--> <div class="isg-female isg-branch"> <ul class="isg-chosen-view"> <li class="isg-empty isg-active"> <div class="isg-circles"> <div class="isg-alpha"> <span>Step 06</span> <h2>Pick Your</h2> <h3>Shade</h3> </div> <div class="isg-beta"> <p>The shade that rocks your locks</p> </div> </div> </li> <li class="isg-red"> <div class="isg-aside"> <h2>Red</h2> <h3>Hair</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_red.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_red.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-pink"> <div class="isg-aside"> <h2>Pink</h2> <h3>Hair</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_pink.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_pink.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-brown"> <div class="isg-aside"> <h2>Brown</h2> <h3>Hair</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_brown.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_brown.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-black"> <div class="isg-aside"> <h2>Black</h2> <h3>Hair</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_black.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_black.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-blonde"> <div class="isg-aside"> <h2>Blonde</h2> <h3>Hair</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_blonde.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_blonde.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-chestnut"> <div class="isg-aside"> <h2>Chestnut</h2> <h3>Hair</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_chestnut.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_chestnut.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-copper"> <div class="isg-aside"> <h2>Copper</h2> <h3>Hair</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_copper.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_copper.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> <li class="isg-blue"> <div class="isg-aside"> <h2>Blue</h2> <h3>Hair</h3> </div> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_blue.jpg" /> <input class="isg-image-replace" type="hidden" data-image-url="/wcsstore/SGH/experiences/ISG/img/hair/female/bg_hairWoman_blue.jpg" /> <a href="#js" class="isg-next">Select this hair</a> </li> </ul> <ul class="isg-choices" data-choice-key="hair"> <li class="isg-empty"> <a href="#tabs-0" data-choice-value="none"> <span>emptiness</span> </a> </li> <li class="isg-selected"> <a href="#tabs-1" data-choice-value="red"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/icon_hairWoman_red.png"/> <span>Red</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="silver"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/icon_hairWoman_pink.png"/> <span>Pink</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="brown"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/icon_hairWoman_brown.png"/> <span>Brown</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="black"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/icon_hairWoman_black.png"/> <span>Black</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="blonde"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/icon_hairWoman_blonde.png"/> <span>Blonde</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="chestnut"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/icon_hairWoman_chestnut.png"/> <span>Chestnut</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="copper"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/icon_hairWoman_copper.png"/> <span>Copper</span> </a> </li> <li> <a href="#tabs-1" data-choice-value="blue"> <img src="/wcsstore/SGH/experiences/ISG/img/hair/female/icon_hairWoman_blue.png"/> <span>Blue</span> </a> </li> </ul> <div class="isg-drag-slider"> <span class="isg-carat"> <img src="/wcsstore/SGH/experiences/ISG/img/common/carat.png" /> </span> </div> </div> <!--END HAIR FEMALE--> </div> <!--END HAIR--> <!----------------------------------------------------------> </div><!--.isg-stage--> <div class="isg-results"> <!--------------------------------------------------------------------> <div class="isg-loading"> <div class="isg-circles"> <div class="isg-alpha"> <h2>Ready</h2> <h3>Set</h3> <h4>Style</h4> </div> <div class="isg-beta"> <p>Prepare to meet your match of the moment</p> <img src="/wcsstore/SGH/experiences/ISG/img/results/ajax-loader.gif" /> </div> </div> </div> <!--------------------------------------------------------------------> <div class="isg-results-header"> <div class="isg-left"> <h1>Today, you're the</h1> <h2>New Garde</h2> <p>Your only rule is never too ordinary. Here are the styles that break them all. Gorgeously.</p> <!--EDIT: --> <!--TODO: Change the href to link to the base of the experience--> <a href="/Experience?storeId=10152&catalogId=10101&langId=-1&experienceName=ISG" class="isg-start-over"> &laquo; Start Over <!--remove this image--> <!-- <img src="/wcsstore/SGH/experiences/ISG/img/results/btn_strtover.jpg" width="" height=""/> --> </a> <!--END EDIT--> </div> <div class="isg-montage"> <img class="isg-location-image" src="" /> <img class="isg-fashion-performance-image" src="" /> </div> </div> <!--------------------------------------------------------------------> <ul class="isg-products"> <li class="first"> <img src="/wcsstore/SGH/experiences/ISG/img/results/sg1_results.jpg" width="260px" height="130px"> <span class="isg-name">ralph</span> <span class="isg-id">ra4004</span> <span class="isg-price">219.00</span> </li> <li class="middle"> <img src="/wcsstore/SGH/experiences/ISG/img/results/sg2_results.jpg" width="260px" height="130px"/> <span class="isg-name">ralph</span> <span class="isg-id">ra4004</span> <span class="isg-price">219.00</span> </li> <li class="last"> <img src="/wcsstore/SGH/experiences/ISG/img/results/sg3_results.jpg" width="260px" height="130px"/> <span class="isg-name">ralph</span> <span class="isg-id">ra4004</span> <span class="isg-price">219.00</span> </li> <li class="first"> <img src="/wcsstore/SGH/experiences/ISG/img/results/sg4_results.jpg" width="260px" height="130px"/> <span class="isg-name">ralph</span> <span class="isg-id">ra4004</span> <span class="isg-price">219.00</span> </li> <li class="middle"> <img src="/wcsstore/SGH/experiences/ISG/img/results/sg5_results.jpg" width="260px" height="130px"/> <span class="isg-name">ralph</span> <span class="isg-id">ra4004</span> <span class="isg-price">219.00</span> </li> <li class="last"> <img src="/wcsstore/SGH/experiences/ISG/img/results/sg6_results.jpg" width="260px" height="130px"/> <span class="isg-name">ralph</span> <span class="isg-id">ra4004</span> <span class="isg-price">219.00</span> </li> </ul> <div class="isg-bottom"> <div class="isg-social"> <h3>friends keep it real get opinions</h3> <ul> <li class="isg-facebook"> <a href="#" onclick="window.open( &#39;https://www.facebook.com/sharer/sharer.php?u=&#39;+encodeURIComponent(location.href), &#39;fb-share-dialog&#39;, &#39;width=626,height=436&#39;); return false;"> <img src="/wcsstore/SGH/experiences/ISG/img/results/btn_facebook.gif"/> </a> </li> <li class="isg-twitter"> <!--TODO: Update the value of data-text to reflect the desired copy for sharing on twitter --> <a href="https://twitter.com/share" class="twitter-share-button" data-url="" data-text="I just found the perfect pair of sunglasses. Frame your style too with Sunglass Hut&#39;s Interactive Style Guide." data-count="none">Tweet</a> <script></script> </li> <li class="isg-pinterest"> <a href="//pinterest.com/pin/create/button/" data-pin-do="buttonBookmark"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png"/></a> </li> </ul> </div> <div class="isg-email" style="display:none;"> <h3>find these looks later</h3> <div class="btn-email"><img src="/wcsstore/SGH/experiences/ISG/img/results/btn_email.jpg"></div> </div> <div class="isg-flavor"> <img src=""> </div> </div> </div> </div><!--.world-view--> </div><!--.isg-wrap--> </div> <!-- TODO: --> <!-- BEGINE JS DELIVERY--> <script src="/wcsstore/SGH/experiences/ISG/js/vendor/underscore-min.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/vendor/backbone-min.js"></script> <script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/ISG.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/isg-drag-slider.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/app_data/products.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/backbone/models/user.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/backbone/router.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/backbone/views/worldview.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/backbone/views/navview.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/backbone/views/breadcrumbview.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/backbone/views/questionview.js"></script> <script src="/wcsstore/SGH/experiences/ISG/js/backbone/views/stageview.js"></script> <!-- Get additional params in url --> <script src="/wcsstore/SGH/experiences/ISG/js/backbone/backbone.queryparams.js"></script> <script> $(document).ready(function(){ ISG.models.userModel = new ISG.User(); ISG.views.worldview = new ISG.WorldView({ model: ISG.models.userModel }); ISG.views.navview = new ISG.NavView({ model: ISG.models.userModel }); ISG.views.breadcrumbview = new ISG.BreadcrumbView({ model: ISG.models.userModel }); ISG.views.stageView = new ISG.StageView({ model: ISG.models.userModel }); ISG.views.questionview = new ISG.QuestionView({ model: ISG.models.userModel }); ISG.router = new ISG.Router(); Backbone.history.start(); }); </script> <!-- END JS DELIVERY -->

Browser Compatibility Warning

You are using an outdated browser. Unfortunately, the Sunglass Hut website may not function properly on this browser.

For an exceptional site experience, please update your browser to take full advantage of key site features.

Thank you.

ERROR
ERROR HERE
OK
Thank you
ERROR HERE
OK
close

!You can only compare four frames.
Please remove a frame before adding another.

Product added to cart. View Cart

Product added to Wish List. View Wish List

Use your webcam

Our Virtual Mirror lets you try on different styles without going to the store. Save of photo of your favorites and even share with friends.

See them on a model

No webcam? No problem. Choose a video of a male or female model and they'll try on the frames you choose.

Use of this tool is subject to our terms of use.

Return to mirror

Choose a model

It's like directing your very own fashion show. Our models will try on whatever styles you choose. All you need to do is pick the frames, then sit back and enjoy the view.

You're
wearing

AN4168 BIG DEAL $109.95
Ray ban RB2140 Wayfarer $149.95
ADD TO CART

Alert the paparazzi

Need a second opinion?

Did you blink?

Return to mirror >>
Pick another frame to compare
Adjust size

Like what you see?

Share with friends or save to your account

Snap a photo >>

Can't decide?

Try up to 4 frames

side-by-side

Compare >>
For illustration purposes only. Actual results may vary.
Loading
Loading