*Requires Creative Background Asset
4:1 or 3:1 Aspect Ratio
Capabilities:
Color background or Full image background* | Text overlay | Custom font sizing | Left/Center/Right text alignment | Design System Button or Text CTA | 2 side by side CTAs
*Color and full image backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section"
data-mm-type="Hero"
data-mm-custom-tracking="08/01 Homepage"
data-default-paused="true"
>
<div class="container">
<div class="row">
<div class="col px-0 px-xl-3">
<div class="mm-css-bg py-6 d-flex align-items-center justify-content-center"
data-bgsrc="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrc2x="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrcmd="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrcsm="https://via.placeholder.com/1080x1080/F5F5F5/FFFFFF?text=%20"
>
<div class="p-7 text-center">
<h2 class="line-height-0p9 text-uppercase mb-1">Summer Sale</h2>
<h3 class="display-1 line-height-0p9 mb-6">50% Off</h3>
<button class="btn btn-primary w-100">Shop Tops</button>
</div>
</div>
</div>
</div>
</div>
</div>*Requires Creative Background Asset
4:1 or 3:1 Aspect Ratio
Capabilities:
Color background or Full image background* | Text overlay | Custom font sizing | Left/Center/Right text alignment | Design System Button or Text CTA | 2 side by side CTAs
*Color and full image backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section"
data-mm-type="Hero Alt"
data-mm-custom-tracking="08/01 Homepage"
data-default-paused="true"
>
<div class="container">
<div class="row">
<div class="col px-0 px-xl-3">
<div class="mm-css-bg py-6 d-md-flex align-items-center justify-content-end"
data-bgsrc="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrc2x="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrcmd="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
>
<div class="d-md-none mb-3">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/760x426/F5F5F5/FFFFFF?text=%20" alt="">
</a>
</div>
<div class="p-7 text-center">
<h2 class="line-height-0p9 text-uppercase mb-1">Summer Sale</h2>
<h3 class="display-1 line-height-0p9 mb-6">50% Off</h3>
<button class="btn btn-primary w-100">Shop Tops</button>
</div>
</div>
</div>
</div>
</div>
</div>*Requires Creative Background Asset
4:1 or 3:1 Aspect Ratio
Capabilities:
Color background or Full image background* | Text overlay | Custom font sizing | Left/Center/Right text alignment | Design System Button or Text CTA | 2 side by side CTAs
*Color and full image backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section mm-carousel mm-layout-carousel-hero mm-section-default-hidden"
data-mm-type="Hero Carousel"
data-mm-custom-tracking="08/01 Homepage"
data-default-paused="false"
>
<div class="container">
<div class="row">
<div class="col px-0 px-xl-3">
<div class="mm-carousel-slides">
<div class="mm-css-bg py-6 d-flex align-items-center justify-content-center"
data-bgsrc="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrc2x="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrcmd="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrcsm="https://via.placeholder.com/1080x1080/F5F5F5/FFFFFF?text=%20"
>
<div class="p-7 text-center">
<h2 class="line-height-0p9 text-uppercase mb-1">Summer Sale</h2>
<h3 class="display-1 line-height-0p9 mb-6">50% Off</h3>
<button class="btn btn-primary w-100">Shop Tops</button>
</div>
</div>
<div class="mm-css-bg py-6 d-flex align-items-center justify-content-center justify-content-md-end"
data-bgsrc="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrc2x="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrcmd="https://via.placeholder.com/1080x1080/F5F5F5/FFFFFF?text=%20"
data-bgsrcsm="https://via.placeholder.com/1080x1080/F5F5F5/FFFFFF?text=%20"
>
<div class="p-7 text-center">
<h2 class="line-height-0p9 text-uppercase mb-1">Summer Sale</h2>
<h3 class="display-1 line-height-0p9 mb-6">50% Off</h3>
<button class="btn btn-primary w-100">Shop Tops</button>
</div>
</div>
<div class="mm-css-bg py-6 d-flex align-items-center justify-content-center"
data-bgsrc="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrc2x="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrcmd="https://via.placeholder.com/1080x1080/F5F5F5/FFFFFF?text=%20"
data-bgsrcsm="https://via.placeholder.com/1080x1080/F5F5F5/FFFFFF?text=%20"
>
<div class="p-7 text-center">
<h2 class="line-height-0p9 text-uppercase mb-1">Summer Sale</h2>
<h3 class="display-1 line-height-0p9 mb-6">50% Off</h3>
<button class="btn btn-primary mx-1 d-block w-100 mb-3 d-md-inline-block w-md-auto mb-md-0">Shop Tops</button>
<button class="btn btn-outline-primary mx-1 d-block w-100 d-md-inline-block w-md-auto">Shop Pants</button>
</div>
</div>
</div>
<div class="slick-dots-container"></div>
</div>
</div>
</div>
</div>*Requires Creative Background Asset
4:1 or 3:1 Aspect Ratio
Capabilities:
Color background or Full image background* | Text overlay | Custom font sizing | Left/Center/Right text alignment | Design System Button or Text CTA | 2 side by side CTAs
5 slide max *Color and full image backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section mm-carousel mm-layout-carousel-hero mm-carousel-alt mm-section-default-hidden"
data-mm-type="Hero Carousel Alt"
data-mm-custom-tracking="08/01 Homepage"
data-default-paused="false"
>
<div class="container">
<div class="row">
<div class="col px-0 px-xl-3">
<div class="mm-carousel-slides">
<div class="mm-css-bg py-6 d-md-flex align-items-center justify-content-center"
data-bgsrc="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrc2x="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrcmd="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
>
<div class="d-md-none mb-3">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/760x426/F5F5F5/FFFFFF?text=%20" alt="">
</a>
</div>
<div class="p-7 text-center">
<h2 class="line-height-0p9 text-uppercase mb-1">Summer Sale</h2>
<h3 class="display-1 line-height-0p9 mb-6">50% Off</h3>
<button class="btn btn-primary w-100">Shop Tops</button>
</div>
</div>
<div class="mm-css-bg py-6 d-md-flex align-items-center justify-content-center justify-content-md-end"
data-bgsrc="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrc2x="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrcmd="https://via.placeholder.com/1080x1080/F5F5F5/FFFFFF?text=%20"
>
<div class="d-md-none mb-3">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/760x426/F5F5F5/FFFFFF?text=%20" alt="">
</a>
</div>
<div class="p-7 text-center">
<h2 class="line-height-0p9 text-uppercase mb-1">Summer Sale</h2>
<h3 class="display-1 line-height-0p9 mb-6">50% Off</h3>
<button class="btn btn-primary w-100">Shop Tops</button>
</div>
</div>
<div class="mm-css-bg py-6 d-md-flex align-items-center justify-content-end"
data-bgsrc="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrc2x="https://via.placeholder.com/2048x512/F5F5F5/FFFFFF?text=%20"
data-bgsrcmd="https://via.placeholder.com/1080x1080/F5F5F5/FFFFFF?text=%20"
>
<div class="d-md-none mb-3">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/760x426/F5F5F5/FFFFFF?text=%20" alt="">
</a>
</div>
<div class="p-7 text-center">
<h2 class="line-height-0p9 text-uppercase mb-1">Summer Sale</h2>
<h3 class="display-1 line-height-0p9 mb-6">50% Off</h3>
<button class="btn btn-primary mx-1 d-block w-100 mb-3 d-md-inline-block w-md-auto mb-md-0">Shop Tops</button>
<button class="btn btn-outline-primary mx-1 d-block w-100 d-md-inline-block w-md-auto">Shop Pants</button>
</div>
</div>
</div>
<div class="slick-dots-container"></div>
</div>
</div>
</div>
</div>*Could Use Creative Background Asset
Full Width 13:1
Capabilities:
Color background or full image background | Text overlay | Custom font sizing | Left/Center/Right text alignment | Design System Button or Text CTA | 2 side by side CTAs
*Color and full image backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section mm-layout-banner py-6 py-md-4"
data-mm-type="Hero Banner (without creative)"
data-mm-custom-tracking="Exclusive Savings"
style="background-color: #F5F5F5;"
>
<div class="container">
<div class="row">
<div class="col-12 col-md-5 d-md-flex align-items-md-center justify-content-md-end">
<div class="mm-banner-text text-center text-md-right">
<h2 class="h1 text-uppercase">Exclusive Savings</h2>
</div>
</div>
<div class="col-12 col-md-5 mb-5 mb-md-0 d-md-flex align-items-md-center">
<div class="mm-banner-text text-center text-md-left">
<p class="line-height-1p2">Sign up for emails & get the best deals delivered to your inbox!</p>
</div>
</div>
<div class="col-12 col-md-2">
<button class="btn btn-outline-primary btn-sm btn-block" href="#" aria-label="Sign up for emails to receive exclusive savings.">Sign Up</button>
</div>
</div>
</div>
</div>*Requires Creative Background Asset
Full Width 13:1, Image Only 16:9 or 1:1 Aspect Ratio
Capabilities:
Color background or full image background | Text overlay | Custom font sizing | Left/Center/Right text alignment | Design System Button or Text CTA | 2 side by side CTAs
*Color and full image backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section mm-layout-banner"
data-mm-type="Hero Banner (with creative)"
data-mm-custom-tracking="Exclusive Savings"
style="background-color: #F5F5F5;"
>
<div class="container">
<div class="row">
<div class="col-12 col-md-3 d-md-flex align-items-md-center justify-content-md-end p-0">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/760x426/e0e0e0/FFFFFF?text=%20" alt="">
</a>
</div>
<div class="col-12 col-md-7 d-md-flex align-items-md-center pt-6 pb-3 pt-md-2 pb-md-2">
<div class="mm-banner-text text-center text-md-left">
<h2 class="h1 text-uppercase">Exclusive Savings</h2>
<p class="line-height-1p2">Sign up for emails & get the best deals delivered to your inbox!</p>
</div>
</div>
<div class="col-12 col-md-2 d-md-flex align-items-md-center pb-6 pb-md-2 pt-md-2">
<button class="btn btn-outline-primary btn-sm btn-block" href="#" aria-label="Sign up for emails to receive exclusive savings.">Sign Up</button>
</div>
</div>
</div>
</div>*Requires 3:1 Individual Logo Creative Assets
We carry these brands with more on the way!
Capabilities:
Individual logo assets | Standardized heading and body copy font sizing | Sub copy | 4 - 6 columns | 1 or 2 rows
<div
class="mm-section mm-layout-brands"
data-mm-type="Hero Brands"
data-mm-custom-tracking="08/01 Homepage"
>
<div class="container">
<div class="row">
<div class="col text-center">
<h2 class="h4">Your Favorite Brands</h2>
<p class="mb-0">We carry these brands with more on the way!</p>
</div>
</div>
<div class="row mt-4">
<div class="col-6 col-md-4 col-lg-2 mb-4 text-center">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/300x100/F5F5F5/FFFFFF?text=%20" alt="">
</a>
</div>
<div class="col-6 col-md-4 col-lg-2 mb-4 text-center">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/300x100/F5F5F5/FFFFFF?text=%20" alt="">
</a>
</div>
<div class="col-6 col-md-4 col-lg-2 mb-4 text-center">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/300x100/F5F5F5/FFFFFF?text=%20" alt="">
</a>
</div>
<div class="col-6 col-md-4 col-lg-2 mb-4 text-center">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/300x100/F5F5F5/FFFFFF?text=%20" alt="">
</a>
</div>
<div class="col-6 col-md-4 col-lg-2 mb-4 text-center">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/300x100/F5F5F5/FFFFFF?text=%20" alt="">
</a>
</div>
<div class="col-6 col-md-4 col-lg-2 mb-4 text-center">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/300x100/F5F5F5/FFFFFF?text=%20" alt="">
</a>
</div>
<div class="col-6 col-md-4 col-lg-2 mb-4 text-center">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/300x100/F5F5F5/FFFFFF?text=%20" alt="">
</a>
</div>
<div class="col-6 col-md-4 col-lg-2 mb-4 text-center">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/300x100/F5F5F5/FFFFFF?text=%20" alt="">
</a>
</div>
<div class="col-6 col-md-4 col-lg-2 mb-4 text-center">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/300x100/F5F5F5/FFFFFF?text=%20" alt="">
</a>
</div>
<div class="col-6 col-md-4 col-lg-2 mb-4 text-center">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/300x100/F5F5F5/FFFFFF?text=%20" alt="">
</a>
</div>
<div class="col-6 col-md-4 col-lg-2 mb-4 text-center">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/300x100/F5F5F5/FFFFFF?text=%20" alt="">
</a>
</div>
<div class="col-6 col-md-4 col-lg-2 mb-4 text-center">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/300x100/F5F5F5/FFFFFF?text=%20" alt="">
</a>
</div>
</div>
</div>
</div>*Can use Primary or Secondary buttons
Fashion designed for every body, so you can look and feel your best.
Capabilities:
Design System Button or Text CTA | 3 side by side CTAs | Can have 3 rows max | Can have a headline or just be rows of buttons
*Color and full image backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section mm-layout-brands"
data-mm-type="Button Banner (3 across)"
data-mm-custom-tracking="08/01 Homepage"
>
<div class="container">
<div class="row">
<div class="col text-center">
<h2 class="h4">Woman's Plus Size</h2>
<p class="mb-0">Fashion designed for every body, so you can look and feel your best.</p>
</div>
</div>
<div class="row mt-4">
<div class="col-12 col-md-6 col-lg-4 mb-4 text-center">
<a href="#" class="btn btn-primary btn-sm btn-block" aria-label="">
Shop Sizes 10-18
</a>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-4 text-center">
<a href="#" class="btn btn-primary btn-sm btn-block" aria-label="">
Shop Sizes 20-28
</a>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-4 text-center">
<a href="#" class="btn btn-primary btn-sm btn-block" aria-label="">
Shop Sizes 30-44
</a>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-4 text-center">
<a href="#" class="btn btn-primary btn-sm btn-block" aria-label="">
Shop Sizes XS-S
</a>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-4 text-center">
<a href="#" class="btn btn-primary btn-sm btn-block" aria-label="">
Shop Sizes M-L
</a>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-4 text-center">
<a href="#" class="btn btn-primary btn-sm btn-block" aria-label="">
Shop Sizes Xl-XXXL
</a>
</div>
</div>
</div>
</div>*Can use Primary or Secondary buttons
Capabilities:
Design System Button or Text CTA | 4 side by side CTAs | Can have 3 rows max | Can have a headline or just be rows of buttons
*Color and full image backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section mm-layout-brands"
data-mm-type="Button Banner (4 across)"
data-mm-custom-tracking="08/01 Homepage"
>
<div class="container">
<div class="row">
<div class="col text-center">
<h2 class="h4">Woman's Plus Size</h2>
<p class="mb-0">Fashion designed for every body, so you can look and feel your best.</p>
</div>
</div>
<div class="row mt-4">
<div class="col-12 col-md-6 col-lg-3 mb-4 text-center">
<a href="#" class="btn btn-primary btn-sm btn-block" aria-label="">
Tunics
</a>
</div>
<div class="col-12 col-md-6 col-lg-3 mb-4 text-center">
<a href="#" class="btn btn-primary btn-sm btn-block" aria-label="">
Dresses
</a>
</div>
<div class="col-12 col-md-6 col-lg-3 mb-4 text-center">
<a href="#" class="btn btn-primary btn-sm btn-block" aria-label="">
Skirts
</a>
</div>
<div class="col-12 col-md-6 col-lg-3 mb-4 text-center">
<a href="#" class="btn btn-primary btn-sm btn-block" aria-label="">
Sweaters
</a>
</div>
<div class="col-12 col-md-6 col-lg-3 mb-4 text-center">
<a href="#" class="btn btn-primary btn-sm btn-block" aria-label="">
Sleepwear
</a>
</div>
<div class="col-12 col-md-6 col-lg-3 mb-4 text-center">
<a href="#" class="btn btn-primary btn-sm btn-block" aria-label="">
Shoes
</a>
</div>
<div class="col-12 col-md-6 col-lg-3 mb-4 text-center">
<a href="#" class="btn btn-primary btn-sm btn-block" aria-label="">
Lounge
</a>
</div>
<div class="col-12 col-md-6 col-lg-3 mb-4 text-center">
<a href="#" class="btn btn-primary btn-sm btn-block" aria-label="">
Lingerie
</a>
</div>
</div>
</div>
</div>Capabilities:
Populated by configurable user behavior interactions | Configurable product category | Configurable product info display | Slide 4 products at a time
<div
class="mm-section mm-section-default-hidden"
data-mm-type="Prod Reco Carousel (4 across)"
data-mm-custom-tracking="Best Sellers"
data-at-recommendation="Best Sellers HP"
data-at-headline="Best Sellers Going Fast"
data-at-layout="carousel-compact"
data-at-full-width="true"
data-at-brand-name="false"
data-at-ratings="true"
data-at-show-savings="dollar"
data-at-xl-slide-count="6"
data-at-lg-slide-count="4"
data-at-control-position="headline"
></div>Capabilities:
Populated by configurable user behavior interactions | Configurable product category | Configurable product info display | Slide 4 products at a time
Configurable link to category or collection page to view more
<div
class="mm-section mm-section-default-hidden"
data-mm-type="Prod Reco Carousel (4 across - Shop All)"
data-mm-custom-tracking="Best Sellers"
data-at-recommendation="Best Sellers HP"
data-at-headline="Best Sellers Going Fast"
data-at-layout="carousel-compact"
data-at-full-width="true"
data-at-brand-name="false"
data-at-ratings="true"
data-at-show-savings="dollar"
data-at-xl-slide-count="6"
data-at-lg-slide-count="4"
data-at-control-position="headline"
data-at-category-text-link-cta="See More"
data-at-category-text-link-url="/r/featured/new-arrivals/"
data-at-category-text-link-aria-label="Shop the New Arrivals Collection"
></div>Capabilities:
Populated by configurable user behavior interactions | Configurable product category | Configurable product info display | Slide 4 products at a time
Configurable button to category or collection page to view more | Background spans full width of browser window | Color background or full image background
*Color and full image backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section mm-section-default-hidden py-6 bg-gray-100 mb-6"
data-mm-type="Prod Reco Carousel (4 across - Section Shop All)"
data-mm-custom-tracking="Best Sellers"
>
<div
data-at-recommendation="Best Sellers HP"
data-at-headline="Best Sellers Going Fast"
data-at-layout="carousel-compact"
data-at-full-width="true"
data-at-brand-name="false"
data-at-ratings="true"
data-at-show-savings="dollar"
data-at-xl-slide-count="6"
data-at-lg-slide-count="4"
data-at-control-position="headline"
data-at-category-btn-link-cta="Shop All New Arrivals"
data-at-category-btn-link-url="/r/featured/new-arrivals/"
data-at-category-btn-link-aria-label="Shop All New Arrivals"
></div>
</div>Capabilities:
Populated by configurable user behavior interactions | Configurable product category | Configurable product info display | Slide 6 products at a time
<div
class="mm-section mm-section-default-hidden"
data-mm-type="Prod Reco Carousel (6 across)"
data-mm-custom-tracking="Best Sellers"
data-at-recommendation="Best Sellers HP"
data-at-headline="Best Sellers Going Fast"
data-at-layout="carousel-compact"
data-at-full-width="true"
data-at-brand-name="false"
data-at-ratings="true"
data-at-show-savings="dollar"
data-at-xl-slide-count="6"
data-at-lg-slide-count="6"
data-at-md-slide-count="4"
data-at-control-position="headline"
data-at-show-pricing="false"
></div>Capabilities:
Populated by configurable user behavior interactions | Configurable product category | Configurable product info display | Slide 6 products at a time
Configurable link to category or collection page to view more
<div
class="mm-section mm-section-default-hidden"
data-mm-type="Prod Reco Carousel (6 across - Shop All)"
data-mm-custom-tracking="Best Sellers"
data-at-recommendation="Best Sellers HP"
data-at-headline="Best Sellers Going Fast"
data-at-layout="carousel-compact"
data-at-full-width="true"
data-at-brand-name="false"
data-at-ratings="true"
data-at-show-savings="dollar"
data-at-xl-slide-count="6"
data-at-lg-slide-count="6"
data-at-md-slide-count="4"
data-at-control-position="headline"
data-at-show-pricing="false"
data-at-category-text-link-cta="See More"
data-at-category-text-link-url="/r/featured/new-arrivals/"
data-at-category-text-link-aria-label="Shop the New Arrivals Collection"
></div>Capabilities:
Populated by configurable user behavior interactions | Configurable product category | Configurable product info display | Slide 6 products at a time
Configurable button to category or collection page to view more | Background spans full width of browser window | Color background or full image background
*Color and full image backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section mm-section-default-hidden py-6 bg-gray-100 mb-6"
data-mm-type="Prod Reco Carousel (6 across - Section Shop All)"
data-mm-custom-tracking="Best Sellers"
>
<div
data-at-recommendation="Best Sellers HP"
data-at-headline="Best Sellers Going Fast"
data-at-layout="carousel-compact"
data-at-full-width="true"
data-at-brand-name="false"
data-at-ratings="true"
data-at-show-savings="dollar"
data-at-xl-slide-count="6"
data-at-lg-slide-count="6"
data-at-md-slide-count="4"
data-at-control-position="headline"
data-at-show-pricing="false"
data-at-category-btn-link-cta="Shop All New Arrivals"
data-at-category-btn-link-url="/r/featured/new-arrivals/"
data-at-category-btn-link-aria-label="Shop All New Arrivals"
></div>
</div>Capabilities:
Requires 1:1 creative assets | Text overlay w/ bg color | Custom font sizing | Left/Center/Right/Top/Bottom text alignment | Design System Button or Text CTA | Slide 4 at a time
Configurable link to category or collection page to view more
*Color backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section mm-carousel mm-layout-carousel-content mm-control-position-headline mm-section-default-hidden"
data-mm-type="Custom Carousel (4 across)"
data-mm-custom-tracking="Best Sellers"
>
<div class="container">
<div class="row">
<div class="col">
<div class="mm-recommendation-heading-controls">
<div class="recommendation-heading mm-recommendation-heading h4">Best Sellers Going Fast</div>
<div class="mm-recommendation-controls-wrapper">
<div class="mm-recommendation-controls"></div>
</div>
</div>
<div class="mm-carousel-slides">
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute bottom-0 start-0 pb-0 pb-4 w-100 w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-inline-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Woman Within
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute bottom-0 start-0 pb-0 pb-4 w-100 w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-inline-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Roaman’s
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute bottom-0 start-0 pb-0 pb-4 w-100 w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-inline-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Jessica London
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute bottom-0 start-0 pb-0 pb-4 w-100 w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-inline-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Ellos
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute bottom-0 start-0 pb-0 pb-4 w-100 w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-inline-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Woman Within
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute bottom-0 start-0 pb-0 pb-4 w-100 w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-inline-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Roaman’s
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute bottom-0 start-0 pb-0 pb-4 w-100 w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-inline-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Jessica London
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute bottom-0 start-0 pb-0 pb-4 w-100 w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-inline-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Ellos
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Capabilities:
Requires 1:1 creative assets | Text overlay w/ bg color | Custom font sizing | Left/Center/Right/Top/Bottom text alignment | Design System Button or Text CTA | Slide 4 at a time
Configurable link to category or collection page to view more
*Color backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section mm-carousel mm-layout-carousel-content mm-control-position-headline mm-section-default-hidden"
data-mm-type="Custom Carousel (4 across - Shop All)"
data-mm-custom-tracking="Best Sellers"
>
<div class="container">
<div class="row">
<div class="col">
<div class="mm-recommendation-heading-controls mm-recommendation-heading-controls-category-text-link">
<div class="recommendation-heading mm-recommendation-heading h4">Best Sellers Going Fast</div>
<div class="mm-recommendation-controls-wrapper">
<a href="/r/featured/new-arrivals/" aria-label="Shop the New Arrivals Collection" href="#" class="mm-recommendation-category-text-link">See More</a>
<div class="mm-recommendation-controls"></div>
</div>
</div>
<div class="mm-carousel-slides">
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute bottom-0 start-0 pb-0 pb-4 w-100 w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-inline-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Woman Within
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute bottom-0 start-0 pb-0 pb-4 w-100 w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-inline-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Roaman’s
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute bottom-0 start-0 pb-0 pb-4 w-100 w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-inline-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Jessica London
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute bottom-0 start-0 pb-0 pb-4 w-100 w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-inline-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Ellos
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute bottom-0 start-0 pb-0 pb-4 w-100 w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-inline-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Woman Within
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute bottom-0 start-0 pb-0 pb-4 w-100 w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-inline-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Roaman’s
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute bottom-0 start-0 pb-0 pb-4 w-100 w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-inline-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Jessica London
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute bottom-0 start-0 pb-0 pb-4 w-100 w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-inline-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Ellos
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Capabilities:
Requires 1:1 creative assets | Text below asset w/ bg color | Custom font sizing | Design System Button or Text CTA | Slide 6 at a time
*Color backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section mm-carousel mm-layout-carousel-content mm-control-position-headline mm-section-default-hidden"
data-mm-type="Custom Carousel (6 across)"
data-mm-custom-tracking="Best Sellers"
data-mm-lg-slide-count="6"
data-mm-md-slide-count="4"
>
<div class="container">
<div class="row">
<div class="col">
<div class="mm-recommendation-heading-controls">
<div class="recommendation-heading mm-recommendation-heading h4">Women’s Plus Size</div>
<div class="mm-recommendation-controls-wrapper">
<div class="mm-recommendation-controls"></div>
</div>
</div>
<div class="mm-carousel-slides">
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Tunics
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Capris
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
T-Shirts
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Dresses
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Swimwear
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Sleepwear
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Tunics
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Capris
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
T-Shirts
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Dresses
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Swimwear
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Sleepwear
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Capabilities:
Requires 1:1 creative assets | Text below asset w/ bg color | Custom font sizing | Design System Button or Text CTA | Slide 6 at a time
Configurable link to category or collection page to view more
*Color backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section mm-carousel mm-layout-carousel-content mm-control-position-headline mm-section-default-hidden"
data-mm-type="Custom Carousel (6 across - Shop All)"
data-mm-custom-tracking="Best Sellers"
data-mm-lg-slide-count="6"
data-mm-md-slide-count="4"
>
<div class="container">
<div class="row">
<div class="col">
<div class="mm-recommendation-heading-controls mm-recommendation-heading-controls-category-text-link">
<div class="recommendation-heading mm-recommendation-heading h4">Best Sellers Going Fast</div>
<div class="mm-recommendation-controls-wrapper">
<a href="/r/featured/new-arrivals/" aria-label="Shop the New Arrivals Collection" class="mm-recommendation-category-text-link">See More</a>
<div class="mm-recommendation-controls"></div>
</div>
</div>
<div class="mm-carousel-slides">
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Tunics
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Capris
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
T-Shirts
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Dresses
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Swimwear
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Sleepwear
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Tunics
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Capris
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
T-Shirts
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Dresses
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Swimwear
</button>
</div>
</div>
<div class="mm-default-slide">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag pb-0 w-100 w-md-auto text-center"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">From $9.99</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Sleepwear
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Capabilities:
Requires 1:1 creative assets | Text overlay w/ bg color | Custom font sizing | Left/Center/Right/Top/Bottom text alignment | Design System Button or Text CTA
*Color backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="container mm-section"
data-mm-type="8 Box"
data-mm-custom-tracking="Best Sellers"
>
<div class="row">
<div class="col py-4">
<h2 class="h4 text-center">Featured Deals</h2>
</div>
</div>
<div class="row">
<div class="col-6 col-lg-3">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute-md bottom-0 start-0 pb-0 pb-md-4 w-100 text-center w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Woman Within
</button>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute-md bottom-0 start-0 pb-0 pb-md-4 w-100 text-center w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Roaman’s
</button>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute-md bottom-0 start-0 pb-0 pb-md-4 w-100 text-center w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Jessica London
</button>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute-md bottom-0 start-0 pb-0 pb-md-4 w-100 text-center w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Ellos
</button>
</div>
</div>
</div>
<div class="row mt-lg-4">
<div class="col-6 col-lg-3">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute-md bottom-0 start-0 pb-0 pb-md-4 w-100 text-center w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Woman Within
</button>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute-md bottom-0 start-0 pb-0 pb-md-4 w-100 text-center w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Roaman’s
</button>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute-md bottom-0 start-0 pb-0 pb-md-4 w-100 text-center w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Jessica London
</button>
</div>
</div>
<div class="col-6 col-lg-3">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute-md bottom-0 start-0 pb-0 pb-md-4 w-100 text-center w-md-auto"><div class="mm-tag bg-brand text-white font-weight-bold text-uppercase py-3 px-5 d-block line-height-1">50% Off</div></div>
</a>
</div>
<div class="mm-8-box-link pb-4 text-center">
<button class="btn btn-link btn-lg btn-block" aria-label="" href="#">
Ellos
</button>
</div>
</div>
</div>
</div>*Requires 1:1 Creative Image Asset
Capabilities:
Requires 1:1 creative asset | Text overlay w/ bg color positioned under creative | Custom font sizing | Design System Button or Text CTA | Show/Hide Details
Slide 4 at a time - category opener slides with frame
*Color backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section mm-section-default-hidden"
data-mm-type="Prod Reco Cat Lead Carousel (with creative)"
data-mm-custom-tracking="Best Sellers"
data-at-recommendation="Best Sellers HP"
data-at-headline="Home & Lifestyle"
data-at-layout="carousel-compact"
data-at-full-width="true"
data-at-brand-name="false"
data-at-ratings="true"
data-at-show-savings="dollar"
data-at-xl-slide-count="6"
data-at-lg-slide-count="4"
data-at-control-position="headline"
>
<div class="mm-default-slide">
<div class="d-flex flex-column h-100 justify-content-center">
<div class="d-flex flex-column flex-grow-1 position-relative">
<a href="#" aria-label="" class="d-flex flex-column flex-grow-1 justify-content-center align-items-start text-center text-white mm-panel-link">
<div class="flex-grow-0">
<img src="https://via.placeholder.com/1080x1080/F5F5F5/FFFFFF?text=%20" alt="" aria-label="">
</div>
<div class="px-3 pt-4 pb-7 flex-grow-1 w-100 bg-sale">
<h4 class="h3 font-weight-bold">Outdoor<br> From</h4>
<h5 class="display-2">$9.99</h5>
<button aria-label="Shop our Outdoor Collection" class="btn btn-link btn-lg btn-block text-white">Shop Now</button>
</div>
</a>
<p class="mb-0 position-absolute bottom-0 left-0 w-100 pb-4 text-center pe-none"><a href="#" aria-label="See Outdoor Collection Sale Details" class="text-white small pe-auto mm-modal-trigger" data-mm-target="#prodRecoCatLeadCarouselWithCreative">Details</a></p>
</div>
</div>
</div>
</div>
<div class="modal" tabindex="-1" id="prodRecoCatLeadCarouselWithCreative" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header bg-light">
<button type="button" class="btn close px-5" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">Close</span>
</button>
<h3 class="modal-title">Modal Title</h3>
</div>
<div class="modal-body px-5">
<p>Duis volutpat elementum finibus. Donec neque diam, fringilla vel sem sit amet, sodales volutpat dui. Pellentesque aliquet tristique lorem et efficitur. Vestibulum rutrum diam vitae sapien posuere, in mattis neque ultricies. Etiam semper, erat nec luctus sagittis, risus mi venenatis lorem, eu pellentesque dui magna quis velit. Quisque nec enim ac lectus molestie faucibus id sed massa. Mauris posuere hendrerit eros, in sagittis tortor facilisis ac. </p>
</div>
<div class="modal-footer px-5">
<button type="button" class="btn btn-outline-primary btn-block btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Capabilities:
If creative not available, use text overlay w/ bg color | Custom font sizing | Design System Button or Text CTA | Show/Hide Details
Slide 4 at a time - category opener slides with frame
*Color backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section mm-section-default-hidden"
data-mm-type="Prod Reco Cat Lead Carousel (without creative)"
data-mm-custom-tracking="Best Sellers"
data-at-recommendation="Best Sellers HP"
data-at-headline="Home & Lifestyle"
data-at-layout="carousel-compact"
data-at-full-width="true"
data-at-brand-name="false"
data-at-ratings="true"
data-at-show-savings="dollar"
data-at-xl-slide-count="6"
data-at-lg-slide-count="4"
data-at-control-position="headline"
>
<div class="mm-default-slide">
<div class="d-flex flex-column h-100 justify-content-center">
<div class="d-flex flex-column flex-grow-1 position-relative bg-sale">
<a href="#" aria-label="" class="d-flex flex-column flex-grow-1 justify-content-center align-items-center px-3 py-7 text-center text-white mm-panel-link">
<div class="py-6">
<h4 class="h3 font-weight-bold">Outdoor<br> From</h4>
<h5 class="display-2">$9.99</h5>
<button aria-label="Shop our Outdoor Collection" class="btn btn-link btn-lg btn-block text-white">Shop Now</button>
</div>
</a>
<p class="mb-0 position-absolute bottom-0 left-0 w-100 pb-4 text-center pe-none"><a href="#" aria-label="See Outdoor Collection Sale Details" class="text-white small pe-auto mm-modal-trigger" data-mm-target="#prodRecoCatLeadCarouselWithoutCreative">Details</a></p>
</div>
</div>
</div>
</div>
<div class="modal" tabindex="-1" id="prodRecoCatLeadCarouselWithoutCreative" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header bg-light">
<button type="button" class="btn close px-5" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">Close</span>
</button>
<h3 class="modal-title">Modal Title</h3>
</div>
<div class="modal-body px-5">
<p>Duis volutpat elementum finibus. Donec neque diam, fringilla vel sem sit amet, sodales volutpat dui. Pellentesque aliquet tristique lorem et efficitur. Vestibulum rutrum diam vitae sapien posuere, in mattis neque ultricies. Etiam semper, erat nec luctus sagittis, risus mi venenatis lorem, eu pellentesque dui magna quis velit. Quisque nec enim ac lectus molestie faucibus id sed massa. Mauris posuere hendrerit eros, in sagittis tortor facilisis ac. </p>
</div>
<div class="modal-footer px-5">
<button type="button" class="btn btn-outline-primary btn-block btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>*Requires 1:1 Creative Image Assets
Capabilities:
Requires 1:1 creative assets | Text overlay w/ bg color positioned left or right side | Custom font sizing | Design System Button or Text CTA | Show/Hide Details
*Color backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="mm-section"
data-mm-type="2-up Static Category Promo (with creative)"
data-mm-custom-tracking="Best Sellers"
>
<div class="container">
<div class="row">
<div class="col-12 col-md-6 pb-6 pb-md-0">
<div class="d-lg-flex flex-row-reverse flex-row align-items-stretch justify-content-center align-items-start text-center text-white mm-panel-link">
<div class="mm-static-category-promo-image">
<a href="#" aria-label=""><img src="https://via.placeholder.com/1080x1080/F5F5F5/FFFFFF?text=%20" alt=""></a>
</div>
<div class="position-relative bg-sale flex-grow-1 d-flex">
<a href="#" aria-label="" class="d-flex flex-column flex-grow-1 justify-content-center align-items-center text-center text-white mm-panel-link">
<div class="px-3 py-7">
<h4 class="h3 font-weight-bold">Outdoor<br> From</h4>
<h5 class="display-2">$9.99</h5>
<button aria-label="Shop our Outdoor Collection" class="btn btn-link btn-lg btn-block text-white">Shop Now</button>
</div>
</a>
<p class="mb-0 position-absolute bottom-0 left-0 w-100 pb-4 text-center pe-none"><a href="#" aria-label="See Outdoor Collection Sale Details" class="text-white small pe-auto mm-modal-trigger" data-mm-target="#2UpStaticCategoryWithPromo1">Details</a></p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="d-lg-flex flex-row align-items-stretch justify-content-center align-items-start text-center text-white mm-panel-link">
<div class="mm-static-category-promo-image">
<a href="#" aria-label=""><img src="https://via.placeholder.com/1080x1080/F5F5F5/FFFFFF?text=%20" alt=""></a>
</div>
<div class="position-relative bg-sale flex-grow-1 d-flex">
<a href="#" aria-label="" class="d-flex flex-column flex-grow-1 justify-content-center align-items-center text-center text-white mm-panel-link">
<div class="px-3 py-7">
<h4 class="h3 font-weight-bold">Outdoor<br> From</h4>
<h5 class="display-2">$9.99</h5>
<button aria-label="Shop our Outdoor Collection" class="btn btn-link btn-lg btn-block text-white">Shop Now</button>
</div>
</a>
<p class="mb-0 position-absolute bottom-0 left-0 w-100 pb-4 text-center pe-none"><a href="#" aria-label="See Outdoor Collection Sale Details" class="text-white small pe-auto mm-modal-trigger" data-mm-target="#2UpStaticCategoryWithPromo2">Details</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal" tabindex="-1" id="2UpStaticCategoryWithPromo1" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header bg-light">
<button type="button" class="btn close px-5" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">Close</span>
</button>
<h3 class="modal-title">Modal Title</h3>
</div>
<div class="modal-body px-5">
<p>Duis volutpat elementum finibus. Donec neque diam, fringilla vel sem sit amet, sodales volutpat dui. Pellentesque aliquet tristique lorem et efficitur. Vestibulum rutrum diam vitae sapien posuere, in mattis neque ultricies. Etiam semper, erat nec luctus sagittis, risus mi venenatis lorem, eu pellentesque dui magna quis velit. Quisque nec enim ac lectus molestie faucibus id sed massa. Mauris posuere hendrerit eros, in sagittis tortor facilisis ac. </p>
</div>
<div class="modal-footer px-5">
<button type="button" class="btn btn-outline-primary btn-block btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" tabindex="-1" id="2UpStaticCategoryWithPromo2" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header bg-light">
<button type="button" class="btn close px-5" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">Close</span>
</button>
<h3 class="modal-title">Modal Title</h3>
</div>
<div class="modal-body px-5">
<p>Duis volutpat elementum finibus. Donec neque diam, fringilla vel sem sit amet, sodales volutpat dui. Pellentesque aliquet tristique lorem et efficitur. Vestibulum rutrum diam vitae sapien posuere, in mattis neque ultricies. Etiam semper, erat nec luctus sagittis, risus mi venenatis lorem, eu pellentesque dui magna quis velit. Quisque nec enim ac lectus molestie faucibus id sed massa. Mauris posuere hendrerit eros, in sagittis tortor facilisis ac. </p>
</div>
<div class="modal-footer px-5">
<button type="button" class="btn btn-outline-primary btn-block btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>*Requires 1:1 Creative Image Assets
Capabilities:
Requires 1:1 creative assets | Text overlay w/ bg color | Custom font sizing | Left/Center/Right/Top/Bottom text alignment | Design System Button or Text CTA
*Color backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="container mm-section"
data-mm-type="Style Spotlight Right"
data-mm-custom-tracking="Top Categories"
>
<div class="row">
<div class="col py-4">
<h2 class="h4 text-center">This Week’s Style Spotlight</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6 pr-md-5 mb-4 mb-md-0">
<div class="row">
<div class="col-6">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute-md top-0 start-0 pb-0 pb-md-4 w-100 text-center w-md-auto"><div class="mm-tag bg-sale text-white font-weight-bold text-uppercase p-3 p-md-5 d-block line-height-1p3">From<br class="d-none d-md-block" /> $9.99</div></div>
</a>
</div>
<div class="pb-1 text-center">
<button class="btn btn-link btn-sm btn-block" aria-label="" href="#">
Activewear
</button>
</div>
</div>
<div class="col-6">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute-md top-0 start-0 pb-0 pb-md-4 w-100 text-center w-md-auto"><div class="mm-tag bg-sale text-white font-weight-bold text-uppercase p-3 p-md-5 d-block line-height-1p3">From<br class="d-none d-md-block" /> $9.99</div></div>
</a>
</div>
<div class="pb-1 text-center">
<button class="btn btn-link btn-sm btn-block" aria-label="" href="#">
Swim
</button>
</div>
</div>
<div class="col-6">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute-md top-0 start-0 pb-0 pb-md-4 w-100 text-center w-md-auto"><div class="mm-tag bg-sale text-white font-weight-bold text-uppercase p-3 p-md-5 d-block line-height-1p3">New<br class="d-none d-md-block" /> Brand</div></div>
</a>
</div>
<div class="pb-1 text-center">
<button class="btn btn-link btn-sm btn-block" aria-label="" href="#">
Angelique
</button>
</div>
</div>
<div class="col-6">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute-md top-0 start-0 pb-0 pb-md-4 w-100 text-center w-md-auto"><div class="mm-tag bg-sale text-white font-weight-bold text-uppercase p-3 p-md-5 d-block line-height-1p3">New<br class="d-none d-md-block" /> Brand</div></div>
</a>
</div>
<div class="pb-1 text-center">
<button class="btn btn-link btn-sm btn-block" aria-label="" href="#">
Lyssé
</button>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 pl-md-0">
<a href="#" aria-label=""><img src="https://via.placeholder.com/1080x1080/F5F5F5/FFFFFF?text=%20" alt=""></a>
<button class="btn btn-link btn-sm btn-block" aria-label="" href="#">
Shop Now
</button>
</div>
</div>
</div>*Requires 1:1 Creative Image Assets
Capabilities:
Requires 1:1 creative assets | Text overlay w/ bg color | Custom font sizing | Left/Center/Right/Top/Bottom text alignment | Design System Button or Text CTA
*Color backgrounds must adhere to ADA compliance - ensure at least AA level color contrast compliance with text and buttons
<div
class="container mm-section"
data-mm-type="Style Spotlight Left"
data-mm-custom-tracking="Top Categories"
>
<div class="row">
<div class="col py-4">
<h2 class="h4 text-center">This Week’s Style Spotlight</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6 pr-md-0">
<a href="#" aria-label=""><img src="https://via.placeholder.com/1080x1080/F5F5F5/FFFFFF?text=%20" alt=""></a>
<button class="btn btn-link btn-sm btn-block" aria-label="" href="#">
Shop Now
</button>
</div>
<div class="col-xs-12 col-md-6 pl-md-5 mb-4 mb-md-0">
<div class="row">
<div class="col-6">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute-md top-0 start-0 pb-0 pb-md-4 w-100 text-center w-md-auto"><div class="mm-tag bg-sale text-white font-weight-bold text-uppercase p-3 p-md-5 d-block line-height-1p3">From<br class="d-none d-md-block" /> $9.99</div></div>
</a>
</div>
<div class="pb-1 text-center">
<button class="btn btn-link btn-sm btn-block" aria-label="" href="#">
Activewear
</button>
</div>
</div>
<div class="col-6">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute-md top-0 start-0 pb-0 pb-md-4 w-100 text-center w-md-auto"><div class="mm-tag bg-sale text-white font-weight-bold text-uppercase p-3 p-md-5 d-block line-height-1p3">From<br class="d-none d-md-block" /> $9.99</div></div>
</a>
</div>
<div class="pb-1 text-center">
<button class="btn btn-link btn-sm btn-block" aria-label="" href="#">
Swim
</button>
</div>
</div>
<div class="col-6">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute-md top-0 start-0 pb-0 pb-md-4 w-100 text-center w-md-auto"><div class="mm-tag bg-sale text-white font-weight-bold text-uppercase p-3 p-md-5 d-block line-height-1p3">New<br class="d-none d-md-block" /> Brand</div></div>
</a>
</div>
<div class="pb-1 text-center">
<button class="btn btn-link btn-sm btn-block" aria-label="" href="#">
Angelique
</button>
</div>
</div>
<div class="col-6">
<div class="mm-tile position-relative">
<a href="#" aria-label="">
<img src="https://via.placeholder.com/438x438/F5F5F5/FFFFFF?text=%20" alt="" class="img-fluid" />
<div class="mm-tag position-absolute-md top-0 start-0 pb-0 pb-md-4 w-100 text-center w-md-auto"><div class="mm-tag bg-sale text-white font-weight-bold text-uppercase p-3 p-md-5 d-block line-height-1p3">New<br class="d-none d-md-block" /> Brand</div></div>
</a>
</div>
<div class="pb-1 text-center">
<button class="btn btn-link btn-sm btn-block" aria-label="" href="#">
Lyssé
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="mm-section mm-section-default-hidden"
data-mm-type="Prod Reco Carousel Default"
data-mm-custom-tracking="New Arrivals"
data-at-recommendation="New Arrivals"
data-at-headline="New Markdowns Every Week"
></div>
<div
class="mm-section mm-section-default-hidden"
data-mm-type="Prod Reco Carousel - Compact"
data-mm-custom-tracking="Clearance"
data-at-recommendation="Home page Clearance"
data-at-headline="Clearance"
data-at-layout="carousel-compact"
data-at-promo-image="https://www.fullbeauty.com/on/demandware.static/-/Sites-oss-Library/default/dwb91876a1/fo-images/dynamic-carousel-test/2021-fo-carousel-category-tops1.png"
data-at-promo-alt="Tops Category"
data-at-promo-url="https://www.fullbeauty.com/fo/tops/?ICID=HP|Z2|CTA1|6-1-2021"
data-at-brand-name="false"
data-at-ratings="true"
data-at-show-savings="dollar"
></div>
<div
class="mm-section mm-section-default-hidden"
data-mm-type="Prod Reco Carousel - Vertical"
data-mm-custom-tracking="Top Rated"
data-at-recommendation="Top Rated"
data-at-headline="Top Rated"
data-at-layout="carousel-vertical"
></div>
<style type="text/css">@charset "UTF-8";/* General Styling */.mm-section-default-hidden { display: none;}.mm-section { width: 100%; margin-bottom: 30px;}.mm-section img { max-width: 100%;}.mm-css-bg { background-size: cover;}.bg-gray-100 { background-color: #F5F5F5;}.bg-sale { background-color: #A70033;}.mm-tile a:hover { text-decoration: none;}.mm-rating { text-align: center;}/* Banner */.mm-layout-banner .container { max-width: 850px;}.mm-layout-banner .mm-banner-text :last-child { margin-bottom: 0;}/* Hero General *//*.mm-hero-content { @include media-breakpoint-up(md) { padding-left: 32px; padding-right: 32px; } }*//* Static Promo */@media (min-width: 761px) { .mm-static-category-promo-image { flex-basis: 60%; }}.mm-panel-link:hover, .mm-panel-link:active { text-decoration: none;}.mm-panel-link:hover .btn-link, .mm-panel-link:active .btn-link { color: #000; background: #f9f9f9; text-decoration: none; background-color: rgba(0, 0, 0, 0.05);}.mm-panel-link:focus .btn-link { box-shadow: 0 0 0 4px #000, 0px 5px 9px rgba(0, 0, 0, 0.1); text-decoration: none; background-color: rgba(0, 0, 0, 0.05);}/* Carousels */.mm-carousel .slide { position: relative;}.mm-carousel .slick-track { display: flex;}.mm-carousel .slick-slide { margin: 0 12px; height: auto;}.mm-carousel .slick-list { margin: 0 -12px;}.mm-carousel li { list-style-type: none;}.mm-carousel img { max-width: 100%;}.mm-carousel a { display: block;}.mm-carousel a:focus { outline: 2px solid #0449B9; outline-offset: -2px;}.mm-carousel a:hover { text-decoration: none;}.mm-carousel .slick-arrow { width: 12px; height: 18px; border: none; background: transparent; position: relative; top: auto; right: auto; bottom: auto; left: auto; overflow: hidden; display: inline-block; transform: none; background: none !important;}.mm-carousel .slick-arrow::after { content: ""; width: 12px; height: 18px; position: absolute; top: 0; background-repeat: no-repeat;}.mm-carousel .slick-arrow.slick-next::after { left: 0; transform: rotate(180deg); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3LjQgMTIiIHdpZHRoPScxMicgaGVpZ2h0PScxOCc+PHBhdGggZD0iTTcuNCAxLjRMNiAwIDAgNmw2IDYgMS40LTEuNEwyLjggNnoiLz48L3N2Zz4=");}.mm-carousel .slick-arrow.slick-prev::after { left: 0; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3LjQgMTIiIHdpZHRoPScxMicgaGVpZ2h0PScxOCc+PHBhdGggZD0iTTcuNCAxLjRMNiAwIDAgNmw2IDYgMS40LTEuNEwyLjggNnoiLz48L3N2Zz4=");}.mm-carousel .slick-arrow.slick-disabled { opacity: 0.5;}.mm-carousel .slick-arrow:focus { outline: 2px solid #0449B9;}.mm-carousel .mm-carousel-slides { position: relative; margin-bottom: 0;}.mm-carousel .mm-product-tile { margin-left: auto; margin-right: auto;}.mm-carousel.mm-layout-carousel-hero .slick-slide { margin: 0;}.mm-carousel.mm-layout-carousel-hero .slick-list { margin: 0;}.mm-carousel.mm-layout-carousel-hero .slick-arrow { position: absolute; width: 32px; height: 64px; background: #fff; box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); top: 50%; margin-top: -32px; z-index: 1;}.mm-carousel.mm-layout-carousel-hero .slick-arrow::after { top: 22px;}.mm-carousel.mm-layout-carousel-hero .slick-arrow.slick-next { right: 0;}.mm-carousel.mm-layout-carousel-hero .slick-arrow.slick-next::after { left: 11px;}.mm-carousel.mm-layout-carousel-hero .slick-arrow.slick-prev { left: 0;}.mm-carousel.mm-layout-carousel-hero .slick-arrow.slick-prev::after { left: 8px;}@media (max-width: 760.98px) { .mm-carousel.mm-layout-carousel-hero .slick-arrow { display: none !important; }}.mm-carousel.mm-layout-carousel-hero .mm-carousel-slides { overflow: hidden;}.mm-carousel .mm-recommendation-btn-container { padding-top: 40px; text-align: center;}.mm-carousel .mm-recommendation-heading { text-align: center; margin-bottom: 16px;}.mm-carousel .mm-product-name { color: #000;}.mm-carousel .mm-product-image img { margin-left: auto; margin-right: auto;}.mm-carousel .mm-recommendation-tiles { padding-left: 30px; padding-right: 30px;}.mm-carousel.mm-control-position-default .slick-arrow { position: absolute; top: 50%; margin-top: -32px; z-index: 1; width: 21px; height: 64px; top: 38%; padding: 0;}.mm-carousel.mm-control-position-default .slick-arrow::after { top: 22px;}.mm-carousel.mm-control-position-default .slick-arrow.slick-next { right: 0;}.mm-carousel.mm-control-position-default .slick-arrow.slick-next::after { left: 4px;}.mm-carousel.mm-control-position-default .slick-arrow.slick-prev { left: 0;}.mm-carousel.mm-control-position-default .slick-arrow.slick-prev::after { left: 4px;}@media (max-width: 760.98px) { .mm-carousel.mm-control-position-default .slick-arrow { display: none !important; }}.mm-carousel.mm-control-position-default .mm-recommendation-tiles { padding-left: 40px; padding-right: 40px;}@media (max-width: 760.98px) { .mm-carousel.mm-control-position-default .mm-recommendation-tiles { padding-left: 0; padding-right: 0; }}.mm-carousel.mm-control-position-headline .mm-recommendation-tiles { padding-left: 0; padding-right: 0;}@media (min-width: 761px) { .mm-carousel.mm-control-position-headline .mm-recommendation-heading-controls { position: relative; padding-left: 60px; padding-right: 60px; } .mm-carousel.mm-control-position-headline .mm-recommendation-heading-controls.mm-recommendation-heading-controls-category-text-link { padding-left: 200px; padding-right: 200px; } .mm-carousel.mm-control-position-headline .mm-recommendation-heading-controls .mm-recommendation-container { padding-left: 0; padding-right: 0; } .mm-carousel.mm-control-position-headline .mm-recommendation-heading-controls .mm-recommendation-controls-wrapper { position: absolute; top: 0; right: 0; line-height: 0; padding-right: 74px; } .mm-carousel.mm-control-position-headline .mm-recommendation-heading-controls .mm-recommendation-controls { position: absolute; top: 1px; right: 0; } .mm-carousel.mm-control-position-headline .mm-recommendation-heading-controls .mm-recommendation-category-text-link { margin-top: 2px; display: inline-block; line-height: 1; } .mm-carousel.mm-control-position-headline .mm-recommendation-heading-controls .slick-arrow.slick-next { margin-left: 30px; }}@media (max-width: 760.98px) { .mm-carousel.mm-control-position-headline .mm-recommendation-heading-controls { padding-left: 0; padding-right: 0; } .mm-carousel.mm-control-position-headline .mm-recommendation-heading-controls.mm-recommendation-heading-controls-category-text-link .mm-recommendation-heading { margin-bottom: 4px; } .mm-carousel.mm-control-position-headline .mm-recommendation-heading-controls .mm-recommendation-controls-wrapper { text-align: center; margin-bottom: 16px; } .mm-carousel.mm-control-position-headline .mm-recommendation-heading-controls .mm-recommendation-controls { display: none; }}.mm-carousel.mm-layout-carousel .mm-product-name, .mm-carousel.mm-layout-carousel-vertical .mm-product-name { margin-top: 20px; font-size: 1.125rem; line-height: 1.3; text-align: center;}.mm-carousel.mm-layout-carousel .mm-product-name sup, .mm-carousel.mm-layout-carousel-vertical .mm-product-name sup { font-size: 0.625rem;}.mm-carousel.mm-layout-carousel .mm-product-standard-price,.mm-carousel.mm-layout-carousel .mm-product-sales-price, .mm-carousel.mm-layout-carousel-vertical .mm-product-standard-price,.mm-carousel.mm-layout-carousel-vertical .mm-product-sales-price { display: block; text-align: center; letter-spacing: 1px; font-size: 0.75rem;}.mm-carousel.mm-layout-carousel .mm-product-standard-price, .mm-carousel.mm-layout-carousel-vertical .mm-product-standard-price { color: #525252; text-decoration: line-through;}.mm-carousel.mm-layout-carousel .mm-product-sales-price, .mm-carousel.mm-layout-carousel-vertical .mm-product-sales-price { color: #A70033;}.mm-carousel.mm-layout-carousel .mm-product-brand, .mm-carousel.mm-layout-carousel-vertical .mm-product-brand { text-align: center; text-transform: uppercase; color: #525252; font-size: 0.625rem; margin-top: 5px; font-weight: bold; letter-spacing: 0.2px;}.mm-carousel.mm-layout-carousel .mm-product-pricing, .mm-carousel.mm-layout-carousel-vertical .mm-product-pricing { margin-top: 0.5rem;}@media (min-width: 1024px) { .mm-carousel.mm-layout-carousel-vertical .slick-track { display: block; } .mm-carousel.mm-layout-carousel-vertical .mm-recommendation-tiles { max-width: 160px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; margin-top: 30px; margin-bottom: 30px; } .mm-carousel.mm-layout-carousel-vertical .slick-arrow { position: absolute; margin-left: -9px; z-index: 1; width: 18px; height: 12px; margin-top: 0; } .mm-carousel.mm-layout-carousel-vertical .slick-arrow::after { top: -2px; left: 3px; } .mm-carousel.mm-layout-carousel-vertical .slick-arrow.slick-next { top: auto; bottom: -20px; left: 50%; } .mm-carousel.mm-layout-carousel-vertical .slick-arrow.slick-next::after { transform: rotate(-90deg); } .mm-carousel.mm-layout-carousel-vertical .slick-arrow.slick-prev { top: -20px; left: 50%; } .mm-carousel.mm-layout-carousel-vertical .slick-arrow.slick-prev::after { transform: rotate(90deg); } .mm-carousel.mm-layout-carousel-vertical .mm-product-tile { padding-bottom: 12px; }}.mm-carousel.mm-layout-carousel-compact .mm-rating { text-align: left;}.mm-carousel.mm-layout-carousel-compact .mm-product-name { color: #000;}.mm-carousel.mm-layout-carousel-compact .mm-product-pricing { color: #000;}.mm-carousel.mm-layout-carousel-compact .mm-product-pricing a { color: #000;}.mm-carousel.mm-layout-carousel-compact .mm-price-product-sales-price { margin-right: 1rem;}.mm-carousel.mm-layout-carousel-compact .mm-price-currency-text { font-size: 1.375rem; line-height: 1.5rem; margin: 0 2px;}@media (min-width: 761px) { .mm-carousel.mm-layout-carousel-compact .mm-plp-save-message::before { content: "—"; display: inline-block; margin-right: 5px; }}.mm-section .mm-carousel-play-pause-btn { display: inline-block; background: none; position: relative; width: 9px; height: 11px; padding: 0; border: none; vertical-align: middle; margin-left: 4px; margin-top: 1px;}.mm-section .mm-carousel-play-pause-btn::after { content: ""; display: block; width: 100%; height: 100%; transform: rotate(0); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5IiBoZWlnaHQ9IjExIiB2aWV3Qm94PSIwIDAgOSAxMSI+PHBhdGggZD0iTTYsMTUuNUg5VjVINlpNMTIsNVYxNS41aDNWNVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02IC01KSIvPjwvc3ZnPg=="); background-repeat: none;}.mm-section .mm-carousel-play-pause-btn.is-paused::after { transform: rotate(90deg); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCA1IiB3aWR0aD0iOSIgaGVpZ2h0PSIxMSI+PHBhdGggZD0iTTAgNWw1LTUgNSA1eiIvPjwvc3ZnPg==");}.mm-section .slick-dots-container { text-align: center;}.mm-section .slick-dots { list-style-type: none; margin: 0; padding: 0; display: inline-block; line-height: 8px; vertical-align: middle; position: inherit; width: auto;}.mm-section .slick-dots li { display: inline-block; vertical-align: top; margin: 0 4px; width: auto; height: auto;}.mm-section .slick-dots button { padding: 0; background-color: #F5F5F5; border: none; width: 8px; height: 8px; border-radius: 4px; display: block;}.mm-section .slick-dots button::before { display: none;}.mm-section .slick-dots .slick-active button { background-color: #000;}/* Recommendations */.mm-default-slide-hidden { display: none;}.mm-recommendation-container { max-width: 1260px; margin-left: auto; margin-right: auto;}.mm-recommendation-container.mm-container-full-width { max-width: inherit;}.mm-recommendation-container .mm-rating { color: #ffb64a; font-size: 0.75rem; margin-top: 4px; margin-bottom: 4px;}.mm-recommendation-container .mm-rating i { margin-right: 3px;}body.fb .bg-brand { background-color:#000000}body.os .bg-brand { background-color:#0449b9}body.ww .bg-brand { background-color:#D5007E}body.rm .bg-brand { background-color:#331E53}body.ca .bg-brand { background-color:#3a2a7c}body.jl .bg-brand { background-color:#651E40}body.el .bg-brand { background-color:#242424}body.jv .bg-brand { background-color:#1C1C1C}body.zq .bg-brand { background-color:#1A1A1A}body.sa .bg-brand { background-color:#002554}body.aa .bg-brand { background-color:#0077b1}body.ia .bg-brand { background-color:#9F2861}body.sh .bg-brand { background-color:#385492}body.bh .bg-brand { background-color:#156074}body.ks .bg-brand { background-color:#002A54}body.fo .bg-brand { background-color:#A70033}body.da .bg-brand { background-color:#262626}body.cp .bg-brand { background-color:#000000}body.av .bg-brand { background-color:#000000}</style>
<script>
var deferCount = 0;
function deferMarketingModules(method) {
deferCount++;
if (window.jQuery) {
method();
} else {
if(deferCount < 50) {
setTimeout(function() { deferMarketingModules(method) }, 50);
}
}
}
deferMarketingModules(function () {
if(typeof window.marketingModules == 'undefined') {
/*!
* Mutation Observer - used to watch for dynamic mboxes that need to be created
*/
if (!jQuery().initialize) {
/*!
* jQuery initialize - v1.0.0 - 12/14/2016
* https://github.com/adampietrasiak/jquery.initialize
*
* Copyright (c) 2015-2016 Adam Pietrasiak
* Released under the MIT license
* https://github.com/timpler/jquery.initialize/blob/master/LICENSE
*/
(function($) {
"use strict";
var combinators = [" ", ">", "+", "~"];
var fraternisers = ["+", "~"];
var complexTypes = ["ATTR", "PSEUDO", "ID", "CLASS"];
function grok(msobserver) {
if (!$.find.tokenize) {
msobserver.isCombinatorial = true;
msobserver.isFraternal = true;
msobserver.isComplex = true;
return;
}
msobserver.isCombinatorial = false;
msobserver.isFraternal = false;
msobserver.isComplex = false;
var token = $.find.tokenize(msobserver.selector);
for (var i = 0; i < token.length; i++) { for (var j = 0; j < token[i].length; j++) { if (combinators.indexOf(token[i][j].type) != -1) msobserver.isCombinatorial = true; if (fraternisers.indexOf(token[i][j].type) != -1) msobserver.isFraternal = true; if (complexTypes.indexOf(token[i][j].type) != -1) msobserver.isComplex = true; } }
}
var MutationSelectorObserver = function(selector, callback, options) {
this.selector = selector.trim();
this.callback = callback;
this.options = options;
grok(this);
};
var msobservers = [];
msobservers.initialize = function(selector, callback, options) {
var seen = [];
var callbackOnce = function() {
if (seen.indexOf(this) == -1) {
seen.push(this);
$(this).each(callback);
}
};
$(options.target).find(selector).each(callbackOnce);
var msobserver = new MutationSelectorObserver(selector, callbackOnce, options);
this.push(msobserver);
var observer = new MutationObserver(function(mutations) {
var matches = [];
for (var m = 0; m < mutations.length; m++) {
if (mutations[m].type == "attributes") {
if (mutations[m].target.matches(msobserver.selector)) matches.push(mutations[m].target);
if (msobserver.isFraternal && mutations[m].target.parentElement) matches.push.apply(matches, mutations[m].target.parentElement.querySelectorAll(msobserver.selector));
else matches.push.apply(matches, mutations[m].target.querySelectorAll(msobserver.selector));
}
if (mutations[m].type == "childList") {
for (var n = 0; n < mutations[m].addedNodes.length; n++) {
if (!(mutations[m].addedNodes[n] instanceof Element)) continue;
if (mutations[m].addedNodes[n].matches(msobserver.selector)) matches.push(mutations[m].addedNodes[n]);
if (msobserver.isFraternal && mutations[m].addedNodes[n].parentElement) matches.push.apply(matches, mutations[m].addedNodes[n].parentElement.querySelectorAll(msobserver.selector));
else matches.push.apply(matches, mutations[m].addedNodes[n].querySelectorAll(msobserver.selector));
}
}
}
for (var i = 0; i < matches.length; i++) $(matches[i]).each(msobserver.callback);
});
var defaultObeserverOpts = { childList: true, subtree: true, attributes: msobserver.isComplex };
observer.observe(options.target, options.observer || defaultObeserverOpts);
};
$.fn.initialize = function(callback, options) { msobservers.initialize(this.selector, callback, $.extend({}, $.initialize.defaults, options)); };
$.initialize = function(selector, callback, options) { msobservers.initialize(selector, callback, $.extend({}, $.initialize.defaults, options)); };
$.initialize.defaults = { target: document.documentElement, observer: null };
})(jQuery);
}
window.marketingModules = {
'state': {
'init': false
},
'sections': [],
'breakpoints': {
'xs': {
'min': 0,
'max': 576
}, 'sm': {
'min': 577,
'max': 760
}, 'md': {
'min': 761,
'max': 1023,
}, 'lg': {
'min': 1024,
'max': 1475,
}, 'xl': {
'min': 1476,
'max': 0,
}
},
'mediaQueries': {},
'tealiumChecks': 0
};
marketingModules.mediaQueries = {
'sm': '(max-width: '+marketingModules.breakpoints.sm.max+'px)',
'md': '(min-width: '+marketingModules.breakpoints.md.min+'px) and (max-width: '+marketingModules.breakpoints.md.max+'px)',
}
marketingModules.fn = {
activateHeroCarousel: function(t) {
var autoPlayDefault = true;
if(t.attr('data-default-paused') == 'true') {
autoPlayDefault = false;
}
t.find('.mm-carousel-slides').on('init', function(event, slick, direction){
var parent = $(this).closest('.mm-section');
var t = $(this);
t.attr('id', parent.attr('id')+'Carousel');
t.find('.slide').each(function( index ) {
$(this).addClass('slide-'+$(this).attr('data-slick-index'));
});
parent.removeClass('mm-section-default-hidden');
var states = {
'play': {
'label': 'Play',
'cssClass': 'is-playing'
}, 'pause': {
'label': 'Pause',
'cssClass': 'is-paused'
}
};
var activeState = states.play;
var inactiveState = states.pause;
if(parent.attr('data-default-paused') == 'true') {
activeState = states.pause;
inactiveState = states.play;
}
parent.find('.slick-dots-container').append('<button type="button" role="tab" aria-controls="'+t.attr('id')+'" aria-label="'+inactiveState.label+'" tabindex="0" aria-selected="false" class="mm-carousel-play-pause-btn '+activeState.cssClass+'"></button>');
parent.find('.mm-carousel-play-pause-btn').click(function() {
if(!$(this).hasClass(states.pause.cssClass)) {
$(this).addClass(states.pause.cssClass).removeClass(states.play.cssClass);
$(this).closest('.mm-carousel').find('.mm-carousel-slides').slick('slickPause');
$(this).attr('aria-label',states.play.label);
} else {
$(this).addClass(states.play.cssClass).removeClass(states.pause.cssClass);
$(this).closest('.mm-carousel').find('.mm-carousel-slides').slick('slickPlay').slick('slickNext');
$(this).attr('aria-label',states.pause.label);;
}
});
parent.find('.slick-arrow, .slick-dots button').wrapInner('<span class="sr-only"></span>');
});
t.find('.mm-carousel-slides').slick({
dots: true,
infinite: true,
speed: 500,
autoplay: autoPlayDefault,
appendDots: t.find('.slick-dots-container').first()
});
marketingModules.fn.refreshCarouselOnLoad(t);
},
refreshCarouselOnLoad: function(t) {
var refreshTimer;
t.find("img").one("load", function() {
clearTimeout(refreshTimer);
refreshTimer = setTimeout(function(t) {
var parent = t.closest(".mm-carousel-slides");
parent.slick('setPosition');
},250, $(this));
});
},
activateContentCarousel: function(t) {
t.find('.mm-carousel-slides').on('init', function(event, slick, direction){
var parent = $(this).closest('.mm-section');
var t = $(this);
t.attr('id', parent.attr('id')+'Carousel');
t.find('.slide').each(function( index ) {
$(this).addClass('slide-'+$(this).attr('data-slick-index'));
});
parent.removeClass('mm-section-default-hidden');
});
var lgSlideCount = marketingModules.fn.configOption(t.data('mm-lg-slide-count'), 4);
var mdSlideCount = marketingModules.fn.configOption(t.data('mm-md-slide-count'), 4.25);
var smSlideCount = marketingModules.fn.configOption(t.data('mm-sm-slide-count'), 2.25);
var xsSlideCount = marketingModules.fn.configOption(t.data('mm-xs-slide-count'), 1.25);
var slickSettings = {
slidesToShow: lgSlideCount,
slidesToScroll: Math.floor(lgSlideCount),
dots: false,
infinite: false,
verticalSwiping: false,
prevArrow: '<button type="button" class="btn-ds slick-prev" aria-label="Previous"><span class="sr-only">Previous</span></button>',
nextArrow: '<button type="button" class="btn-ds slick-next" aria-label="Next"><span class="sr-only">Next</span></button>',
appendArrows: t.find(".mm-recommendation-controls").first(),
responsive: [{
breakpoint: marketingModules.breakpoints.md.max,
settings: {
slidesToShow: mdSlideCount,
slidesToScroll: Math.floor(mdSlideCount),
arrows: false,
vertical: false,
swipe: true
}
}, {
breakpoint: marketingModules.breakpoints.sm.max,
settings: {
slidesToShow: smSlideCount,
slidesToScroll: Math.floor(smSlideCount),
arrows: true,
vertical: false,
swipe: true
}
}, {
breakpoint: marketingModules.breakpoints.xs.max,
settings: {
slidesToShow: xsSlideCount,
slidesToScroll: Math.floor(xsSlideCount),
arrows: false,
vertical: false,
swipe: true
}
}]
}
t.find('.mm-carousel-slides').slick(slickSettings);
marketingModules.fn.refreshCarouselOnLoad(t);
},
configOption: function(curValue,defaultValue) {
/*!
* Returns data attribute if set, needed because some configuration options can be set to 'false'
*/
if(typeof curValue === 'undefined') {
return defaultValue
}
return curValue;
},
getUrlParameter: function(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
},
findSections: function() {
$(".mm-section").not('.init').each(function(index) {
var t = $(this);
t.addClass('init');
if(!t.attr('id')) {
t.attr('id', 'mmSection'+(marketingModules.sections.length+1)).attr('data-mm-page-position', (marketingModules.sections.length+1));
}
if(t.hasClass('mm-layout-carousel-hero')) {
marketingModules.fn.activateHeroCarousel(t);
}
if(t.hasClass('mm-layout-carousel-content')) {
marketingModules.fn.activateContentCarousel(t);
}
t.find('.mm-css-bg').each(function(index) {
marketingModules.fn.createPictureWithBG(t.attr('id'),$(this),index);
});
marketingModules.fn.registerSection(t);
});
},
initClickEvents: function() {
$("body").on( "click", ".mm-modal-trigger", function(event){
event.preventDefault();
var target = marketingModules.fn.configOption($(this).attr('data-mm-target'),'');
if(target !== '') {
var modal = $(target);
if(modal.length > 0) {
modal.modal('show');
}
}
});
},
deferTealium: function() {
if (typeof utag !== 'undefined') {
marketingModules.fn.checkVisibility();
} else {
marketingModules.tealiumChecks++;
if(marketingModules.tealiumChecks < 20) {
setTimeout(function() {
marketingModules.fn.deferTealium();
}, 50);
}
}
},
registerSection: function(t) {
marketingModules.sections.push(t);
if(marketingModules.state.init === false) {
marketingModules.fn.initScroll();
marketingModules.fn.initResize();
marketingModules.fn.initClickEvents();
marketingModules.state.init = true;
}
},
createPictureWithBG: function(parentID,target,index) {
var data = marketingModules.fn.dataAttributsToObj(target);
if(data['bgsrc'] && data['bgsrc'] !== '') {
var css = '';
target.addClass('bg-'+index);
var selector = '#'+parentID+' .bg-'+index;
css +='<style type="text/css">';
css += selector+'{background-image:url('+data['bgsrc']+');}';
marketingModules.fn.setAspectRatios(target, data['bgsrc'], 'lg');
if(data['bgsrc2x'] && data['bgsrc2x'] !== '') {
css += '@media only screen and (min-resolution: 200dpi){'+selector+'{background-image:url('+data['bgsrc2x']+');}}';
}
if(data['bgsrcmd'] && data['bgsrcmd'] !== '') {
css += '@media only screen and '+marketingModules.mediaQueries.md+'{'+selector+'{background-image:url('+data['bgsrcmd']+');}}';
marketingModules.fn.setAspectRatios(target, data['bgsrcmd'], 'md');
} else {
css += '@media only screen and '+marketingModules.mediaQueries.md+'{'+selector+'{background: none;}}';
}
if(data['bgsrcsm'] && data['bgsrcsm'] !== '') {
css += '@media only screen and '+marketingModules.mediaQueries.sm+'{'+selector+'{background-image:url('+data['bgsrcsm']+');}}';
marketingModules.fn.setAspectRatios(target, data['bgsrcsm'], 'sm');
} else {
css += '@media only screen and '+marketingModules.mediaQueries.sm+'{'+selector+'{background: none;}}';
}
css += '</style>';
target.append(css);
} else {
//console.log('data-bg-src is required');
}
},
dataAttributsToObj: function(target) {
var data = target.get(0).dataset;
data = JSON.parse(JSON.stringify(data));
return data;
},
initScroll: function() {
var scrollTimeout;
$(document).scroll(function() {
if(scrollTimeout) {
window.clearTimeout(scrollTimeout);
}
scrollTimeout = window.setTimeout(function() {
marketingModules.fn.checkVisibility();
}, 100);
});
},
isInViewport: function(target) {
var top = target.offset().top;
var bottom = target.offset().top + target.outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
if ((bottom_of_screen > top) && (top_of_screen < bottom)){
return true;
} else {
return false;
}
},
sendTealiumEvent: function(eventName, target) {
var event_val = '';
if (typeof utag !== 'undefined') {
if(typeof utag.data.page_name !== 'undefined') {
event_val += utag.data.page_name;
}
}
var eventModule = marketingModules.fn.configOption(target.attr('data-mm-type'),'');
if(eventModule !== '') {
event_val += ':'+eventModule;
}
var eventPosition = marketingModules.fn.configOption(target.attr('data-mm-page-position'),'');
if(eventPosition !== '') {
event_val += ':'+eventPosition;
}
var eventCustomTracking = marketingModules.fn.configOption(target.attr('data-mm-custom-tracking'),'');
if(eventCustomTracking !== '') {
event_val += ':'+eventCustomTracking;
}
if (typeof utag !== 'undefined') {
var utag_val = window.utag;
utag_val.link_name = eventName;
utag_val.event_name = event_val;
utag.link(utag_val);
//console.log('utag event: '+utag_val.link_name);
//console.log(utag_val);
} else {
//console.log('utag is undefined, cannot track '+eventName+' = [utag.data.page_name]'+event_val);
}
return true;
},
checkVisibility: function() {
$('.mm-section').not('.mm-section-track-visible,.mm-section-default-hidden').each(function( index ) {
if(marketingModules.fn.isInViewport($(this))) {
marketingModules.fn.sendTealiumEvent('mm_impression', $(this));
$(this).addClass('mm-section-track-visible');
}
});
},
initResize: function() {
var resizeTimeout;
var resizeResets = 0;
$( window ).resize(function() {
if(resizeTimeout) {
window.clearTimeout(resizeTimeout);
}
if(resizeResets > 10) {
resizeResets = 0;
marketingModules.fn.onResize();
}
resizeTimeout = window.setTimeout(function() {
resizeResets = 0;
marketingModules.fn.onResize();
}, 100);
});
},
onResize: function() {
$('.mm-css-bg').each(function(index) {
marketingModules.fn.checkAspectRatios($(this), '');
});
},
getActiveBreakpoint: function() {
var width = $(window).width();
var breakpoint = '';
if(width <= marketingModules.breakpoints.xs.max) {
breakpoint = 'xs';
} else if(width <= marketingModules.breakpoints.sm.max) {
breakpoint = 'sm';
} else if(width <= marketingModules.breakpoints.md.max) {
breakpoint = 'md';
} else if(width <= marketingModules.breakpoints.lg.max) {
breakpoint = 'lg';
} else {
breakpoint = 'xl';
}
return breakpoint;
},
checkAspectRatios: function(target, breakpoint) {
var curBreakpoint = marketingModules.fn.getActiveBreakpoint();
if(curBreakpoint == 'xl') {
curBreakpoint = 'lg';
} else if(curBreakpoint == 'xs') {
curBreakpoint = 'sm';
}
if(breakpoint == curBreakpoint || breakpoint == '') {
var dataName = 'data-mm-aspect-ratio';
if(curBreakpoint !== 'lg') {
dataName += '-'+curBreakpoint;
}
var aspectRatio = marketingModules.fn.configOption(target.attr(dataName),'');
if(aspectRatio !== '') {
var minHeight = target.width() * aspectRatio;
target.css('min-height', minHeight);
} else {
target.css('min-height', '');
}
}
},
setAspectRatios: function(target, src, breakpoint) {
var img = new Image();
img.onload = function() {
var dataName = 'data-mm-aspect-ratio';
var dataValue = '';
if(breakpoint !== 'lg') {
dataName += '-'+breakpoint;
}
var aspectRatio = this.height/this.width;
target.attr(dataName, aspectRatio);
marketingModules.fn.checkAspectRatios(target,breakpoint);
}
img.src = src;
}
}
marketingModules.fn.findSections();
$( document ).ready(function() {
marketingModules.fn.deferTealium();
});
}
/*!
* Wait for jQuery and Slick before Initializing
*/
function deferATRecommendation(method) {
if (window.jQuery) {
if(jQuery().slick) {
method();
return true;
}
}
setTimeout(function() { deferATRecommendation(method) }, 50);
}
deferATRecommendation(function(){
$.initialize("[data-at-mbox]", function(index){
if(!$(this).hasClass('at-mbox-init')) {
$(this).addClass('at-mbox-init');
var mboxName = $(this).attr('data-at-mbox');
var mboxObj = {
"mbox": mboxName,
"success": function(offers) {
adobe.target.applyOffer( {
"mbox": mboxName,
"offer": offers
} );
},
"error": function(status, error) {
if (console && console.log) {
console.log(status);
console.log(error);
}
},
"timeout": 5000
}
var params = {
filterRegHigh: "",
filterRegLow: "",
filterPromoHigh: "",
filterPromoLow: "",
filterOwnBrand: "",
filterCategory: "",
filterCategoryList: "",
filterDaysActive: "",
filterDaysPrice: "",
filterSellThru: "",
dtmcSearchString: "",
dtmcProductID: "",
categoryId: ""
};
if (typeof $(this).data('at-category') !== 'undefined') {
//Legacy support for FBO Homepage, attribute has been renamed to at-filter-category.
params.filterCategory = $(this).data('at-category');
}
if (typeof $(this).data('at-filter-reg-high') !== 'undefined') {
params.filterRegHigh = $(this).data('at-filter-reg-high');
}
if (typeof $(this).data('at-filter-reg-low') !== 'undefined') {
params.filterRegLow = $(this).data('at-filter-reg-low');
}
if (typeof $(this).data('at-filter-promo-high') !== 'undefined') {
params.filterPromoHigh = $(this).data('at-filter-promo-high');
}
if (typeof $(this).data('at-filter-promo-low') !== 'undefined') {
params.filterPromoLow = $(this).data('at-filter-promo-low');
}
if (typeof $(this).data('at-filter-own-brand') !== 'undefined') {
params.filterOwnBrand = $(this).data('at-filter-own-brand');
}
if (typeof $(this).data('at-filter-category') !== 'undefined') {
params.filterCategory = $(this).data('at-filter-category');
}
if (typeof $(this).data('at-filter-category-list') !== 'undefined') {
params.filterCategoryList = $(this).data('at-filter-category-list');
}
if (typeof $(this).data('at-filter-days-active') !== 'undefined') {
params.filterDaysActive = $(this).data('at-filter-days-active');
}
if (typeof $(this).data('at-filter-days-price') !== 'undefined') {
params.filterDaysPrice = $(this).data('at-filter-days-price');
}
if (typeof $(this).data('at-filter-sell-thru') !== 'undefined') {
params.filterSellThru = $(this).data('at-filter-sell-thru');
}
if (typeof $(this).data('at-dtmc-search-string') !== 'undefined') {
params.dtmcSearchString = $(this).data('at-dtmc-search-string');
}
if (typeof $(this).data('at-dtmc-product-id') !== 'undefined') {
params.dtmcProductID = $(this).data('at-dtmc-product-id');
}
if (typeof $(this).data('at-category-id') !== 'undefined') {
params.categoryId = $(this).data('at-category-id');
}
if(typeof utag_data !== 'undefined' && typeof utag_data.page_type !== 'undefined' && typeof utag_data.product_id !== 'undefined' && typeof utag_data.mini_sps_id !== 'undefined' ) {
if(utag_data.page_type.toLowerCase() == 'pdp') {
var entityID = utag_data.product_id[0];
if(utag_data.mini_sps_id[0] !== '') {
entityID = utag_data.mini_sps_id[0];
}
params["entity.id"] = entityID;
}
}
mboxObj.params = params;
var deferCount = 0;
function deferMBOX(method) {
deferCount++;
if (typeof adobe !== 'undefined' && typeof adobe.target !== 'undefined') {
method();
return true;
}
if(deferCount < 50) {
setTimeout(function() { deferMBOX(method) }, 50);
}
}
deferMBOX(function(){
adobe.target.getOffer(mboxObj);
}, 50);
}
});
/*!
* Recommendation Plugin
*/
if(!jQuery().createATRecommendation){
(function ($){
$.fn.createATRecommendation=function(options){
var settings=$.extend({
atRecommendationConfig: ""
}, options );
/*!
* Check if customer is an international shopper
*/
function checkInternationalCustomer() {
var isIntentionalShopper = false;
if(typeof utag_data !== 'undefined') {
if(typeof utag_data.user_country_ge !== 'undefined') {
if(utag_data.user_country_ge.toUpperCase() !== 'US') {
isIntentionalShopper = true;
}
}
}
return isIntentionalShopper;
}
/*!
* Get Page Type
*/
function getPageType() {
var pageType = '';
if(typeof utag_data !== 'undefined') {
if(typeof utag_data.page_type !== 'undefined') {
pageType = utag_data.page_type;
}
}
return pageType;
}
/*!
* Get Relevant URL Paramaters
*/
function getSiteParamaters() {
var params = '';
var sitePrefMode = marketingModules.fn.configOption($('body').data('site-pref-mode'), 'Default');
var pdpTypeParamater = marketingModules.fn.getUrlParameter('hqp');
var finalSaleParamater = marketingModules.fn.getUrlParameter('isOutlet');
var isPDP = false;
if(getPageType() == 'pdp') {
isPDP = true;
}
if(isPDP) {
if(pdpTypeParamater == 'hclr' || pdpTypeParamater =='hbrw') {
params += 'hqp='+pdpTypeParamater;
} else if(finalSaleParamater == 'true') {
params += 'isOutlet=true';
}
}
return params;
}
/*!
* Get Site Mode
*/
function getItemTypes() {
var sitePrefMode = marketingModules.fn.configOption($('body').data('site-pref-mode'), 'Default');
var pdpTypeParamater = marketingModules.fn.getUrlParameter('hqp');
var finalSaleParamater = marketingModules.fn.getUrlParameter('isOutlet');
var types = {
FullPrice : true,
Clearance : true,
FinalSale : false
}
var isPDP = false;
var pdpType = 'FullPrice';
if(getPageType() == 'pdp') {
isPDP = true;
}
var isFinalSale = false;
if(isPDP && finalSaleParamater == 'true') {
pdpType = 'FinalSale';
}
if(pdpTypeParamater == 'hbrw') {
pdpType = 'Clearance';
}
if(sitePrefMode == 'Default') {
types = {
FullPrice : true,
Clearance : true,
FinalSale : false
}
if(pdpType == 'Clearance') {
types = {
FullPrice : true,
Clearance : true,
FinalSale : false
}
} else if(pdpType == 'FinalSale') {
types = {
FullPrice : false,
Clearance : true,
FinalSale : true
}
}
} else if(sitePrefMode == 'Phase2') {
types = {
FullPrice : true,
Clearance : false,
FinalSale : false
}
if(pdpType == 'Clearance') {
types = {
FullPrice : true,
Clearance : true,
FinalSale : false
}
} else if(pdpType == 'FinalSale') {
types = {
FullPrice : true,
Clearance : false,
FinalSale : false
}
}
} else if(sitePrefMode == 'Phase3') {
types = {
FullPrice : true,
Clearance : true,
FinalSale : false
}
if(pdpType == 'Clearance') {
types = {
FullPrice : false,
Clearance : true,
FinalSale : false
}
} else if(pdpType == 'FinalSale') {
types = {
FullPrice : true,
Clearance : true,
FinalSale : false
}
}
} else if(sitePrefMode == 'Rollback') {
types = {
FullPrice : true,
Clearance : false,
FinalSale : false
}
if(pdpType == 'Clearance') {
types = {
FullPrice : false,
Clearance : true,
FinalSale : false
}
} else if(pdpType == 'FinalSale') {
types = {
FullPrice : false,
Clearance : false,
FinalSale : true
}
}
}
return types;
}
/*!
* Pull configuration options from container
*/
function getConfigOptions(container) {
var config = {
layout: marketingModules.fn.configOption(container.data('at-layout'), 'carousel'), //carousel, carousel-compact, carousel-vertical, carousel-vertical-compact
filterCategory: marketingModules.fn.configOption(container.data('at-filter-category'), ''),
filterCategoryList: marketingModules.fn.configOption(container.data('at-filter-category-list'), ''),
filterRegHigh: marketingModules.fn.configOption(container.data('at-filter-reg-high'), ''),
filterRegLow: marketingModules.fn.configOption(container.data('at-filter-reg-low'), ''),
filterPromoHigh: marketingModules.fn.configOption(container.data('at-filter-promo-high'), ''),
filterPromoLow: marketingModules.fn.configOption(container.data('at-filter-promo-low'), ''),
filterOwnBrand: marketingModules.fn.configOption(container.data('at-filter-own-brand'), ''),
filterDaysActive: marketingModules.fn.configOption(container.data('at-filter-days-active'), ''),
filterDaysPrice: marketingModules.fn.configOption(container.data('at-filter-days-price'), ''),
filterSellThru: marketingModules.fn.configOption(container.data('at-filter-sell-thru'), ''),
/*filterColorList: marketingModules.fn.configOption(container.data('at-filter-color-list'), ''),
filterColorGroupList: marketingModules.fn.configOption(container.data('at-filter-color-group-list'), ''),
filterSizeList: marketingModules.fn.configOption(container.data('at-filter-size-list'), ''),
filterShoesWidthList: marketingModules.fn.configOption(container.data('at-filter-shoes-width-list'), ''),
filterIntimatesCupSize: marketingModules.fn.configOption(container.data('at-filter-intimates-cup-size'), ''),
filterIntimatesBand: marketingModules.fn.configOption(container.data('at-filter-intimates-band'), ''),*/
xlSlideCount: marketingModules.fn.configOption(container.data('at-xl-slide-count'), 5),
lgSlideCount: marketingModules.fn.configOption(container.data('at-lg-slide-count'), 5),
mdSlideCount: marketingModules.fn.configOption(container.data('at-md-slide-count'), 3.5),
smSlideCount: marketingModules.fn.configOption(container.data('at-sm-slide-count'), 2.5),
xsSlideCount: marketingModules.fn.configOption(container.data('at-xs-slide-count'), 2.5),
imageWidth: marketingModules.fn.configOption(container.data('at-image-width'), 200),
fullWidth: marketingModules.fn.configOption(container.data('at-full-width'), false),
controlPosition: marketingModules.fn.configOption(container.data('at-control-position'), 'default'),
itemCount: marketingModules.fn.configOption(container.data('at-item-count'), 14),
removeContent: marketingModules.fn.configOption(container.data('at-remove-content'), false),
headline: marketingModules.fn.configOption(container.data('at-headline'), ''),
headlineCSSClasses: marketingModules.fn.configOption(container.data('at-headline-css-classes'), 'h4'),
targetDivID: marketingModules.fn.configOption(container.data('at-div-target-id'), ''),
showPricing: marketingModules.fn.configOption(container.data('at-show-pricing'), true),
sfccPricing: marketingModules.fn.configOption(container.data('at-sfcc-pricing'), 'international'),
showRatings: marketingModules.fn.configOption(container.data('at-ratings'), false),
showProductName: marketingModules.fn.configOption(container.data('at-product-name'), true),
showDuplicates: marketingModules.fn.configOption(container.data('at-show-duplicates'), false),
showSavings: marketingModules.fn.configOption(container.data('at-show-savings'), false),
showBrandName: marketingModules.fn.configOption(container.data('at-brand-name'), true),
showAvailableColors: marketingModules.fn.configOption(container.data('at-available-colors'), false),
linkProductDetails: marketingModules.fn.configOption(container.data('at-link-product-details'), false),
checkInternationalAvailablity: marketingModules.fn.configOption(container.data('at-check-intenational-availability'), true),
recommendingLocation: marketingModules.fn.configOption(container.data('at-recommending-location'), rec.target),
recommendingName: marketingModules.fn.configOption(container.data('at-recommending-name'), ''),
hpid: marketingModules.fn.configOption(container.data('at-hpid'), ''),
promoImage: marketingModules.fn.configOption(container.data('at-promo-image'), ''),
promoAlt: marketingModules.fn.configOption(container.data('at-promo-alt'), ''),
promoURL: marketingModules.fn.configOption(container.data('at-promo-url'), ''),
promoAriaLabel: marketingModules.fn.configOption(container.data('at-promo-aria-label'), ''),
categoryBtnLinkCTA: marketingModules.fn.configOption(container.data('at-category-btn-link-cta'), ''),
categoryBtnLinkURL: marketingModules.fn.configOption(container.data('at-category-btn-link-url'), ''),
categoryBtnLinkAriaLabel: marketingModules.fn.configOption(container.data('at-category-btn-link-aria-label'), ''),
categoryTextLinkCTA: marketingModules.fn.configOption(container.data('at-category-text-link-cta'), ''),
categoryTextLinkURL: marketingModules.fn.configOption(container.data('at-category-text-link-url'), ''),
categoryTextLinkAriaLabel: marketingModules.fn.configOption(container.data('at-category-text-link-aria-label'), ''),
itemTypes: marketingModules.fn.configOption(container.data('at-product-types'), ''),
itemURLParamaters: marketingModules.fn.configOption(container.data('at-url-paramaters'), ''),
}
if(config.itemTypes == '') {
//If a pricingMode isn't explicitly set use the default values
config.itemTypes = window.atRecommendations.vars.itemTypes;
} else {
var itemTypes = {
FullPrice : false,
Clearance : false,
FinalSale : false
}
if(config.itemTypes.indexOf('Browse') > -1) {
itemTypes.FullPrice = true;
}
if(config.itemTypes.indexOf('Clearance') > -1) {
itemTypes.Clearance = true;
}
if(config.itemTypes.indexOf('Final Sale') > -1) {
itemTypes.FinalSale = true;
}
if(itemTypes.FullPrice === true || itemTypes.Clearance === true || itemTypes.FinalSale === true) {
config.itemTypes = window.atRecommendations.vars.itemTypes;
} else {
config.itemTypes = window.atRecommendations.vars.itemTypes;
}
}
if(config.itemURLParamaters == '') {
config.itemURLParamaters = window.atRecommendations.vars.urlParamaters;
}
if(config.filterCategory == '') {
//Legacy support for FBO Homepage, attribute has been renamed to at-filter-category.
config.filterCategory = marketingModules.fn.configOption(container.data('at-category'), '');
}
if(typeof container.data('at-remove-content') === 'undefined') {
if(container.contents().length == 0) {
config.removeContent = true;
}
}
if($('body').hasClass('design-system')) {
config.showDuplicates = true;
}
return config;
}
/*!
* Convert a text string to a CSS class
*/
function makeCSSClassName(name) {
name = name.replace(/ /g, '-')
name = name.toLowerCase();
name = name.replace(/\.|%[0-9a-z]{2}/gi, '');
return name;
}
Array.max = function( array ){
return Math.max.apply( Math, array );
};
Array.min = function( array ){
return Math.min.apply( Math, array );
};
function validPrice(price) {
if(parseFloat(price) > 0) {
return true;
}
return false;
}
/*!
* Returns the low sale price, high sale price, low list price, and high list price based on the relevant item price groups.
*/
function getItemPriceRanges(config, item, format) {
//Applicable price range values get pushed to these arrays for comparison
var listPriceLowValues = [];
var listPriceHighValues = [];
var salePriceLowValues = [];
var salePriceHighValues = [];
if(config.itemTypes.FullPrice === true && parseFloat(item.browse_availablecolors) > 0) {
if(item.hasOwnProperty('browse_item_listpricelow') && validPrice(item.browse_item_listpricelow)) {
listPriceLowValues.push(parseFloat(item.browse_item_listpricelow));
}
if(item.hasOwnProperty('browse_item_listpricehigh') && validPrice(item.browse_item_listpricehigh)) {
listPriceHighValues.push(parseFloat(item.browse_item_listpricehigh));
}
if(item.hasOwnProperty('browse_item_salepricelow') && validPrice(item.browse_item_salepricelow)) {
salePriceLowValues.push(parseFloat(item.browse_item_salepricelow));
}
if(item.hasOwnProperty('browse_item_salepricehigh') && validPrice(item.browse_item_salepricehigh)) {
salePriceHighValues.push(parseFloat(item.browse_item_salepricehigh));
}
}
if(config.itemTypes.Clearance === true && parseFloat(item.clearance_availablecolors) > 0) {
if(item.hasOwnProperty('clearance_item_listpricelow') && validPrice(item.clearance_item_listpricelow)) {
listPriceLowValues.push(parseFloat(item.clearance_item_listpricelow));
}
if(item.hasOwnProperty('clearance_item_listpricehigh') && validPrice(item.clearance_item_listpricehigh)) {
listPriceHighValues.push(parseFloat(item.clearance_item_listpricehigh));
}
if(item.hasOwnProperty('clearance_item_salepricelow') && validPrice(item.clearance_item_salepricelow)) {
salePriceLowValues.push(parseFloat(item.clearance_item_salepricelow));
}
if(item.hasOwnProperty('clearance_item_salepricehigh') && validPrice(item.clearance_item_salepricehigh)) {
salePriceHighValues.push(parseFloat(item.clearance_item_salepricehigh));
}
}
if(config.itemTypes.FinalSale === true && parseFloat(item.final_sale_availablecolors) > 0) {
if(item.hasOwnProperty('final_sale_item_listpricelow') && validPrice(item.final_sale_item_listpricelow)) {
listPriceLowValues.push(parseFloat(item.final_sale_item_listpricelow));
}
if(item.hasOwnProperty('final_sale_item_listpricehigh') && validPrice(item.final_sale_item_listpricehigh)) {
listPriceHighValues.push(parseFloat(item.final_sale_item_listpricehigh));
}
if(item.hasOwnProperty('final_sale_item_salepricelow') && validPrice(item.final_sale_item_salepricelow)) {
salePriceLowValues.push(parseFloat(item.final_sale_item_salepricelow));
}
if(item.hasOwnProperty('final_sale_item_salepricehigh') && validPrice(item.final_sale_item_salepricehigh)) {
salePriceHighValues.push(parseFloat(item.final_sale_item_salepricehigh));
}
}
if(listPriceLowValues.length < 1) {
listPriceLowValues.push(parseFloat(item.item_listpricelow));
listPriceHighValues.push(parseFloat(item.item_listpricehigh));
salePriceLowValues.push(parseFloat(item.item_salepricelow));
salePriceHighValues.push(parseFloat(item.item_salepricehigh));
}
var ranges = {
item_listpricelow : Array.min(listPriceLowValues),
item_listpricehigh : Array.max(listPriceHighValues),
item_salepricelow : Array.min(salePriceLowValues),
item_salepricehigh : Array.max(salePriceHighValues)
}
return ranges;
}
/*!
* Filter Recommendations and set the number of activeItems
*/
function filterRecsItems(rec, container, config) {
var isIntentionalShopper = checkInternationalCustomer();
var filteredRecItems = [];
for(var m=0; m<rec.items.length; m++) {
var item = rec.items[m];
if(item.isDuplicate && config.showDuplicates === false) {
continue;
}
if(item.sellableInternational !== 'T' && config.checkInternationalAvailablity && isIntentionalShopper) {
continue;
}
if(item.thumbnailPathUrl == '') {
continue;
}
if(filteredRecItems.length >= config.itemCount) {
break;
}
var hasItemsOfType = false;
if(item.hasOwnProperty('browse_availablecolors') && item.hasOwnProperty('browse_availablecolors') && item.hasOwnProperty('browse_availablecolors')) {
if(config.itemTypes.FullPrice === true && parseInt(item.browse_availablecolors) > 0) {
hasItemsOfType = true;
} else if(config.itemTypes.Clearance === true && parseInt(item.clearance_availablecolors) > 0) {
hasItemsOfType = true;
} else if(config.itemTypes.FinalSale === true && parseInt(item.final_sale_availablecolors) > 0) {
hasItemsOfType = true;
}
} else {
//No Browse Level Data - Data Science Engine Exception
hasItemsOfType = true;
}
if(!hasItemsOfType) {
continue;
}
//console.log(item);
filteredRecItems.push(item);
if(rec.hasOwnProperty('noDeduplication') && rec.noDeduplication === true) {
} else {
window.atRecommendations.productsDisplayed.push(item.id);
}
}
return(filteredRecItems);
}
/*!
* Appends a URL variable to an item
*/
function appeandItemParam(url,param) {
if(url.indexOf('?') > -1) {
url += '&';
} else {
url += '?';
}
url += param;
return url;
}
/*!
* Build carousel HTML
*/
function carouselHTML(rec, filteredRecItems, container, config, buildFunctions) {
var isIntentionalShopper = checkInternationalCustomer();
var sliderHTML = '';
var formatClass = 'recommendations-h';
var headingControlClass = '';
if(config.layout == 'carousel-vertical' || config.layout == 'carousel-vertical-compact') {
formatClass = 'recommendations-v';
}
var trackingHeadline = '';
if(config.headline !== '') {
trackingHeadline = config.headline;
} else {
trackingHeadline = config.recommendingName;
}
var headlineCSSClasses = config.headlineCSSClasses;
var engine = 'Adobe Target';
if(rec.hasOwnProperty('engine')) {
engine = rec.engine;
}
sliderHTML += '<div class="mm-carousel-wrapper js-rec-tracking '+formatClass+'" data-rec-location="'+config.recommendingLocation+'" data-rec-name="'+trackingHeadline+'" data-rec-engine="'+engine+'">';
if(config.headline !== '') {
if(config.controlPosition !== 'headline') {
sliderHTML += '<h2 class="mm-recommendation-heading recommendation-heading '+headlineCSSClasses+'">'+config.headline+'</h2>';
} else {
if(config.categoryTextLinkCTA !== '' && config.categoryTextLinkURL !== '') {
headingControlClass = ' mm-recommendation-heading-controls-category-text-link';
}
sliderHTML += '<div class="mm-recommendation-heading-controls'+headingControlClass+'">';
sliderHTML += '<h2 class="mm-recommendation-heading recommendation-heading '+headlineCSSClasses+'">'+config.headline+'</h2>';
sliderHTML += '<div class="mm-recommendation-controls-wrapper">';
if(config.categoryTextLinkCTA !== '' && config.categoryTextLinkURL !== '') {
sliderHTML += '<a href="'+config.categoryTextLinkURL+'" aria-label="'+config.categoryTextLinkAriaLabel+'" class="mm-recommendation-category-text-link">'+config.categoryTextLinkCTA+'</a>';
}
sliderHTML += '<div class="mm-recommendation-controls"></div>';
sliderHTML += '</div>';
sliderHTML += '</div>';
}
}
sliderHTML += '<div class="mm-recommendation-tiles">';
if(config.promoImage !== '') {
sliderHTML += '<div class="mm-promo-tile">';
if(config.promoURL !== '') {
sliderHTML += '<a href="'+config.promoURL+'" aria-label="'+config.promoAriaLabel+'">';
}
sliderHTML += '<img src="'+config.promoImage+'" alt="'+config.promoAlt+'">';
if(config.promoURL !== '') {
sliderHTML += '</a>';
}
sliderHTML += '</div>';
}
container.find('.mm-default-slide').each(function(index) {
sliderHTML += $('<div>').append($(this).clone()).removeClass('mm-default-slide-hidden').html();
$(this).addClass('mm-default-slide-hidden');
});
for(var m=0; m<filteredRecItems.length; m++) {
var item = filteredRecItems[m];
var salePriceRange = '';
var originalPriceRange = '';
var imageWidth = config.imageWidth;
var hasLink = true;
var priceRanges = getItemPriceRanges(config, item,'at');
var itemHref = item.pageUrl;
var itemColors = 0;
var foundItem = false;
if(config.itemTypes.FullPrice && parseFloat(item.browse_availablecolors) > 0) {
itemColors += parseFloat(item.browse_availablecolors);
if(foundItem === false) {
itemHref = appeandItemParam(itemHref, 'dwvar_'+item.id+'_color='+item.browse_color_id);
foundItem = true;
}
}
if(config.itemTypes.Clearance && parseFloat(item.clearance_availablecolors) > 0) {
itemColors += parseFloat(item.clearance_availablecolors);
if(foundItem === false) {
itemHref = appeandItemParam(itemHref, 'dwvar_'+item.id+'_color='+item.clearance_color_id);
foundItem = true;
}
}
if(config.itemTypes.FinalSale && parseFloat(item.final_sale_availablecolors) > 0) {
itemColors += parseFloat(item.final_sale_availablecolors);
if(foundItem === false) {
itemHref = appeandItemParam(itemHref, 'dwvar_'+item.id+'_color='+item.final_sale_color_id);
foundItem = true;
}
}
if(!item.hasOwnProperty('browse_availablecolors') && !item.hasOwnProperty('clearance_availablecolors') && !item.hasOwnProperty('final_sale_availablecolors')) {
itemColors = 1; //Data Science Exception
}
if(itemColors < 1) {
continue;
}
if(priceRanges.item_salepricelow < priceRanges.item_salepricehigh) {
salePriceRange = buildFunctions.formatSFCCPrice(priceRanges.item_salepricelow)+' - '+buildFunctions.formatSFCCPrice(priceRanges.item_salepricehigh);
} else {
salePriceRange = buildFunctions.formatSFCCPrice(priceRanges.item_salepricelow);
}
if(priceRanges.item_listpricelow < priceRanges.item_listpricehigh) {
originalPriceRange = buildFunctions.formatSFCCPrice(priceRanges.item_listpricelow)+' - '+buildFunctions.formatSFCCPrice(priceRanges.item_listpricehigh);
} else {
originalPriceRange = buildFunctions.formatSFCCPrice(priceRanges.item_listpricelow);
}
if(config.lgSlideCount < 5 && imageWidth == 200) {
imageWidth = 450;
}
if(config.layout !== 'carousel' && config.layout !== 'carousel-vertical' && !config.linkProductDetails) {
hasLink = false;
}
if(config.hpid !== '' && config.hpid.indexOf('|CTA|') > -1) {
itemHref = appeandItemParam(itemHref, 'HPID='+config.hpid.replace('|CTA|', '|CTA'+(m+1)+'|'));
}
if(config.itemURLParamaters !== '') {
itemHref = appeandItemParam(itemHref, config.itemURLParamaters);
}
if(!config.itemTypes.FullPrice) {
if(config.itemTypes.Clearance && item.clearance_color_id !== '') {
itemHref = appeandItemParam(itemHref, 'dwvar_'+item.id+'_color='+item.clearance_color_id);
} else if(config.itemTypes.FinalSale && item.final_sale_color_id !== '') {
itemHref = appeandItemParam(itemHref, 'dwvar_'+item.id+'_color='+item.final_sale_color_id);
}
}
// Getting price range for aria-label usage (11/11)
var priceRanges = getItemPriceRanges(config, item,'at');
sliderHTML += '<div class="mm-slide-container">';
var productAriaText;
if (parseFloat(item.rating) >= 3 && config.showRatings === true){
productAriaText = 'Shop '+item.name+', prices starting from $'+ priceRanges.item_salepricelow +', rated '+ parseFloat(item.rating) +' out of 5';
} else {
productAriaText = 'Shop '+item.name+', prices starting from $'+ priceRanges.item_salepricelow +'';
}
sliderHTML += '<div class="at-recommendation mm-product-tile mm-product-tile-brand-'+item.own+'" data-itemid="'+item.id+'" data-monetate-pid="'+item.id+'" data-monetate-producturl="'+itemHref+'" data-at-layout="'+config.layout+'" style="max-width:'+imageWidth+'px;">';
sliderHTML += '<a class="js-rec-tracking-product" href="'+itemHref+'" title="" aria-label="'+productAriaText+'">';
sliderHTML += '<div class="product-name-image-container">';
sliderHTML += '<div class="mm-product-image" title="'+item.name+'" aria-hidden="true">';
sliderHTML += ' <img src="'+buildFunctions.getProductImage(item, config)+'" alt=""/>';
sliderHTML += '</div>';
sliderHTML += '</div>';
sliderHTML += '<div class="mm-product-details">';
/* Wrapping entire recommendation slide in <a> instead for easier ADA regulations.
if(hasLink) {
sliderHTML += '<a class="js-rec-tracking-product" href="'+itemHref+'" title="">';
}
*/
if(config.showProductName && (config.layout == 'carousel' || config.layout == 'carousel-vertical')) {
sliderHTML += '<div class="mm-product-name">'+buildFunctions.formatProductName(item.name)+'</div>';
}
/* Wrapping entire recommendation slide in <a> instead for easier ADA regulations.
if(!config.linkProductDetails && hasLink) {
sliderHTML += '</a>'
}
*/
if(config.showRatings) {
sliderHTML += buildFunctions.getReviewsHTML(item.rating);
}
if(config.showBrandName) {
sliderHTML += '<div class="mm-product-brand">'+item.brandname+'</div>';
}
if((config.layout == 'carousel-compact' || config.layout == 'carousel-vertical-compact' ) && config.showPricing === true) {
sliderHTML += '<div class="mm-product-pricing my-2">';
if(config.sfccPricing === false || (config.sfccPricing == 'international' && isIntentionalShopper === false)) {
sliderHTML += buildFunctions.priceBlockHTML(config, priceRanges, '$', 'USD');
}
sliderHTML += '</div>';
}
if(config.showProductName && (config.layout == 'carousel-compact' || config.layout == 'carousel-vertical-compact' )) {
sliderHTML += '<div class="mm-product-name is-product-brand">'+buildFunctions.formatProductName(item.name)+'</div>';
}
if((config.layout == 'carousel' || config.layout == 'carousel-vertical') && config.showPricing === true) {
sliderHTML += '<div class="mm-product-pricing">';
if(config.sfccPricing === false || (config.sfccPricing == 'international' && isIntentionalShopper === false)) {
sliderHTML += buildFunctions.priceBlockHTML(config, priceRanges, '$', 'USD');
}
sliderHTML += '</div>';
}
/* Color Display Disabled By Request
if(config.showAvailableColors) {
if(itemColors > 1) {
sliderHTML += '<div class="mm-product-available-colors text-muted">'+itemColors+' Colors</div>';
}
}
*/
/* Wrapping entire recommendation slide in <a> instead for easier ADA regulations.
if(config.linkProductDetails && hasLink) {
sliderHTML += '</a>';
}
*/
sliderHTML += '</div>';
sliderHTML += '</a>';
sliderHTML += '</div>';
sliderHTML += '</div>';
}
sliderHTML += '</div>';
if(config.categoryBtnLinkCTA !== '' && config.categoryBtnLinkURL !== '') {
sliderHTML += '<div class="mm-recommendation-btn-container">';
sliderHTML += '<button class="btn btn-outline-primary w-100 w-md-auto btn-sm" href="'+config.categoryBtnLinkURL+'" aria-label="'+config.categoryBtnLinkAriaLabel+'">'+config.categoryBtnLinkCTA+'</button>';
sliderHTML += '</div>';
}
sliderHTML += '</div>';
return sliderHTML;
}
/*!
* API Call to SFCC for Pricing
* Required any time prices need to be displayed in international currencies
*/
function sfccPriceCheck(filteredRecItems) {
var items = [];
for(var m=0; m<filteredRecItems.length; m++) {
items.push({"ID": filteredRecItems[m].id});
}
if(items.length > 0) {
var priceAPIURL = '/on/demandware.store/Sites-oss-Site/default/MegaNavProductRecomm-MegaNavProductJson';
$.ajax({
url: priceAPIURL,
type: 'post',
dataType : 'json',
contentType: 'application/json',
data: JSON.stringify(items),
success: function(data) {
if (data.length === 0 || data.itemsList.length === 0) {
return;
}
for(var i=0; i<data.itemsList.length;i++) {
var tiles = $('.mm-product-tile[data-itemid="'+data.itemsList[i].ID+'"]');
if(parseInt(data.itemsList[i].item_salepricelow)) {
tiles.each(function(index) {
var config = getConfigOptions($(this).closest('.at-rec-options'));
var priceRanges = getItemPriceRanges(config, data.itemsList[i],'api');
var html = buildFunctions.priceBlockHTML(config, priceRanges, data.itemsList[i].currencySymbol, data.itemsList[i].currencyCode);
$(this).find('.mm-product-pricing').html(html);
});
}
}
$('.mm-recommendation-tiles').slick('refresh');
}
});
}
}
/*!
* Initilize carousels
*/
function initCarousels(recs, container, config) {
var recommendations = container.find(".mm-recommendation-tiles");
var tiles = recommendations.find('.mm-product-tile,.mm-default-slide');
var slideCounts = {
xl: config.xlSlideCount,
lg: config.lgSlideCount,
md: config.mdSlideCount,
sm: config.smSlideCount,
xs: config.xsSlideCount
}
if(container.hasClass('at-rec-has-promo-image')) {
slideCounts.xs = 1.5;
}
var isVertical = false;
if(config.layout == 'carousel-vertical' || config.layout == 'carousel-vertical-compact') {
isVertical = true;
}
if(tiles.length < slideCounts.md) {
slideCounts.md = tiles.length;
}
if(tiles.length < slideCounts.sm) {
slideCounts.sm = tiles.length;
}
if(tiles.length < slideCounts.lg) {
slideCounts.lg = tiles.length;
}
if(tiles.length < slideCounts.xl) {
slideCounts.xl = tiles.length;
}
recommendations.on('init', function(){
if($(this).prop('nodeName') == 'UL') {
$($(this).find("button.slick-prev, button.slick-next")).wrap("<li></li>");
}
});
recommendations.on('setPosition', function (event, slick) {
slick.$slides.css('height', '');
if(slick.options.vertical) {
var largestSlide = 0;
slick.$slides.each(function( index ) {
var curHeight = $(this).height();
if($(this).height() > largestSlide) {
largestSlide = curHeight;
}
});
if(largestSlide > 0) {
slick.$slides.css('height', largestSlide + 'px');
$(event.target).find('.slick-list').css('height', (largestSlide*slick.options.slidesToShow) + 'px');
}
}
var windowChangedWidth = false;
if(typeof slick.$slider.attr('data-window-width') !== 'undefined') {
if(parseFloat(slick.$slider.attr('data-window-width')) !== $(window).width()) {
windowChangedWidth = true;
slick.$slider.attr('data-window-width', $(window).width());
}
}
if(slick.$slider.hasClass('at-mixed-size-products') && !slick.options.vertical && ( windowChangedWidth || slick.$slider.attr('data-min-height') == 'init' )) {
var imgHeight = 0;
slick.$slider.find('.mm-product-image img').each(function( index ) {
var thisHeight = $(this).height();
if(thisHeight > imgHeight) {
imgHeight = thisHeight;
}
});
if(imgHeight > 0) {
slick.$slider.find('.mm-product-image').css('min-height', imgHeight);
slick.$slider.attr('data-min-height', imgHeight);
}
}
});
var slickSettings = {
slidesToShow: slideCounts.xl,
slidesToScroll: slideCounts.xl,
dots: false,
infinite: false,
vertical: isVertical,
verticalSwiping: false,
prevArrow: '<button type="button" class="btn-ds slick-prev" aria-label="Previous"><span class="sr-only">Previous</span></button>',
nextArrow: '<button type="button" class="btn-ds slick-next" aria-label="Next"><span class="sr-only">Next</span></button>',
responsive: [{
breakpoint: marketingModules.breakpoints.lg.max,
settings: {
slidesToShow: slideCounts.lg,
slidesToScroll: Math.floor(slideCounts.lg),
arrows: true,
vertical: isVertical,
swipe: true
}
}, {
breakpoint: marketingModules.breakpoints.md.max,
settings: {
slidesToShow: slideCounts.md,
slidesToScroll: Math.floor(slideCounts.md),
arrows: false,
vertical: false,
swipe: true
}
}, {
breakpoint: marketingModules.breakpoints.sm.max,
settings: {
slidesToShow: slideCounts.sm,
slidesToScroll: Math.floor(slideCounts.sm),
arrows: false,
vertical: false,
swipe: true
}
}, {
breakpoint: marketingModules.breakpoints.xs.max,
settings: {
slidesToShow: slideCounts.xs,
slidesToScroll: Math.floor(slideCounts.xs),
arrows: false,
vertical: false,
swipe: true
}
}]
}
if(config.controlPosition !== '' && container.find(".mm-recommendation-controls").length > 0) {
slickSettings["appendArrows"] = container.find(".mm-recommendation-controls").first();
}
recommendations.slick(slickSettings);
$(".slick-track").attr('role', 'list');
$(".slick-slide").attr('role', 'listitem');
/*!
* Refresh carousels after images load
* Determines if there is a mix of image aspect ratios
*/
var refreshTimer;
recommendations.find("img").one("load", function(recommendations) {
clearTimeout(refreshTimer);
refreshTimer = setTimeout(function(t) {
var parent = t.closest(".mm-recommendation-tiles");
var imgHeight = 0;
parent.find('.mm-product-image img').each(function( index ) {
var thisHeight = $(this).height();
if(thisHeight > imgHeight && imgHeight == 0) {
imgHeight = thisHeight;
} else if(thisHeight !== imgHeight && imgHeight !== 0) {
parent.addClass('at-mixed-size-products').attr('data-window-width', $(window).width()).attr('data-min-height', 'init');
return false;
}
});
parent.slick('setPosition');
},250, $(this));
});
}
/*!
* buildFunctions is a set of reusable utility functions available for generating recommendation HTML
*/
var buildFunctions = {
getReviewsHTML: function(reviewAverage) {
/*!
* Return HTML for rating stars based on numeric value
*/
if(reviewAverage) {
reviewAverage = parseFloat(reviewAverage);
}
var html = '';
if(reviewAverage >= 3) {
html += '<div class="mm-rating" data-rating="'+reviewAverage+'" role="img" aria-label="Rated '+reviewAverage+' out of 5">';
for(var i=1; i<6; i++) {
if(i-.25 <= reviewAverage) {
html += '<svg class="icon-size-sm rating-star-icon--full" aria-hidden="true"><use href="#rating-star--full"></use></svg>';
} else if(i-.74 <= reviewAverage) {
html += '<svg class="icon-size-sm rating-star-icon--half" aria-hidden="true"><use href="#rating-star--half"></use></svg>';
} else {
html += '<svg class="icon-size-sm rating-star-icon--empty" aria-hidden="true"><use href="#rating-star--empty"></use></svg>';
}
}
html += '</div>';
} else {
html = '<div class="mm-rating mm-rating-empty"></div>';
}
return html;
},
priceBlockHTML: function(config, priceRanges, currencySymbol, currencyCode) {
//listLow, listHigh, saleLow, saleHigh
/*!
* Generates pricing block
*/
var item_salepricelow = this.formatSFCCPrice(priceRanges.item_salepricelow);
var price_split = item_salepricelow.split('.');
var dollars = price_split[0];
dollars = this.numberWithCommas(dollars);
var cents = price_split[1];
if(cents.length < 2) { cents = cents + '0'; }
var currencySymbolUse = '$';
var currencyCodeUse = 'USD';
var salePriceRange = '';
var originalPriceRange = '';
if(typeof currencySymbol !== 'undefined') {
currencySymbolUse = currencySymbol;
}
if(typeof currencyCode !== 'undefined') {
currencyCodeUse = currencySymbol;
}
if(priceRanges.item_salepricelow < priceRanges.item_salepricehigh) {
salePriceRange = currencySymbolUse+this.formatSFCCPrice(priceRanges.item_salepricelow)+' - '+currencySymbolUse+this.formatSFCCPrice(priceRanges.item_salepricehigh);
} else {
salePriceRange = currencySymbolUse+this.formatSFCCPrice(priceRanges.item_salepricelow);
}
if(priceRanges.item_listpricelow < priceRanges.item_listpricehigh) {
originalPriceRange = currencySymbolUse+this.formatSFCCPrice(priceRanges.item_listpricelow)+' - '+currencySymbolUse+this.formatSFCCPrice(priceRanges.item_listpricehigh);
} else {
originalPriceRange = currencySymbolUse+this.formatSFCCPrice(priceRanges.item_listpricelow);
}
var html = '';
if(config.layout == 'carousel-compact' || config.layout == 'carousel-vertical-compact' ) {
html += '<span class="d-flex align-items-center mt-1 flex-wrap" title="Sale Price">';
html += '<span role="text" class="d-block d-md-inline-flex">';
html += '<div class="d-flex align-items-top mm-product-sales-price" title="Sale Price">';
html += '<span class="d-inline-flex align-items-top">';
if(priceRanges.item_salepricelow !== priceRanges.item_salepricehigh) {
html += '<span class="mm-price-from-text small mr-1">From </span>';
}
html += '<span class="d-flex align-items-top" aria-label="Sale price: '+currencyCodeUse+' '+dollars+'.'+cents+'" class="mm-product-standard-price">';
html += '<span class="mm-price-curreny-symbol small">'+currencySymbolUse+'</span>';
html += '<span class="mm-price-currency-text font-weight-bold">'+dollars+'</span>';
html += '<span class="mm-price-cents-text small mr-1">'+cents+'</span>';
html += '</span>';
html += '</span>';
html += '</div>';
} else {
if(priceRanges.item_listpricelow > priceRanges.item_salepricelow) {
html += '<span title="Standard Price"><span role="text" aria-label="Original price: '+originalPriceRange+'" class="mm-product-standard-price"> '+originalPriceRange+'</span></span>';
}
html += '<span title="Sale Price"><span role="text" aria-label="Sale price: '+salePriceRange+'" class="mm-product-sales-price">'+salePriceRange+'</span></span>';
}
var upTo = 'up to';
if (!Math.trunc) {
Math.trunc = function (v) {
return v < 0 ? Math.ceil(v) : Math.floor(v);
};
}
if(config.showSavings == 'dollar' && config.layout != 'carousel-vertical-compact') {
var dollarDifference = Math.trunc((priceRanges.item_listpricelow - priceRanges.item_salepricelow).toFixed(2));
if(dollarDifference > 0) {
dollarDifference = this.numberWithCommas(dollarDifference);
html += '<span class="mm-plp-save-message d-inline-flex small text-sale">Save '+upTo+' '+currencySymbolUse+dollarDifference+'</span>';
}
} else if(config.showSavings == 'percentage' && config.layout != 'carousel-vertical-compact') {
var percentage = Math.trunc(((priceRanges.item_listpricelow - priceRanges.item_salepricelow) / (priceRanges.item_listpricelow)) * 100);
if(percentage > 0) {
html += '<span class="mm-plp-save-message d-inline-flex small text-sale">Save '+upTo+' '+percentage+'%</span>';
}
}
if(config.layout == 'carousel-compact') {
html += '</span>';
html += '</span>';
} else if (config.layout == 'carousel-vertical-compact') {
html += '</span>';
html += '</span>';
if(config.showSavings == 'dollar') {
var dollarDifference = Math.trunc((priceRanges.item_listpricelow - priceRanges.item_salepricelow).toFixed(2));
if(dollarDifference > 0) {
dollarDifference = this.numberWithCommas(dollarDifference);
html += '<span class="mm-plp-save-message d-inline-flex small text-sale">Save '+upTo+' '+currencySymbolUse+dollarDifference+'</span>';
}
} else if(config.showSavings == 'percentage') {
var percentage = Math.trunc(((priceRanges.item_listpricelow - priceRanges.item_salepricelow) / (priceRanges.item_listpricelow)) * 100);
if(percentage > 0) {
html += '<span class="mm-plp-save-message d-inline-flex small text-sale">Save '+upTo+' '+percentage+'%</span>';
}
}
}
return html;
},
formatSFCCPrice: function(price) {
/*!
* SFCC returns numeric prices
* Prices ending in '0' or '00' are not formatted properly
* This function ensures that the cents maintain two decimal places
*/
price = price.toString();
if(price.length>0){
if(price.indexOf('.') > -1) {
var split = price.split('.');
if(split[1].length == 1) {
price = price+'0';
}
} else {
price = price+'.00';
}
}
return price;
},
numberWithCommas: function(x) {
/*!
* Format a number with commas for thousands
*/
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
getProductImage: function(item, config) {
/*!
* For the lower environments use absolute image URL, for production use relative image URL
* For carousels with 4 or fewer slides on desktop a larger image size is used
*/
var imageURL = item.thumbnailPathUrl;
if(window.location.href.indexOf('plussizetech.com') > -1 || $('body').hasClass('design-system') || window.location.href.indexOf('adobe.') > -1 ) {
imageURL = item.thumbnailUrl;
}
if(!config.itemTypes.FullPrice) {
if(config.itemTypes.Clearance && item.clearance_thumbnail !== '') {
imageURL = item.clearance_thumbnail;
} else if(config.itemTypes.FinalSale && item.final_sale_thumbnail !== '') {
imageURL = item.final_sale_thumbnail;
}
}
if(config.lgSlideCount < 5) {
imageURL = imageURL.replace('sw=200&sh=288', 'sw=450&sh=648')
}
//HOTFIX
if(imageURL.indexOf('?') > -1) {
imageURL += '&cc=true';
} else {
imageURL += '?cc=true';
}
return imageURL;
},
formatProductName: function(x) {
/*!
* Formats the product name
*/
x = x.replace(/â[\u0084]¢/g, '<sup>™</sup>');
x = x.replace(/u00e2u0084u00a2/g, '<sup>™</sup>');
x = x.replace(/00c3u00a9/g, 'é');
x = x.replace(/u00c2u00ae/g, '<sup>®</sup>');
x = x.replace(/00c2u00ae/g, '<sup>®</sup>');
x = x.replace(/®/g, '<sup>®</sup>');
x = x.replace(/\u00ae/g, '<sup>®</sup>');
x = x.replace(/\u00a9/g, '<sup>©</sup>');
return x;
}
}
/*!
* Process a recommendation
*/
function processRecs(rec) {
var recSelector = '';
if(rec.mbox !== '' && rec.mbox !== 'target-global-mbox') {
recSelector += '[data-at-mbox="'+rec.mbox+'"]';
recSelector += ',[data-at-auto-mbox="'+rec.mbox+'"]';
} else {
recSelector += '[data-at-recommendation="'+rec.target+'"]';
recSelector += ',[data-at-recommendation="'+rec.target.replace(/\s\s+/g, ' ')+'"]'; //Normalize recommendation names with multiple spaces
}
var containers = $(recSelector).not('.init-rec');
if(containers.length < 1) {
//console.log('Missing Recommendations Container '+recSelector);
}
containers.each(function( index ) {
var container = $(this);
//Set configuration options
var config = getConfigOptions(container);
var isIntentionalShopper = checkInternationalCustomer();
//Ensure only the designated category is targeted
if(config.filterCategory !== '' && config.filterCategory !== rec.filterCategory ) {
return true;
}
var deduplicatedItems = 0;
if(config.showDuplicates === false) {
for(var m=0; m<rec.items.length; m++) {
var item = rec.items[m];
if(window.atRecommendations.productsDisplayed.includes(item.id)) {
if(rec.hasOwnProperty('noDeduplication') && rec.noDeduplication === true) {
item.isDuplicate = false;
} else {
item.isDuplicate = true;
}
} else {
deduplicatedItems++;
item.isDuplicate = false;
}
}
}
if(deduplicatedItems > 0 || config.showDuplicates === true) {
var className = makeCSSClassName(rec.target);
var containerClasses = '';
if(config.fullWidth === true) {
containerClasses += ' mm-container-full-width';
}
var html = '<div class="mm-recommendation-container mm-container-'+className+' mm-carousel mm-layout-'+config.layout+' mm-control-position-'+makeCSSClassName(config.controlPosition)+containerClasses+'">';
html += '<div class="container">';
html += '<div class="row">';
html += '<div class="col">';
if(typeof window.atRecommendations.layouts[config.layout].buildHTML == "function") {
var filteredRecItems = filterRecsItems(rec,container,config);
rec.activeItems = filteredRecItems.length;
if(rec.activeItems > 0) {
rec.init = true;
rec.container = container;
html += window.atRecommendations.layouts[config.layout].buildHTML(rec,filteredRecItems,container,config,buildFunctions);
}
}
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
if(rec.activeItems > 0) {
container.removeClass('mm-section-default-hidden');
var inMMContainer = false;
var isMMContainer = false;
if(container.closest('.mm-section').length > 0) {
inMMContainer = true;
}
if(container.hasClass('mm-section')) {
isMMContainer = true;
}
container.closest('.mm-section').removeClass('mm-section-default-hidden');
var existingClasses = container.attr('class');
if(typeof existingClasses !== 'undefined') {
existingClasses = existingClasses.replace('mm-section','');
}
container.removeClass();
if(isMMContainer) {
container.addClass('mm-section');
}
container.addClass('init-rec').addClass('at-rec-options');
if(!inMMContainer) {
container.addClass('mm-section').attr('data-mm-type', 'Adobe Target Recommendation').attr('data-mm-custom-tracking', rec.target);
}
marketingModules.fn.registerSection($(this));
if(config.promoImage !== '') {
container.addClass('at-rec-has-promo-image');
}
container.closest('.home-content-1').removeClass('home-content-1'); //breaks click through
container.closest('.module-carousel').removeClass('module-carousel');
if(rec.mbox == 'add-to-cart-recs-mbox') {
$('.cart-recommendations .recommendation').remove();
}
if(config.targetDivID !== '' && container.find('#'+config.targetDivID).length > 0) {
if(existingClasses !== '' && typeof existingClasses !== 'undefined') {
existingClasses = existingClasses.replace('default-hidden','');
container.wrapInner('<div class="'+existingClasses+'"></div>');
}
container.find('#'+config.targetDivID).html(html);
} else if(config.removeContent) {
container.html(html);
} else if(inMMContainer === false ){
if(existingClasses !== '' && typeof existingClasses !== 'undefined') {
container.wrapInner('<div class="'+existingClasses+'"></div>');
}
container.append(html);
} else {
container.append(html);
}
if(config.sfccPricing === true || (config.sfccPricing == "international" && isIntentionalShopper)) {
sfccPriceCheck(filteredRecItems);
}
if(typeof window.atRecommendations.layouts[config.layout].init == "function") {
window.atRecommendations.layouts[config.layout].init(rec,container,config);
}
}
}
});
}
/*!
* Update Global atRecommendations Object
* The Add to Bag container isn't always in page when the recommendations are returned, so there is an option to delay processing the recommendations until a container is present.
*/
if (typeof window.atRecommendations === "undefined") {
window.atRecommendations = {
"productsDisplayed": [],
"recommendations": [],
"mboxSettings": [],
"layouts": {},
"vars": {
'pageType' : getPageType(),
'itemTypes' : getItemTypes(),
'urlParamaters' : getSiteParamaters()
}
};
/*!
* Add default layouts "carousel", "carousel-compact", "carousel-vertical", "carousel-vertical-compact"
* Each layout has a the following functions:
* - buildHTML: function to generate the HTML
* - init: fired after the HTML is added to the page, for carousels this is to activate slick slider
*/
window.atRecommendations.layouts['carousel'] = {
buildHTML: function(rec,filteredRecItems,container,config,buildFunctions) {
return carouselHTML(rec,filteredRecItems,container,config,buildFunctions);
},
init: function(rec,container,config) {
initCarousels(rec,container,config);
}
};
window.atRecommendations.layouts['carousel-compact'] = {
buildHTML: function(rec,filteredRecItems,container,config,buildFunctions) {
return carouselHTML(rec,filteredRecItems,container,config,buildFunctions);
},
init: function(rec,container,config) {
initCarousels(rec,container,config);
}
};
window.atRecommendations.layouts['carousel-vertical'] = {
buildHTML: function(rec,filteredRecItems,container,config,buildFunctions) {
return carouselHTML(rec,filteredRecItems,container,config,buildFunctions);
},
init: function(rec,container,config) {
initCarousels(rec,container,config);
}
};
window.atRecommendations.layouts['carousel-vertical-compact'] = {
buildHTML: function(rec,filteredRecItems,container,config,buildFunctions) {
return carouselHTML(rec,filteredRecItems,container,config,buildFunctions);
},
init: function(rec,container,config) {
initCarousels(rec,container,config);
}
};
}
if (typeof options.atRecommendationConfig.recommendations !== "undefined") {
if (typeof options.atRecommendationConfig.recommendations[0] !== "undefined") {
var rec = options.atRecommendationConfig.recommendations[0];
//Maintain Global atRecommendations Object
window.atRecommendations.recommendations.push(options.atRecommendationConfig.recommendations[0]);
var delayProcessingRecs = false;
if(rec.mbox !== 'target-global-mbox') { //Accomidate Tealium Triggered MBOX
if(window.atRecommendations.mboxSettings.length > 0) {
for(var i=0; i<window.atRecommendations.mboxSettings.length; i++) {
if(window.atRecommendations.mboxSettings[i].mbox == rec.mbox) {
var mboxSettings = window.atRecommendations.mboxSettings[i];
if(typeof mboxSettings.waitForNewContainer !== 'undefined' && typeof mboxSettings.container !== 'undefined') {
if(mboxSettings.waitForNewContainer == true) {
delayProcessingRecs = true;
}
}
break;
}
}
}
}
if(delayProcessingRecs === false) {
processRecs(rec);
} else {
var deferCount = 0;
function deferRec(method) {
deferCount++;
if($(mboxSettings.container).not('.init-rec').length > 0) {
method();
return true;
}
if(deferCount < 50) {
setTimeout(function() { deferRec(method) }, 50);
}
}
deferRec(function(){
var mboxContainer = $(mboxSettings.container);
mboxContainer.addClass('at-mbox-init');
mboxContainer.attr('data-at-auto-mbox', mboxSettings.mbox );
$.each( mboxSettings.attributes, function( key, value ) {
mboxContainer.attr(key, value);
});
processRecs(rec);
}, 3000);
}
}
}
return this;
};
}(jQuery));
}
});
});
</script>