Shop All Styles Best Sellers New Arrivals Water-Friendly Sandals Slip-On Shoes Leather Sandals Sandals plus minus Water-Friendly Sandals Leather Sandals Slide Sandals All Sandals Shoes plus minus Sneakers Slip-On Shoes Water-Friendly Leather Shoes Golf All Shoes Slippers plus minus Indoor/Outdoor Leather Slippers All Slippers Boots plus minus All Boots Sandals plus minus Water-Friendly Sandals Leather Sandals Slide Sandals All Sandals Shoes plus minus Sneakers Slip-On Shoes Water-Friendly Leather Shoes Golf All Shoes Slippers plus minus Indoor/Outdoor Slippers Leather Slippers All Slippers Boots plus minus All Boots Best Sellers New Arrivals Shop All Men's Warmer Days Ahead Shop Now
Sandals plus minus Water-Friendly Sandals Leather Sandals Slide Sandals All Sandals Shoes plus minus Sneakers Slip-On Shoes Water-Friendly Leather Shoes Golf All Shoes Slippers plus minus Indoor/Outdoor Leather Slippers All Slippers Boots plus minus All Boots
Sandals plus minus Water-Friendly Sandals Leather Sandals Slide Sandals All Sandals Shoes plus minus Sneakers Slip-On Shoes Water-Friendly Leather Shoes Golf All Shoes Slippers plus minus Indoor/Outdoor Slippers Leather Slippers All Slippers Boots plus minus All Boots Best Sellers New Arrivals
Shop All Styles Best Sellers New Arrivals Water-Friendly Sandals Leather Sandals Leather Sneakers Sandals plus minus Water-Friendly Sandals Leather Sandals Slide Sandals All Sandals Shoes plus minus Sneakers Slip-On Shoes Leather Shoes Golf All Shoes Slippers plus minus Indoor/Outdoor All Slippers Boots plus minus All Boots Sandals plus minus Water-Friendly Sandals Leather Sandals Slide Sandals All Sandals Shoes plus minus Sneakers Slip-On Shoes Leather Shoes Golf All Shoes Slippers plus minus Indoor/Outdoor All Slippers Boots plus minus All Boots Best Sellers New Arrivals Shop All Women's Warmer Days Ahead Shop Now
Sandals plus minus Water-Friendly Sandals Leather Sandals Slide Sandals All Sandals Shoes plus minus Sneakers Slip-On Shoes Leather Shoes Golf All Shoes Slippers plus minus Indoor/Outdoor All Slippers Boots plus minus All Boots
Sandals plus minus Water-Friendly Sandals Leather Sandals Slide Sandals All Sandals Shoes plus minus Sneakers Slip-On Shoes Leather Shoes Golf All Shoes Slippers plus minus Indoor/Outdoor All Slippers Boots plus minus All Boots Best Sellers New Arrivals
Best Sellers New Arrivals Shop All Men's Shop All Women's Company plus minus About Us Our Commitment Product Care Our Craft Stories plus minus We Go. The Path to the Eddie. Anywhere Aloha Films Blog Stories About Us
Company plus minus About Us Our Commitment Product Care Our Craft Stories plus minus We Go. The Path to the Eddie. Anywhere Aloha Films Blog Stories
{ e.preventDefault(); (product.variants && product.variants.length === 1) ? Cart.add({ id: product.variants[0].id, product_id: product.id, properties: { _compare_at_price: (product.compare_at_price > 0) ? (product.compare_at_price/100).toFixed(2) : null, _tags: product.tags } }) : QuickAdd.open(product, null, e); }" role="button" aria-label=" quick-add" > plus Quick Add quick-add { $dispatch('product-item:images-changed', { product: product, source: 'swatch-container' }) })" @pointercancel="intendedSwatchIndex = null; intendedSwatchEl = null" x-data="{ wrapper: $el, selectedSibling:product.siblings[0], intendedSwatchIndex: null, intendedSwatchEl: null, swatchGap: 8, scrollable: product.siblings.filter(s => !!s.available).length > 5.5, canPrev: false, canNext: true, _edgeReady: false, imageLimit: 0, limitImages(nextProduct) { const images = Array.isArray(nextProduct && nextProduct.images) ? nextProduct.images : []; const limitedImages = this.imageLimit > 0 ? images.slice(0, this.imageLimit) : images; const hoverImage = limitedImages[1] || null; return Object.assign({}, nextProduct, { images: limitedImages, hover_image: hoverImage ? hoverImage.src : null, hover_image_alt: hoverImage ? hoverImage.alt : null }); }, selectProduct(nextProduct) { const productRoot = $el.closest('.product-item'); const productData = productRoot && productRoot._x_dataStack && productRoot._x_dataStack[0]; if (productData && typeof productData.setProduct === 'function') { productData.setProduct(nextProduct); } else { $data.product = this.limitImages(nextProduct); } }, getSwatchImageSrc(sibling) { return sibling.images[0].src; }, buildSwatchSrcset(src) { if (!src) return ''; const widths = ['48', '96', '192']; const separator = src.includes('?') ? '&' : '?'; return widths.map(w => `${src}${separator}width=${w} ${w}w`).join(', '); }, isSwatchPriority(index) { return window.innerWidth >= 1024 ? index < 3 : index < 2; }, swatchBg(sibling) { // swatch_bg precomputed at hydration. Nullish (not ||): null = no colors set // (fall back to theme default), empty string = invalid combo, no fallback. return sibling.swatch_bg ?? '#000000'; }, centerSwatch(el) { if ($data.wrapper.scrollWidth <= $data.wrapper.clientWidth) return false const wrapperRect = $data.wrapper.getBoundingClientRect() const elRect = el.getBoundingClientRect() const centerPoint = wrapperRect.x + (wrapperRect.width / 2) const behavior = window.innerWidth < 1024 ? 'auto' : 'smooth' $data.wrapper.scrollTo({ left: $data.wrapper.scrollLeft + (elRect.x - centerPoint + (elRect.width / 2)), behavior }) }, selectSwatchFromTap(siblingIndex, el) { const idx = (this.intendedSwatchIndex !== null && this.intendedSwatchIndex !== undefined) ? this.intendedSwatchIndex : siblingIndex const targetEl = this.intendedSwatchEl || el this.intendedSwatchIndex = null this.intendedSwatchEl = null const next = product.siblings[idx] if (next) product = next this.centerSwatch(targetEl) }, scroll(direction = 'forward') { const swatch = $data.wrapper.querySelector('.product-item__swatch') const unit = swatch ? swatch.offsetWidth + $data.swatchGap : $data.wrapper.clientWidth * 0.3 let amount = 2 * unit $data.wrapper.scrollTo({ left: direction == 'forward' ? $data.wrapper.scrollLeft + amount : $data.wrapper.scrollLeft - amount, behavior:'smooth' }) }, // Lazily wire the prev/next edge detection on first desktop hover/focus — // the arrows are a desktop affordance, so no observer is built at load and // none is ever built on mobile. canPrev/canNext default to the at-start state. initSwatchEdges() { if (this._edgeReady || window.innerWidth <= 1023) return this._edgeReady = true const root = this.wrapper const swatches = root.querySelectorAll('.product-item__swatch') if (swatches.length < 2) return const first = swatches[0], last = swatches[swatches.length - 1] const io = new IntersectionObserver((entries) => { const d = window.Alpine && window.Alpine.$data ? window.Alpine.$data(root) : null if (!d) return entries.forEach((e) => { if (e.target === first) d.canPrev = !e.isIntersecting if (e.target === last) d.canNext = !e.isIntersecting }) }, { root, threshold: 0.99 }) io.observe(first) io.observe(last) root._swatchEdgeIO = io } }" @pointerenter="initSwatchEdges()" @focusin="initSwatchEdges()" > chevron-left Previous { $dispatch('product-item:images-changed', { product: product, source: 'swatch-click' }) })" > chevron-right Next