JavaScript functionality is disabled
In order to experience all the content on sunglasshut.com, please enable JavaScript. We promise that sunglasshut.com is a safe online destination where you can shop fearlessly.
<!-- 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 & 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 & 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 & 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 & 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 & 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 & 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>& 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"> « 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( 'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'fb-share-dialog', 'width=626,height=436'); 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'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 -->
Six Quick Steps to Find your Perfect Style Step 01
Frame Your Style Tell us if you are a guy or girl
urban landscape The city's energy with its hip, new finds fires up your urban edge.
Select this scene historical city Stunning historical cities are now and forever your favorite sites.
Select this scene city beach Beach by day, city by night - your ultimate, non-stop hotspot.
Select this scene secluded beach A secluded stretch of sun, sea, and sand is your paradise found.
Select this scene city Towering skyscrapers, shopping galore - your go-to glamour destination.
Select this scene small town The laidback ease of a quiet town is your favorite chillout zone.
Select this scene Step 03
Looking goodor performing your best Tell us what you are about
Step 04
Own Your Look What speaks your language?
Street Style Street style that's anything but pedestrian.
Select this look Classic Casual Casual classics for old-school cool.
Select this look Rocker Rock 'n' roll, fashion's full-throttle hit.
Select this look GQ style Considered chic for a sleek silhouette.
Select this look Hipster Unlike the rest, unique in every (fashion) sense
Select this look Step 05
Your Facial Features What describes the width of your face?
Narrow Width Select
Average Width Select
Wide Width Select Step 05
Your Facial Features What describes the width of your face?
Narrow Width Select
Average Width Select
Wide Width Select Step 05
Your Facial Features
Pointy Jawline Select
Square Jawline Select
Round Jawline Select Step 05
Your Facial Features
Pointy Jawline Select
Square Jawline Select
Round Jawline Select Step 05
Your Facial Features Finally, what's your prominent feature?
Prominent Jawline Select
Prominent Cheekbone Select
Prominent Forehead Select Step 05
Your Facial Features Finally, what's your prominent feature?
Prominent Jawline Select
Prominent Cheekbone Select
Prominent Forehead Select