mm code
🧩 Syntax:
<!doctype html>
<html class="js" lang="{{ request.locale.iso_code }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
{% assign templatePrefix = template | replace: '.', ' ' | truncatewords: 1, '' | handle %}
{% if templatePrefix == 'collection' %}
{% if collection.handle == 'wood' or collection.handle == 'metallic-1' or collection.handle == 'black-1' or collection.handle == 'white-1' or collection.handle == 'decorative-style' %}
<meta name="robots" content="noindex">
{% endif %}
{% endif %}
<meta name="theme-color" content="">
<link rel="canonical" href="{{ canonical_url }}">
{%- if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{%- endif -%}
{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
{%- endunless -%}
<title>
{{ page_title }}
{%- if current_tags %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%}
{%- if current_page != 1 %} – Page {{ current_page }}{% endif -%}
{%- unless page_title contains shop.name %} – {{ shop.name }}{% endunless -%}
</title>
{% if page_description %}
<meta name="description" content="{{ page_description | escape }}">
{% endif %}
<script>
{% if cart.item_count > 0 %}
window.hasCartItems = true
{% else %}
window.hasCartItems = false
{% endif %}
</script>
{% render 'meta-tags' %}
<script src="{{ 'lazysizes.js' | asset_url }}" async></script>
<script src="{{ 'constants.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'pubsub.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'global.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'details-disclosure.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'details-modal.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'search-form.js' | asset_url }}" defer="defer"></script>
{%- if settings.animations_reveal_on_scroll -%}
<script src="{{ 'animations.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<!-- Add this to your theme.liquid file, before any CSS is loaded -->
<script>
// Create a function to load CSS asynchronously
function loadCSS(url) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
link.media = 'print';
link.onload = function() { this.media = 'all'; };
document.head.appendChild(link);
}
// Block all stylesheet requests and load them asynchronously
var originalCreateElement = document.createElement;
document.createElement = function(type) {
var element = originalCreateElement.call(document, type);
if (type.toLowerCase() === 'link') {
var originalSetAttribute = element.setAttribute;
element.setAttribute = function(name, value) {
if (name === 'rel' && value === 'stylesheet') {
var href;
setTimeout(function() {
href = element.getAttribute('href');
if (href) {
// Only load essential CSS files immediately
if (href.includes('base.css') || href.includes('custom.css')) {
originalSetAttribute.call(element, name, value);
} else {
// Load all other CSS asynchronously
loadCSS(href);
return;
}
}
}, 0);
}
return originalSetAttribute.call(element, name, value);
};
}
return element;
};
</script>
{{ content_for_header }}
<script type="text/javascript">
(function(d) {
var config = {
kitId: 'dnc3ktd',
scriptTimeout: 3000,
async: true
},
h = d.documentElement,
t = setTimeout(function() {
h.className = h.className.replace(/\bwf-loading\b/, '') + ' wf-inactive';
}, config.scriptTimeout),
tk = d.createElement('script'),
f = false,
s = d.getElementsByTagName('script')[0],
a;
h.className += ' wf-loading';
tk.src = 'https://use.typekit.net/' + config.kitId + '.js';
tk.type = 'text/javascript';
tk.async = true;
tk.onload = tk.onreadystatechange = function() {
a = this.readyState;
if (f || a && a != 'complete' && a != 'loaded') return;
f = true;
clearTimeout(t);
try {
Typekit.load(config);
} catch (e) {}
};
s.parentNode.insertBefore(tk, s);
})(document);
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 1. FORCE HERO IMAGES TO LOAD IMMEDIATELY
var heroSelectors = '.hero img, .slideshow img, .banner img, .slideshow__image, [class*="banner"] img, [class*="hero"] img';
var heroImages = document.querySelectorAll(heroSelectors);
heroImages.forEach(function(img) {
// If it's a background image, make sure it's visible
if (img.classList.contains('slideshow__image')) {
img.style.opacity = '1';
img.style.visibility = 'visible';
}
// Force eager loading
img.setAttribute('loading', 'eager');
img.setAttribute('fetchpriority', 'high');
// If image is in a carousel slide, make sure the slide is visible
var slide = img.closest('.slideshow__slide, .banner__slide');
if (slide) {
slide.classList.add('is-selected', 'active');
slide.style.opacity = '1';
slide.style.visibility = 'visible';
}
});
// Make slideshow containers visible
document.querySelectorAll('.slideshow, .banner, [class*="hero"]').forEach(function(container) {
container.classList.add('loaded', 'initialized');
});
if (typeof AOS !== 'undefined') {
// Disable AOS initialization
AOS.init({ disable: true });
}
document.querySelectorAll('[data-aos]').forEach(function(el) {
el.style.opacity = '1';
el.style.transform = 'none';
el.style.visibility = 'visible';
});
// 3. MAKE FADE-IN ELEMENTS VISIBLE IMMEDIATELY
if (typeof $ !== 'undefined') {
$('.fade-in-element').addClass('fade-in');
}
// 4. SET GSAP ANIMATIONS TO FINAL STATE
if (typeof gsap !== 'undefined') {
gsap.set(".hero-title", {opacity: 1, y: 0});
}
// 5. MAKE ALL ANIMATE-ON-LOAD ELEMENTS VISIBLE
document.querySelectorAll('.animate-on-load').forEach(function(el) {
el.classList.add('visible');
});
}, {once: true});
</script>
{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}
{% style %}
{{ settings.type_body_font | font_face: font_display: 'swap' }}
{{ body_font_bold | font_face: font_display: 'swap' }}
{{ body_font_italic | font_face: font_display: 'swap' }}
{{ body_font_bold_italic | font_face: font_display: 'swap' }}
{{ settings.type_header_font | font_face: font_display: 'swap' }}
{% for scheme in settings.color_schemes -%}
{% assign scheme_classes = scheme_classes | append: ', .color-' | append: scheme.id %}
{% if forloop.index == 1 -%}
:root,
{%- endif %}
.color-{{ scheme.id }} {
--color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
{% if scheme.settings.background_gradient != empty %}
--gradient-background: {{ scheme.settings.background_gradient }};
{% else %}
--gradient-background: {{ scheme.settings.background }};
{% endif %}
{% liquid
assign background_color = scheme.settings.background
assign background_color_brightness = background_color | color_brightness
if background_color_brightness <= 26
assign background_color_contrast = background_color | color_lighten: 50
elsif background_color_brightness <= 65
assign background_color_contrast = background_color | color_lighten: 5
else
assign background_color_contrast = background_color | color_darken: 25
endif
%}
--color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
--color-background-contrast: {{ background_color_contrast.red }},{{ background_color_contrast.green }},{{ background_color_contrast.blue }};
--color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
--color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
--color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
--color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
--color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
--color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
--color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
--color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
--color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
--payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});
}
{% endfor %}
{{ scheme_classes | prepend: 'body' }} {
color: rgba(var(--color-foreground));
background-color: rgb(var(--color-background));
}
:root {
--font-body-family: "district-pro", {{ settings.type_body_font.fallback_families }};
--font-body-style: {{ settings.type_body_font.style }};
--font-body-weight: 400;
--font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
--font-heading-family: "richmond-text", {{ settings.type_header_font.fallback_families }};
--font-heading-style: {{ settings.type_header_font.style }};
--font-heading-weight: 500;
--font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
--font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};
--media-padding: {{ settings.media_padding }}px;
--media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
--media-border-width: {{ settings.media_border_thickness }}px;
--media-radius: {{ settings.media_radius }}px;
--media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
--media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
--media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
--media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
--media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};
--page-width: {{ settings.page_width | divided_by: 10 }}rem;
--page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;
--product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
--product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
--product-card-text-alignment: {{ settings.card_text_alignment }};
--product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
--product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
--product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
--product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;
--collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
--collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
--collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
--collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
--collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
--collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
--collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;
--blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;
--blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;
--blog-card-text-alignment: {{ settings.blog_card_text_alignment }};
--blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;
--blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};
--blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};
--blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;
--badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;
--popup-border-width: {{ settings.popup_border_thickness }}px;
--popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
--popup-corner-radius: {{ settings.popup_corner_radius }}px;
--popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
--popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
--popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
--popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;
--drawer-border-width: {{ settings.drawer_border_thickness }}px;
--drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
--drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
--drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
--drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
--drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;
--spacing-sections-desktop: {{ settings.spacing_sections }}px;
--spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;
--grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
--grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
--grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
--grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;
--text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
--text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
--text-boxes-radius: {{ settings.text_boxes_radius }}px;
--text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
--text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
--text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
--text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
--text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;
--buttons-radius: {{ settings.buttons_radius }}px;
--buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
--buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
--buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
--buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
--buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
--buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
--buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
--buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
--buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;
--inputs-radius: {{ settings.inputs_radius }}px;
--inputs-border-width: {{ settings.inputs_border_thickness }}px;
--inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
--inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
--inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
--inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
--inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
--inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
--inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;
--variant-pills-radius: {{ settings.variant_pills_radius }}px;
--variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
--variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
--variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
--variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
--variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
--variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: calc(var(--font-body-scale) * 62.5%);
height: 100%;
}
body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0;
line-height: calc(1 + 0.8 / var(--font-body-scale));
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
}
@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}
}
{% endstyle %}
{{ 'base.css' | asset_url | stylesheet_tag }}
{{ 'component-cart-items.css' | asset_url | stylesheet_tag}}
{{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'beforeafter.css' | asset_url | stylesheet_tag }}
<script>
// Load lower priority CSS after a slight delay
window.addEventListener('load', function() {
// Utility function from above
function loadCSS(href) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
link.media = 'print';
link.onload = function() {
this.media = 'all';
};
document.head.appendChild(link);
}
// Secondary/component CSS (delay loading these)
{% if settings.cart_type == 'drawer' %}
loadCSS("{{ 'component-totals.css' | asset_url }}");
loadCSS("{{ 'component-price.css' | asset_url }}");
loadCSS("{{ 'component-discounts.css' | asset_url }}");
{% endif %}
// Animation and special effects CSS
loadCSS("{{ 'aos.css' | asset_url }}");
loadCSS("{{ 'flipdown.css' | asset_url }}");
// Third-party CSS
loadCSS("https://cdnjs.cloudflare.com/ajax/libs/nanogallery2/3.0.2/css/nanogallery2.min.css");
});
</script>
<script>
// Load lowest priority CSS with a longer delay
setTimeout(function() {
// Utility function from above
function loadCSS(href) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
link.media = 'print';
link.onload = function() {
this.media = 'all';
};
document.head.appendChild(link);
}
// Very low priority CSS
loadCSS("{{ 'quick-add.css' | asset_url }}");
loadCSS("{{ 'quantity-popover.css' | asset_url }}");
loadCSS("{{ 'quick-order-list.css' | asset_url }}");
loadCSS("{{ 'volume-pricing.css' | asset_url }}");
// Third-party low priority CSS
loadCSS("https://d3hw6dc1ow8pp2.cloudfront.net/reviews-widget-plus/css/modules/okendo-reviews-tab.fab7dc6e.css");
}, 2000); // 2 second delay
</script>
{% comment %}
<link rel="stylesheet" href="{{ 'component-cart-items.css' | asset_url }}" media="print" onload="this.media='all'">
{%- if settings.cart_type == 'drawer' -%}
{{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{% endcomment %}
{%- unless settings.type_body_font.system? -%}
{% comment %}theme-check-disable AssetPreload{% endcomment %}
<link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
{% comment %}theme-check-enable AssetPreload{% endcomment %}
{%- endunless -%}
{%- unless settings.type_header_font.system? -%}
{% comment %}theme-check-disable AssetPreload{% endcomment %}
<link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
{% comment %}theme-check-enable AssetPreload{% endcomment %}
{%- endunless -%}
{%- if localization.available_countries.size > 1 or localization.available_languages.size > 1 -%}
{{ 'component-localization-form.css' | asset_url | stylesheet_tag: preload: true }}
<script src="{{ 'localization-form.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{%- if settings.predictive_search_enabled -%}
<link
rel="stylesheet"
href="{{ 'component-predictive-search.css' | asset_url }}"
media="print"
onload="this.media='all'"
>
{%- endif -%}
<script>
if (Shopify.designMode) {
document.documentElement.classList.add('shopify-design-mode');
}
</script>
{{ 'swiper-bundle.min.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{{ 'custom.css' | asset_url | stylesheet_tag }}
{{ 'custom_2.css' | asset_url | stylesheet_tag }}
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>
{{ 'product-swatches.css' | asset_url | stylesheet_tag }}
{{ "frame-model.css" | asset_url | stylesheet_tag }}
<script src="{{ 'frame-button.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'frame-model.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'product-swatches.js' | asset_url }}" defer="defer"></script>
{% if template.name == 'index' or template.name == 'collection' or template.name == 'search' or template.name == 'product' %}
<script src="{{ 'product-info.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'pickup-availability.js' | asset_url }}" defer="defer"></script>
{% endif %}
<!-- Bing UET Tag -->
<script>
(function(w,d,t,r,u)
{
var f,n,i;
w[u]=w[u]||[],f=function()
{
var o={ti:"42000070", enableAutoSpaTracking: true};
o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")
},
n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function()
{
var s=this.readyState;
s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)
},
i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)
})
(window,document,"script","//bat.bing.com/bat.js","uetq");
</script>
{%- render 'checklogin' -%}
{%- render 'header-script' -%}
</head>
<body class="{% if page.metafields.custom.page_lp_header_footer_new == true %}Page_lp_header_footer_new {% endif %}template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} template-{{ template.suffix }} gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">
<a class="skip-to-content-link button visually-hidden" href="#MainContent">
{{ 'accessibility.skip_to_text' | t }}
</a>
{% assign urlParam = '' %}
{% if customer %}
{% if customer.metafields.SAGE.ARDivisionNo == '22' %}
{% assign urlParam = '?usertype=multifamily' %}
{% elsif customer.metafields.SAGE.ARDivisionNo == '20' %}
{% assign urlParam = '?usertype=dealer' %}
{% elsif customer.metafields.SAGE.ARDivisionNo == '23' %}
{% assign urlParam = '?usertype=builder' %}
{% elsif customer.metafields.SAGE.ARDivisionNo == '30' %}
{% assign urlParam = '?usertype=hotel' %}
{% endif %}
{% endif %}
{%- if settings.cart_type == 'drawer' -%}
{%- render 'cart-drawer' -%}
{%- endif -%}
{% sections 'header-group' %}
<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
{{ content_for_layout }}
</main>
<div class="overlay"></div>
{% if page.metafields.custom.page_lp_header_footer_new == true %}
{% sections 'LP-Footer-group-new' %}
{%- else -%}
{% sections 'footer-group' %}
{%- endif -%}
<ul hidden>
<li id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</li>
<li id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</li>
</ul>
<script>
window.shopUrl = '{{ request.origin }}';
window.routes = {
cart_add_url: '{{ routes.cart_add_url }}',
cart_change_url: '{{ routes.cart_change_url }}',
cart_update_url: '{{ routes.cart_update_url }}',
cart_url: '{{ routes.cart_url }}',
predictive_search_url: '{{ routes.predictive_search_url }}',
};
window.cartStrings = {
error: `{{ 'sections.cart.cart_error' | t }}`,
quantityError: `{{ 'sections.cart.cart_quantity_error_html' | t: quantity: '[quantity]' }}`,
};
window.variantStrings = {
addToCart: `{{ 'products.product.add_to_cart' | t }}`,
soldOut: `{{ 'products.product.sold_out' | t }}`,
unavailable: `{{ 'products.product.unavailable' | t }}`,
unavailable_with_option: `{{ 'products.product.value_unavailable' | t: option_value: '[value]' }}`,
};
window.quickOrderListStrings = {
itemsAdded: `{{ 'sections.quick_order_list.items_added.other' | t: quantity: '[quantity]' }}`,
itemAdded: `{{ 'sections.quick_order_list.items_added.one' | t: quantity: '[quantity]' }}`,
itemsRemoved: `{{ 'sections.quick_order_list.items_removed.other' | t: quantity: '[quantity]' }}`,
itemRemoved: `{{ 'sections.quick_order_list.items_removed.one' | t: quantity: '[quantity]' }}`,
viewCart: `{{- 'sections.quick_order_list.view_cart' | t -}}`,
each: `{{- 'sections.quick_order_list.each' | t: money: '[money]' }}`,
min_error: `{{- 'sections.quick_order_list.min_error' | t: min: '[min]' }}`,
max_error: `{{- 'sections.quick_order_list.max_error' | t: max: '[max]' }}`,
step_error: `{{- 'sections.quick_order_list.step_error' | t: step: '[step]' }}`,
};
window.accessibilityStrings = {
imageAvailable: `{{ 'products.product.media.image_available' | t: index: '[index]' }}`,
shareSuccess: `{{ 'general.share.success_message' | t }}`,
pauseSlideshow: `{{ 'sections.slideshow.pause_slideshow' | t }}`,
playSlideshow: `{{ 'sections.slideshow.play_slideshow' | t }}`,
recipientFormExpanded: `{{ 'recipient.form.expanded' | t }}`,
recipientFormCollapsed: `{{ 'recipient.form.collapsed' | t }}`,
countrySelectorSearchCount: `{{ 'localization.country_results_count' | t: count: '[count]' }}`,
};
</script>
<!-- PAYPAL SCRIPT -->
<script src="https://www.paypal.com/sdk/js?client-id=AVy3oxj6cG9xwX8cyEg75-MhYqLmny0RiJZjLEqQn5R7ih98y6SK7ym43VvK_ZUTE4o41lxESvzulRN7&components=messages,buttons" data-namespace="PayPalSDK" defer></script>
{%- if settings.predictive_search_enabled -%}
<script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{%- if settings.cart_type == 'drawer' -%}
<script src="{{ 'cart-drawer.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<script src="{{ 'swiper-bundle.min.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'simple-parallax-js.min.js' | asset_url }}" defer="defer"></script>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
console.log("DOM fully loaded and parsed");
let img3 = document.querySelectorAll('.Index_quote_images_main_new .Index_quote_image_main .quote_image_new');
new simpleParallax(img3);
document.addEventListener("scroll", parallax);
function parallax() {
const layers = document.querySelectorAll('.Index_quote_images_main_new .Index_quote_image_main');
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop; // Get the scroll position
layers.forEach((layer, index) => {
const baseSpeed = 1; // Base speed increment
const speed = baseSpeed * (index + 1); // Increment speed by 0.2 for each element
const y = -(scrollPosition * speed) / 100; // Apply parallax effect and divide by 100
layer.style.transform = `translateY(${y}px)`; // Adjust the Y-axis for parallax
});
}
});
</script>
<script>
if (window.location.search.includes('viewcart=true')) {
if(document.querySelector('cart-drawer')) {
document.querySelector('cart-drawer').classList.add('active');
}
window.history.replaceState({}, "", '/');
}
</script>
<ajax-product-framing></ajax-product-framing>
</body>
</html>