diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 6694546860d..2a35be28604 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,43 +1,24 @@ -### PR Summary: +#### What does this PR do? - +#### Background Context and Screenshots +#### What steps did you take to test your changes? -### Why are these changes introduced? +#### Link to the relevant Github Issue -Fixes #0. -### What approach did you take? - -### Other considerations - -### Decision log - -| # | Decision | Alternatives | Rationale | Downsides | -|---|---|---|---|---| -| 1 | | | | | - - -### Visual impact on existing themes - - - -### Testing steps/scenarios - -- [ ] Step 1 - -### Demo links - - -- [Store](url) -- [Editor](url) - -### Checklist -- [ ] Added PR summary for [release notes](https://themes.shopify.com/themes/dawn/styles/default#ReleaseNotes) -- [ ] Requested review from UX (Only for changes that are affecting the experience or perceivable visual details) -- [ ] Created a ticket for the [help.shopify.com](https://help.shopify.com) documentation team about updates to theme settings. (Internal-only task) +#### Checklist - [ ] Followed [theme code principles](https://github.com/Shopify/dawn/blob/main/.github/CONTRIBUTING.md#theme-code-principles) - [ ] Linted with [Theme Check](https://github.com/Shopify/theme-check) - [ ] Tested on [mobile](https://shopify.dev/themes/store/requirements#mobile-browser-requirements) - [ ] Tested on [multiple browsers](https://shopify.dev/themes/store/requirements#desktop-browser-requirements) - [ ] Tested for [accessibility](https://shopify.dev/themes/best-practices/accessibility) + + +### Demo links + +---- + +#### Does anything need to be done _before or after_ deploying this? + +#### Who needs to be notified about these changes? diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 00000000000..73f69e09586 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/aws.xml b/.idea/aws.xml new file mode 100644 index 00000000000..03f1bb6ee9a --- /dev/null +++ b/.idea/aws.xml @@ -0,0 +1,17 @@ + + + + + + + \ No newline at end of file diff --git a/.idea/ecomm-theme-dawn.iml b/.idea/ecomm-theme-dawn.iml new file mode 100644 index 00000000000..1b85fb90a3a --- /dev/null +++ b/.idea/ecomm-theme-dawn.iml @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 00000000000..77f1605f5f0 --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 00000000000..70e740815ee --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 00000000000..94a25f7f4cb --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/assets/AlrightSans-Bold.otf b/assets/AlrightSans-Bold.otf new file mode 100644 index 00000000000..756acb389f2 Binary files /dev/null and b/assets/AlrightSans-Bold.otf differ diff --git a/assets/AlrightSans-BoldItalic.otf b/assets/AlrightSans-BoldItalic.otf new file mode 100644 index 00000000000..5d87af890f9 Binary files /dev/null and b/assets/AlrightSans-BoldItalic.otf differ diff --git a/assets/AlrightSans-ExtraThin.otf b/assets/AlrightSans-ExtraThin.otf new file mode 100644 index 00000000000..0465cdade3d Binary files /dev/null and b/assets/AlrightSans-ExtraThin.otf differ diff --git a/assets/AlrightSans-ExtraThinItalic.otf b/assets/AlrightSans-ExtraThinItalic.otf new file mode 100644 index 00000000000..1aaa52119d4 Binary files /dev/null and b/assets/AlrightSans-ExtraThinItalic.otf differ diff --git a/assets/AlrightSans-Light.otf b/assets/AlrightSans-Light.otf new file mode 100644 index 00000000000..bb35cc98996 Binary files /dev/null and b/assets/AlrightSans-Light.otf differ diff --git a/assets/AlrightSans-LightItalic.otf b/assets/AlrightSans-LightItalic.otf new file mode 100644 index 00000000000..54b476182fe Binary files /dev/null and b/assets/AlrightSans-LightItalic.otf differ diff --git a/assets/AlrightSans-Medium.otf b/assets/AlrightSans-Medium.otf new file mode 100644 index 00000000000..1970fbb2f60 Binary files /dev/null and b/assets/AlrightSans-Medium.otf differ diff --git a/assets/AlrightSans-Regular.otf b/assets/AlrightSans-Regular.otf new file mode 100644 index 00000000000..41854383139 Binary files /dev/null and b/assets/AlrightSans-Regular.otf differ diff --git a/assets/AlrightSans-RegularItalic.otf b/assets/AlrightSans-RegularItalic.otf new file mode 100644 index 00000000000..46c3c4a7a5e Binary files /dev/null and b/assets/AlrightSans-RegularItalic.otf differ diff --git a/assets/AlrightSans-Thin.otf b/assets/AlrightSans-Thin.otf new file mode 100644 index 00000000000..4c299e183c0 Binary files /dev/null and b/assets/AlrightSans-Thin.otf differ diff --git a/assets/AlrightSans-ThinItalic.otf b/assets/AlrightSans-ThinItalic.otf new file mode 100644 index 00000000000..57aa4bbc709 Binary files /dev/null and b/assets/AlrightSans-ThinItalic.otf differ diff --git a/assets/affirm.js b/assets/affirm.js new file mode 100644 index 00000000000..76ef4fc0eb6 --- /dev/null +++ b/assets/affirm.js @@ -0,0 +1,6 @@ +_affirm_config = { + public_api_key: "AMIZYW36PAIWPHDH", + script: "https://cdn1.affirm.com/js/v2/affirm.js" + }; +(function(m,g,n,d,a,e,h,c){var b=m[n]||{},k=document.createElement(e),p=document.getElementsByTagName(e)[0],l=function(a,b,c){return function(){a[b]._.push([c,arguments])}};b[d]=l(b,d,"set");var f=b[d];b[a]={};b[a]._=[];f._=[];b._=[];b[a][h]=l(b,a,h);b[c]=function(){b._.push([h,arguments])};a=0;for(c="set add save post open empty reset on off trigger ready setProduct".split(" ");a + + let _shopify_locale = Shopify.locale; + let _shopify_country = Shopify.country; + let _affirm_locale; + let _affirm_country; + let _region_public_key; + + if (_shopify_country === 'US') { + _affirm_country = 'USA'; + _affirm_locale = 'en_US'; + _region_public_key = 'AMIZYW36PAIWPHDH' + } else if (_shopify_country === 'CA') { + _affirm_country = 'CAN'; + _affirm_locale = (_shopify_locale === 'fr' ? 'fr' : 'en') + '_' + _shopify_country; + _region_public_key = 'AMIZYW36PAIWPHDH' + } else { + _affirm_country = 'USA'; + _affirm_locale = 'en_US' + _region_public_key = 'AMIZYW36PAIWPHDH' + } + + _affirm_config = { + public_api_key: _region_public_key, + script: "https://cdn1.affirm.com/js/v2/affirm.js", + locale: _affirm_locale, + country_code: _affirm_country, + }; + + (function(l,g,m,e,a,f,b){var d,c=l[m]||{},h=document.createElement(f),n=document.getElementsByTagName(f)[0],k=function(a,b,c){return function(){a[b]._.push([c,arguments])}};c[e]=k(c,e,"set");d=c[e];c[a]={};c[a]._=[];d._=[];c[a][b]=k(c,a,b);a=0;for(b="set add save post open empty reset on off trigger ready setProduct".split(" ");a; + +let promosJSON = '[{"promoStatus":true,"pageType":"product","selector":null,"onChange":null,"fontSize":"12","logoType":"logo","logoColor":"blue","position":"afterend","addCents":false,"saleSelector":null,"comparePrices":false,"dataElement":".product-form__input","alaElement":"#affirm-messaging","shopifyPageType":"product"}]'; + +let promos = JSON.parse(promosJSON); + +const defaultAlaElement = '[data-price]'; + +promos.forEach((promo) => { +if (!promo.promoStatus) { + return false; +} +if(promo.pageType === 'product'){ + + if(promo.shopifyPageType && promo.shopifyPageType !== 'global'){ + if(meta.page.pageType === promo.shopifyPageType){ + updateProduct(); + } + } else { + updateProduct(); + } + + function updateProduct(){ + + if(typeof jQuery !== 'undefined'){ + jQuery.getJSON(window.location.pathname+'.js', function(shopifyProduct) { + + currentProduct = shopifyProduct; + upsertVariantALA(promo, currentProduct); + + if(promo.dataElement){ + jQuery(promo.dataElement).change(function(){ + upsertVariantALA(promo, currentProduct, function(){ + affirm.ui.ready(function(){ + affirm.ui.refresh(); + }); + }); + }); + } + }); + } + if(promo.onChange) setObserver(promo, updateProductFromAjaxPrice); + + if(promo.selector){ + + pagePricingData(promo); + + if(promo.onChange) setObserver(promo, changePrice); + + } + } +} else if(promo.pageType === 'category'){ + + if(promo.shopifyPageType && promo.shopifyPageType !== 'global'){ + if(meta.page.pageType === promo.shopifyPageType){ + updateCategory(); + } + } else { + updateCategory(); + } + + if(promo.selector) pagePricingData(promo); //uses the original methods to get price + + function updateCategory(){ + let thisElement2 = promo.alaElement ? promo.alaElement : defaultAlaElement + let productCards = document.querySelectorAll(promo.dataElement); + if(typeof jQuery !== 'undefined'){ + jQuery(productCards).each(function(){ + let card = jQuery(this); + attr = card.find('a[href*="products"]').attr('href'); + urlParams = attr.split('/'); + productIndex = urlParams.indexOf("products"); + jQuery.getJSON('/products/'+urlParams[productIndex+1]+'.js', function(product) { + + insertElement = card.find(thisElement2) + upsertAla(promo, product.price.toString(), insertElement[0]); + }) + + }); + } + } + +}else if(promo.pageType === 'cart'){ + // always has a global page type + + let thisElement3 = promo.alaElement ? document.querySelector(promo.alaElement) : document.querySelector(defaultAlaElement) + + if(typeof jQuery !== 'undefined'){ + jQuery.getJSON('/cart.js', function(cart) { + upsertAla(promo, cart.total_price.toString(), thisElement3) + }); + + jQuery(promo.dataElement).change(function(){ + + jQuery.getJSON('/cart.js', function(cart) { + upsertAla(promo, cart.total_price.toString(), thisElement3, function(){ + affirm.ui.ready(function(){ + affirm.ui.refresh(); + }); + }) + }) + }) + } + + if(promo.selector){ + + pagePricingData(promo); + + if(promo.onChange) setObserver(promo, changePrice); + + } else if(promo.onChange) { + + setObserver(promo, updateCartFromAjaxPrice); + } +}else if(promo.shopifyPageType && promo.shopifyPageType !== 'global'){ + + if(meta.page.pageType === promo.shopifyPageType){ + pagePricingData(promo); + + if(promo.onChange) { + setObserver(promo, changePrice); + } + } +} else { + + pagePricingData(promo); + + if(promo.onChange) { + setObserver(promo, changePrice); + } +} + +}) + +function setObserver(promo, changeMethod){ + + + setTimeout(function(){ + + const targetNode = document.querySelector(promo.onChange); + const config = { attributes: true, childList: true, subtree: true }; + + const callback = function(mutationsList, observer) { + for(let mutation of mutationsList) { + if (mutation.type === "childList") { + + setTimeout( + changeMethod(observer, promo, function(){ + observer.observe(targetNode, config); + }), 1250); + break; + } + } + }; + + const observer = new MutationObserver(callback); + if(targetNode) observer.observe(targetNode, config); + + }, 1250); +} + +function updateProductFromAjaxPrice(observer, promo, callback) { + + observer.disconnect(); + + removeExistingALA(); + + upsertVariantALA(promo, currentProduct); + affirm.ui.ready(function(){ + affirm.ui.refresh(); + }); + setTimeout(callback, 2500); +} +function updateCartFromAjaxPrice(observer, promo, callback) { + + observer.disconnect(); + + let thisElement = promo.alaElement ? document.querySelector(promo.alaElement) : document.querySelector(defaultAlaElement) + if(typeof jQuery !== 'undefined'){ + jQuery.getJSON('/cart.js', function(cart) { + upsertAla(promo, cart.total_price.toString(), thisElement); + affirm.ui.ready(function(){ + affirm.ui.refresh(); + }); + setTimeout(callback, 1250); + }) + } +} +function changePrice(observer, promo, callback) { + + observer.disconnect(); + + pagePricingData(promo, function(){ + + setTimeout(callback, 1250); + }); +} +function pagePricingData(promo, callback) { + + let nodeList; + let salePrices; + let regularPrices; + let price; + if(promo.comparePrices){ + regularPrices = document.querySelectorAll(promo.selector); + } else { + salePrices = false; + if(promo.saleSelector){ + salePrices = document.querySelectorAll(promo.saleSelector).length ? document.querySelectorAll(promo.saleSelector) : false + } + regularPrices = document.querySelectorAll(promo.selector); + } + + let prices = salePrices ? salePrices : regularPrices; + + if(!callback){if(document.getElementsByClassName("affirm-as-low-as")[0])return;} + + removeExistingALA(); //for onChange and Observers + + for (let i in prices) { + if(promo.comparePrices){ + if (prices[i].innerText){ + price = Number(prices[i].innerText.replace(/[^\d]/g,"")) + let nodeList = prices[i].childNodes + for (let n in nodeList){ + let nodePrice = nodeList[n].innerText + if(nodePrice){ + if(nodePrice.length){ + while (!Number(nodePrice[0]) && nodePrice.length > 0 ) { + nodePrice = nodePrice.slice(1) + } + nodePrice = Number(nodePrice) + price = price > nodePrice && nodePrice != 0 ? nodePrice : price + } + } + } + price = price.toString(); + } + } else { + price = prices[i].innerText; + } + + if(price){ + let totalAmount = price.replace(/[^\d]/g,""); + + var thisPrice = parseInt(totalAmount).toString(); + + if(promo.addCents) thisPrice += '00' + + upsertAla(promo, thisPrice, prices[i], callback) + } + + } +} +function upsertAla(promo, itemPrice, insertElement, callback){ + + let validPrice = validatePrice(itemPrice); + if(!validPrice) return; + + // a callback is called when a function is called that updates the ala, Example: observer or onChange function + if(callback){ + if(document.querySelector(".affirm-as-low-as")){ + if(typeof jQuery !== 'undefined'){ + jQuery(".affirm-as-low-as").attr('data-amount',itemPrice); + return callback(); + } + + } else { + + insertALA(); + affirm.ui.ready(function(){ + affirm.ui.refresh(); + }); + return callback(); + } + } + insertALA(); + + function insertALA(){ + let ala = buildAffirmALA(promo,itemPrice); + if(ala && insertElement && typeof insertElement === "object" && typeof insertElement !== null ){ + + insertElement.insertAdjacentElement(promo.position, ala); + affirm.ui.ready(function(){ + affirm.ui.refresh(); + }); + } + } +} +function buildAffirmALA(promo, itemPrice) { + + var promoEl = document.createElement("p"); + + promoEl.className = "affirm-as-low-as"; + promoEl.dataset.amount = itemPrice; + promoEl.dataset.affirmType = promo.logoType; + promoEl.dataset.pageType = promo.pageType; + + if(promo.logoType === "logo" || promo.logoType === "symbol") promoEl.dataset.affirmColor = promo.logoColor; + + let style = "font-size: "+promo.fontSize+"px;"; + + if(promo.styleArray){ + + for(i in styleArray)style += styleArray[i]; + } + + promoEl.style = style; + + return promoEl; +} +function validatePrice(itemPrice){ + + var numOnly = itemPrice.match(/^[0-9]+$/) != null; + + if(!numOnly) return false; + return true; +} +function removeExistingALA(){ + const e = document.querySelector(".affirm-as-low-as"); + if(e) e.parentElement.removeChild(e); +} +function upsertVariantALA(promo, currentProduct, callback=null){ + let thisElement = promo.alaElement ? document.querySelector(promo.alaElement) : document.querySelector(defaultAlaElement) + + let params = new URLSearchParams(window.location.search); + let selectedOption = params.get('variant') + + if(selectedOption){ + for(let i of currentProduct.variants){ + if(i.id == selectedOption){ + + upsertAla(promo, i.price.toString(), thisElement, callback) + } + } + } else { + if (currentProduct.variants) { + upsertAla(promo, currentProduct.variants[0].price.toString(), thisElement, callback); + } + } +} \ No newline at end of file diff --git a/assets/base.css b/assets/base.css index c246d614175..0bd1ee4c6f8 100644 --- a/assets/base.css +++ b/assets/base.css @@ -269,7 +269,7 @@ html.no-js .no-js-hidden { } } -@media screen and (min-width: 990px) { +@media screen and (min-width: 1180px) { .page-width--narrow { max-width: 72.6rem; padding: 0; @@ -577,13 +577,13 @@ table:not([class]) th { } } -@media screen and (min-width: 750px) and (max-width: 989px) { +@media screen and (min-width: 750px) and (max-width: 1179px) { .medium-hide { display: none !important; } } -@media screen and (min-width: 990px) { +@media screen and (min-width: 1180px) { .large-up-hide { display: none !important; } @@ -940,7 +940,7 @@ summary::-webkit-details-marker { } } -@media screen and (min-width: 990px) { +@media screen and (min-width: 1180px) { .title, .title-wrapper-with-link { margin: 5rem 0 3rem; @@ -1091,7 +1091,7 @@ summary::-webkit-details-marker { } } -@media screen and (max-width: 989px) { +@media screen and (max-width: 1179px) { .grid--1-col-tablet-down .grid__item { width: 100%; max-width: 100%; @@ -1108,7 +1108,7 @@ summary::-webkit-details-marker { } } -@media screen and (min-width: 990px) { +@media screen and (min-width: 1180px) { .grid--6-col-desktop .grid__item { width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6); max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6); @@ -1125,7 +1125,7 @@ summary::-webkit-details-marker { } .grid--3-col-desktop .grid__item { - width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3); + width: 33%; max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3); } @@ -1135,7 +1135,7 @@ summary::-webkit-details-marker { } } -@media screen and (min-width: 990px) { +@media screen and (min-width: 1180px) { .grid--1-col-desktop { flex: 0 0 100%; max-width: 100%; @@ -1186,7 +1186,7 @@ summary::-webkit-details-marker { } } -@media screen and (min-width: 750px) and (max-width: 989px) { +@media screen and (min-width: 750px) and (max-width: 1180px) { .slider--tablet.grid--peek .grid__item { width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem); } @@ -1271,7 +1271,7 @@ summary::-webkit-details-marker { opacity: 0; } -@media screen and (min-width: 990px) { +@media screen and (min-width: 1180px) { .media--cropped { padding-bottom: 63%; } @@ -2142,6 +2142,10 @@ input[type='checkbox'] { align-items: center; } +details-modal.header__search details { + position: relative; +} + .media-modal { cursor: zoom-out; } @@ -2237,14 +2241,10 @@ input[type='checkbox'] { .header-wrapper { display: block; position: relative; - background-color: rgb(var(--color-background)); + background-color: var(--gradient-base-background-1) !important; z-index: 1; } -.header-wrapper--border-bottom { - border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08); -} - .header { display: grid; grid-template-areas: 'left-icon heading icons'; @@ -2252,7 +2252,7 @@ input[type='checkbox'] { align-items: center; } -@media screen and (min-width: 990px) { +@media screen and (min-width: 1180px) { .header--top-left, .header--middle-left:not(.header--has-menu) { grid-template-areas: @@ -2310,10 +2310,6 @@ input[type='checkbox'] { word-break: break-word; } -.header__heading-link:hover .h2 { - color: rgb(var(--color-foreground)); -} - .header__heading-link .h2 { line-height: 1; color: rgba(var(--color-foreground), 0.75); @@ -2324,7 +2320,7 @@ input[type='checkbox'] { width: 100%; } -@media screen and (max-width: 989px) { +@media screen and (max-width: 1179px) { .header__heading, .header__heading-link { text-align: center; @@ -2341,7 +2337,7 @@ input[type='checkbox'] { } } -@media screen and (min-width: 990px) { +@media screen and (min-width: 1180px) { .header__heading-link { margin-left: -0.75rem; } @@ -2384,10 +2380,10 @@ input[type='checkbox'] { content: none; } -.header__icon:hover .icon, +/* .header__icon:hover .icon, .modal__close-button:hover .icon { transform: scale(1.07); -} +} */ .header__icon .icon { height: 2rem; @@ -2396,22 +2392,25 @@ input[type='checkbox'] { vertical-align: middle; } -.header__icon, -.header__icon--cart .icon { +.header__icon, .icon { height: 4.4rem; width: 4.4rem; padding: 0; } -.header__icon--cart { +/*.header__icon--cart { position: relative; margin-right: -1.2rem; -} +} */ -@media screen and (max-width: 989px) { +@media screen and (max-width: 1180px) { menu-drawer ~ .header__icons .header__icon--account { display: none; } + + .header__icon:not(.header__icon--cart):not(.header__icon--menu) { + display: none; + } } .header__icon--menu[aria-expanded="true"]::before { @@ -2452,7 +2451,7 @@ menu-drawer + .header__search { display: inline-flex; } -@media screen and (min-width: 990px) { +@media screen and (min-width: 1180px) { .header:not(.header--top-center) * > .header__search, .header--top-center > .header__search { display: inline-flex; @@ -2482,7 +2481,7 @@ details[open] .modal-overlay::after { content: ''; background-color: rgb(var(--color-foreground), 0.5); top: 100%; - left: 0; + left: 45%; right: 0; height: 100vh; } @@ -2494,7 +2493,6 @@ details[open] .modal-overlay::after { .search-modal { opacity: 0; - border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08); min-height: calc(100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width))); height: 100%; } @@ -2537,7 +2535,7 @@ details[open] .modal-overlay::after { } } -@media screen and (min-width: 990px) { +@media screen and (min-width: 1180px) { .search-modal__form { max-width: 47.8rem; } @@ -2594,7 +2592,6 @@ details[open] > .header__submenu { /* Header menu */ .header__inline-menu { - margin-left: -1.2rem; grid-area: navigation; display: none; } @@ -2604,7 +2601,7 @@ details[open] > .header__submenu { margin-left: 0; } -@media screen and (min-width: 990px) { +@media screen and (min-width: 1180px) { .header__inline-menu { display: block; } @@ -2720,6 +2717,50 @@ details-disclosure > details { position: relative; } +.header__menu-item:hover span { + text-decoration: none !important; +} +.focus-inset { + text-decoration: none !important; +} +.header { + min-width: 100%; + display: flex !important; +} +.header__icons:not(.header__icon--search):not(.header__icon--menu) { + position: absolute; + right: 2.5rem; +} +.menu .header__menu-item { + margin: 0 1.5em 0 1.5em !important; + padding: 0 0 0 0 !important; +} +.header__icon:not(.header__icon--menu):not(.header__icon--text) { + margin: 25% .5em 0 .5em !important; + padding: 0 0 0 0 !important; +} + +.header__icon--text { + margin: 25% .5em 0 2em !important; + padding: 0 0 0 0 !important; + white-space: nowrap; +} + +.header__menu-item:hover { + color: orange !important; +} + +.header__icon:hover { + color: orange !important; +} + +@media screen and (max-width: 749px) { + .header__icons:not(.header__icon--search):not(.header__icon--menu) { + position: absolute; + right: -1.2rem; + } +} + @keyframes animateMenuOpen { 0% { opacity: 0; @@ -2743,7 +2784,7 @@ details-disclosure > details { } } -@media screen and (min-width: 990px) { +@media screen and (min-width: 1180px) { .overflow-hidden-tablet { overflow: auto; } @@ -2952,4 +2993,5 @@ details-disclosure > details { .localization-form__select:focus { outline: transparent solid 1px; } + } diff --git a/assets/buttons.css b/assets/buttons.css new file mode 100644 index 00000000000..18b954768ee --- /dev/null +++ b/assets/buttons.css @@ -0,0 +1,44 @@ +.btn { + display: inline-block; + border: none; + border-radius: 0; + box-shadow: none; + font-size: 16px; + padding: 12px 60px; + font-size: 16px; + padding: 12px 60px; + text-shadow: none; + text-transform: uppercase; + text-decoration: none; + text-align: center; + transition: background 0.5s ease; + font-weight: bold; + font-family: "AlrightSans-Bold", lato, helvetica, sans-serif; + font-weight: bold; + height: 4.5rem; + line-height: normal; +} + +.btn:hover { + cursor: pointer; +} + +.btn-primary { + background: #ffb256; + color: #383838; +} + +.btn-primary:hover { + background: #ffe3a6; + color: #383838; +} + +.btn-secondary { + background: #eee; + color: #383838; +} + +.btn-secondary:hover { + filter: brightness(85%); + color: black; +} diff --git a/assets/clyde_modal_relocation.js b/assets/clyde_modal_relocation.js new file mode 100644 index 00000000000..20048cccaa3 --- /dev/null +++ b/assets/clyde_modal_relocation.js @@ -0,0 +1,13 @@ +document.addEventListener('DOMContentLoaded', function() { + const lookForClydeModal = () => { + const modal = document.querySelector('iframe[name="clyde-product-page-frame"]') + if (modal) { + const target = document.getElementById('clyde-cta') + modal.remove() + target.append(modal) + stopInterval() + } + } + const intervalClydeModal = setInterval(lookForClydeModal, 100) + const stopInterval = () => clearInterval(intervalClydeModal) +}) diff --git a/assets/component-card.css b/assets/component-card.css index 2eb85fac749..9d3d2e6d5be 100644 --- a/assets/component-card.css +++ b/assets/component-card.css @@ -1,6 +1,7 @@ .card-wrapper { color: inherit; height: 100%; + width: 250px; position: relative; text-decoration: none; } @@ -26,6 +27,7 @@ box-sizing: border-box; border-radius: var(--border-radius); border: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity)); + max-height: 300px; } .card--card:after, @@ -46,6 +48,7 @@ /* Fix for Safari border bug on hover */ z-index: 0; border-radius: calc(var(--border-radius) - var(--border-width) - var(--image-padding)); + width: 100%; } .card--card .card__inner .card__media { @@ -139,7 +142,7 @@ .card__media .media img { height: 100%; - object-fit: cover; + object-fit: contain; object-position: center center; width: 100%; } diff --git a/assets/component-cart.css b/assets/component-cart.css index 8041223a438..e3aee457cde 100644 --- a/assets/component-cart.css +++ b/assets/component-cart.css @@ -191,6 +191,7 @@ cart-items { .cart__checkout-button { max-width: 36rem; + height: 4.5rem; } .cart__ctas { diff --git a/assets/component-price.css b/assets/component-price.css index 59bdb097145..96eab3fce59 100644 --- a/assets/component-price.css +++ b/assets/component-price.css @@ -10,6 +10,10 @@ vertical-align: top; } +.price__financing { + display: block; +} + .price.price--unavailable { visibility: hidden; } diff --git a/assets/cookie-banner.css b/assets/cookie-banner.css new file mode 100644 index 00000000000..4304b0f81a0 --- /dev/null +++ b/assets/cookie-banner.css @@ -0,0 +1,50 @@ +.cookie-banner { + position: fixed; + bottom: 0; + left: 0; + z-index: 2; + width: 100%; + font-size: 14px; + background-color: #171b1f; + padding: 0 20px 20px 20px; + color: rgba(250, 249, 246, 0.75); +} + +@media screen and (min-width: 750px) { + .cookie-banner { + width: 60%; + bottom: 30px; + left: 30px; + border-radius: 6px; + } +} + +@media screen and (min-width: 1200px) { + .cookie-banner { + width: 40%; + } +} + +.cookie-banner a { + color: rgba(250, 249, 246, 0.75); +} + +.cookie-banner__btn-group { + display: flex; + justify-content: flex-end; +} + +.cookie-banner__btn--ok { + padding: 10px 18px; + background-color: #ffb256; + color: #171b1f; + border: none; + font-size: 1.4rem; + border-radius: 3px; + font-weight: bold; + cursor: pointer; +} + +.cookie-banner__btn--ok:hover { + cursor: pointer; +} diff --git a/assets/customer_inventables.css b/assets/customer_inventables.css new file mode 100644 index 00000000000..9f90d64ff35 --- /dev/null +++ b/assets/customer_inventables.css @@ -0,0 +1,11 @@ +.inventables__shopify-login { + display: flex; + justify-content: center; + height: 100%; + width: 100%; +} + +.inventables__shopify-login #inventables { + min-width: 600px; + min-height: 500px; +} diff --git a/assets/details-modal.js b/assets/details-modal.js index 9f6b20ff274..0e072ccd2ba 100644 --- a/assets/details-modal.js +++ b/assets/details-modal.js @@ -12,7 +12,7 @@ class DetailsModal extends HTMLElement { 'click', this.onSummaryClick.bind(this) ); - this.querySelector('button[type="button"]').addEventListener( + this.querySelector('button[type="button"]')?.addEventListener( 'click', this.close.bind(this) ); diff --git a/assets/easel-carousel.js b/assets/easel-carousel.js new file mode 100644 index 00000000000..b2d55b2ea69 --- /dev/null +++ b/assets/easel-carousel.js @@ -0,0 +1,81 @@ +function toggleActive(collection, activateIndex) { + for (const item of collection) { + const itemIndex = parseInt(item.dataset.index) + item.classList.remove('active') + if (itemIndex === activateIndex) { + item.classList.add('active') + } + } +} + +document.addEventListener('DOMContentLoaded', function() { + const indicators = Array.from(document.querySelectorAll('.easel-img-carousel__indicator')) + const images = Array.from(document.querySelectorAll('.easel-img-carousel__image')) + const contents = Array.from(document.querySelectorAll('.easel-img-carousel__content')) + for (const indicator of indicators) { + indicator.addEventListener('click', (e) => { + const target = e.target + const targetIndex = parseInt(target.dataset.index) + toggleActive(indicators, targetIndex) + toggleActive(images, targetIndex) + toggleActive(contents, targetIndex) + }) + } +}) + +document.addEventListener('DOMContentLoaded', function() { + const carouselMobile = document.querySelector('.easel-img-carousel') + + var touchsurface = carouselMobile, + startX, + startY, + dist, + threshold = 150, //required min distance traveled to be considered swipe + allowedTime = 200, // maximum time allowed to travel that distance + elapsedTime, + startTime + + function handleswipe(isrightswipe){ + let activeIndex = parseInt(carouselMobile.querySelector('.easel-img-carousel__indicator.active').dataset.index) + const indicators = Array.from(document.querySelectorAll('.easel-img-carousel__indicator')) + const images = Array.from(document.querySelectorAll('.easel-img-carousel__image')) + const contents = Array.from(document.querySelectorAll('.easel-img-carousel__content')) + + if (isrightswipe) { + if (activeIndex > 0) { + toggleActive(indicators, activeIndex - 1) + toggleActive(images, activeIndex - 1) + toggleActive(contents, activeIndex - 1) + } + } else{ + if (activeIndex < indicators.length - 1) { + toggleActive(indicators, activeIndex + 1) + toggleActive(images, activeIndex + 1) + toggleActive(contents, activeIndex + 1) + } + } + } + + touchsurface.addEventListener('touchstart', function(e){ + var touchobj = e.changedTouches[0] + dist = 0 + startX = touchobj.pageX + startY = touchobj.pageY + startTime = new Date().getTime() // record time when finger first makes contact with surface + e.preventDefault() + }, false) + + touchsurface.addEventListener('touchmove', function(e){ + e.preventDefault() // prevent scrolling when inside DIV + }, false) + + touchsurface.addEventListener('touchend', function(e){ + var touchobj = e.changedTouches[0] + dist = touchobj.pageX - startX // get total dist traveled by finger while in contact with surface + elapsedTime = new Date().getTime() - startTime // get time elapsed + // check that elapsed time is within specified, horizontal dist traveled >= threshold, and vertical dist traveled <= 100 + var swiperightBol = (elapsedTime <= allowedTime && dist >= threshold && Math.abs(touchobj.pageY - startY) <= 100) + handleswipe(swiperightBol) + e.preventDefault() + }, false) +}) diff --git a/assets/easel-text-review-carousel.js b/assets/easel-text-review-carousel.js new file mode 100644 index 00000000000..d15d5a577d1 --- /dev/null +++ b/assets/easel-text-review-carousel.js @@ -0,0 +1,130 @@ +document.addEventListener('DOMContentLoaded', function() { + const carouselElem = document.querySelector('.easel-text-reviews__carousel') + const carouselItemTemplate = document.querySelector('.easel-text-reviews__carousel-item.template') + const itemsTemplate = document.querySelector('.easel-text-reviews__items.template') + const items = Array.from(itemsTemplate.querySelectorAll('.easel-text-reviews__item')) + + const carouselIndicators = document.querySelector('.easel-text-reviews__carousel-indicators') + const carouselIndicatorTemplate = document.querySelector('.easel-text-reviews__carousel-indicator.template') + const maxPerCarouselItem = 3 + const nCarouselItems = Math.ceil(items.length / 3) + + const itemsSlice = (index) => { + let sliceStart = index * maxPerCarouselItem + return items.slice(sliceStart, sliceStart + maxPerCarouselItem) + } + + let newCarouselItem + let newCarouselIndicator + let slice + for (let i = 0; i < nCarouselItems; i++) { + newCarouselItem = carouselItemTemplate.cloneNode() + newCarouselItem.classList.remove('hidden') + newCarouselItem.classList.remove('template') + newCarouselItem.dataset['index'] = i + newCarouselIndicator = carouselIndicatorTemplate.cloneNode(true) + newCarouselIndicator.classList.remove('hidden') + newCarouselIndicator.classList.remove('template') + newCarouselIndicator.dataset['index'] = i + + slice = itemsSlice(i) + for(const item of slice) { + item.classList.remove('hidden') + item.classList.remove('template') + newCarouselItem.appendChild(item) + } + + if (i === 0) { + newCarouselItem.classList.add('active') + newCarouselIndicator.classList.add('active') + } + + newCarouselIndicator.addEventListener('click', function(e) { + const target = e.target + const index = target.dataset.index + const carouselItems = Array.from(document.querySelectorAll('.easel-text-reviews__carousel-item:not(.template)')) + const carouselIndicators = Array.from(document.querySelectorAll('.easel-text-reviews__carousel-indicator:not(.template)')) + const changeActive = (targetIndex, collection) => { + for (let i = 0; i < collection.length; i++) { + const item = collection[i] + item.classList.remove('active') + + if (i === parseInt(targetIndex)) { + item.classList.add('active') + } + } + + } + + changeActive(index, carouselItems) + changeActive(index, carouselIndicators) + }) + + carouselElem.appendChild(newCarouselItem) + carouselIndicators.appendChild(newCarouselIndicator) + } +}) + +document.addEventListener('DOMContentLoaded', function() { + const carouselMobile = document.querySelector('.easel-text-reviews__carousel-mobile') + + var touchsurface = carouselMobile, + startX, + startY, + dist, + threshold = 150, //required min distance traveled to be considered swipe + allowedTime = 200, // maximum time allowed to travel that distance + elapsedTime, + startTime + + function toggleActive(collection, activateIndex) { + for(const item of collection) { + item.classList.remove('active') + + if (activateIndex === parseInt(item.dataset.index)) { + item.classList.add('active') + } + } + } + + function handleswipe(isrightswipe){ + let activeIndex = parseInt(carouselMobile.querySelector('.easel-text-reviews__item.active').dataset.index) + const carouselItemsMobile = Array.from(carouselMobile.querySelectorAll('.easel-text-reviews__item')) + const mobileIndicators = Array.from(document.querySelectorAll('.easel-text-reviews__carousel-indicator-mobile')) + + if (isrightswipe) { + if (activeIndex > 0) { + toggleActive(carouselItemsMobile, activeIndex - 1) + toggleActive(mobileIndicators, activeIndex - 1) + } + } else{ + if (activeIndex < carouselItemsMobile.length - 1) { + toggleActive(carouselItemsMobile, activeIndex + 1) + toggleActive(mobileIndicators, activeIndex + 1) + } + } + } + + touchsurface.addEventListener('touchstart', function(e){ + var touchobj = e.changedTouches[0] + dist = 0 + startX = touchobj.pageX + startY = touchobj.pageY + startTime = new Date().getTime() // record time when finger first makes contact with surface + e.preventDefault() + }, false) + + touchsurface.addEventListener('touchmove', function(e){ + e.preventDefault() // prevent scrolling when inside DIV + }, false) + + touchsurface.addEventListener('touchend', function(e){ + var touchobj = e.changedTouches[0] + dist = touchobj.pageX - startX // get total dist traveled by finger while in contact with surface + elapsedTime = new Date().getTime() - startTime // get time elapsed + // check that elapsed time is within specified, horizontal dist traveled >= threshold, and vertical dist traveled <= 100 + var swiperightBol = (elapsedTime <= allowedTime && dist >= threshold && Math.abs(touchobj.pageY - startY) <= 100) + handleswipe(swiperightBol) + e.preventDefault() + }, false) +}) diff --git a/assets/financing-comparison.js b/assets/financing-comparison.js new file mode 100644 index 00000000000..e5499a564b4 --- /dev/null +++ b/assets/financing-comparison.js @@ -0,0 +1,60 @@ +window.PositionColumns = function(id) { + const target = document.getElementById(`columns-position-${id}`).children[0] + const columns = document.getElementsByClassName('inv-column') + + Array.from(columns).forEach(col => { + col.remove() + target.append(col) + }) + + const mobileColumns = document.querySelectorAll('.inv-column[data-show-on-mobile="true"]') + const mediaQueryMatch = window.matchMedia('(max-width: 1200px)') + + const setComparison = (mobile) => { + const arrMobileColumns = Array.from(mobileColumns) + const moreThanTwoColumns = arrMobileColumns.length > 2 + const wrapper = arrMobileColumns[0].parentNode + + if (mobileColumns && mobileColumns.length > 0) { + if (mobile) { + Array.from(arrMobileColumns).forEach(col => { + if (moreThanTwoColumns) { + wrapper.style.width = `${ arrMobileColumns.length * 50}%` + } else { + wrapper.style.width = "100%" + wrapper.style.justifyContent = "space-around" + col.style.marginRight = 0 + } + }) + } else { + wrapper.style.removeProperty('width') + wrapper.style.removeProperty('justifyContent') + wrapper.style.removeProperty('marginRight') + } + } + } + + const displayColumns = (matches) => { + if (matches) { + Array.from(mobileColumns).forEach(col => { + col.style.display = 'block' + }) + const nonMobileColumns = document.querySelectorAll('.inv-column[data-show-on-mobile="false"]') + Array.from(nonMobileColumns).forEach(col => { + col.style.display = 'none' + }) + } else { + Array.from(columns).forEach(col => { + col.style.display = 'block' + }) + } + } + + const mediaListener = (event) => { + setComparison(event.matches) + displayColumns(event.matches) + } + setComparison(mediaQueryMatch.matches) + displayColumns(mediaQueryMatch.matches) + mediaQueryMatch.addListener(mediaListener) +} diff --git a/assets/global.js b/assets/global.js index 563363cd6d8..2ac09e83131 100644 --- a/assets/global.js +++ b/assets/global.js @@ -412,7 +412,9 @@ class HeaderDrawer extends MenuDrawer { } openMenuDrawer(summaryElement) { + // Prioritizing the Main Header this.header = this.header || document.getElementById('shopify-section-header'); + this.header = this.header || document.getElementById('shopify-section-industries-header'); this.borderOffset = this.borderOffset || this.closest('.header-wrapper').classList.contains('header-wrapper--border-bottom') ? 1 : 0; document.documentElement.style.setProperty('--header-bottom-position', `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`); this.header.classList.add('menu-open'); @@ -513,6 +515,11 @@ class DeferredMedia extends HTMLElement { this.setAttribute('loaded', true); const deferredElement = this.appendChild(content.querySelector('video, model-viewer, iframe')); if (focus) deferredElement.focus(); + if (deferredElement.nodeName == 'VIDEO' && deferredElement.getAttribute('autoplay')) { + // force autoplay for safari + deferredElement.play(); + } + } } } @@ -845,7 +852,7 @@ class VariantSelects extends HTMLElement { const price = document.getElementById(`price-${this.dataset.section}`); if (price) price.classList.remove('visibility-hidden'); - this.toggleAddButton(!this.currentVariant.available, window.variantStrings.soldOut); + this.toggleAddButton(!this.currentVariant.available, window.variantStrings.unavailable); }); } diff --git a/assets/hover_play.js b/assets/hover_play.js new file mode 100644 index 00000000000..95adf0b6c31 --- /dev/null +++ b/assets/hover_play.js @@ -0,0 +1,13 @@ +document.addEventListener('DOMContentLoaded', function() { + const iframes = document.getElementsByClassName('xcp-multicolumn__video'); + Array.from(iframes).forEach(iframe => { + const player = new Vimeo.Player(iframe); + + iframe.addEventListener('mouseenter', function() { + player.play() + }) + iframe.addEventListener('mouseleave', function() { + player.pause() + }) + }) +}) diff --git a/assets/inv-product.css b/assets/inv-product.css new file mode 100644 index 00000000000..3594ae78ecf --- /dev/null +++ b/assets/inv-product.css @@ -0,0 +1,136 @@ +.section { + --inv-orange: #fea245; + --inv-purple: #7f60c3; + --buy-box-gray: #eeeeee;} +.section-{{ section.id }}-padding { + background-color: white; + color: black; + display: flex; + justify-content: center; +} +.product { + width: 75%; +} + +.product__media-toggle {display: none !important;} +.product__modal-opener .product__media-icon {display: none !important;} + +.product__media.media { + background: transparent; +} + +h1 { + color: black; + font-size: 36px; + font-weight: 700; + font-family: lato, helvetica, sans-serif; +} +.section a:link { + color: var(--inv-purple); +} +.section a:visited { + color: var(--inv-purple); +} +.section a:hover { + color: var(--inv-orange); +} +.shopify-payment-button__button { + background-color: var(--inv-orange); + color: black; +} +.price__container { + color: black;} +.attachment-download-link { + color: black; +} +.share-button__button { + color: var(--inv-purple); +} +.buy-box__container { + background-color: var(--buy-box-gray); + padding: 15px; + padding-bottom: 0; + border-radius: 8px; + border-width: 1px; + border-style: solid; + border-color: rgb(223, 223, 223); +} +.product__text { + color: black; + font-size: 26px; +} +.product-form__submit { + background-color: var(--inv-orange); + color: black; + height: 44px; +} +.product-form { + background-color: var(--buy-box-gray); +} +.product__media.media { + height: 100%; + margin: 0 auto; +} +.quantity__input { + background-color: white; + color: black;} +.quantity__button { + background-color: var(--inv-orange); + color: black;} +.quantity__input:focus { + background-color: white; + outline: 0px; + box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6); +} +.quantity__input:not(:focus-visible):not(.focused) { + background-color: white;} +.quantity__button:not(:focus-visible):not(.focused) { + background-color: #e1e1e1; border-radius: 4px;} +.shopify-payment-button__more-options { + color: inherit; +} +.product-form__input input[type='radio']:checked + label { + border-radius: 4px; + border-color: var(--inv-orange); + border-style: solid;} +.product-form__input input[type='radio'] + label { + background-color: white; + color: black; + border-radius: 4px; + border-color: #e6e6e6; + border-style: solid;} +.accordion__title { + color: black; +} +.collapsible-content { + background-color: var(--buy-box-gray); +} +.collapsible-content h2{ + color: black;} +.accordion.content-container { + background-color: white; + border-radius: 10px; + color: black +} +.product .price .badge, .product .price__container { + margin-bottom: 1.5rem; +} + +.product__media, .slider-mobile-gutter, .product__media-gallery, .product__media-list, .product__modal-opener, .product__media { + height: 100%; +} + +.inv-product .product__media img { + object-fit: scale-down; +} + +@media screen and (max-width: 750px) { + .inv-product .grid__item { + min-height: 317px; + } + + .product__media.media { + width: 100%; + } +} + diff --git a/assets/inventables.css b/assets/inventables.css new file mode 100644 index 00000000000..f01d1be9b84 --- /dev/null +++ b/assets/inventables.css @@ -0,0 +1,100 @@ +body { + font-family: "AlrightSans-Regular"; +} + +#MainContent { + min-height: 56vh; +} + +.footer { + background-color: #333333; + color: white; + padding-top: 40px; +} + +.inventables__footer__content .footer-block__heading { + color: white; + font-weight: bold; + font-size: 3rem; +} + +.inventables__footer__content .link--text { + color: white; + font-size: 2rem; + text-decoration: none; +} + +.inventables__footer__content .link--text:hover { + font-weight: bold; +} + +@media (max-width: 750px) { + .inventables__footer__content .footer__blocks-wrapper { + flex-direction: column; + } + + .inventables__footer__content { + width: 80%; + margin: 0 auto; + } + + .inventables__footer__content .footer-block { + margin: 0 auto; + width: 100%; + } +} + +@font-face { + font-family: "AlrightSans-Bold"; + src: url("{{ 'AlrightSans-Bold.otf' | asset_url }}") format("opentype"); +} + +@font-face { + font-family: "AlrightSans-BoldItalic"; + src: url("{{ 'AlrightSans-BoldItalic.otf' | asset_url }}") format("opentype"); +} + +@font-face { + font-family: "AlrightSans-ExtraThin"; + src: url("{{ 'AlrightSans-ExtraThin.otf' | asset_url }}") format("opentype"); +} + +@font-face { + font-family: "AlrightSans-ExtraThinItalic"; + src: url("{{ 'AlrightSans-ExtraThinItalic.otf' | asset_url }}") format("opentype"); +} + +@font-face { + font-family: "AlrightSans-Light"; + src: url("{{ 'AlrightSans-Light.otf' | asset_url }}") format("opentype"); +} + +@font-face { + font-family: "AlrightSans-LightItalic"; + src: url("{{ 'AlrightSans-LightItalic.otf' | asset_url }}") format("opentype"); +} + +@font-face { + font-family: "AlrightSans-Medium"; + src: url("{{ 'AlrightSans-Medium.otf' | asset_url }}") format("opentype"); +} + +@font-face { + font-family: "AlrightSans-Regular"; + src: url("{{ 'AlrightSans-Regular.otf' | asset_url }}") format("opentype"); +} + +@font-face { + font-family: "AlrightSans-RegularItalic"; + src: url("{{ 'AlrightSans-RegularItalic.otf' | asset_url }}") format("opentype"); +} + +@font-face { + font-family: "AlrightSans-Thin"; + src: url("{{ 'AlrightSans-Thin.otf' | asset_url }}") format("opentype"); +} + +@font-face { + font-family: "AlrightSans-ThinItalic"; + src: url("{{ 'AlrightSans-ThinItalic.otf' | asset_url }}") format("opentype"); +} diff --git a/assets/inventables.js b/assets/inventables.js new file mode 100644 index 00000000000..cb16ae2f253 --- /dev/null +++ b/assets/inventables.js @@ -0,0 +1,66 @@ +class VariantMetafields extends HTMLElement { + constructor() { + super(); + } + + getMetafields() { + this.metafields = this.metafields || JSON.parse(this.querySelector('[type="application/json"]').textContent); + return this.metafields; + } +} + +customElements.define('variant-metafields', VariantMetafields); + +function suppressInvalidOptions(metaFields, variantData) { + variantData.forEach((variant) => { + let metaField = metaFields[variant.id]; + if (metaField) { + variant.available = metaFields[variant.id].available; + } + }); +} + +document.addEventListener('DOMContentLoaded', () => { + let variantRadios = document.querySelectorAll('variant-radios')[0]; + if (variantRadios == null) { + return; + } + let variantData = variantRadios.getVariantData(); + let metaFields = document.querySelectorAll('variant-metafields')[0].getMetafields(); + + // First, disable the ability to select any options marked as unavailable in metafields. + suppressInvalidOptions(metaFields, variantData); + + const fieldsets = Array.from(variantRadios.querySelectorAll('fieldset')); + const optionGroups = fieldsets.map((fs) => { return Array.from(fs.querySelectorAll('input')) }); + const labelGroups = fieldsets.map((fs) => { return Array.from(fs.querySelectorAll('label')) }); + optionGroups.forEach((og, i) => { + + // If the currently checked option is not available, we need to reset to an available one. + const availableOptions = []; + let needsReset = false; + + // Go through each option, and if it's not available, hide it. If it is available, mark it as such, in + // case we need to reset to it. + og.forEach((option, j) => { + let availableVariant = variantData.find((variant) => { + return variant.options[i] === option.value && variant.available }); + if (!availableVariant) { + if (option.checked) { + needsReset = true; + } + + option.style.display = 'none'; + labelGroups[i][j].style.display = 'none'; + } else { + availableOptions.push(option); + } + }); + + if (needsReset && availableOptions.length > 0) { + availableOptions[0].checked = true; + } + }); + + variantRadios.onVariantChange(); +}); \ No newline at end of file diff --git a/assets/rebranded-inv-logo.png b/assets/rebranded-inv-logo.png new file mode 100644 index 00000000000..530a2b10ed2 Binary files /dev/null and b/assets/rebranded-inv-logo.png differ diff --git a/assets/section-footer-header-inventables.css b/assets/section-footer-header-inventables.css new file mode 100644 index 00000000000..b399ad6f3b4 --- /dev/null +++ b/assets/section-footer-header-inventables.css @@ -0,0 +1,43 @@ +.inventables__footer-header { + display: flex; + justify-content: space-between; + padding-bottom: 30px; + border-bottom: 1px solid white; +} + +.list-social__link { + color: white; +} + +.list-social__link .icon { + height: 3rem; + width: 3rem; +} + +.footer-logo { + width: 300px; + height: auto; +} + +@media (max-width: 750px) { + .inventables__footer-header { + flex-direction: column; + } + + .footer-inventables__header-link { + width: 300px; + margin: 0 auto; + } +} + +.inventables__footer__content { + ul { + list-style: none; + padding-left: 0; + } + + ul li { + font-size: .5rem; + } +} + diff --git a/assets/section-footer.css b/assets/section-footer.css index d46b3464ee3..d56938d5271 100644 --- a/assets/section-footer.css +++ b/assets/section-footer.css @@ -7,6 +7,7 @@ } .footer__content-top { + padding-top: 5rem; padding-bottom: 5rem; display: block; } @@ -149,7 +150,16 @@ .footer-block__heading { margin-bottom: 2rem; margin-top: 0; - font-size: calc(var(--font-heading-scale) * 1.6rem); + font-size: calc(var(--font-heading-scale) * 2.0rem); + color: #fea245 +} + +.footer-block__heading::after { + content: url("https://cdn.shopify.com/s/files/1/0677/1182/8243/files/right_top_arrow_icon-b647e7935a576bc862f976ef1f7cc1c26b947fa88e6fc5b50faa1ea29bf79633.svg?v=1680808383"); + display: inline-block; + height: 13px; + width: 13px; + padding-left: 4px; } @media screen and (min-width: 990px) { @@ -514,3 +524,245 @@ noscript .localization-selector.link { } } } + +.footer { + font-family: "Alright Sans LT", lato, helvetica, sans-serif; + background: black; + padding: 40px 0; + color: white; + background-image: url('https://cdn.shopify.com/s/files/1/0677/1182/8243/files/pattern-black.svg?v=1681327371'); + background-size: 60px; + font-size: 14px; + + @media print { + display: none; + } +} + +.footer__container { + background: #333; + font-family: "Alright Sans LT", lato, helvetica, sans-serif; +} + +.footer__logo { + margin-bottom: 20px; + + @media (min-width: 500px) { + margin-bottom: 0; + } +} + +.footer__logo img { + width: 188px; +} + +.footer__social { + padding-bottom: 20px; + display: flex; + flex-direction: column; + justify-content: flex-start; + + @media (min-width: 500px) { + flex-direction: row; + justify-content: space-between; + } +} + +.footer__social-link { + margin-right: 20px; +} + +.footer__social-link:last-child { + margin-right: 0; +} + + +.footer__social-icon { + color: #FEA245; + display: inline-block; + font-size: 26px; +} + +.footer__social-icon:hover { + color: #FEA245; +} + +.invitation-card { + padding-top: 40px; + display: flex; + font-size: 16px; + flex-wrap: wrap; +} +.invitation-card .invitation-section { + border: 1px solid white; + font-weight: bold; +} + +.footer-wrapper__phone { + display: flex; +} + +.footer-wrapper__copy-right { + display: flex; + align-items: center; +} + +.footer-wrapper__copy-right span { + padding: 0 10px; +} + +.social.invitation-section a { + padding: 0 20px; +} + +.invitation-section { + display: flex; + justify-content: center; + align-items: center; +} + +.invitation-card .footer-wrapper { + margin-top: 10px; + padding: 0 27px; +} + +.invitation-card .footer-wrapper a { + margin-top: 10px; +} + +.invitation-card .footer-wrapper a, +.invitation-card .footer-wrapper a:active, +.invitation-card .footer-wrapper a:hover, +.invitation-card .footer-wrapper a:visited { + color: white; +} + +.invitation-card .footer-wrapper a:hover { + color: white; + font-weight: bold; + text-decoration: none; +} + +.invitation-card .footer-wrapper span { + color: white; +} + +.invitation-card .email-support { + width: 17%; + min-width: 199px; + + @media (max-width: 768px) { + min-width: unset; + width: 100%; + text-align: center; + padding-bottom: 10px; + } +} + +.invitation-card .email-support img { + width: 16px; + margin-left: 23px; +} + +.invitation-card .phone { + width: 16%; + min-width: 182px; + + @media (max-width: 768px) { + min-width: unset; + width: 100%; + text-align: center; + + .footer-wrapper { + display: flex; + justify-content: center; + } + } +} + +.invitation-card .phone img { + width: 16px; + margin-right: 12px; + float: left; +} + +.invitation-card .copy-right { + min-width: 499px; + width: 47%; + + @media (max-width: 768px) { + min-width: unset; + width: 100%; + } +} + +.invitation-card .copy-right .footer-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + +.invitation-card .social { + width: 17%; + min-width: 180px; + + @media (max-width: 768px) { + min-width: unset; + width: 100%; + } +} + +.invitation-card .social i { + color: #FEA245; +} + +.invitation-card .social a { + margin: auto auto; +} + +.invitation-card .social .footer-wrapper { + display: flex; + justify-content: space-around; + margin-bottom: 10px; +} + +.footer-bottom { + list-style-type: none; + padding: 0; + padding-top: 20px; + padding-bottom: 20px; + margin: 0; + font-family: Alright Sans LT,lato,helvetica,sans-serif; + font-size: 14px; + color: #e4e4e4; +} + +@media screen and (min-width: 750px) { + .footer-bottom { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + max-width: 400px; + margin: 0 auto; + } +} + +.footer-bottom .footer-bottom__text { + font-size: 12px; + color: #e4e4e4; + text-decoration: none; +} + +.copyright-inventables-inc { + line-height: calc(1 + 0.8 / var(--font-body-scale)); + padding-bottom: 1rem; + padding-top: 1rem; +} + +@media screen and (min-width: 750px) { + .copyright-inventables-inc { + padding-bottom: 0.5rem; + padding-top: 0.5rem; + } +} diff --git a/assets/section-header-inventables.css b/assets/section-header-inventables.css new file mode 100644 index 00000000000..932c9e6caef --- /dev/null +++ b/assets/section-header-inventables.css @@ -0,0 +1,43 @@ +.inventables-header__container { + display: flex; + justify-content: space-between; + height: 50px; + margin-top: 30px; +} + +.inventables-header__container__header-logo { + width: 300px; + height: auto; +} + +.inventables-header__back-link { + text-decoration: none; +} + +.inventables-header__back-link__text { + color: #ffffff; +} + +.inventables-header__back-link__text:visited { + color: #ffffff; +} + +.icon-close { + position: relative; + top: 7px; + width: 22px; + margin-left: 18px; + color: white; +} + +@media (max-width: 750px) { + .inventables-header__back-link__text { + display: none + } +} + +.list-menu__item { + font-size: 14px !important; + font-family: "AlrightSans-Light", lato, helvetica, sans-serif; + color: #fff !important; +} diff --git a/assets/section-main-product.css b/assets/section-main-product.css index d8d1fe04bad..9b2f4b9af9d 100644 --- a/assets/section-main-product.css +++ b/assets/section-main-product.css @@ -1,9 +1,11 @@ .product { margin: 0; + } .product.grid { gap: 0; + } .product--no-media { @@ -31,6 +33,7 @@ .product__info-wrapper { padding: 0 0 0 5rem; + } .product__info-wrapper--extra-padding { @@ -68,14 +71,14 @@ .product--medium:not(.product--no-media) .product__media-wrapper, .product--small:not(.product--no-media) .product__info-wrapper { - max-width: 55%; - width: calc(55% - var(--grid-desktop-horizontal-spacing) / 2); + max-width: 65%; + width: calc(65% - var(--grid-desktop-horizontal-spacing) / 2); } .product--medium:not(.product--no-media) .product__info-wrapper, .product--small:not(.product--no-media) .product__media-wrapper { - max-width: 45%; - width: calc(45% - var(--grid-desktop-horizontal-spacing) / 2); + max-width: 35%; + width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2); } } @@ -137,6 +140,8 @@ .product-form { display: block; + background-color: white; + color: black; } .product-form__error-message-wrapper:not([hidden]) { diff --git a/assets/utils.css b/assets/utils.css new file mode 100644 index 00000000000..daea8820391 --- /dev/null +++ b/assets/utils.css @@ -0,0 +1,7 @@ +.w-100 { + width: 100%; +} + +.mb-2 { + margin-bottom: 2rem; +} diff --git a/assets/video-section.css b/assets/video-section.css index b2d9e35333e..651542c2bd9 100644 --- a/assets/video-section.css +++ b/assets/video-section.css @@ -21,8 +21,17 @@ } .video-section__poster, -.video-section__media iframe { +.video-section__media iframe, +.video-section__media video { position: absolute; width: 100%; height: 100%; } + +.video-section__media video { + background: #000000; +} + +.video-section__media.media-fit-cover video { + object-fit: cover; +} diff --git a/assets/xcp-add-to-cart.css b/assets/xcp-add-to-cart.css new file mode 100644 index 00000000000..5316ee539ba --- /dev/null +++ b/assets/xcp-add-to-cart.css @@ -0,0 +1,10 @@ +product-form.inventables-page-bottom-product-form { + width: 300px; + margin: 0 auto; +} +product-form.inventables-page-bottom-product-form button { + text-transform: uppercase; + font-weight: bold; + color: #242728; + background-color: #FFB256; +} diff --git a/assets/xcp-bundle.css b/assets/xcp-bundle.css new file mode 100644 index 00000000000..9a38fcf71e3 --- /dev/null +++ b/assets/xcp-bundle.css @@ -0,0 +1,106 @@ +/* title */ +.xcp-complete__title { + text-align: center; +} +@media screen and (min-width: 750px) { +.xcp-complete__title { + display: flex; + justify-content: center; +} +} +.xcp-complete__title h2 { + font-size: 3rem; + font-weight: normal; + text-transform: uppercase; +} +@media screen and (min-width: 750px) { + .xcp-complete__title h2 { + font-size: 3.5rem; + font-weight: normal; + text-transform: uppercase; + } +} +.xcp-complete__title h2 em { + color: #ffb256; + font-weight: bold; + font-style: normal; +} + +/**** body */ + +.xcp-complete__hw-sw-support { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0 auto; + padding: 10px 0 40px 0; +} +@media screen and (min-width: 750px) { +.xcp-complete__hw-sw-support + { + flex-direction: row; + align-items: normal; + } +} +.xcp-complete__hw-sw-support h3, +.xcp-complete__hw-sw-support li { + text-transform: uppercase; +} +.xcp-complete__hw-sw-support h3 { + font-size: 3rem; + font-weight: bold; + margin: 10px 0; +} +.xcp-complete__hw-sw-support h3.xcp-complete__plus { + font-size: 4rem; + display: block; + position: absolute; + bottom: -35px; + right: 50%; + z-index: 1; +} +@media screen and (min-width: 750px) { + .xcp-complete__hw-sw-support h3.xcp-complete__plus { + font-size: 6rem; + top: 35%; + right: -17px; + } +} +.xcp-complete__section { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} +@media screen and (min-width: 750px) { +.xcp-complete__section { + padding: 20px; + width: 375px; +}} + +.xcp-complete__section img { + width: 70vw; + margin: 40px 0; + background-color: #fff; + border-radius: 10px; + border: 3px solid #ffb256; +} + +@media screen and (min-width: 750px) { +.xcp-complete__section img { + height: 200px; + width: auto; + margin: 10px 0; +}} + +.xcp-complete__section.xcp-complete__hw { + background-color: rgba(223, 223, 223, 0.15); +} +.xcp-complete__section.xcp-complete__sw { + background-color: rgba(77,77,77,0.35); +} +.xcp-complete__section.xcp-complete__support { + background-color: #212223; +} diff --git a/assets/xcp-carousel.js b/assets/xcp-carousel.js new file mode 100644 index 00000000000..6d903063546 --- /dev/null +++ b/assets/xcp-carousel.js @@ -0,0 +1,105 @@ +document.addEventListener('DOMContentLoaded', function () { + const carousels = document.getElementsByClassName('xcp-grid-carousel') + + if (carousels.length > 0) { + Array.from(carousels).forEach(carousel => { + handleArrows(carousel) + handleSwipe(carousel) + }) + } + + function carouselActiveIndex(carousel) { + const activeImage = carouselActiveImage(carousel) + if (activeImage) { + return activeImage[0].dataset.itemIndex + } else { + return null + } + } + + function carouselActiveImage(carousel) { + const images = carousel.getElementsByClassName('xcp-grid-carousel__carousel__image') + const activeImage = Array.from(images).filter(img => { + return img.classList.contains('active') + }) + + return activeImage + } + + function clearActive(carousel) { + const images = carousel.getElementsByClassName('xcp-grid-carousel__carousel__image') + Array.from(images).forEach(img => { + img.classList.remove('active') + }) + const indicators = carousel.getElementsByClassName('xcp-grid-carousel__carousel__indicator') + Array.from(indicators).forEach(ind => { + ind.classList.remove('active') + }) + } + + function scrollToIndex(carousel, index) { + const imageToActivate = carousel.querySelector(`.xcp-grid-carousel__carousel__image[data-item-index="${index}"]`) + const indicatorToActivate = carousel.querySelector(`.xcp-grid-carousel__carousel__indicator[data-item-index="${index}"]`) + const carouselInner = carousel.querySelector('.xcp-grid-carousel__carousel__inner') + + const images = carousel.getElementsByClassName('xcp-grid-carousel__carousel__image') + if (index < images.length && index >= 0) { + clearActive(carousel) + carouselInner.style.left = `-${imageToActivate.offsetLeft}px` + imageToActivate.classList.add('active') + indicatorToActivate.classList.add('active') + } + } + + function handleArrows(carousel) { + const leftArrow = carousel.getElementsByClassName('xcp-grid-carousel__carousel__left-arrow')[0] + const rightArrow = carousel.getElementsByClassName('xcp-grid-carousel__carousel__right-arrow')[0] + + if (leftArrow) { + leftArrow.addEventListener('click', function() { + const activeIndex = carouselActiveIndex(carousel) + scrollToIndex(carousel, parseInt(activeIndex) - 1) + }) + } + + if (rightArrow) { + rightArrow.addEventListener('click', function() { + const activeIndex = carouselActiveIndex(carousel) + scrollToIndex(carousel, parseInt(activeIndex) + 1) + }) + } + } + + function handleSwipe(carousel) { + var touchstartX = 0; + var touchstartY = 0; + var touchendX = 0; + var touchendY = 0; + + var gesuredZone = carousel; + + gesuredZone.addEventListener('touchstart', function(event) { + touchstartX = event.changedTouches[0].screenX; + touchstartY = event.changedTouches[0].screenY; + }, false); + + gesuredZone.addEventListener('touchend', function(event) { + touchendX = event.changedTouches[0].screenX; + touchendY = event.changedTouches[0].screenY; + handleGesure(); + }, false); + + function handleGesure() { + const activeIndex = carouselActiveIndex(carousel) + if (touchendX < touchstartX) { + scrollToIndex(carousel, parseInt(activeIndex) + 1) + } + if (touchendX > touchstartX) { + scrollToIndex(carousel, parseInt(activeIndex) - 1) + } + if (touchendY > touchstartY) { + scrollToIndex(carousel, parseInt(activeIndex) + 1) + } + } + } +}) diff --git a/assets/xcp-modal.js b/assets/xcp-modal.js new file mode 100644 index 00000000000..d01e35d08b6 --- /dev/null +++ b/assets/xcp-modal.js @@ -0,0 +1,33 @@ +document.addEventListener('DOMContentLoaded', function() { + var xcpModalTriggers = document.querySelectorAll('.xcp-modal'); + if (!xcpModalTriggers.length) { + return; + } + + function init(trigger) { + var modalTargetClass = '.' + trigger.getAttribute('data-modal-target'); + var closedClass = trigger.getAttribute('data-modal-target-closed'); + var closerClass = '.' + trigger.getAttribute('data-modal-closer'); + + var modalTarget = document.querySelector(modalTargetClass); + var closer = document.querySelector(closerClass); + + trigger.addEventListener('click', function() { + modalTarget.classList.remove(closedClass); + }); + + closer.addEventListener('click', function() { + modalTarget.classList.add(closedClass); + }); + + modalTarget.addEventListener('click', function(event) { + if (event.target === event.currentTarget) { + modalTarget.classList.add(closedClass); + } + }); + } + + xcpModalTriggers.forEach(function(trigger) { + init(trigger); + }); +}); diff --git a/assets/xcp-multicolumn-requirements.css b/assets/xcp-multicolumn-requirements.css new file mode 100644 index 00000000000..28e50ca2e6c --- /dev/null +++ b/assets/xcp-multicolumn-requirements.css @@ -0,0 +1,19 @@ +a { + color: #ffb762; + font-weight: bold; + text-decoration: none; +} +.multicolumn { + border-radius: 20px; + margin: 0 10%; + margin-top: 20px; +} +.multicolumn.background-primary .multicolumn-card { + background: none; +} + +.xcp-content-wrapper { + @media (max-width: 1300px) { + flex-wrap: wrap; + } +} diff --git a/assets/xcp-navbar-dropdown.js b/assets/xcp-navbar-dropdown.js new file mode 100644 index 00000000000..5b2ea7b41f1 --- /dev/null +++ b/assets/xcp-navbar-dropdown.js @@ -0,0 +1,22 @@ +document.addEventListener('DOMContentLoaded', function() { + const dropdowns = document.querySelectorAll('.xcp-navbar__menu-item--desktop.toggle-dropdown') + + Array.from(dropdowns).forEach((d) =>{ + d.addEventListener('click', function() { + const target = document.getElementById(d.dataset.target) + target.classList.toggle('hide') + }) + }) + + const dropdownsMobile = document.querySelectorAll('.xcp-navbar__menu-item.toggle-dropdown') + Array.from(dropdownsMobile).forEach((d) =>{ + const chevronWrappers = d.querySelectorAll('p span.xcp-navbar-item-dropdown__menu-button') + d.addEventListener('click', function() { + const target = document.getElementById(d.dataset.target) + target.classList.toggle('hide') + Array.from(chevronWrappers).forEach(cw => { + cw.classList.toggle('hide') + }) + }) + }) +}) diff --git a/assets/xcp-navbar.css b/assets/xcp-navbar.css new file mode 100644 index 00000000000..0c88edc2eab --- /dev/null +++ b/assets/xcp-navbar.css @@ -0,0 +1,318 @@ +.hide { + display: none; +} + +.xcp-navbar { + display: flex; + padding: 0px 20px; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; +} + +.xcp-navbar a { + text-decoration: none; +} + +.xcp-navbar__container a { + font-style: normal; + color: #d8d8d8; +} + +.xcp-navbar__container a:hover { + color: #ffb256; + cursor: pointer; +} + +.xcp-navbar__container a:hover,.xcp-navbar__container a:visited,.xcp-navbar__container a:focus,.xcp-navbar__container a:active { + text-decoration: none; +} + +.xcp-navbar__container a.xcp-navbar__order-now { + color: #333636; +} + +.xcp-navbar__container a.current-page { + color: #666; +} + +.xcp-navbar__container span.current-page { + color: #656665; + font-weight: bold; +} + +.xcp-navbar__container--fixed { + position: fixed; + top: 0; + z-index: 1; + width: 100%; + box-shadow: unset; +} + +@media (min-width: 1200px) { + .xcp-navbar__mobile { + display:none; + } +} + +.xcp-navbar__mobile--expanded { + display: block; + background-color: #333636; +} + +.xcp-navbar__desktop { + display: none; +} + +@media (min-width: 1200px) { + .xcp-navbar__desktop { + display:flex; + } +} + +@media (min-width: 1200px) { + .xcp-navbar__logo { + display:none; + } +} + +.xcp-navbar__logo--desktop { + display: none; +} + +@media (min-width: 1200px) { + .xcp-navbar__logo--desktop { + display:flex; + margin-left: 10px; + } + + .xcp-navbar__logo--desktop img { + height: 50px; + } +} + +.xcp-navbar__xcp-logo { + font-size: 22px; +} + +.xcp-navbar__xcp-logo--x-carve { + font-weight: bold; +} + +.xcp-navbar__xcp-logo a { + color: #fff; +} + +@media only screen and (min-width: 768px) { + .xcp-navbar__xcp-logo { + font-size:30px; + } +} + +.xcp-navbar__order-now { + font-size: 12px; + padding: 2px 10px; +} + +@media (min-width: 415px) { + .xcp-navbar__order-now { + padding:6px 16px; + } +} + +@media (min-width: 1200px) { + .xcp-navbar__order-now { + padding:4px 16px; + } +} + +.xcp-navbar__schedule-demo { + font-size: 12px; + font-family: var(--font-body-family); + letter-spacing: 0.06rem; + padding: 6.5px 16px; + margin-right: 16px; + background-color: #eee; +} + +.xcp-navbar__menu { + z-index: 100; + list-style-type: none; + margin: 0; + margin-top: -1px; + width: 100%; + flex-direction: column; + align-items: flex-start; + position: absolute; + background-color: var(--gradient-base-background-2); + padding: 10px 50px; + box-sizing: border-box; +} + +.xcp-navbar__menu-button { + color: #d8d8d8; + padding: 12px; +} + +@media (min-width: 1200px) { + .xcp-navbar__menu-button { + display:none; + } +} + +.xcp-navbar__menu-button:hover { + cursor: pointer; +} + +.xcp-navbar__menu-item { + width: 100%; + border-bottom: 1px solid #d8d8d8; + font-weight: 100; + font-size: 14px; + color: #d8d8d8; + text-transform: uppercase; +} + +.xcp-navbar__menu-item:last-child { + border-bottom: 0; +} + +.xcp-navbar__menu-item p { + margin-top: 20px; + margin-bottom: 16px; +} +.xcp-navbar__menu-item a { + text-decoration: none; +} + +.xcp-navbar__menu--desktop { + display: none; +} + +@media (min-width: 1200px) { + .xcp-navbar__menu--desktop { + list-style-type:none; + margin: 0; + display: flex; + align-items: center; + } +} + +.xcp-navbar__menu-item--desktop { + display: none; +} + +@media (min-width: 1200px) { + .xcp-navbar__menu-item--desktop { + font-size:13px; + font-weight: 100; + display: flex; + justify-content: flex-start; + color: #eee; + text-transform: uppercase; + padding-right: 35px; + } +} + +.xcp-navbar__show { + display: flex; +} + + + +.xcp-demo { + display: flex; + flex-direction: column; + align-items: center; + background-color: #232728; + color: #d8d8d8; + text-align: center; + padding-bottom: 75px; +} + +.xcp-demo__modal { + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + margin: 0 auto; + background-color: rgba(35,39,40,0.8); + display: flex; + justify-content: center; + align-items: center; + text-align: center; + z-index: 100; +} + +.xcp-demo__modal--closed { + display: none; +} + +.xcp-demo__modal-content { + position: relative; + background-color: #fff; + opacity: 1; + color: #333636; + width: 100%; + max-width: 960px; + height: 80%; + padding: 40px; + overflow-y: scroll; +} + +@media only screen and (min-width: 768px) { + .xcp-demo__modal-content { + width:70vw; + height: 90vh; + } +} + +.xcp-demo__modal-close { + position: absolute; + top: 10px; + right: 10px; + padding: 20px; + cursor: pointer; +} + +.xcp-demo__modal-close i { + font-size: 26px; +} + +.xcp-navbar .product-form { + position: relative; + top: -4px; +} +.xcp-navbar .product-form, .xcp-navbar .product-form__buttons { + width: 148px; + height: 20px; + font-size: 12px; +} + +.xcp-navbar .product-form__submit { + font-size: 12px; + height: 30px; + min-height: unset; + min-width: unset; +} + +@media (max-width: 768px) { + .xcp-navbar__menu-button-and-cta { + display: flex; + } + + .xcp-navbar .product-form__submit { + padding: 0; + min-width: unset; + } + + .xcp-navbar .product-form, .xcp-navbar .product-form__buttons { + width: 100px; + } + .xcp-navbar .product-form { + position: relative; + top: 10px; + } +} diff --git a/assets/xcp-text-carousel.js b/assets/xcp-text-carousel.js new file mode 100644 index 00000000000..79f29835343 --- /dev/null +++ b/assets/xcp-text-carousel.js @@ -0,0 +1,131 @@ +document.addEventListener('DOMContentLoaded', function () { + const carousels = document.getElementsByClassName('xcp-text-carousel__carousel-wrapper') + + if (carousels.length > 0) { + Array.from(carousels).forEach(carousel => { + handleArrows(carousel) + handleSwipe(carousel) + handleThumbnails(carousel) + }) + } + + function carouselActiveIndex(carousel) { + const activeImage = carouselActiveImage(carousel) + if (activeImage) { + return activeImage[0].dataset.itemIndex + } else { + return null + } + } + + function carouselActiveImage(carousel) { + const images = carousel.getElementsByClassName('xcp-text-carousel__carousel__image') + const activeImage = Array.from(images).filter(img => { + return img.classList.contains('active') + }) + + return activeImage + } + + function clearActive(carousel) { + const images = carousel.getElementsByClassName('xcp-text-carousel__carousel__image') + Array.from(images).forEach(img => { + img.classList.remove('active') + }) + const indicators = carousel.getElementsByClassName('xcp-text-carousel__carousel__indicator') + Array.from(indicators).forEach(ind => { + ind.classList.remove('active') + }) + const thumbnails = carousel.getElementsByClassName('xcp-text-carousel__thumbnail__image') + Array.from(thumbnails).forEach(thumb => { + thumb.classList.remove('active') + }) + } + + function scrollToIndex(carousel, index) { + const imageToActivate = carousel.querySelector(`.xcp-text-carousel__carousel__image[data-item-index="${index}"]`) + const indicatorToActivate = carousel.querySelector(`.xcp-text-carousel__carousel__indicator[data-item-index="${index}"]`) + const thumbnailToActivate = carousel.querySelector(`.xcp-text-carousel__thumbnail__image[data-item-index="${index}"]`) + const carouselInner = carousel.querySelector('.xcp-text-carousel__image-position') + const thumbnailsFrame = carousel.querySelector('.xcp-text-carousel__carousel__thumnail-frame') + const activeIndex = carouselActiveIndex(carousel) + let thumbnailLeft = 0 + + if (activeIndex > index) { + thumbnailLeft = thumbnailToActivate.clientLeft + } else { + thumbnailLeft = thumbnailToActivate.clientLeft + thumbnailToActivate.clientWidth + } + + const images = carousel.getElementsByClassName('xcp-text-carousel__carousel__image') + if (index < images.length && index >= 0) { + clearActive(carousel) + carouselInner.scrollTo(imageToActivate.offsetWidth * index, 0) + thumbnailsFrame.scrollTo(thumbnailLeft,0) + imageToActivate.classList.add('active') + indicatorToActivate.classList.add('active') + thumbnailToActivate.classList.add('active') + } + } + + function handleArrows(carousel) { + const leftArrow = carousel.getElementsByClassName('xcp-text-carousel__carousel__left-arrow')[0] + const rightArrow = carousel.getElementsByClassName('xcp-text-carousel__carousel__right-arrow')[0] + + if (leftArrow) { + leftArrow.addEventListener('click', function() { + const activeIndex = carouselActiveIndex(carousel) + scrollToIndex(carousel, parseInt(activeIndex) - 1) + }) + } + + if (rightArrow) { + rightArrow.addEventListener('click', function() { + const activeIndex = carouselActiveIndex(carousel) + scrollToIndex(carousel, parseInt(activeIndex) + 1) + }) + } + } + + function handleSwipe(carousel) { + var touchstartX = 0; + var touchstartY = 0; + var touchendX = 0; + var touchendY = 0; + + var gesuredZone = carousel.querySelector('.xcp-text-carousel__carousel__inner'); + + gesuredZone.addEventListener('touchstart', function(event) { + touchstartX = event.changedTouches[0].screenX; + touchstartY = event.changedTouches[0].screenY; + }, false); + + gesuredZone.addEventListener('touchend', function(event) { + touchendX = event.changedTouches[0].screenX; + touchendY = event.changedTouches[0].screenY; + handleGesure(); + }, false); + + function handleGesure() { + const activeIndex = carouselActiveIndex(carousel) + if (touchendX < touchstartX) { + scrollToIndex(carousel, parseInt(activeIndex) + 1) + } + if (touchendX > touchstartX) { + scrollToIndex(carousel, parseInt(activeIndex) - 1) + } + if (touchendY > touchstartY) { + } + } + } + + function handleThumbnails(carousel) { + const thumbnails = carousel.getElementsByClassName('xcp-text-carousel__thumbnail__image') + Array.from(thumbnails).forEach(thumb => { + thumb.addEventListener('click', function() { + const index = thumb.dataset.itemIndex + scrollToIndex(carousel, index) + }) + }) + } +}) diff --git a/config/settings_data.json b/config/settings_data.json index be8b455d48c..abce73576fc 100644 --- a/config/settings_data.json +++ b/config/settings_data.json @@ -1,5 +1,384 @@ { - "current": "Default", + "current": { + "colors_solid_button_labels": "#ffffff", + "colors_accent_1": "#121212", + "gradient_accent_1": "", + "colors_accent_2": "#fea245", + "gradient_accent_2": "", + "colors_text": "#ffffff", + "colors_outline_button_labels": "#fea245", + "colors_background_1": "#272929", + "gradient_background_1": "", + "colors_background_2": "#1a1d1d", + "gradient_background_2": "", + "type_header_font": "assistant_n4", + "heading_scale": 100, + "type_body_font": "assistant_n4", + "body_scale": 100, + "page_width": 1000, + "spacing_sections": 0, + "spacing_grid_horizontal": 8, + "spacing_grid_vertical": 8, + "buttons_border_thickness": 1, + "buttons_border_opacity": 0, + "buttons_radius": 0, + "buttons_shadow_opacity": 40, + "buttons_shadow_horizontal_offset": 0, + "buttons_shadow_vertical_offset": 2, + "buttons_shadow_blur": 5, + "variant_pills_border_thickness": 1, + "variant_pills_border_opacity": 55, + "variant_pills_radius": 40, + "variant_pills_shadow_opacity": 0, + "variant_pills_shadow_horizontal_offset": 0, + "variant_pills_shadow_vertical_offset": 4, + "variant_pills_shadow_blur": 5, + "inputs_border_thickness": 1, + "inputs_border_opacity": 55, + "inputs_radius": 0, + "inputs_shadow_opacity": 0, + "inputs_shadow_horizontal_offset": 0, + "inputs_shadow_vertical_offset": 0, + "inputs_shadow_blur": 5, + "card_style": "standard", + "card_image_padding": 0, + "card_text_alignment": "left", + "card_color_scheme": "background-2", + "card_border_thickness": 0, + "card_border_opacity": 10, + "card_corner_radius": 0, + "card_shadow_opacity": 0, + "card_shadow_horizontal_offset": 0, + "card_shadow_vertical_offset": 4, + "card_shadow_blur": 5, + "collection_card_style": "standard", + "collection_card_image_padding": 0, + "collection_card_text_alignment": "left", + "collection_card_color_scheme": "background-2", + "collection_card_border_thickness": 0, + "collection_card_border_opacity": 10, + "collection_card_corner_radius": 0, + "collection_card_shadow_opacity": 0, + "collection_card_shadow_horizontal_offset": 0, + "collection_card_shadow_vertical_offset": 4, + "collection_card_shadow_blur": 5, + "blog_card_style": "standard", + "blog_card_image_padding": 0, + "blog_card_text_alignment": "left", + "blog_card_color_scheme": "background-2", + "blog_card_border_thickness": 0, + "blog_card_border_opacity": 10, + "blog_card_corner_radius": 0, + "blog_card_shadow_opacity": 0, + "blog_card_shadow_horizontal_offset": 0, + "blog_card_shadow_vertical_offset": 4, + "blog_card_shadow_blur": 5, + "text_boxes_border_thickness": 0, + "text_boxes_border_opacity": 10, + "text_boxes_radius": 0, + "text_boxes_shadow_opacity": 0, + "text_boxes_shadow_horizontal_offset": 0, + "text_boxes_shadow_vertical_offset": 4, + "text_boxes_shadow_blur": 5, + "media_border_thickness": 1, + "media_border_opacity": 5, + "media_radius": 0, + "media_shadow_opacity": 0, + "media_shadow_horizontal_offset": 0, + "media_shadow_vertical_offset": 4, + "media_shadow_blur": 5, + "popup_border_thickness": 1, + "popup_border_opacity": 10, + "popup_corner_radius": 0, + "popup_shadow_opacity": 0, + "popup_shadow_horizontal_offset": 0, + "popup_shadow_vertical_offset": 4, + "popup_shadow_blur": 5, + "drawer_border_thickness": 1, + "drawer_border_opacity": 10, + "drawer_shadow_opacity": 0, + "drawer_shadow_horizontal_offset": 0, + "drawer_shadow_vertical_offset": 4, + "drawer_shadow_blur": 5, + "badge_position": "bottom left", + "badge_corner_radius": 40, + "sale_badge_color_scheme": "accent-1", + "sold_out_badge_color_scheme": "inverse", + "accent_icons": "accent-2", + "social_twitter_link": "https:\/\/twitter.com\/inventables", + "social_facebook_link": "https:\/\/www.facebook.com\/Inventables\/", + "social_pinterest_link": "", + "social_instagram_link": "https:\/\/www.instagram.com\/inventables\/?hl=en", + "social_tiktok_link": "", + "social_tumblr_link": "", + "social_snapchat_link": "", + "social_youtube_link": "", + "social_vimeo_link": "", + "predictive_search_enabled": true, + "predictive_search_show_vendor": false, + "predictive_search_show_price": false, + "favicon": "shopify:\/\/shop_images\/favicon_v1.png", + "show_cart_note": false, + "sections": { + "announcement-bar": { + "type": "announcement-bar", + "blocks": { + "announcement-bar-0": { + "type": "announcement", + "settings": { + "text": "Email Support | Mon - Fri: 9am - 5pm Sun: 12pm - 4pm CT | Call Support: 312-775-7009", + "text_alignment": "center", + "color_scheme": "accent-2", + "link": "https:\/\/inventables.zendesk.com\/hc\/en-us\/requests\/new" + } + }, + "858f094b-fa3c-4f3d-836d-55d656225898": { + "type": "announcement", + "settings": { + "text": "", + "text_alignment": "center", + "color_scheme": "accent-2", + "link": "" + } + }, + "74cbe116-d589-4dee-b150-331d1cc2f6a4": { + "type": "announcement", + "disabled": true, + "settings": { + "text": "Welcome to our store", + "text_alignment": "center", + "color_scheme": "accent-1", + "link": "" + } + } + }, + "block_order": [ + "announcement-bar-0", + "858f094b-fa3c-4f3d-836d-55d656225898", + "74cbe116-d589-4dee-b150-331d1cc2f6a4" + ], + "custom_css": [ + + ], + "settings": { + } + }, + "header": { + "type": "header", + "custom_css": [ + ".search__input {background-color: white; color: black; margin-right: 51px;}" + ], + "settings": { + "color_scheme": "accent-1", + "logo": "shopify:\/\/shop_images\/INV_logo_r_yel-wht_h.png", + "logo_width": 200, + "logo_position": "middle-left", + "menu": "navbar", + "menu_1": "navbar-icons", + "menu_type_desktop": "dropdown", + "show_line_separator": true, + "enable_sticky_header": true, + "mobile_logo_position": "center", + "margin_bottom": 0, + "padding_top": 20, + "padding_bottom": 20 + } + }, + "industries-header": { + "type": "industries-header", + "custom_css": [ + ".search__input {background-color: white; color: black; margin-right: 51px;}" + ], + "settings": { + "header_height": 118, + "color_scheme": "accent-1", + "logo": "shopify:\/\/shop_images\/inventables_logo_with_name_white.png", + "logo_width": 150, + "logo_position": "left", + "menu": "navbar", + "menu_1": "navbar-icons", + "menu_type_desktop": "dropdown", + "show_line_separator": true, + "enable_sticky_header": true, + "mobile_logo_position": "center", + "margin_bottom": 0, + "padding_top": 20, + "padding_bottom": 20, + "cta_txt_primary": "", + "cta_url_primary": "", + "cta_txt_secondary": "Log in to easel", + "cta_url_secondary": "https:\/\/easel.inventables.com\/" + } + }, + "footer": { + "type": "footer", + "blocks": { + "0d84aa13-98d6-4ee3-a03d-6226a927c8bb": { + "type": "link_list", + "settings": { + "heading": "SHOP", + "menu": "footer" + } + }, + "c8288bb9-663c-41fa-9967-885d97f48c7b": { + "type": "link_list", + "settings": { + "heading": "PROJECTS", + "menu": "projects" + } + }, + "c523f314-bbf9-463f-80c1-a9294a53b424": { + "type": "link_list", + "settings": { + "heading": "HELP", + "menu": "help" + } + }, + "7de32f08-88e5-4a3e-9178-d52c9514e7d2": { + "type": "link_list", + "settings": { + "heading": "ABOUT", + "menu": "about" + } + } + }, + "block_order": [ + "0d84aa13-98d6-4ee3-a03d-6226a927c8bb", + "c8288bb9-663c-41fa-9967-885d97f48c7b", + "c523f314-bbf9-463f-80c1-a9294a53b424", + "7de32f08-88e5-4a3e-9178-d52c9514e7d2" + ], + "custom_css": [ + + ], + "settings": { + "color_scheme": "background-1", + "newsletter_enable": false, + "newsletter_heading": "", + "show_social": false, + "enable_country_selector": true, + "enable_language_selector": true, + "payment_enable": true, + "margin_top": 0, + "padding_top": 16, + "padding_bottom": 20 + } + }, + "main-password-header": { + "type": "main-password-header", + "settings": { + "logo_max_width": 100, + "color_scheme": "background-1" + } + }, + "main-password-footer": { + "type": "main-password-footer", + "settings": { + "color_scheme": "background-1" + } + }, + "footer-header-inventables": { + "type": "footer-header-inventables", + "settings": { + "inventables_page_url": "https:\/\/www.inventables.com\/", + "logo": "shopify:\/\/shop_images\/inventables_logo.png" + } + }, + "footer-inventables": { + "type": "footer-inventables", + "blocks": { + "7bee9056-2fdd-4acb-836e-661ea63a21bb": { + "type": "link_list", + "settings": { + "heading": "Shop", + "menu": "shop" + } + }, + "15bf94e3-2d18-446f-b410-c6516af504d2": { + "type": "link_list", + "settings": { + "heading": "PROJECTS", + "menu": "projects" + } + }, + "f89d7e5c-97fb-4e25-8c48-1e6e39b096be": { + "type": "link_list", + "settings": { + "heading": "Help", + "menu": "help" + } + }, + "89b90db7-b9a5-489f-93ec-4452697ae9ac": { + "type": "link_list", + "settings": { + "heading": "About", + "menu": "about" + } + } + }, + "block_order": [ + "7bee9056-2fdd-4acb-836e-661ea63a21bb", + "15bf94e3-2d18-446f-b410-c6516af504d2", + "f89d7e5c-97fb-4e25-8c48-1e6e39b096be", + "89b90db7-b9a5-489f-93ec-4452697ae9ac" + ], + "settings": { + } + }, + "easel-header": { + "type": "easel-header", + "blocks": { + "00846d8c-86d3-49e5-a0f9-2750bf226b69": { + "type": "nav_item", + "settings": { + "text": "Overview", + "url": "#overview" + } + }, + "ca01df36-f770-4ec4-b8a5-8e5a6456cfaa": { + "type": "nav_item", + "settings": { + "text": "Compare Plans", + "url": "#plans" + } + }, + "1e2c194c-0698-4a2e-8b04-5fbf8a81c570": { + "type": "nav_item", + "settings": { + "text": "Supported Hardware", + "url": "#compatible-machines" + } + } + }, + "block_order": [ + "00846d8c-86d3-49e5-a0f9-2750bf226b69", + "ca01df36-f770-4ec4-b8a5-8e5a6456cfaa", + "1e2c194c-0698-4a2e-8b04-5fbf8a81c570" + ], + "settings": { + "logo": "shopify:\/\/shop_images\/easel_logo.svg", + "orange_btn_text": "Start Free Trial", + "orange_btn_url": "https:\/\/easel.inventables.com\/users\/sign_in?tab=new&utm_source=inventables&utm_campaign=none" + } + }, + "cookie_banner": { + "type": "cookie_banner", + "settings": { + } + } + }, + "content_for_index": [ + + ], + "blocks": { + "16735461377607925125": { + "type": "shopify:\/\/apps\/rt-terms-and-conditions-box\/blocks\/app-embed\/17661ca5-aeea-41b9-8091-d8f7233e8b22", + "disabled": true, + "settings": { + } + } + } + }, "presets": { "Default": { "colors_solid_button_labels": "#ffffff", @@ -135,18 +514,21 @@ }, "block_order": [ "announcement-bar-0" - ] + ], + "settings": { + } }, - "header": { - "type": "header", + "header-inventables": { + "type": "header-inventables", "settings": { - "color_scheme": "background-1", - "logo_width": 90, - "logo_position": "middle-left", - "menu": "main-menu", - "show_line_separator": true, - "enable_sticky_header": true, - "margin_bottom": 0 + "logo": "shopify:\/\/shop_images\/inventables_logo_black.png" + } + }, + "footer-header-inventables": { + "type": "footer-header-inventables", + "settings": { + "inventables_page_url": "https:\/\/www.inventables.com\/", + "logo": "shopify:\/\/shop_images\/inventables_logo.png" } }, "footer": { @@ -207,5 +589,10 @@ } } } + }, + "platform_customizations": { + "custom_css": [ + ".inv-hr {width: 80%; margin: 0 auto; height: 2px; background: #ffb256;}" + ] } } diff --git a/config/settings_schema.json b/config/settings_schema.json index 815c0ca40f0..4f608335e22 100644 --- a/config/settings_schema.json +++ b/config/settings_schema.json @@ -1508,5 +1508,53 @@ "info": "t:settings_schema.cart.settings.cart_drawer.collection.info" } ] + }, + { + "name": "Simulate User (Theme Editor Only)", + "settings": [ + { + "type": "radio", + "id": "simulated_user_type", + "label": "User Type", + "options": [ + { + "value": "guest", + "label": "Guest" + }, + { + "value": "buyer", + "label": "Buyer" + }, + { + "value": "admin", + "label": "Admin" + } + ], + "default": "guest" + } + ] + }, + { + "name": "Cookie Banner", + "settings": [ + { + "type": "checkbox", + "id": "cookie_banner_preview", + "label": "Preview banner", + "default": true + }, + { + "type": "html", + "id": "cookie_banner_html", + "label": "Text (HTML)", + "default": "

This website uses cookies

We use cookies to personalize content, interact with our analytics companies, advertising networks and cooperatives, and demographic companies, provide social media features, and to analyze our traffic. Our social media, advertising and analytics partners may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services. Learn more.

" + }, + { + "type": "text", + "id": "cookie_banner_button", + "label": "Button text", + "default": "OK" + } + ] } ] diff --git a/layout/easel.liquid b/layout/easel.liquid new file mode 100644 index 00000000000..753d52a0038 --- /dev/null +++ b/layout/easel.liquid @@ -0,0 +1,601 @@ + + + + {% capture CFH %} + {{ content_for_header }}{% endcapture %} + + {% if CFH contains 'admin_bar_iframe' %} + {% assign admin = true %} + {% elsif CFH contains 'preview_bar_injector-' %} + {% assign admin = true %} + {% elsif CFH contains 'Online store editor' %} + {% assign admin = true %} + {% elsif CFH contains 'designMode' %} + {% assign admin = true %} + {% endif %} + + {%- assign production_shop_id = 60429828153 -%} + {%- assign staging_shop_id = 67711828243 -%} + + {%- case shop.id -%} + {%- when production_shop_id -%} + {%- assign google_tag_manager_container_id = 'GTM-5H85H3N' -%} + {%- when staging_shop_id -%} + {%- assign google_tag_manager_container_id = 'GTM-TG2KSNK' -%} + {%- endcase %} + + {%- unless google_tag_manager_container_id == blank -%} + + + + {%- endunless -%} + + + + + + + + + {%- if settings.favicon != blank -%} + + {%- endif -%} + + {%- unless settings.type_header_font.system? and settings.type_body_font.system? -%} + + {%- endunless -%} + + + {{ 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 -%} + + + {% if page_description %} + + {% endif %} + + {% render 'meta-tags' %} + + + + + + + + {{ content_for_header }} + + {%- 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' }} + + :root { + --font-body-family: {{ settings.type_body_font.family }} + , {{ settings.type_body_font.fallback_families }} + ; + --font-body-style: {{ settings.type_body_font.style }} + ; + --font-body-weight: {{ settings.type_body_font.weight }} + ; + --font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }} + ; + + --font-heading-family: {{ settings.type_header_font.family }} + , {{ settings.type_header_font.fallback_families }} + ; + --font-heading-style: {{ settings.type_header_font.style }} + ; + --font-heading-weight: {{ settings.type_header_font.weight }} + ; + + --font-body-scale: {{ settings.body_scale | divided_by: 100.0 }} + ; + --font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }} + ; + + --color-base-text: {{ settings.colors_text.red }} + , {{ settings.colors_text.green }} + , {{ settings.colors_text.blue }} + ; + --color-shadow: {{ settings.colors_text.red }} + , {{ settings.colors_text.green }} + , {{ settings.colors_text.blue }} + ; + --color-base-background-1: {{ settings.colors_background_1.red }} + , {{ settings.colors_background_1.green }} + , {{ settings.colors_background_1.blue }} + ; + --color-base-background-2: {{ settings.colors_background_2.red }} + , {{ settings.colors_background_2.green }} + , {{ settings.colors_background_2.blue }} + ; + --color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }} + , {{ settings.colors_solid_button_labels.green }} + , {{ settings.colors_solid_button_labels.blue }} + ; + --color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }} + , {{ settings.colors_outline_button_labels.green }} + , {{ settings.colors_outline_button_labels.blue }} + ; + --color-base-accent-1: {{ settings.colors_accent_1.red }} + , {{ settings.colors_accent_1.green }} + , {{ settings.colors_accent_1.blue }} + ; + --color-base-accent-2: {{ settings.colors_accent_2.red }} + , {{ settings.colors_accent_2.green }} + , {{ settings.colors_accent_2.blue }} + ; + --payment-terms-background-color: {{ settings.colors_background_1 }} + ; + + --gradient-base-background-1: {% if settings.gradient_background_1 != blank %} + {{ settings.gradient_background_1 }} + {% else %} + {{ settings.colors_background_1 }} + {% endif %}; + --gradient-base-background-2: {% if settings.gradient_background_2 != blank %} + {{ settings.gradient_background_2 }} + {% else %} + {{ settings.colors_background_2 }} + {% endif %}; + --gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %} + {{ settings.gradient_accent_1 }} + {% else %} + {{ settings.colors_accent_1 }} + {% endif %}; + --gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %} + {{ settings.gradient_accent_2 }} + {% else %} + {{ settings.colors_accent_2 }} + {% endif %}; + + --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.06rem; + 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; + } + } + + @font-face { + font-family: "AlrightSans-Bold"; + src: url("{{ 'AlrightSans-Bold.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-BoldItalic"; + src: url("{{ 'AlrightSans-BoldItalic.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-ExtraThin"; + src: url("{{ 'AlrightSans-ExtraThin.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-ExtraThinItalic"; + src: url("{{ 'AlrightSans-ExtraThinItalic.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-Light"; + src: url("{{ 'AlrightSans-Light.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-LightItalic"; + src: url("{{ 'AlrightSans-LightItalic.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-Medium"; + src: url("{{ 'AlrightSans-Medium.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-Regular"; + src: url("{{ 'AlrightSans-Regular.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-RegularItalic"; + src: url("{{ 'AlrightSans-RegularItalic.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-Thin"; + src: url("{{ 'AlrightSans-Thin.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-ThinItalic"; + src: url("{{ 'AlrightSans-ThinItalic.otf' | asset_url }}") format("opentype"); + } + {% endstyle %} + + {{ 'base.css' | asset_url | stylesheet_tag }} + + {%- unless settings.type_body_font.system? -%} + + {%- endunless -%} + {%- unless settings.type_header_font.system? -%} + + {%- endunless -%} + + {%- if settings.predictive_search_enabled -%} + + {%- endif -%} + + + + + {% render 'shogun-head' %} + + + + + + + + + + + {%- if settings.cart_type == 'drawer' -%} + {%- render 'cart-drawer' -%} + {%- endif -%} + + {% section 'announcement-bar' %} + {% section 'header' %} + {% section 'easel-header.liquid' %} +
+ {{ content_for_layout }} +
+ + {% section 'footer' %} + + {% section 'cookie_banner' %} + + + + + + {%- if settings.predictive_search_enabled -%} + + {%- endif -%} + + diff --git a/layout/industries.liquid b/layout/industries.liquid new file mode 100644 index 00000000000..13ae8ecaf22 --- /dev/null +++ b/layout/industries.liquid @@ -0,0 +1,585 @@ + + + + {%- assign production_shop_id = 60429828153 -%} + {%- assign staging_shop_id = 67711828243 -%} + + {%- case shop.id -%} + {%- when production_shop_id -%} + {%- assign google_tag_manager_container_id = 'GTM-5H85H3N' -%} + {%- when staging_shop_id -%} + {%- assign google_tag_manager_container_id = 'GTM-TG2KSNK' -%} + {%- endcase %} + + {%- unless google_tag_manager_container_id == blank -%} + + + + {%- endunless -%} + + + + + + + + + {%- if settings.favicon != blank -%} + + {%- endif -%} + + {%- unless settings.type_header_font.system? and settings.type_body_font.system? -%} + + {%- endunless -%} + + + {{ 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 -%} + + + {% if page_description %} + + {% endif %} + + {% render 'meta-tags' %} + + + + + + + + {{ content_for_header }} + + {%- 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' }} + + :root { + --font-body-family: {{ settings.type_body_font.family }} + , {{ settings.type_body_font.fallback_families }} + ; + --font-body-style: {{ settings.type_body_font.style }} + ; + --font-body-weight: {{ settings.type_body_font.weight }} + ; + --font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }} + ; + + --font-heading-family: {{ settings.type_header_font.family }} + , {{ settings.type_header_font.fallback_families }} + ; + --font-heading-style: {{ settings.type_header_font.style }} + ; + --font-heading-weight: {{ settings.type_header_font.weight }} + ; + + --font-body-scale: {{ settings.body_scale | divided_by: 100.0 }} + ; + --font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }} + ; + + --color-base-text: {{ settings.colors_text.red }} + , {{ settings.colors_text.green }} + , {{ settings.colors_text.blue }} + ; + --color-shadow: {{ settings.colors_text.red }} + , {{ settings.colors_text.green }} + , {{ settings.colors_text.blue }} + ; + --color-base-background-1: {{ settings.colors_background_1.red }} + , {{ settings.colors_background_1.green }} + , {{ settings.colors_background_1.blue }} + ; + --color-base-background-2: {{ settings.colors_background_2.red }} + , {{ settings.colors_background_2.green }} + , {{ settings.colors_background_2.blue }} + ; + --color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }} + , {{ settings.colors_solid_button_labels.green }} + , {{ settings.colors_solid_button_labels.blue }} + ; + --color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }} + , {{ settings.colors_outline_button_labels.green }} + , {{ settings.colors_outline_button_labels.blue }} + ; + --color-base-accent-1: {{ settings.colors_accent_1.red }} + , {{ settings.colors_accent_1.green }} + , {{ settings.colors_accent_1.blue }} + ; + --color-base-accent-2: {{ settings.colors_accent_2.red }} + , {{ settings.colors_accent_2.green }} + , {{ settings.colors_accent_2.blue }} + ; + --payment-terms-background-color: {{ settings.colors_background_1 }} + ; + + --gradient-base-background-1: {% if settings.gradient_background_1 != blank %} + {{ settings.gradient_background_1 }} + {% else %} + {{ settings.colors_background_1 }} + {% endif %}; + --gradient-base-background-2: {% if settings.gradient_background_2 != blank %} + {{ settings.gradient_background_2 }} + {% else %} + {{ settings.colors_background_2 }} + {% endif %}; + --gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %} + {{ settings.gradient_accent_1 }} + {% else %} + {{ settings.colors_accent_1 }} + {% endif %}; + --gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %} + {{ settings.gradient_accent_2 }} + {% else %} + {{ settings.colors_accent_2 }} + {% endif %}; + + --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.06rem; + 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; + } + } + + @font-face { + font-family: "AlrightSans-Bold"; + src: url("{{ 'AlrightSans-Bold.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-BoldItalic"; + src: url("{{ 'AlrightSans-BoldItalic.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-ExtraThin"; + src: url("{{ 'AlrightSans-ExtraThin.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-ExtraThinItalic"; + src: url("{{ 'AlrightSans-ExtraThinItalic.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-Light"; + src: url("{{ 'AlrightSans-Light.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-LightItalic"; + src: url("{{ 'AlrightSans-LightItalic.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-Medium"; + src: url("{{ 'AlrightSans-Medium.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-Regular"; + src: url("{{ 'AlrightSans-Regular.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-RegularItalic"; + src: url("{{ 'AlrightSans-RegularItalic.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-Thin"; + src: url("{{ 'AlrightSans-Thin.otf' | asset_url }}") format("opentype"); + } + @font-face { + font-family: "AlrightSans-ThinItalic"; + src: url("{{ 'AlrightSans-ThinItalic.otf' | asset_url }}") format("opentype"); + } + {% endstyle %} + + {{ 'base.css' | asset_url | stylesheet_tag }} + + {%- unless settings.type_body_font.system? -%} + + {%- endunless -%} + {%- unless settings.type_header_font.system? -%} + + {%- endunless -%} + + {%- if settings.predictive_search_enabled -%} + + {%- endif -%} + + + + + {% render 'shogun-head' %} + + + + + + + + + + + {%- if settings.cart_type == 'drawer' -%} + {%- render 'cart-drawer' -%} + {%- endif -%} + + {% section 'announcement-bar' %} + {% section 'header' %} +
+ {{ content_for_layout }} +
+ + {% section 'footer' %} + + {% section 'cookie_banner' %} + + + + + + {%- if settings.predictive_search_enabled -%} + + {%- endif -%} + + diff --git a/layout/inventables.liquid b/layout/inventables.liquid new file mode 100644 index 00000000000..d5b7fc97d2d --- /dev/null +++ b/layout/inventables.liquid @@ -0,0 +1,307 @@ + + + + + + + + + + + + {%- if settings.favicon != blank -%} + + {%- endif -%} + + {%- unless settings.type_header_font.system? and settings.type_body_font.system? -%} + + {%- endunless -%} + + + {{ 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 -%} + + + {% if page_description %} + + {% endif %} + + {% render 'meta-tags' %} + + + + + + + {{ content_for_header }} + + {%- 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' }} + + :root { + --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }}; + --font-body-style: {{ settings.type_body_font.style }}; + --font-body-weight: {{ settings.type_body_font.weight }}; + --font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }}; + + --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }}; + --font-heading-style: {{ settings.type_header_font.style }}; + --font-heading-weight: {{ settings.type_header_font.weight }}; + + --font-body-scale: {{ settings.body_scale | divided_by: 100.0 }}; + --font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }}; + + --color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }}; + --color-shadow: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }}; + --color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }}; + --color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }}; + --color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }}; + --color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }}; + --color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }}; + --color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }}; + --payment-terms-background-color: {{ settings.colors_background_1 }}; + + --gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %}; + --gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %}; + --gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %}; + --gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %}; + + --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.06rem; + 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 }} + {{ 'inventables.css' | asset_url | stylesheet_tag }} + + {%- unless settings.type_body_font.system? -%} + + {%- endunless -%} + {%- unless settings.type_header_font.system? -%} + + {%- endunless -%} + + {%- if settings.predictive_search_enabled -%} + + {%- endif -%} + + + + + {% render 'shogun-head' %} + + + + + + {%- if settings.cart_type == 'drawer' -%} + {%- render 'cart-drawer' -%} + {%- endif -%} + + {% section 'header-inventables' %} +
+ {{ content_for_layout }} +
+ +
+
+ {% section 'footer-header-inventables' %} + {% section 'footer-inventables' %} +
+
+ + + + + + {%- if settings.predictive_search_enabled -%} + + {%- endif -%} + + diff --git a/layout/password.liquid b/layout/password.liquid index a22ca650535..d0e7009e780 100644 --- a/layout/password.liquid +++ b/layout/password.liquid @@ -175,7 +175,10 @@ - + + + {% render 'shogun-head' %} +
- + {%- endif -%} + {%- endfor -%} + + +
+ +
- - {%- else -%} - - {{ link.title | escape }} - - {%- endif -%} - - {%- endfor -%} - - -
- {%- if shop.customer_accounts_enabled -%} - - {%- endif -%} - -
- - - - - - {%- endif -%} - - {%- if section.settings.logo_position == 'top-center' or section.settings.menu == blank -%} - -
- - - - - - -
+ + {%- endif -%} - - {%- endif -%} - - {%- if settings.predictive_search_enabled -%} - - {%- endif -%} - - - - - - {%- endif -%} - - {%- if section.settings.logo_position != 'middle-center' -%} - {%- if request.page_type == 'index' -%} -

- {%- endif -%} - - {%- if section.settings.logo != blank -%} - {%- assign logo_alt = section.settings.logo.alt | default: shop.name | escape -%} - {%- assign logo_height = section.settings.logo_width | divided_by: section.settings.logo.aspect_ratio -%} - {{ section.settings.logo | image_url: width: section.settings.width | image_tag: - class: 'header__heading-logo', - widths: '50, 100, 150, 200, 250, 300, 400, 500', - height: logo_height, - width: section.settings.logo_width, - alt: logo_alt - }} - {%- else -%} - {{ shop.name }} + {%- if section.settings.logo_position != 'middle-center' -%} + {%- if request.page_type == 'index' -%} +

{%- endif -%} - - {%- if request.page_type == 'index' -%} -

- {%- endif -%} - {%- endif -%} - - {%- if section.settings.menu != blank -%} - {%- if section.settings.menu_type_desktop == 'dropdown' -%} - - {%- else -%} -

+ {%- endif -%} + {%- endif -%} + + {%- if section.settings.menu != blank -%} + {%- if section.settings.menu_type_desktop == 'dropdown' -%} + + {%- else -%} + + {%- endif -%} + {%- endif -%} + + {%- if section.settings.logo_position == 'middle-center' -%} + {%- if request.page_type == 'index' -%} +

+ {%- endif -%} + + {%- if section.settings.logo != blank -%} + {%- assign logo_alt = section.settings.logo.alt | default: shop.name | escape -%} + {%- assign logo_height = section.settings.logo_width | divided_by: section.settings.logo.aspect_ratio -%} + {{ section.settings.logo | image_url: width: section.settings.width | image_tag: + class: 'header__heading-logo', + widths: '50, 100, 150, 200, 250, 300, 400, 500', + height: logo_height, + width: section.settings.logo_width, + alt: logo_alt + }} {%- else -%} - - {{ link.title | escape }} - + {{ shop.name }} {%- endif -%} - - {%- endfor -%} - - - {%- endif -%} - {%- endif -%} - - {%- if section.settings.logo_position == 'middle-center' -%} - {%- if request.page_type == 'index' -%} -

- {%- endif -%} - - {%- if section.settings.logo != blank -%} - {%- assign logo_alt = section.settings.logo.alt | default: shop.name | escape -%} - {%- assign logo_height = section.settings.logo_width | divided_by: section.settings.logo.aspect_ratio -%} - {{ section.settings.logo | image_url: width: section.settings.width | image_tag: - class: 'header__heading-logo', - widths: '50, 100, 150, 200, 250, 300, 400, 500', - height: logo_height, - width: section.settings.logo_width, - alt: logo_alt - }} - {%- else -%} - {{ shop.name }} + + {%- if request.page_type == 'index' -%} +

{%- endif -%} - - {%- if request.page_type == 'index' -%} - - {%- endif -%} - {%- endif -%} - -
- -
- + {%- endif -%} +
+ +
+ + - - -
+
+ - - {%- endif -%} - - {%- if settings.predictive_search_enabled -%} - - {%- endif -%} - -
- - - - - {%- if shop.customer_accounts_enabled -%} - - {%- endif -%} - - - {%- liquid - if cart == empty - render 'icon-cart-empty' - else - render 'icon-cart' - endif - -%} - - {%- if cart != empty -%} -
- {%- if cart.item_count < 100 -%} - + {%- if section.settings.menu_1 != blank -%} + {%- endif -%} - -
- {%- endif -%} - - - + + -{%- if settings.cart_type == "notification" -%} - {%- render 'cart-notification', color_scheme: section.settings.color_scheme -%} -{%- endif -%} - {% javascript %} - class StickyHeader extends HTMLElement { - constructor() { - super(); - } +class StickyHeader extends HTMLElement { +constructor() { +super(); +} - connectedCallback() { - this.header = document.getElementById('shopify-section-header'); - this.headerBounds = {}; - this.currentScrollTop = 0; - this.preventReveal = false; - this.predictiveSearch = this.querySelector('predictive-search'); +connectedCallback() { +this.header = document.getElementById('shopify-section-header'); +this.headerBounds = {}; +this.currentScrollTop = 0; +this.preventReveal = false; +this.predictiveSearch = this.querySelector('predictive-search'); - this.onScrollHandler = this.onScroll.bind(this); - this.hideHeaderOnScrollUp = () => this.preventReveal = true; +this.onScrollHandler = this.onScroll.bind(this); +this.hideHeaderOnScrollUp = () => this.preventReveal = true; - this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp); - window.addEventListener('scroll', this.onScrollHandler, false); +this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp); +window.addEventListener('scroll', this.onScrollHandler, false); - this.createObserver(); - } +this.createObserver(); +} - disconnectedCallback() { - this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp); - window.removeEventListener('scroll', this.onScrollHandler); - } +disconnectedCallback() { +this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp); +window.removeEventListener('scroll', this.onScrollHandler); +} - createObserver() { - let observer = new IntersectionObserver((entries, observer) => { - this.headerBounds = entries[0].intersectionRect; - observer.disconnect(); - }); +createObserver() { +let observer = new IntersectionObserver((entries, observer) => { +this.headerBounds = entries[0].intersectionRect; +observer.disconnect(); +}); - observer.observe(this.header); - } +observer.observe(this.header); +} - onScroll() { - const scrollTop = window.pageYOffset || document.documentElement.scrollTop; +onScroll() { +const scrollTop = window.pageYOffset || document.documentElement.scrollTop; - if (this.predictiveSearch && this.predictiveSearch.isOpen) return; +if (this.predictiveSearch && this.predictiveSearch.isOpen) return; - if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) { - if (this.preventHide) return; - requestAnimationFrame(this.hide.bind(this)); - } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) { - if (!this.preventReveal) { - requestAnimationFrame(this.reveal.bind(this)); - } else { - window.clearTimeout(this.isScrolling); +if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) { +if (this.preventHide) return; +requestAnimationFrame(this.hide.bind(this)); +} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) { +if (!this.preventReveal) { +requestAnimationFrame(this.reveal.bind(this)); +} else { +window.clearTimeout(this.isScrolling); - this.isScrolling = setTimeout(() => { - this.preventReveal = false; - }, 66); +this.isScrolling = setTimeout(() => { +this.preventReveal = false; +}, 66); - requestAnimationFrame(this.hide.bind(this)); - } - } else if (scrollTop <= this.headerBounds.top) { - requestAnimationFrame(this.reset.bind(this)); - } +requestAnimationFrame(this.hide.bind(this)); +} +} else if (scrollTop <= this.headerBounds.top) { +requestAnimationFrame(this.reset.bind(this)); +} - this.currentScrollTop = scrollTop; - } +this.currentScrollTop = scrollTop; +} - hide() { - this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky'); - this.closeMenuDisclosure(); - this.closeSearchModal(); - } +hide() { +this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky'); +this.closeMenuDisclosure(); +this.closeSearchModal(); +} - reveal() { - this.header.classList.add('shopify-section-header-sticky', 'animate'); - this.header.classList.remove('shopify-section-header-hidden'); - } +reveal() { +this.header.classList.add('shopify-section-header-sticky', 'animate'); +this.header.classList.remove('shopify-section-header-hidden'); +} - reset() { - this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate'); - } +reset() { +this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate'); +} - closeMenuDisclosure() { - this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu'); - this.disclosures.forEach(disclosure => disclosure.close()); - } +closeMenuDisclosure() { +this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu'); +this.disclosures.forEach(disclosure => disclosure.close()); +} - closeSearchModal() { - this.searchModal = this.searchModal || this.header.querySelector('details-modal'); - this.searchModal.close(false); - } - } +closeSearchModal() { +this.searchModal = this.searchModal || this.header.querySelector('details-modal'); +this.searchModal.close(false); +} +} - customElements.define('sticky-header', StickyHeader); +customElements.define('sticky-header', StickyHeader); {% endjavascript %} {%- if request.page_type == 'index' -%} - {% assign potential_action_target = request.origin | append: routes.search_url | append: "?q={search_term_string}" %} - + + {%- endif -%} {% schema %} @@ -841,6 +1265,12 @@ "default": "main-menu", "label": "t:sections.header.settings.menu.label" }, + { + "type": "link_list", + "id": "menu_1", + "default": "main-menu", + "label": "Navbar icons" + }, { "type": "select", "id": "menu_type_desktop", diff --git a/sections/industries-brands.liquid b/sections/industries-brands.liquid new file mode 100644 index 00000000000..f9c9de27db0 --- /dev/null +++ b/sections/industries-brands.liquid @@ -0,0 +1,118 @@ +{% style %} + .industries-brands.section-{{ section.id }} { + background-color: {{ section.settings.bg_color }}; + width: 100%; + display: flex; + justify-content: center; + padding-bottom: 7rem; + } + + .industries-brands__container { + margin: 0 auto; + position: relative; + width: 100%; + padding: 0 4%; + } + + .industries-brands__title-wrapper { + border-top: solid #FFB762 1px; + border-bottom: solid #FFB762 1px; + text-align: center; + } + + .industries-brands__title-wrapper h1 { + text-transform: uppercase; + font-size: 32px; + margin: 12px 0px 8px 0px; + font-family: "AlrightSans-Light"; + } + + .industries-brands__title-wrapper h1 b{ + font-family: "AlrightSans-Medium"; + font-weight: bold; + color: #FFB762; + } + + .industries-brands__items-box { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + .industries-brands__items-container { + display: flex; + align-content: center; + justify-content: space-around; + padding-top: 4rem; + } + + .industries-brands__item-wrapper { + max-width: 229px; + display: flex; + justify-content: center; + align-items: center; + padding: 0px 1rem; + } + + .industries-brands__brands-media { + width: 100%; + height: auto; + } + +@media screen and (max-width: 1200px) { +} + +@media screen and (max-width: 593px) { +} +{% endstyle %} +
+
+
+

{{ section.settings.title }}

+
+ +
+ {% for block in section.blocks %} +
+ {{ block.settings.image | image_url: width: 537 | image_tag: class: 'industries-brands__brands-media' }} +
+ {% endfor %} +
+
+
+{% schema %} +{ + "name": "Brand Industry", + "settings": [ + { + "type": "color", + "id": "bg_color", + "label": "Background Color", + "default": "#1D1D1D" + }, + { + "type": "html", + "id": "title", + "label": "Title" + } + ], + "max_blocks": 4, + "blocks": [ + { + "type": "brand_item", + "name": "Brands Industry", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Brand Image" + } + ] + } + ], + "presets": [ + { "name": "Brand Industry"} + ] +} +{% endschema %} diff --git a/sections/industries-choose.liquid b/sections/industries-choose.liquid new file mode 100644 index 00000000000..d2eb9c1b2e4 --- /dev/null +++ b/sections/industries-choose.liquid @@ -0,0 +1,198 @@ +{% style %} + .industries-choose.section-{{ section.id }} { + background-color: {{ section.settings.bg_color }}; + width: 100%; + display: flex; + justify-content: center; + padding-bottom: 7rem; + } + + .industries-choose__container { + margin: 0 auto; + position: relative; + width: 100%; + padding: 0 4%; + } + + .industries-choose__title-wrapper { + border-top: solid #FFB762 1px; + border-bottom: solid #FFB762 1px; + text-align: center; + } + + .industries-choose__subtitle-wrapper { + font-size: 20px; + color: white; + display: flex; + justify-content: center; + align-items: center; + margin: 1rem 0px; + font-family: 'AlrightSans-Light'; + } + + .industries-choose__title-wrapper h1 { + text-transform: uppercase; + font-size: 32px; + margin: 12px 0px 8px 0px; + font-family: "AlrightSans-Light"; + } + + .industries-choose__title-wrapper h1 b{ + font-family: "AlrightSans-Medium"; + font-weight: bold; + color: #FFB762; + } + + .industries-choose__items-box { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + .industries-choose__items-container { + display: flex; + gap: 20px; + } + + .industries-choose__item-wrapper { + position: relative; + flex: 1; + } + .industries-choose__cta-btn.btn-primary { + border: none; + box-shadow: 0px 4px 4px 0px rgb(0,0,0,0.25); + width: 190px; + height: 34px; + color: #fff; + display: inline-block; + font-size: 14px; + padding: 5px 6px; + font-weight: bold; + text-shadow: none; + text-transform: uppercase; + transition: background .5s ease; + background: var(--gradient-base-accent-2); + background-color: rgb(254 162 69 / 75%); + color: #000; + + text-decoration: none; + text-align: center; + } + .industries-choose__cta-wrapper { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + position: relative; + } + .industries-choose__cta-btn { + position: absolute; + bottom: 30px; + } + .industries-choose__choose-media { + width: 320px; + height: auto; + } + +@media screen and (max-width: 1024px) { + .industries-choose__choose-media { + width: 100%; + height: auto; + } + .industries-choose__items-container { + flex-direction: column; + } + .industries-choose__item-wrapper { + width: 100%; + padding: 0px 3rem; + } +} + +@media screen and (max-width: 593px) { + .industries-choose__subtitle-wrapper { + display: none; + } + .industries-choose__title-wrapper { + margin-bottom: 3rem; + } + .industries-choose__title-wrapper h1 { + font-size: 24px; + } +} +{% endstyle %} +
+
+
+

{{ section.settings.title }}

+
+
+

{{ section.settings.subtitle }}

+
+ +
+
+ {% for block in section.blocks %} +
+ {{ block.settings.image | image_url: width: 537 | image_tag: class: 'industries-choose__choose-media' }} +
+ + {{ block.settings.cta_btn_text }} + +
+
+ {% endfor %} +
+
+
+
+{% schema %} +{ + "name": "Choose Industry", + "settings": [ + { + "type": "color", + "id": "bg_color", + "label": "Background Color", + "default": "#1D1D1D" + }, + { + "type": "html", + "id": "title", + "label": "Title" + }, + { + "type": "text", + "id": "subtitle", + "label": "Section's Subtitle" + } + ], + "max_blocks": 4, + "blocks": [ + { + "type": "choose_item", + "name": "Industry Item", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Industry Image" + }, + { + "type": "text", + "id": "cta_btn_text", + "label": "CTA Button Text" + }, + { + "type": "url", + "id": "cta_btn_url", + "label": "CTA Button URL" + } + ] + } + ], + "presets": [ + { "name": "Choose Industry"} + ] +} +{% endschema %} diff --git a/sections/industries-header.liquid b/sections/industries-header.liquid new file mode 100644 index 00000000000..8fa0fba0f13 --- /dev/null +++ b/sections/industries-header.liquid @@ -0,0 +1,1445 @@ + + + + + +{%- if settings.predictive_search_enabled -%} + + +{%- endif -%} +{%- if section.settings.menu_type_desktop == 'mega' -%} + + +{%- endif -%} +{%- 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 }} + {{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }} +{%- endif -%} + + + + + + + + + + + + + + + +{%- if settings.cart_type == "drawer" -%} + +{%- endif -%} + +{%- liquid + if customer.id != null + assign logged_in = true + endif + + if logged_in and customer.tags contains "admin" + assign admin = true + endif + + comment ## ADMIN THEME EDITOR ONLY + endcomment + if request.design_mode + case settings.simulated_user_type + when "guest" + assign logged_in = false + when "buyer" + assign logged_in = true + when "admin" + assign logged_in = true + assign admin = true + endcase + endif +-%} + +
+
+ +<{% if section.settings.enable_sticky_header %}sticky-header id="shopify-section-industries-header" {% else %}div{% endif %} + class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}"> +
+ {%- if section.settings.menu != blank -%} + + + + {%- endif -%} + + {%- if section.settings.logo_position != 'middle-center' -%} + {%- if request.page_type == 'index' -%} +

+ {%- endif -%} + + {%- if section.settings.logo != blank -%} + {%- assign logo_alt = section.settings.logo.alt | default: shop.name | escape -%} + {%- assign logo_height = section.settings.logo_width | divided_by: section.settings.logo.aspect_ratio -%} + {{ section.settings.logo | image_url: width: section.settings.width | image_tag: + class: 'header__heading-logo', + widths: '50, 100, 150, 200, 250, 300, 400, 500', + height: logo_height, + width: section.settings.logo_width, + alt: logo_alt + }} + {%- else -%} + {{ shop.name }} + {%- endif -%} + + {%- if request.page_type == 'index' -%} +

+ {%- endif -%} + {%- endif -%} + + {%- if section.settings.menu != blank -%} + {%- if section.settings.menu_type_desktop == 'dropdown' -%} + + {%- else -%} + + {%- endif -%} + {%- endif -%} + + {%- if section.settings.logo_position == 'middle-center' -%} + {%- if request.page_type == 'index' -%} +

+ {%- endif -%} + + {%- if section.settings.logo != blank -%} + {%- assign logo_alt = section.settings.logo.alt | default: shop.name | escape -%} + {%- assign logo_height = section.settings.logo_width | divided_by: section.settings.logo.aspect_ratio -%} + {{ section.settings.logo | image_url: width: section.settings.width | image_tag: + class: 'header__heading-logo', + widths: '50, 100, 150, 200, 250, 300, 400, 500', + height: logo_height, + width: section.settings.logo_width, + alt: logo_alt + }} + {%- else -%} + {{ shop.name }} + {%- endif -%} + + {%- if request.page_type == 'index' -%} +

+ {%- endif -%} + {%- endif -%} +
+ +
+ + + + + + +
+ + + +
+
+ {% if section.settings.cta_txt_secondary %} +
+ + {{ section.settings.cta_txt_secondary }} + +
+ {% endif %} + {% if section.settings.cta_url_primary %} +
+ + {{ section.settings.cta_txt_primary }} + +
+ {% endif %} +
+
+ + +{% javascript %} +class StickyHeader extends HTMLElement { +constructor() { +super(); +} + +connectedCallback() { +this.header = document.getElementById('shopify-section-industries-header'); +this.headerBounds = {}; +this.currentScrollTop = 0; +this.preventReveal = false; +this.predictiveSearch = this.querySelector('predictive-search'); + +this.onScrollHandler = this.onScroll.bind(this); +this.hideHeaderOnScrollUp = () => this.preventReveal = true; + +this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp); +window.addEventListener('scroll', this.onScrollHandler, false); + +this.createObserver(); +} + +disconnectedCallback() { +this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp); +window.removeEventListener('scroll', this.onScrollHandler); +} + +createObserver() { +let observer = new IntersectionObserver((entries, observer) => { +this.headerBounds = entries[0].intersectionRect; +observer.disconnect(); +}); + +observer.observe(this.header); +} + +onScroll() { +const scrollTop = window.pageYOffset || document.documentElement.scrollTop; + +if (this.predictiveSearch && this.predictiveSearch.isOpen) return; + +if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) { +if (this.preventHide) return; +requestAnimationFrame(this.hide.bind(this)); +} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) { +if (!this.preventReveal) { +requestAnimationFrame(this.reveal.bind(this)); +} else { +window.clearTimeout(this.isScrolling); + +this.isScrolling = setTimeout(() => { +this.preventReveal = false; +}, 66); + +requestAnimationFrame(this.hide.bind(this)); +} +} else if (scrollTop <= this.headerBounds.top) { +requestAnimationFrame(this.reset.bind(this)); +} + +this.currentScrollTop = scrollTop; +} + +hide() { +this.header.classList.add('shopify-section-industries-header-hidden', 'shopify-section-industries-header-sticky'); +this.closeMenuDisclosure(); +this.closeSearchModal(); +} + +reveal() { +this.header.classList.add('shopify-section-industries-header-sticky', 'animate'); +this.header.classList.remove('shopify-section-industries-header-hidden'); +} + +reset() { +this.header.classList.remove('shopify-section-industries-header-hidden', 'shopify-section-industries-header-sticky', 'animate'); +} + +closeMenuDisclosure() { +this.disclosures = this.disclosures || this.header.querySelectorAll('header-menu'); +this.disclosures.forEach(disclosure => disclosure.close()); +} + +closeSearchModal() { +this.searchModal = this.searchModal || this.header.querySelector('details-modal'); +this.searchModal.close(false); +} +} + +customElements.define('sticky-header', StickyHeader); +{% endjavascript %} + + + +{%- if request.page_type == 'index' -%} + {% assign potential_action_target = request.origin | append: routes.search_url | append: "?q={search_term_string}" %} + +{%- endif -%} + +{% schema %} +{ + "name": "Industries Header", + "class": "section-header", + "settings": [ + { + "type": "color", + "id": "bg_color", + "label": "Background Color", + "default": "#242728" + }, + { + "type": "range", + "id": "header_height", + "min": 100, + "max": 200, + "step": 1, + "default": 118, + "unit": "px", + "label": "Header Height" + }, + { + "type": "select", + "id": "color_scheme", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "background-1", + "label": "t:sections.all.colors.label" + }, + { + "type": "image_picker", + "id": "logo", + "label": "t:sections.header.settings.logo.label" + }, + { + "type": "range", + "id": "logo_width", + "min": 50, + "max": 250, + "step": 10, + "default": 100, + "unit": "t:sections.header.settings.logo_width.unit", + "label": "t:sections.header.settings.logo_width.label" + }, + { + "type": "select", + "id": "logo_position", + "options": [ + { + "value": "top-left", + "label": "t:sections.header.settings.logo_position.options__2.label" + }, + { + "value": "top-center", + "label": "t:sections.header.settings.logo_position.options__3.label" + }, + { + "value": "middle-left", + "label": "t:sections.header.settings.logo_position.options__1.label" + }, + { + "value": "middle-center", + "label": "t:sections.header.settings.logo_position.options__4.label" + } + ], + "default": "middle-left", + "label": "t:sections.header.settings.logo_position.label" + }, + { + "type": "link_list", + "id": "menu", + "default": "main-menu", + "label": "t:sections.header.settings.menu.label" + }, + { + "type": "link_list", + "id": "menu_1", + "default": "main-menu", + "label": "Navbar icons" + }, + { + "type": "select", + "id": "menu_type_desktop", + "options": [ + { + "value": "dropdown", + "label": "t:sections.header.settings.menu_type_desktop.options__1.label" + }, + { + "value": "mega", + "label": "t:sections.header.settings.menu_type_desktop.options__2.label" + } + ], + "default": "dropdown", + "label": "t:sections.header.settings.menu_type_desktop.label", + "info": "t:sections.header.settings.menu_type_desktop.info" + }, + { + "type": "checkbox", + "id": "show_line_separator", + "default": true, + "label": "t:sections.header.settings.show_line_separator.label" + }, + { + "type": "checkbox", + "id": "enable_sticky_header", + "default": true, + "label": "t:sections.header.settings.enable_sticky_header.label", + "info": "t:sections.header.settings.enable_sticky_header.info" + }, + { + "type": "header", + "content": "t:sections.header.settings.mobile_layout.content" + }, + { + "type": "select", + "id": "mobile_logo_position", + "options": [ + { + "value": "center", + "label": "t:sections.header.settings.mobile_logo_position.options__1.label" + }, + { + "value": "left", + "label": "t:sections.header.settings.mobile_logo_position.options__2.label" + } + ], + "default": "center", + "label": "t:sections.header.settings.mobile_logo_position.label" + }, + { + "type": "header", + "content": "t:sections.all.spacing" + }, + { + "type": "range", + "id": "margin_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.header.settings.margin_bottom.label", + "default": 0 + }, + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 36, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 20 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 36, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 20 + }, + { + "type": "text", + "id": "cta_txt_primary", + "label": "Primary CTA Text" + }, { + "type": "url", + "id": "cta_url_primary", + "label": "Primary CTA URL" + }, { + "type": "text", + "id": "cta_txt_secondary", + "label": "Secondary CTA Text" + }, { + "type": "url", + "id": "cta_url_secondary", + "label": "Secondary CTA URL" + } + ] +} +{% endschema %} diff --git a/sections/industries-hero.liquid b/sections/industries-hero.liquid new file mode 100644 index 00000000000..13a7c74dbc0 --- /dev/null +++ b/sections/industries-hero.liquid @@ -0,0 +1,253 @@ +{% style %} + +#shopify-section-{{ section.id }} { + background-color: {{ section.settings.bg_color }}; + padding-bottom: 3rem; +} + +.industries-hero { + font-family: 'AlrightSans-Regular'; + overflow-x: clip; + + background-image: url('{{ section.settings.image | image_url }}'); + background-size: cover; + background-position: center; + +} + +.industries-hero__container { + margin: 0 auto; + min-height: 584px; + position: relative; + color: white; + text-align: left; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + padding: 0 8.5%; + {% if section.settings.show_linear_gradient %} + background: linear-gradient(to right, rgba(0, 0, 0, 1), rgb(0, 0, 0, {{ section.settings.hero_gradient_width | times: 0.01 }}), rgba(0, 0, 0, 0)); + {% endif %} +} + +.industries-hero__container h1 b{ + font-weight: bold; + text-transform: uppercase; + color: {{ section.settings.text_color }}; +} +.industries-hero__container h1 { + color: {{ section.settings.text_color }}; +} + +.industries-hero__container h1 strong{ + color: #FFB762; +} + +.industries-hero__subtext-container { + margin-top: none; + inline-size: {{ section.settings.subtext_max_width | times: 10 }}px; + overflow-wrap: break-word; +} + +.industries-hero__subtext-container p { + font-family: 'AlrightSans-Light'; + color: {{ section.settings.text_color }}; +} + +.industries-hero__cta-button { + text-transform: uppercase; +} + +.easel-hero__cta-btn { + margin-right: 10px; +} + +.industries-hero__cta-btn.btn-primary { + border: none; + border-radius: 3px; + box-shadow: none; + width: 190px; + color: #fff; + display: inline-block; + font-size: 14px; + padding: 12px 20px; + text-shadow: none; + text-transform: uppercase; + transition: background .5s ease; + background: #FFB762; + color: #383838; + font-weight: bold; + text-decoration: none; + text-align: center; + font-family: 'AlrightSans-Bold'; + padding: 12px 10px 8px 10px; +} + +.industries-hero__container-mobile { + display: none: +} + +.industries-hero__media-mobile { + display: none; +} + +@media screen and (max-width: 1200px) { + +} + +@media screen and (max-width: 593px) { + .industries-hero__container h1 { + color: {{ section.settings.text_color_mobile }}; + } + .industries-hero__container h1 b { + color: {{ section.settings.text_color_mobile }}; + } + .industries-hero__subtext-container p { + color: {{ section.settings.text_color_mobile }}; + } + .industries-hero { + background-image: none; + } + .industries-hero__container-mobile { + display: flex; + } + .industries-hero__media-mobile { + display: block; + } + .industries-hero__container { + padding: 0px; + min-height: 0px; + background: none; + } + .industries-hero__container h1 { + width: 100%; + font-size: 18px; + text-align: center; + } + .industries-hero__subtext-container { + width: 100%; + padding: 0px 3rem; + } + .industries-hero__subtext-container p { + font-size: 12px; + text-align: center + } + .industries-hero__media-mobile { + width: 100%; + height: auto; + } + .industries-hero__cta-wrapper { + width: 100%; + display: flex; + justify-content: center; + } + .industries-hero__cta-btn.btn-primary { + width: 127px; + padding: 12px 10px; + } +} +{% endstyle %} +
+
+

{{ section.settings.title }}

+ {% if section.settings.image_mobile %} + {{ section.settings.image_mobile | image_url: width: '537' | image_tag: class: 'industries-hero__media-mobile' }} + {% else %} + {{ section.settings.image | image_url: width: '537' | image_tag: class: 'industries-hero__media' }} + {% endif %} +
+

{{ section.settings.subtext }}

+
+
+ {% if section.settings.cta_btn_text %} + + {{ section.settings.cta_btn_text }} + + {% endif %} +
+
+
+{% schema %} +{ + "name": "Industries Hero", + "settings": [ + { + "type": "color", + "id": "bg_color", + "label": "Background Color", + "default": "#1D1D1D" + }, + { + "type": "html", + "id": "title", + "label": "Title" + }, + { + "type": "image_picker", + "id": "image", + "label": "Image" + }, + { + "type": "image_picker", + "id": "image_mobile", + "label": "Image Mobile" + }, + { + "type": "text", + "id": "subtext", + "label": "Sub-text" + }, + { + "type": "color", + "id": "text_color", + "label": "Text Color", + "default": "#FFF" + + }, + { + "type": "color", + "id": "text_color_mobile", + "label": "Text Color on Mobile", + "default": "#FFF" + + }, + { + "type": "range", + "id": "subtext_max_width", + "label": "Sub-text Box Max-Width", + "min": 1, + "max": 60, + "unit": "px", + "default": 46 + }, + { + "type": "checkbox", + "id": "show_linear_gradient", + "label": "Apply Left Linear Gradient", + "default": true + }, + { + "type": "range", + "id": "hero_gradient_width", + "label": "Hero Linear Gradient Width", + "min": 0, + "max": 100, + "default": 20 + }, + { + "type": "text", + "id": "cta_btn_text", + "label": "CTA Button Text" + }, + { + "type": "url", + "id": "cta_btn_url", + "label": "CTA Button URL" + } + ], + "presets": [ + { "name": "Industries Hero"} + ] +} +{% endschema %} diff --git a/sections/industries-highlight.liquid b/sections/industries-highlight.liquid new file mode 100644 index 00000000000..7925b89734f --- /dev/null +++ b/sections/industries-highlight.liquid @@ -0,0 +1,214 @@ +{% style %} +.industries-highlight.section-{{ section.id }} { + background-color: {{ section.settings.bg_color }}; + width: 100%; + display: flex; + justify-content: center; + padding-bottom: 3rem; +} + +.industries-highlight { + font-family: 'AlrightSans-Regular'; + overflow-x: clip; +} + +.industries-highlight__container { + margin: 0 auto; + position: relative; + width: 100%; + margin: 0 10%; +} + +.industries-highlight__title-wrapper { + border-top: solid #FFB762 1px; + border-bottom: solid #FFB762 1px; + text-align: center; + margin-bottom: 3rem; +} + +.industries-highlight__title-wrapper h1 { + text-transform: uppercase; + font-size: 32px; + margin: 11px 0px; +} + +.industries-highlight__title-wrapper h1 b{ + font-weight: bold; + color: #FFB762; +} + +.industries-highlight__subtext-container { + margin-top: none; + inline-size: {{ section.settings.subtext_max_width | times: 10 }}px; + overflow-wrap: break-word; +} + +.industries-highlight__media-wrapper { + width: 100%; + display: flex; + justify-content: center; + margin-bottom: 3rem; + min-height: 428px; +} + +.industries-highlight__image__wrapper--rel { + display: flex; + justify-content: center; + align-items: stretch; + width: 100%; + max-width: 840px; +} + +.industries-highlight__image__wrapper--rel iframe { + border: 0; + width: 100%; +} + +.industries-highlight__cta-button { + text-transform: uppercase; +} + +.easel-highlight__cta-btn { + margin-right: 10px; +} + +.industries-highlight__cta-btn.btn-primary { + border: none; + border-radius: 3px; + box-shadow: none; + width: 190px; + color: #fff; + display: inline-block; + font-size: 14px; + padding: 12px 6px; + text-shadow: none; + text-transform: uppercase; + transition: background .5s ease; + font-family: 'AlrightSans-Bold'; + background: var(--gradient-base-accent-2); + color: #383838; + font-weight: bold; + text-decoration: none; + text-align: center; +} + +.industries-highlight__cta-wrapper { + display: flex; + justify-content: center; +} + +@media screen and (max-width: 1200px) { + .industries-highlight__image { + width: 100%; + height: auto; + } +} + +@media screen and (max-width: 900px) { + .industries-highlight__media-wrapper { + min-height: 290px; + } +} +@media screen and (max-width: 680px) { + .industries-highlight__media-wrapper { + min-height: 320px; + } +} +@media screen and (max-width: 480px) { + .industries-highlight__media-wrapper { + min-height: auto; + } +} + +{% endstyle %} +{% assign video_id = section.settings.video.id %} +
+
+
+

{{ section.settings.title }}

+
+
+
+ {% if section.settings.image %} + {{ section.settings.image | image_url: width: 715 | image_tag: class: 'industries-highlight__image' }} + {% else %} + {% if section.settings.video %} + {%- if section.settings.video.type == 'youtube' -%} + + {%- else -%} + {% assign video_url_first_path = section.settings.video | split: ".com/" | last | split: "/" | first %} + {% assign video_url_last_path = section.settings.video | split: ".com/" | last | split: "/" | last %} + {% assign video_url = "https://player.vimeo.com/video/" | append: video_url_first_path %} + {% if video_url_first_path != video_url_last_path %} + {% assign video_url = video_url | append: "?h=" | append: video_url_last_path %} + {% endif %} + + {%- endif -%} + {% endif %} + {% endif %} +
+
+
+ {% if section.settings.cta_btn_text %} + + {{ section.settings.cta_btn_text }} + + {% endif %} +
+
+
+{% schema %} +{ + "name": "Industries Highlight", + "settings": [ + { + "type": "color", + "id": "bg_color", + "label": "Background Color", + "default": "#1D1D1D" + }, + { + "type": "html", + "id": "title", + "label": "Title" + }, + { + "type": "image_picker", + "id": "image", + "label": "Image" + }, + { + "type": "video_url", + "id": "video", + "label": "Video", + "accept": [ + "vimeo", + "youtube" + ] + }, + { + "type": "text", + "id": "cta_btn_text", + "label": "CTA Button Text" + }, + { + "type": "url", + "id": "cta_btn_url", + "label": "CTA Button URL" + } + ], + "presets": [ + { "name": "Industries Highlight"} + ] +} +{% endschema %} diff --git a/sections/industries-tools.liquid b/sections/industries-tools.liquid new file mode 100644 index 00000000000..64e85eb9bde --- /dev/null +++ b/sections/industries-tools.liquid @@ -0,0 +1,254 @@ +{% style %} +.industries-tools.section-{{ section.id }} { + background-color: {{ section.settings.bg_color }}; + width: 100%; + display: flex; + justify-content: center; + padding-bottom: 3rem; +} + +.industries-tools { + font-family: 'AlrightSans-Regular'; + overflow-x: clip; +} + +.industries-tools__container { + margin: 0 auto; + min-height: 584px; + position: relative; + width: 100%; + margin: 0 8.5%; +} + +.industries-tools__title-wrapper { + border-top: solid #FFB762 1px; + border-bottom: solid #FFB762 1px; + text-align: center; + margin-bottom: 3rem; +} + +.industries-tools__title-wrapper h1 { + text-transform: uppercase; + font-size: 32px; + margin: 11px 0px; + font-family: "AlrightSans-Light"; +} + +.industries-tools__title-wrapper h1 b{ + font-family: "AlrightSans-Medium"; + font-weight: bold; + color: #FFB762; +} + +.industries-tools__subtext-container { + overflow-wrap: break-word; + max-width: 229px; +} + +.industries-tools__media-wrapper { + width: 100%; + display: flex; + justify-content: center; + margin-bottom: 3rem; +} + +.industries-tools__image__wrapper--rel { + display: flex; + justify: center; + align-items: center; +} + +.industries-tools__cta-button { + text-transform: uppercase; +} + +.easel-highlight__cta-btn { + margin-right: 10px; +} + +.industries-tools__cta-btn.btn-primary { + border: none; + border-radius: 3px; + box-shadow: none; + width: 190px; + color: #fff; + display: inline-block; + font-size: 14px; + padding: 12px 6px; + text-shadow: none; + text-transform: uppercase; + transition: background .5s ease; + background: var(--gradient-base-accent-2); + color: #383838; + font-family: 'AlrightSans-Bold'; + font-weight: 700; + text-decoration: none; + text-align: center; +} + +.industries-tools__cta-wrapper { + display: flex; + justify-content: center; +} + +.industries-tool__items-container { + display: flex; + justify-content: space-between; + margin: 6rem 3rem 4rem 3rem; +} + +.industries-tool__items-wrapper { + display: flex; + justify-content: center; +} + +.industries-tools__tool-item-wrapper { + text-align: center; +} + +.industries-tools__tool-item-wrapper p { + font-size: 30px; + color: white; + max-width: 263px; + margin: 1rem 0px; + line-height: 36px; +} + +.industries-tools__tool-image{ + border: solid #FFB762 2px; + border-radius: 10px; +} + +.industrie-tools__plus-icon { + max-height: 207px; + display: flex; + align-items: center; +} + +@media screen and (max-width: 1100px) { + .industries-tools__cta-wrapper { + width: 100% + } + + .industries-tool__items-container { + flex-direction: column; + } + + .industries-tools__tool-image { + width: 506px; + height: auto; + border-radius: 30px; + border-width: 3px; + } + .industries-tools__subtext-container { + text-align: center; + display: flex; + justify-content: center; + width: 100%; + max-width: 100%; + } + + .industrie-tools__plus-icon { + width: 100%; + justify-content: center; + margin-bottom: 3rem; + } +} + +@media screen and (max-width: 593px) { + .industries-tools__tool-image { + width: 100%; + height: auto; + } + + .industries-tools__subtext-container p { + font-size: 15px; + } + +} +{% endstyle %} +
+
+
+

{{ section.settings.title }}

+
+
+ {% for block in section.blocks %} +
+ {{ block.settings.tool_image | image_url: width: 229 | image_tag: class: 'industries-tools__tool-image' }} +
+

{{ block.settings.tool_subtitle }}

+
+
+ {% unless forloop.last %} +
+ + + +
+ {% endunless %} + {% endfor %} +
+
+ {% if section.settings.cta_btn_text %} + + {{ section.settings.cta_btn_text }} + + {% endif %} +
+
+
+{% schema %} +{ + "name": "Industries Tools", + "settings": [ + { + "type": "color", + "id": "bg_color", + "label": "Background Color", + "default": "#1D1D1D" + }, + { + "type": "html", + "id": "title", + "label": "Title" + }, + { + "type": "image_picker", + "id": "image", + "label": "Image" + }, + { + "type": "text", + "id": "cta_btn_text", + "label": "CTA Button Text" + }, + { + "type": "url", + "id": "cta_btn_url", + "label": "CTA Button URL" + } + ], + "max_blocks": 30, + "blocks": [ + { + "type": "tool_item", + "name": "Tool Item", + "settings": [ + { + "type": "image_picker", + "id": "tool_image", + "label": "Tool Image" + }, { + "type": "text", + "id": "tool_subtitle", + "label": "Tool's Subtitle" + } + ] + } + ], + "presets": [ + { "name": "Industries Tools"} + ] +} +{% endschema %} diff --git a/sections/industries-workflow.liquid b/sections/industries-workflow.liquid new file mode 100644 index 00000000000..dc0b2659cdd --- /dev/null +++ b/sections/industries-workflow.liquid @@ -0,0 +1,359 @@ +{% style %} +.industries-workflow.section-{{ section.id }} { + background-color: {{ section.settings.bg_color }}; + width: 100%; + display: flex; + justify-content: center; + padding-bottom: 3rem; +} + +.industries-workflow__container { + margin: 0 auto; + min-height: 584px; + position: relative; + width: 100%; + padding: 0 8.5%; + position: relative; +} + +.industries-workflow__title-wrapper { + border-top: solid #FFB762 1px; + border-bottom: solid #FFB762 1px; + text-align: center; + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 1; + background-color: {{ section.settings.bg_color }}; +} + +.industries-workflow__subtitle-wrapper { + font-size: 24px; + color: white; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 1rem; + font-family: 'AlrightSans-Light'; +} + +.industries-workflow__title-wrapper h1 { + text-transform: uppercase; + font-size: 32px; + margin: 12px 0px 8px 0px; + font-family: "AlrightSans-Light"; +} + +.industries-workflow__title-wrapper h1 b{ + font-family: "AlrightSans-Medium"; + font-weight: bold; + color: #FFB762; +} + +.industries-workflow__item-containter { + display: flex; + flex-direction: row; + width: 100%; + position: relative; +} + +.industries-workflow__items-list-names { + width: 50%; + height: 537px; + display: flex; + align-items: flex-start; + flex-direction: column; + justify-content: center; + position: -webkit-sticky; + position: sticky; + top: 0; + padding: 0px; + padding-top: 100px; +} + +.industries-workflow__item-name { + text-transform: uppercase; + font-size: 35px; + list-style-type: none; + font-family: 'AlrightSans-Light'; + letter-spacing: 6px; + cursor: pointer; + margin-bottom: 2rem; + color: #969696; +} + +.industries-workflow__item-name.industries-workflow__selected_item { + color: white; +} + +.industries-workflow__item-media-container { + width: 50%; + display: flex; + flex-direction: column; +} + +.industries-workflow__item-media-wrapper { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin-bottom: 10rem; +} + +.industries-workflow__workflow-media { + scroll-margin-top: 100px; +} + +.industries-workslow__item-media-text { + font-family: 'AlrightSans-Light'; + text-transform: uppercase; + font-size: 17px; + text-align: center; + max-width: 537px; +} + +.industries-workflow__cta-btn.btn-primary { + border: none; + border-radius: 3px; + box-shadow: none; + width: 190px; + color: #fff; + display: inline-block; + font-size: 14px; + padding: 12px 6px; + text-shadow: none; + text-transform: uppercase; + transition: background .5s ease; + background: var(--gradient-base-accent-2); + color: #383838; + font-family: 'AlrightSans-Bold'; + font-weight: bold; + text-decoration: none; + text-align: center; +} + +.industries-workflow__cta-wrapper { + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.industries-workflow__item-media-name-wrapper-mobile p { + letter-spacing: 8px; + color: #FFB762; + margin: 3rem 0px 12px 0px; + text-transform: uppercase; +} +.industries-workflow__item-container_mobile { + display: none; +} + +@media screen and (max-width: 1180px) { + .industries-workflow__item-containter { + display: none; + } + .industries-workflow__subtitle-wrapper { + display: none; + } + .industries-workflow__item-media-wrapper { + margin-bottom: 0px; + } + .industries-workflow__item-containter_mobile { + display: flex; + } + .industries-workflow__item-media-name-wrapper-mobile p { + font-size: 28px; + } + .industries-workslow__item-media-text { + max-width: 537px; + text-align: left; + text-transform: capitalize; + font-size: 20px; + } + .industries-workflow__title-wrapper { + position: relative; + z-index: 0; + } + .industries-workflow__title-wrapper h1 { + font-size: 28px; + } + .industries-workflow__item-container_mobile { + display: block; + } + +} + +@media screen and (max-width: 560px) { + .industries-workflow__item-media-name-wrapper-mobile p { + font-size: 15px; + } + .industries-workslow__item-media-text { + font-size: 16px; + } + .industries-workflow__workflow-media { + width: 100%; + height: auto; + } + .industries-workflow__title-wrapper h1 { + font-size: 20px + } + +} +{% endstyle %} + +
+
+
+

{{ section.settings.title }}

+
+
+

{{ section.settings.subtitle }}

+
+ +
+
    + {% for block in section.blocks %} +
  • {{ block.settings.workflow_name }}
    • + {% endfor %} +
+
+ {% for block in section.blocks %} +
+ {{ block.settings.workflow_image | image_url: width: 537 | image_tag: class: 'industries-workflow__workflow-media' }} +
+

{{ block.settings.workflow_image_text }}

+
+
+ {% endfor %} +
+
+ +
+ {% for block in section.blocks %} +
+
+

{{ block.settings.workflow_name }}

+
+ {{ block.settings.workflow_image | image_url: width: 537 | image_tag: class: 'industries-workflow__workflow-media' }} +
+

{{ block.settings.workflow_image_text }}

+
+
+ {% endfor %} +
+ +
+ {% if section.settings.cta_btn_text %} + + {{ section.settings.cta_btn_text }} + + {% endif %} +
+
+ +
+ +{% schema %} +{ + "name": "Industries Workflow", + "settings": [ + { + "type": "color", + "id": "bg_color", + "label": "Background Color", + "default": "#1D1D1D" + }, + { + "type": "html", + "id": "title", + "label": "Title" + }, + { + "type": "text", + "id": "subtitle", + "label": "Section's Subtitle" + }, + { + "type": "text", + "id": "cta_btn_text", + "label": "CTA Button Text" + }, + { + "type": "url", + "id": "cta_btn_url", + "label": "CTA Button URL" + } + ], + "max_blocks": 30, + "blocks": [ + { + "type": "workflow_item", + "name": "Workflow Item", + "settings": [ + { + "type": "image_picker", + "id": "workflow_image", + "label": "Workflow Image" + }, + { + "type": "text", + "id": "workflow_image_text", + "label": "Workflow Image Text" + }, + { + "type": "text", + "id": "workflow_name", + "label": "Workflow's Name" + } + ] + } + ], + "presets": [ + { + "name": "Industries Workflow" + } + ] + +} +{% endschema %} diff --git a/sections/inv-column.liquid b/sections/inv-column.liquid new file mode 100644 index 00000000000..7839cf86454 --- /dev/null +++ b/sections/inv-column.liquid @@ -0,0 +1,818 @@ +{% style %} + #section-{{ section.id }} { + display: none; + } + .xcp-financing-options__container { + max-width: 1200px; + margin: 0 auto; + } + + .xcp-financing-options__flex-wrapper { + display: flex; + justify-content: space-between; + } + + #section-{{ section.id }} { + padding: {{ section.settings.vertical_padding }}px {{ section.settings.horizontal_padding}}px; + } + + #section-{{ section.id }} .xcp-financing-option__header-wrapper { + height: {{ section.settings.header_height }}px; + } + + .xcp-financing-option__lines-wrapper { + list-style: none; + padding-inline-start: 0; + margin-block-start: 0; + padding: 0 20px; + } + + .xcp-financing-option__line-title.hide-desk { + display: none; + } + + .xcp-financing-option__line-title { + font-weight: bold; + font-family: "AlrightSans-Light"; + font-size: 16px; + } + + .xcp-financing-option__line-title p { + margin-block-start: 1em; + margin-block-end: 1em; + } + + .xcp-financing-option__line-body { + text-align: center; + font-family: "AlrightSans-Light"; + font-size: 14px; + } + + .xcp-financing-option__line { + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .xcp-financing-option__img { + width: auto; + margin: 0 auto; + height: 25px; + display: block; + } + + .xcp-financing-options__bottom-text { + width: 75%; + margin-left: auto; + font-family: "AlrightSans-Light"; + font-size: 10px; + } + + #section-{{ section.id }} { + background-color: {{ section.settings.bg_color }}; + color: {{ section.settings.color }}; + border-radius: 10px; + max-width: {{ section.settings.column_max_width }}%; + } + + #section-{{ section.id }} .xcp-financing-option__header-wrapper { + background-color: {{ section.settings.header_bg_color }}; + color: {{ section.settings.header_color }}; + border-top-right-radius: 10px; + border-top-left-radius: 10px; + padding: 10px; + min-height: {{ section.settings.header_min_height }}px; + } + + #section-{{ section.id }} .xcp-financing-option__line-separator { + display: block; + border: 1px solid {{ section.settings.line_sep_color }}; + border-radius: 2px; + width: {{ section.settings.separator_width }}%; + height: 1px; + margin: 0 auto; + } + + #section-{{ section.id }} .xcp-financing-option__btn-wrapper { + display: flex; + justify-content: center; + padding-bottom: 40px; + } + + {% for block in section.blocks %} + {% case block.type %} + {% when 'button' %} + #block-{{ block.id }} .xcp-financing-option__btn-wrapper { + padding-top: 20px; + } + + #block-{{ block.id }} { + min-height: {{ block.settings.min_height }}px; + } + + #block-{{ block.id }} .xcp-financing-option__btn { + font-size: 8.5px; + background-color: {{ block.settings.bg_color }}; + color: {{ block.settings.color }}; + padding: {{ block.settings.vertical_padding }}px {{ block.settings.horizontal_padding }}px; + } + {% when 'line' %} + #block-{{ block.id }} { + min-height: {{ block.settings.min_height }}px; + } + + #block-{{ block.id }} .xcp-financing-option__line-title { + text-align: {{ block.settings.header_text_align }}; + } + + #block-{{ block.id }} .xcp-financing-option__line-body { + text-align: {{ block.settings.body_text_align }}; + } + {% when 'double-button' %} + #block-{{ block.id }} { + min-height: {{ block.settings.min_height }}px; + padding: {{ block.settings.vertical_padding }}px {{ block.settings.horizontal_padding }}px; + } + #block-{{ block.id }} .xc-comparison-column__btn-wrapper { + padding-top: 0; + } + {% endcase %} + {% endfor %} + + #section-{{ section.id }} .xc-comparison-column__header-wrapper { + min-height: {{ section.settings.header_min_height }}px; + } + + .xc-comparison-column__header-wrapper { + padding: 0 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .xc-comparison-column__title { + font-size: 40px; + line-height: 1.2; + font-family: "AlrightSans-Light"; + } + + .xc-comparison-column__title p { + margin-block-start: 0; + margin-block-end: 0; + } + + .xc-comparison-column__img-title { + text-align: center; + font-size: 26px; + font-weight: bold; + } + + .xc-comparison-column__img { + object-fit: cover; + width: 227px; + height: 227px; + margin: 0 auto; + display: block; + border: 2px solid lightgray; + border-radius: 3px; + } + + .xc-comparison-column__btn-wrapper { + display: flex; + justify-content: space-around; + padding-top: 20px; + } + + .xc-comparison-column__btn-wrapper *:empty { + display: block; + } + + .xc-comparison-column__btn-wrapper .btn { + text-decoration: none; + color: black; + background: lightgray; + padding: 7px 20px; + } + + .xc-comparison-column__btn-wrapper .btn-primary { + color: black; + font-weight: bold; + background: var(--gradient-base-accent-2); + border-radius: 5px; + } + + .xc-comparison-column__btn-wrapper .btn-black { + color: white; + background: black; + border-radius: 5px; + } + + @media screen and (max-width: 1200px) { + #section-{{ section.id }} .xc-comparison-column__header-wrapper { + min-height: {{ section.settings.header_min_height_mobile }}px; + } + .xc-comparison-column__img { + width: 100%; + height: auto; + } + .xcp-financing-option__line-title.hide-desk { + display: block; + text-align: center; + font-size: 14px; + } + + .xcp-financing-option.hide-mobile { + display: none; + } + + .section-{{ section.id }} .xcp-financing-option { + {% liquid + assign blocks_count = section.blocks | size | minus: 1 + assign block_width = 100 | divided_by: blocks_count + %} + width: calc({{ block_width }}% - 3%); + min-width: 300px; + max-width: unset; + margin-right: 10px; + } + + .xcp-financing-options__bottom-text { + width: 90%; + margin: 0 auto; + } + + #section-{{ section.id }} { + width: 46vw; + min-width: unset; + max-width: unset; + margin-right: 10px; + } + + .xc-comparison-column__btn-wrapper { + flex-direction: column; + text-align: center; + } + + .xc-comparison-column__btn-wrapper .btn { + margin-bottom: 10px; + } + + {% for block in section.blocks %} + {% case block.type %} + {% when 'button' %} + #block-{{ block.id }} .xcp-financing-option__btn { + padding: {{ block.settings.vertical_padding }}px 20px; + } + {% when 'line' %} + #block-{{ block.id }} { + min-height: {{ block.settings.mobile_min_height }}px; + } + + #block-{{ block.id }} .xcp-financing-option__line-title { + text-align: {{ block.settings.header_text_align_mob }}; + } + + #block-{{ block.id }} .xcp-financing-option__line-body { + text-align: {{ block.settings.body_text_align_mob }}; + } + {% endcase %} + {% endfor %} + } + + @media screen and (max-width: 935px) { + .section-{{ section.id }} .xcp-financing-option { + width: 46vw; + min-width: unset; + max-width: unset; + margin-right: 10px; + } + + .xcp-financing-options__mobile-scroll { + min-height: 787px; + overflow-x: scroll; + } + + .xcp-financing-options__flex-wrapper { + width: 138vw; + justify-content: start; + } + + .xcp-financing-option__line { + justify-content: space-between; + } + + .xcp-financing-option__btn { + padding: 12px 10px !important; + } + } + + @media screen and (max-width: 400px) { + .xcp-financing-highlight__image { + width: 90%; + margin: 0 auto; + } + } +{% endstyle %} +{% assign line_title_class = "" %} +{% unless section.settings.show_line_title_desk %} + {% assign line_title_class = "hide-desk" %} +{% endunless %} + +{% assign block_class= "" %} +{% assign show_on_mobile_datatag = "true" %} +{% if section.settings.hide_block_mobile %} + {% assign block_class= "hide-mobile" %} + {% assign show_on_mobile_datatag = "false" %} +{% endif %} +
+ {% case section.settings.header_style %} + {% when 'financing' %} +
+ {% if section.settings.header_logo_img %} + {{ section.settings.header_logo_img | image_url: width: 500 | image_tag: class: 'xcp-financing-option__img' }} + {% else %} +
+ {{ section.settings.header_text }} +
+ {% endif %} +
+ {% when 'comparison' %} +
+ {% if section.settings.header_logo_img %} + {{ section.settings.header_logo_img | image_url: width: 500 | image_tag: class: "xc-comparison-column__img" }} +
{{ section.settings.header_text }}
+ {% else %} +
{{ section.settings.header_text }}
+ {% endif %} + {% if section.settings.show_header_separator %} +
+ {% endif %} +
+ {% endcase %} +
    + {% for block in section.blocks %} +
  • + {% case block.type %} + {% when 'line' %} +
    + {{ block.settings.title }} +
    +
    + {% if block.settings.html_body != '' %} + {{ block.settings.html_body }} + {% else %} + {{ block.settings.body }} + {% endif %} +
    + {% when 'button' %} +
    + + {{ block.settings.label }} + +
    + {% when 'double-button' %} +
    + {% if block.settings.orange_btn_label != "" %} + {{ block.settings.orange_btn_label }} + {% endif %} + {% if block.settings.black_btn_label != "" %} + {{ block.settings.black_btn_label }} + {% endif %} +
    + {% endcase %} +
    • + {% if block.settings.display_separator %} +
    + {% endif %} + {% endfor %} +
+
+{% schema %} +{ + "name": "Inventable Column", + "tag": "div", + "class": "section", + "settings": [ + { + "type": "color", + "id": "header_bg_color", + "label": "Header Background Color" + }, + { + "type": "color", + "id": "header_color", + "label": "Header Color" + }, + { + "type": "color", + "id": "bg_color", + "label": "Background Color" + }, + { + "type": "color", + "id": "color", + "label": "Color", + "default": "#BFBFBF" + }, + { + "type": "color", + "id": "line_sep_color", + "label": "Line Separator Color", + "default": "#C5C5C5" + }, + { + "type": "range", + "id": "separator_width", + "min": 0, + "max": 100, + "step": 1, + "unit": "%", + "label": "Separator Width", + "default": 80 + }, + { + "type": "checkbox", + "id": "show_line_title_desk", + "label": "Show Line Title on Desktop", + "default": false + }, + { + "type": "checkbox", + "id": "hide_block_mobile", + "label": "Hide Block Mobile", + "default": false + }, + { + "type": "select", + "id": "header_style", + "options": [ + { + "value": "financing", + "label": "Financing" + }, + { + "value": "comparison", + "label": "Comparison" + } + ], + "default": "financing", + "label": "Header Style" + }, + { + "type": "image_picker", + "id": "header_logo_img", + "label": "Header Logo Image" + }, + { + "type": "richtext", + "id": "header_text", + "label": "Header text" + }, + { + "type": "range", + "id": "column_max_width", + "min": 0, + "max": 100, + "step": 1, + "unit": "%", + "label": "Column Max Width", + "default": 21 + }, + { + "type": "range", + "id": "header_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Header Min Height", + "default": 50 + }, + { + "type": "range", + "id": "header_min_height_mobile", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Header Min Height Mobile", + "default": 50 + }, + { + "type": "checkbox", + "id": "show_header_separator", + "label": "Show Header Separator", + "default": false + }, + { + "type": "range", + "id": "vertical_padding", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "label": "Column Vertical Padding", + "default": 0 + }, + { + "type": "range", + "id": "horizontal_padding", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "label": "Column Horizontal Padding", + "default": 0 + } + ], + "blocks": [ + { + "type": "line", + "name": "Line", + "settings": [ + { + "type": "range", + "id": "min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Min Height", + "default": 25 + }, + { + "type": "range", + "id": "mobile_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Mobile Min Height", + "default": 25 + }, + { + "type": "richtext", + "id": "title", + "label": "Title" + }, + { + "type": "richtext", + "id": "body", + "label": "Body" + }, + { + "type": "html", + "id": "html_body", + "label": "HTML Body" + }, + { + "type": "checkbox", + "id": "display_separator", + "label": "Display Separator", + "default": true + }, + { + "type": "select", + "id": "header_text_align", + "options": [ + { + "value": "left", + "label": "Left" + }, + { + "value": "center", + "label": "Center" + }, + { + "value": "right", + "label": "Right" + } + ], + "default": "left", + "label": "Header Text Alignment" + }, + { + "type": "select", + "id": "header_text_align_mob", + "options": [ + { + "value": "left", + "label": "Left" + }, + { + "value": "center", + "label": "Center" + }, + { + "value": "right", + "label": "Right" + } + ], + "default": "center", + "label": "Mobile Header Text Alignment" + }, + { + "type": "select", + "id": "body_text_align", + "options": [ + { + "value": "left", + "label": "Left" + }, + { + "value": "center", + "label": "Center" + }, + { + "value": "right", + "label": "Right" + } + ], + "default": "center", + "label": "Body Text Alignment" + }, + { + "type": "select", + "id": "body_text_align_mob", + "options": [ + { + "value": "left", + "label": "Left" + }, + { + "value": "center", + "label": "Center" + }, + { + "value": "right", + "label": "Right" + } + ], + "default": "center", + "label": "Mobile Body Text Alignment" + } + ] + }, + { + "type": "button", + "name": "Button", + "settings": [ + { + "type": "range", + "id": "min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Min Height", + "default": 25 + }, + { + "type": "range", + "id": "mobile_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Mobile Min Height", + "default": 25 + }, + { + "type": "color", + "id": "bg_color", + "label": "Background Color" + }, + { + "type": "color", + "id": "color", + "label": "Color" + }, + { + "type": "text", + "id": "label", + "label": "Label" + }, + { + "type": "url", + "id": "url", + "label": "URL" + }, + { + "type": "checkbox", + "id": "display_separator", + "label": "Display Separator", + "default": true + }, + { + "type": "header", + "content": "Padding" + }, + { + "type": "range", + "id": "vertical_padding", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "label": "Vertical Padding", + "default": 12 + }, + { + "type": "range", + "id": "horizontal_padding", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "label": "Vertical Padding", + "default": 37 + } + ] + }, + { + "type": "double-button", + "name": "Double Button", + "settings": [ + { + "type": "range", + "id": "min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Min Height", + "default": 25 + }, + { + "type": "range", + "id": "mobile_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Mobile Min Height", + "default": 25 + }, + { + "type": "header", + "content": "Padding" + }, + { + "type": "range", + "id": "vertical_padding", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "label": "Line Vertical Padding", + "default": 12 + }, + { + "type": "range", + "id": "horizontal_padding", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "label": "Line Horizontal Padding", + "default": 0 + }, + { + "type": "checkbox", + "id": "display_separator", + "label": "Display Separator", + "default": true + }, + { + "type": "url", + "id": "orange_btn_url", + "label": "Orange Button URL" + }, + { + "type": "text", + "id": "orange_btn_label", + "label": "Orange Button Label", + "default": "Buy now" + }, + { + "type": "url", + "id": "black_btn_url", + "label": "Black Button URL" + }, + { + "type": "text", + "id": "black_btn_label", + "label": "Black Button Label", + "default": "Learn more" + } + ] + } + ], + "presets": [ + { "name": "Inventable Column" } + ] +} +{% endschema %} diff --git a/sections/inv-financing-small-text.liquid b/sections/inv-financing-small-text.liquid new file mode 100644 index 00000000000..34616e7ee5a --- /dev/null +++ b/sections/inv-financing-small-text.liquid @@ -0,0 +1,119 @@ +{% style %} + +.inv-financing-small-text__container { + max-width: 1200px; + margin: 0 auto; +} + +#section-{{ section.id }} .inv-financing-small-text__content-align { + display: flex; + {% case section.settings.content_alignment %} + {% when 'left' %} + justify-content: start; + {% when 'center' %} + justify-content: center; + {% when 'right' %} + justify-content: end; + {% endcase %} +} + +.inv-financing-small-text__content-wrapper { + font-family: "AlrightSans-Light"; + font-size: 10px; + max-width: {{ section.settings.max_width }}%; +} + +@media screen and (max-width: 1200px) { + #section-{{ section.id }} .inv-financing-small-text__content-align { + justify-content: center; + } + .inv-financing-small-text__content-wrapper { + max-width: 90%; + } + +} +{% endstyle %} +
+
+
+
+ {{ section.settings.content }} +
+
+
+
+{% schema %} +{ + "name": "Fin Small Text", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "select", + "id": "color_scheme", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "inverse", + "label": "t:sections.all.colors.label" + }, + { + "type": "richtext", + "id": "content", + "label": "content" + }, + { + "type": "range", + "id": "max_width", + "min": 0, + "max": 100, + "step": 1, + "unit": "%", + "label": "Max Width", + "default": 70 + }, + { + "type": "select", + "id": "content_alignment", + "options": [ + { + "value": "left", + "label": "Left" + }, + { + "value": "center", + "label": "Center" + }, + { + "value": "right", + "label": "Right" + } + ], + "default": "right", + "label": "Content Alignment" + } + ], + "presets": [ + { "name": "Fin Small Text"} + ] +} +{% endschema %} diff --git a/sections/inv-prod-tech-spec.liquid b/sections/inv-prod-tech-spec.liquid new file mode 100644 index 00000000000..e3c4847d8a4 --- /dev/null +++ b/sections/inv-prod-tech-spec.liquid @@ -0,0 +1,112 @@ +{% style %} +.section-{{ section.id }}-padding { + padding-top: calc({{ section.settings.padding_top }}px * 0.75); + padding-bottom: calc({{ section.settings.padding_bottom }}px * 0.75); +} + +@media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } +} +.product { + margin-right: auto; + margin-left: auto; +} +.product-details { + max-width: 1200px; + display: flex; + margin-right: auto; + margin-left: auto; + padding: 0 5% 0 5%; + flex-wrap: wrap; +} +@media(min-width:768px) { + .product-details { + flex-wrap: nowrap; + } +} +{% endstyle %} +
+
+

Product Details

+ {{ product.description }} +
+ +
+

Technical Specs

+
    + {% for spec in product.metafields.custom.technical_specs.value %} +
  • {{ spec.name }}: {{ spec.value }}
    • + {% endfor %} +
+
+
+ +{% schema %} +{ + "name": "Inv Product Tech Spec", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "select", + "id": "color_scheme", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "background-1", + "label": "t:sections.all.colors.label" + }, + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 40 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 52 + } + ], + "presets": [ + { + "name": "Inv Product Tech Spec" + } + ] +} +{% endschema %} diff --git a/sections/inv-product.liquid b/sections/inv-product.liquid new file mode 100644 index 00000000000..370c391e5c3 --- /dev/null +++ b/sections/inv-product.liquid @@ -0,0 +1,1636 @@ +
+ {{ 'section-main-product.css' | asset_url | stylesheet_tag }} + {{ 'component-accordion.css' | asset_url | stylesheet_tag }} + {{ 'component-price.css' | asset_url | stylesheet_tag }} + {{ 'component-rte.css' | asset_url | stylesheet_tag }} + {{ 'component-slider.css' | asset_url | stylesheet_tag }} + {{ 'component-rating.css' | asset_url | stylesheet_tag }} + {{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }} + {{ 'component-deferred-media.css' | asset_url | stylesheet_tag }} + {{ 'inv-product.css' | asset_url | stylesheet_tag }} + + {%- style -%} + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; + } + + @media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + } + + #MainContent { + background: white; + } + + .inv-product .quantity { + max-width: 210px; + min-height: 43px; + } + + .inv-product__product-media-wrapper { + display: block; + max-width: 100%; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + } + + .inv-product__product-media-wrapper { + display: block; + max-width: 100%; + position: unset; + height: auto; + width: 100%; + max-height: 850px; + } + + .inv-product__product-media-wrapper img { + width: 100%; + height: auto; + max-height: 850px; + margin: 0 auto; + display: block; + } + + @media screen and (max-width: 750px) { + .inv-product__product-media-wrapper { + max-height: 500px; + } + .inv-product__product-media-wrapper img { + max-height: 290px; + margin: 0 auto; + width: 100%; + } + + } + + {%- endstyle -%} + + + + {%- assign first_3d_model = product.media | where: "media_type", "model" | first -%} + {%- if first_3d_model -%} + {{ 'component-product-model.css' | asset_url | stylesheet_tag }} + + + {%- endif -%} + + + + + +
+
+ + + + +
    + {%- liquid + assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' + assign media_count = product.media.size + if section.settings.hide_variants and media_count > 1 + assign media_count = media_count | minus: variant_images.size | plus: 1 + endif + + if section.settings.media_size == 'large' + assign media_width = 0.65 + elsif section.settings.media_size == 'medium' + assign media_width = 0.55 + elsif section.settings.media_size == 'small' + assign media_width = 0.45 + endif + -%} + {%- if product.selected_or_first_available_variant.featured_media != null -%} + {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%} +
  • + {%- assign media_position = 1 -%} + {% render 'inv-product-thumbnail', media: featured_media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: false %} +
    • + {%- endif -%} + {%- for media in product.media -%} + {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%} +
  • + {%- liquid + assign media_position = media_position | default: 0 | plus: 1 + assign lazy_load = false + if media_position > 1 + assign lazy_load = true + endif + render 'inv-product-thumbnail', media: media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: lazy_load + -%} +
    • + {%- endunless -%} + {%- endfor -%} +
+
+ +
+ 1 + + + {{ media_count }} +
+ +
+ + {%- if first_3d_model -%} + + {%- endif -%} + {%- if media_count > 1 and section.settings.gallery_layout != 'stacked' or section.settings.mobile_thumbnails == 'show' -%} + + +
    + {%- if featured_media != null -%} + {%- liquid + capture media_index + if featured_media.media_type == 'model' + increment model_index + elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' + increment video_index + elsif featured_media.media_type == 'image' + increment image_index + endif + endcapture + assign media_index = media_index | plus: 1 + -%} +
  • + +
    • + {%- endif -%} + {%- for media in product.media -%} + {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%} + {%- liquid + capture media_index + if media.media_type == 'model' + increment model_index + elsif media.media_type == 'video' or media.media_type == 'external_video' + increment video_index + elsif media.media_type == 'image' + increment image_index + endif + endcapture + assign media_index = media_index | plus: 1 + -%} +
  • + {%- if media.media_type == 'model' -%} + + {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%} + + {%- endif -%} + +
    • + {%- endunless -%} + {%- endfor -%} +
+ + + {%- endif -%} + +
+
+
+ {%- assign product_form_id = 'product-form-' | append: section.id -%} + + {%- for block in section.blocks -%} + {%- case block.type -%} + {%- when '@app' -%} + {% render block %} + {%- when 'text' -%} +

+ {{- block.settings.text -}} +

+ {%- when 'title' -%} +
+

{{ product.title | escape }}

+ +

+ {{ product.title | escape }} +

+ +
+ {%- when 'price' -%} +
+
+ {%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%} +
+ {%- if shop.taxes_included or shop.shipping_policy.body != blank -%} +
+ {%- if shop.taxes_included -%} + {{ 'products.product.include_taxes' | t }} + {%- endif -%} + {%- if shop.shipping_policy.body != blank -%} + {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }} + {%- endif -%} +
+ {%- endif -%} +
+ {%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%} + {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%} + + {% comment%} + hide "From $X/mo with Shop Pay" banner + {{ form | payment_terms }} + {% endcomment %} + {%- endform -%} +
+ {%- when 'description' -%} + {%- if product.description != blank -%} +
+ {{ product.description }} +
+ {%- endif -%} + {%- when 'custom_liquid' -%} + {{ block.settings.custom_liquid }} + {%- when 'collapsible_tab' -%} +
+
+ +
+ {% render 'icon-accordion', icon: block.settings.icon %} +

+ {{ block.settings.heading | default: block.settings.page.title }} +

+
+ {% render 'icon-caret' %} + +
+ {{ block.settings.content }} + {{ block.settings.page.content }} +
+
+
+ {%- when 'quantity_selector' -%} +
+ + + + + + + +
+ {%- when 'popup' -%} + + + + + {{- block.settings.text -}} + + {%- when 'share' -%} + + + {%- when 'variant_picker' -%} + {%- unless product.has_only_default_variant -%} + {%- if block.settings.picker_type == 'button' -%} + + {%- for option in product.options_with_values -%} +
+ {{ option.name }} + {%- for value in option.values -%} + + + {%- endfor -%} +
+ {%- endfor -%} + + + {%- else -%} + + {%- for option in product.options_with_values -%} +
+ +
+ + {% render 'icon-caret' %} +
+
+ {%- endfor -%} + + + + {%- endif -%} + {%- endunless -%} + + + + {%- when 'buy_buttons' -%} +
+ + + + {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} + +
+ + {%- if block.settings.show_dynamic_checkout -%} + {{ form | payment_button }} + {%- endif -%} +
+ {%- endform -%} + + + {{ 'component-pickup-availability.css' | asset_url | stylesheet_tag }} + + {%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities | where: 'pick_up_enabled', true -%} + + 0 %} + available + {% endif %} + data-root-url="{{ routes.root_url }}" + data-variant-id="{{ product.selected_or_first_available_variant.id }}" + data-has-only-default-variant="{{ product.has_only_default_variant }}" + > + + +
+
+ + {%- when 'rating' -%} + {%- if product.metafields.reviews.rating.value != blank -%} + {% liquid + assign rating_decimal = 0 + assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1 + if decimal >= 0.3 and decimal <= 0.7 + assign rating_decimal = 0.5 + elsif decimal > 0.7 + assign rating_decimal = 1 + endif + %} + +

+ +

+

+ + +

+ {%- endif -%} + {%- endcase -%} + {%- endfor -%} + + {{ 'products.product.view_full_details' | t }} + {% render 'icon-arrow' %} + +
+
+ {%- if section.settings.media_position == 'right' -%} +
+ + + +
    + {%- assign media_position = 0 -%} + {%- if product.selected_or_first_available_variant.featured_media != null -%} + {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%} +
  • + {%- assign media_position = 1 -%} + {% render 'inv-product-thumbnail', media: featured_media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: false %} +
    • + {%- endif -%} + {%- for media in product.media -%} + {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%} +
  • + {%- liquid + assign media_position = media_position | default: 0 | plus: 1 + assign lazy_load = false + if media_position > 1 + assign lazy_load = true + endif + render 'inv-product-thumbnail', media: media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: lazy_load + -%} +
    • + {%- endunless -%} + {%- endfor -%} +
+ + {%- if first_3d_model -%} + + {%- endif -%} + {%- if media_count > 1 and section.settings.gallery_layout != 'stacked' or section.settings.mobile_thumbnails == 'show' -%} + + +
    + {%- if featured_media != null -%} + {%- liquid + capture media_index + if featured_media.media_type == 'model' + increment model_index_right + elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' + increment video_index_right + elsif featured_media.media_type == 'image' + increment image_index_right + endif + endcapture + assign media_index = media_index | plus: 1 + -%} +
  • + +
    • + {%- endif -%} + {%- for media in product.media -%} + {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%} + {%- liquid + capture media_index + if media.media_type == 'model' + increment model_index_right + elsif media.media_type == 'video' or media.media_type == 'external_video' + increment video_index_right + elsif media.media_type == 'image' + increment image_index_right + endif + endcapture + assign media_index = media_index | plus: 1 + -%} +
  • + {%- if media.media_type == 'model' -%} + + {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%} + + {%- endif -%} + +
    • + {%- endunless -%} + {%- endfor -%} +
+ + + {%- endif -%} + +
+ {%- endif -%} +
+ + + + + + {% assign popups = section.blocks | where: "type", "popup" %} + {%- for block in popups -%} + + + + {%- endfor -%} + + {%- if product.media.size > 0 -%} + + + {%- endif -%} + + {%- if first_3d_model -%} + + + {%- endif -%} + + + + {%- liquid + if product.selected_or_first_available_variant.featured_media + assign seo_media = product.selected_or_first_available_variant.featured_media + else + assign seo_media = product.featured_media + endif + -%} + + +
+ +{% schema %} +{ + "name": "Invetables Product", + "tag": "section", + "class": "section", + "blocks": [ + { + "type": "@app" + }, + { + "type": "text", + "name": "t:sections.main-product.blocks.text.name", + "settings": [ + { + "type": "text", + "id": "text", + "default": "Text block", + "label": "t:sections.main-product.blocks.text.settings.text.label" + }, + { + "type": "select", + "id": "text_style", + "options": [ + { + "value": "body", + "label": "t:sections.main-product.blocks.text.settings.text_style.options__1.label" + }, + { + "value": "subtitle", + "label": "t:sections.main-product.blocks.text.settings.text_style.options__2.label" + }, + { + "value": "uppercase", + "label": "t:sections.main-product.blocks.text.settings.text_style.options__3.label" + } + ], + "default": "body", + "label": "t:sections.main-product.blocks.text.settings.text_style.label" + } + ] + }, + { + "type": "title", + "name": "t:sections.main-product.blocks.title.name", + "limit": 1 + }, + { + "type": "price", + "name": "t:sections.main-product.blocks.price.name", + "limit": 1 + }, + { + "type": "quantity_selector", + "name": "t:sections.main-product.blocks.quantity_selector.name", + "limit": 1 + }, + { + "type": "variant_picker", + "name": "t:sections.main-product.blocks.variant_picker.name", + "limit": 1, + "settings": [ + { + "type": "select", + "id": "picker_type", + "options": [ + { + "value": "dropdown", + "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__1.label" + }, + { + "value": "button", + "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__2.label" + } + ], + "default": "button", + "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.label" + } + ] + }, + { + "type": "buy_buttons", + "name": "t:sections.main-product.blocks.buy_buttons.name", + "limit": 1, + "settings": [ + { + "type": "checkbox", + "id": "show_dynamic_checkout", + "default": true, + "label": "t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.label", + "info": "t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.info" + } + ] + }, + { + "type": "description", + "name": "t:sections.main-product.blocks.description.name", + "limit": 1 + }, + { + "type": "share", + "name": "t:sections.main-product.blocks.share.name", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "share_label", + "label": "t:sections.main-product.blocks.share.settings.text.label", + "default": "Share" + }, + { + "type": "paragraph", + "content": "t:sections.main-product.blocks.share.settings.featured_image_info.content" + }, + { + "type": "paragraph", + "content": "t:sections.main-product.blocks.share.settings.title_info.content" + } + ] + }, + { + "type": "custom_liquid", + "name": "t:sections.main-product.blocks.custom_liquid.name", + "settings": [ + { + "type": "liquid", + "id": "custom_liquid", + "label": "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.label", + "info": "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.info" + } + ] + }, + { + "type": "collapsible_tab", + "name": "t:sections.main-product.blocks.collapsible_tab.name", + "settings": [ + { + "type": "text", + "id": "heading", + "default": "Collapsible row", + "info": "t:sections.main-product.blocks.collapsible_tab.settings.heading.info", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.heading.label" + }, + { + "type": "select", + "id": "icon", + "options": [ + { + "value": "none", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label" + }, + { + "value": "apple", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label" + }, + { + "value": "banana", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label" + }, + { + "value": "bottle", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label" + }, + { + "value": "box", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label" + }, + { + "value": "carrot", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label" + }, + { + "value": "chat_bubble", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label" + }, + { + "value": "check_mark", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label" + }, + { + "value": "clipboard", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label" + }, + { + "value": "dairy", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label" + }, + { + "value": "dairy_free", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label" + }, + { + "value": "dryer", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label" + }, + { + "value": "eye", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label" + }, + { + "value": "fire", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label" + }, + { + "value": "gluten_free", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label" + }, + { + "value": "heart", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label" + }, + { + "value": "iron", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label" + }, + { + "value": "leaf", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label" + }, + { + "value": "leather", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label" + }, + { + "value": "lightning_bolt", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label" + }, + { + "value": "lipstick", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label" + }, + { + "value": "lock", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label" + }, + { + "value": "map_pin", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label" + }, + { + "value": "nut_free", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label" + }, + { + "value": "pants", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__25.label" + }, + { + "value": "paw_print", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__26.label" + }, + { + "value": "pepper", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__27.label" + }, + { + "value": "perfume", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__28.label" + }, + { + "value": "plane", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__29.label" + }, + { + "value": "plant", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__30.label" + }, + { + "value": "price_tag", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__31.label" + }, + { + "value": "question_mark", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__32.label" + }, + { + "value": "recycle", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__33.label" + }, + { + "value": "return", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__34.label" + }, + { + "value": "ruler", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__35.label" + }, + { + "value": "serving_dish", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__36.label" + }, + { + "value": "shirt", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__37.label" + }, + { + "value": "shoe", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__38.label" + }, + { + "value": "silhouette", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__39.label" + }, + { + "value": "snowflake", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__40.label" + }, + { + "value": "star", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__41.label" + }, + { + "value": "stopwatch", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__42.label" + }, + { + "value": "truck", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label" + }, + { + "value": "washing", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label" + } + ], + "default": "check_mark", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.label" + }, + { + "type": "richtext", + "id": "content", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.content.label" + }, + { + "type": "page", + "id": "page", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.page.label" + } + ] + }, + { + "type": "popup", + "name": "t:sections.main-product.blocks.popup.name", + "settings": [ + { + "type": "text", + "id": "text", + "default": "Pop-up link text", + "label": "t:sections.main-product.blocks.popup.settings.link_label.label" + }, + { + "id": "page", + "type": "page", + "label": "t:sections.main-product.blocks.popup.settings.page.label" + } + ] + }, + { + "type": "rating", + "name": "t:sections.main-product.blocks.rating.name", + "limit": 1, + "settings": [ + { + "type": "paragraph", + "content": "t:sections.main-product.blocks.rating.settings.paragraph.content" + } + ] + } + ], + "settings": [ + { + "type": "checkbox", + "id": "enable_sticky_info", + "default": true, + "label": "t:sections.main-product.settings.enable_sticky_info.label" + }, + { + "type": "header", + "content": "t:sections.main-product.settings.header.content", + "info": "t:sections.main-product.settings.header.info" + }, + { + "type": "select", + "id": "media_position", + "options": [ + { + "value": "left", + "label": "t:sections.main-product.settings.media_position.options__1.label" + }, + { + "value": "right", + "label": "t:sections.main-product.settings.media_position.options__2.label" + } + ], + "default": "left", + "label": "t:sections.main-product.settings.media_position.label", + "info": "t:sections.main-product.settings.media_position.info" + }, + { + "type": "select", + "id": "gallery_layout", + "options": [ + { + "value": "stacked", + "label": "t:sections.main-product.settings.gallery_layout.options__1.label" + }, + { + "value": "thumbnail", + "label": "t:sections.main-product.settings.gallery_layout.options__2.label" + }, + { + "value": "thumbnail_slider", + "label": "t:sections.main-product.settings.gallery_layout.options__3.label" + } + ], + "default": "stacked", + "label": "t:sections.main-product.settings.gallery_layout.label" + }, + { + "type": "select", + "id": "media_size", + "options": [ + { + "value": "small", + "label": "t:sections.main-product.settings.media_size.options__1.label" + }, + { + "value": "medium", + "label": "t:sections.main-product.settings.media_size.options__2.label" + }, + { + "value": "large", + "label": "t:sections.main-product.settings.media_size.options__3.label" + } + ], + "default": "large", + "label": "t:sections.main-product.settings.media_size.label", + "info": "t:sections.main-product.settings.media_size.info" + }, + { + "type": "select", + "id": "mobile_thumbnails", + "options": [ + { + "value": "show", + "label": "t:sections.main-product.settings.mobile_thumbnails.options__1.label" + }, + { + "value": "hide", + "label": "t:sections.main-product.settings.mobile_thumbnails.options__2.label" + } + ], + "default": "hide", + "label": "t:sections.main-product.settings.mobile_thumbnails.label" + }, + { + "type": "checkbox", + "id": "hide_variants", + "default": false, + "label": "t:sections.main-product.settings.hide_variants.label" + }, + { + "type": "checkbox", + "id": "enable_video_looping", + "default": false, + "label": "t:sections.main-product.settings.enable_video_looping.label" + }, + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 36 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 36 + } + ] +} +{% endschema %} diff --git a/sections/main-cart-footer.liquid b/sections/main-cart-footer.liquid index d135cbb7029..8e990d18f4f 100644 --- a/sections/main-cart-footer.liquid +++ b/sections/main-cart-footer.liquid @@ -2,6 +2,8 @@ {{ 'component-totals.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }} {{ 'component-discounts.css' | asset_url | stylesheet_tag }} +{{ 'buttons.css' | asset_url | stylesheet_tag }} +{{ 'utils.css' | asset_url | stylesheet_tag }}
@@ -59,16 +61,12 @@ -
- {%- if additional_checkout_buttons -%} -
- {{ content_for_additional_checkout_buttons }} -
- {%- endif -%} + {{ 'general.continue_shopping' | t }} {%- endcase -%} {% endfor %} diff --git a/sections/main-login.liquid b/sections/main-login.liquid deleted file mode 100644 index 83d299ab833..00000000000 --- a/sections/main-login.liquid +++ /dev/null @@ -1,194 +0,0 @@ -{{ 'customer.css' | asset_url | stylesheet_tag }} - -{%- style -%} - .section-{{ section.id }}-padding { - padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; - padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; - } - - @media screen and (min-width: 750px) { - .section-{{ section.id }}-padding { - padding-top: {{ section.settings.padding_top }}px; - padding-bottom: {{ section.settings.padding_bottom }}px; - } - } -{%- endstyle -%} - - - -{% schema %} -{ - "name": "t:sections.main-login.name", - "settings": [ - { - "type": "header", - "content": "t:sections.all.padding.section_padding_heading" - }, - { - "type": "range", - "id": "padding_top", - "min": 0, - "max": 100, - "step": 4, - "unit": "px", - "label": "t:sections.all.padding.padding_top", - "default": 36 - }, - { - "type": "range", - "id": "padding_bottom", - "min": 0, - "max": 100, - "step": 4, - "unit": "px", - "label": "t:sections.all.padding.padding_bottom", - "default": 36 - } - ] -} -{% endschema %} diff --git a/sections/main-page-inventables.liquid b/sections/main-page-inventables.liquid new file mode 100644 index 00000000000..bae49291050 --- /dev/null +++ b/sections/main-page-inventables.liquid @@ -0,0 +1,62 @@ + + + + + + +{%- style -%} + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; + } + + @media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + } +{%- endstyle -%} + +
+

+ {{ page.title | escape }} +

+
+ {{ page.content }} +
+
+ +{% schema %} +{ + "name": "t:sections.main-page.name", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 36 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 36 + } + ] +} +{% endschema %} diff --git a/sections/main-product.liquid b/sections/main-product.liquid index bfdbfb0f425..f564f645b3d 100644 --- a/sections/main-product.liquid +++ b/sections/main-product.liquid @@ -47,6 +47,18 @@ > {%- endif -%} + + + +
= 260 %}{{ media.preview_image | image_url: width: 260 }} 260w{% endif %} " src="{{ media | image_url: width: 84, height: 84 }}" - sizes="(min-width: 1200px) calc((1200px - 19.5rem) / 12), (min-width: 750px) calc((100vw - 16.5rem) / 8), calc((100vw - 8rem) / 5)" + sizes="(min-width: 1200px) calc((1200px - 19.5rem) / 4), (min-width: 750px) calc((100vw - 16.5rem) / 3), calc((100vw - 8rem) / 2)" alt="{{ media.alt | escape }}" height="200" width="200" @@ -321,6 +333,7 @@
{%- when 'price' -%} +
{%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%}
@@ -338,7 +351,10 @@ {%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%} {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%} + {% comment%} + hide "From $X/mo with Shop Pay" banner {{ form | payment_terms }} + {% endcomment %} {%- endform -%}
{%- when 'description' -%} @@ -535,6 +551,7 @@ {%- endif -%} {%- endunless -%} +
{%- when 'rating' -%} {%- if product.metafields.reviews.rating.value != blank -%} diff --git a/sections/main-search.liquid b/sections/main-search.liquid index 85ff05086a4..e151fb40abf 100644 --- a/sections/main-search.liquid +++ b/sections/main-search.liquid @@ -60,76 +60,11 @@ } {%- endstyle -%} +
- {%- if search.performed -%} -

{{ 'templates.search.title' | t }}

- {%- else -%} -

{{ 'general.search.search' | t }}

- {%- endif -%} -
- {%- if settings.predictive_search_enabled -%} - - {%- endif -%} - - {%- if settings.predictive_search_enabled -%} - - {%- endif -%} - -
- {%- if search.performed -%} - {%- unless section.settings.enable_filtering or section.settings.enable_sorting -%} - {%- if search.results_count > 0 -%} -

{{ 'templates.search.results_with_count_and_term' | t: terms: search.terms, count: search.results_count }}

- {%- endif -%} - {%- endunless -%} - {%- if search.results_count == 0 and search.filters == empty -%} -

{{ 'templates.search.no_results' | t: terms: search.terms }}

- {%- endif -%} - {%- endif -%} +

{{ 'templates.search.title' | t }}

+

{{ 'templates.search.results_with_count_and_term' | t: terms: search.terms, count: search.results_count }}

{%- if search.performed -%} {%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' and search.filters != empty -%} @@ -419,4 +354,4 @@ } ] } -{% endschema %} +{% endschema %} \ No newline at end of file diff --git a/sections/shogun-above.liquid b/sections/shogun-above.liquid new file mode 100644 index 00000000000..46baa61af82 --- /dev/null +++ b/sections/shogun-above.liquid @@ -0,0 +1,16 @@ +{% comment %} +Auto-generated by Shogun. +This file can be re-written at any time. +{% endcomment %} + +{% if product %} + {% assign content = product %} +{% elsif collection %} + {% assign content = collection %} +{% endif %} +{{content.metafields.shogun.above}} +{% schema %} + { + "name": "Shogun Section Above" + } +{% endschema %} diff --git a/sections/shogun-below.liquid b/sections/shogun-below.liquid new file mode 100644 index 00000000000..34271412e9e --- /dev/null +++ b/sections/shogun-below.liquid @@ -0,0 +1,16 @@ +{% comment %} +Auto-generated by Shogun. +This file can be re-written at any time. +{% endcomment %} + +{% if product %} + {% assign content = product %} +{% elsif collection %} + {% assign content = collection %} +{% endif %} +{{content.metafields.shogun.below}} +{% schema %} + { + "name": "Shogun Section Below" + } +{% endschema %} diff --git a/sections/shogun-helper.liquid b/sections/shogun-helper.liquid new file mode 100644 index 00000000000..c8ffdc9645d --- /dev/null +++ b/sections/shogun-helper.liquid @@ -0,0 +1,20 @@ +{% comment %} +Auto-generated by Shogun. +This file can be re-written at any time. +{% endcomment %} + +{% if article %} + {% assign content = article %} +{% elsif page %} + {% assign content = page %} +{% elsif product %} + {% assign content = product %} +{% elsif collection %} + {% assign content = collection %} +{% endif %} +{% render 'shogun-products', content: content %} +{% schema %} + { + "name": "Shogun Helper" + } +{% endschema %} diff --git a/sections/shopify-login.liquid b/sections/shopify-login.liquid new file mode 100644 index 00000000000..e825375c613 --- /dev/null +++ b/sections/shopify-login.liquid @@ -0,0 +1,20 @@ +{{ 'customer.css' | asset_url | stylesheet_tag }} +{{ 'customer_inventables.css' | asset_url | stylesheet_tag }} + + + + diff --git a/sections/video.liquid b/sections/video.liquid index 766caf1a33d..be8ebbfaa84 100644 --- a/sections/video.liquid +++ b/sections/video.liquid @@ -3,83 +3,104 @@ {%- style -%} .section-{{ section.id }}-padding { - padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; - padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; } @media screen and (min-width: 750px) { - .section-{{ section.id }}-padding { - padding-top: {{ section.settings.padding_top }}px; - padding-bottom: {{ section.settings.padding_bottom }}px; - } + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } } {%- endstyle -%} +{%- liquid + assign video_id = section.settings.video.id | default: section.settings.video_url.id + assign video_alt = section.settings.video.alt | default: section.settings.description + assign alt = 'sections.video.load_video' | t: description: video_alt | escape + assign poster = section.settings.video.preview_image | default: section.settings.cover_image + + if section.settings.video != null + assign ratio_diff = section.settings.video.aspect_ratio | minus: poster.aspect_ratio | abs + if ratio_diff < 0.01 and ratio_diff > 0 + assign fix_ratio = true + endif + endif +-%} + +{%- capture sizes -%} + {% if section.settings.full_width -%} + 100vw + {%- else -%} + (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) + calc(100vw - 10rem), 100vw + {%- endif %} +{%- endcapture -%} +
- +
{%- unless section.settings.heading == blank -%}
-

{{ section.settings.heading }}

+

{{ section.settings.heading }}

{%- endunless -%}
- @@ -103,9 +154,12 @@ "name": "t:sections.video.name", "tag": "section", "class": "section", + "disabled_on": { + "groups": ["header", "footer"] + }, "settings": [ { - "type": "text", + "type": "inline_richtext", "id": "heading", "default": "Video", "label": "t:sections.video.settings.heading.label" @@ -131,28 +185,51 @@ "label": "t:sections.all.heading_size.label" }, { - "type": "image_picker", - "id": "cover_image", - "label": "t:sections.video.settings.cover_image.label" + "type": "checkbox", + "id": "enable_video_looping", + "label": "t:sections.video.settings.enable_video_looping.label", + "default": false + }, + { + "type": "header", + "content": "t:sections.video.settings.header__1.content" + }, + { + "type": "video", + "id": "video", + "label": "t:sections.video.settings.video.label" + }, + { + "type": "header", + "content": "t:sections.video.settings.header__2.content" + }, + { + "type": "paragraph", + "content": "t:sections.video.settings.paragraph.content" }, { "type": "video_url", "id": "video_url", - "accept": [ - "youtube", - "vimeo" - ], + "accept": ["youtube", "vimeo"], "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc", "label": "t:sections.video.settings.video_url.label", - "placeholder": "t:sections.video.settings.video_url.placeholder", "info": "t:sections.video.settings.video_url.info" }, + { + "type": "image_picker", + "id": "cover_image", + "label": "t:sections.video.settings.cover_image.label" + }, { "type": "text", "id": "description", "label": "t:sections.video.settings.description.label", "info": "t:sections.video.settings.description.info" }, + { + "type": "header", + "content": "t:sections.video.settings.header__3.content" + }, { "type": "checkbox", "id": "full_width", diff --git a/sections/xc-comparison-disclaimer.liquid b/sections/xc-comparison-disclaimer.liquid new file mode 100644 index 00000000000..80f79770ea2 --- /dev/null +++ b/sections/xc-comparison-disclaimer.liquid @@ -0,0 +1,138 @@ +{% style %} +.section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; +} + +@media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } +} + +.xc-comparison-disclaimer__container { + max-width: 1200px; + margin: 0 auto; +} + +.xc-comparison-disclaimer__flex-wrapper { + display: flex; + flex-wrap: wrap; +} + +.xc-comparison-disclaimer__header { + width: 25%; + font-size: 30px; +} + +.xc-comparison-disclaimer__content { + width: 75%; +} + +@media screen and (max-width: 1200px) { + .xc-comparison-disclaimer__header { + width: 100%; + text-align: center; + } + + .xc-comparison-disclaimer__content { + width: 100%; + padding: 0 20px; + } + + .xc-comparison-disclaimer__flex-wrapper { + flex-direction: column; + } +} + +{% endstyle %} +
+
+
+
+ {{ section.settings.header }} +
+
+ {{ section.settings.content }} +
+
+
+
+{% schema %} +{ + "name": "X-Carve Disclaimer", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 36 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 36 + }, + { + "type": "text", + "id": "header", + "label": "Header", + "default": "Disclaimer" + }, + { + "type": "richtext", + "id": "content", + "label": "Content" + }, + { + "type": "select", + "id": "color_scheme", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "background-1", + "label": "t:sections.all.colors.label" + } + ], + "presets": [ + { + "name": "X-Carve Disclaimer" + } + ] +} +{% endschema %} diff --git a/sections/xc-comparison.liquid b/sections/xc-comparison.liquid new file mode 100644 index 00000000000..3728377f97e --- /dev/null +++ b/sections/xc-comparison.liquid @@ -0,0 +1,662 @@ +{% style %} +.section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; +} + +@media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } +} + +.xc-comparison__container { + max-width: 1200px; + margin: 0 auto; +} + +.xc-comparison__flex-wrapper { + display: flex; + justify-content: space-between; +} + +.xc-comparison-column__title { + font-size: 40px; + line-height: 1.2; + font-size: "AlrightSans-Light"; +} + +.xc-comparison-column__img-title { + text-align: center; + font-size: 26px; +} + +.xc-comparison-column__img { + object-fit: cover; + width: 227px; + height: 227px; + margin: 0 auto; + display: block; + border: 2px solid lightgray; + border-radius: 3px; +} + +.xc-comparison-column { + padding: 50px 30px; + border-radius: 5px; + min-width: 400px; +} + +.xc-comparison-column__line-header.hide-desk { + display: none; +} + +.xc-comparison-column__line { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.xc-comparison-column__btn-wrapper { + display: flex; + justify-content: space-around; + padding-top: 20px; +} + +.xc-comparison-column__btn-wrapper *:empty { + display: block; +} + +.xc-comparison-column__btn-wrapper .btn { + text-decoration: none; + color: black; + background: lightgray; + padding: 7px 20px; +} + +.xc-comparison-column__btn-wrapper .btn-primary { + color: black; + font-weight: bold; + background: var(--gradient-base-accent-2); + border-radius: 5px; +} + +.xc-comparison-column__btn-wrapper .btn-black { + color: white; + background: black; + border-radius: 5px; +} + +.xc-comparison-column__line-header { + font-size: 12pt; + font-weight: bold; + padding-top: 20px; +} + +.xc-comparison-column__line-content { + font-size: 12pt; + overflow-wrap: break-word; +} + +{% for block in section.blocks %} + #block-{{ block.id }} { + max-width: calc((100% / {{ section.blocks | size }}) - 3%); + } + + #block-{{ block.id }} .xc-comparison-column { + background-color: {{ block.settings.bg_color }}; + color: {{ block.settings.color }}; + } + + #block-{{ block.id }} .xc-comparison-column__separator { + display: block; + width: 100%; + margin: 0 auto; + border: 1px solid {{ block.settings.line_sep_color }}; + height: 1px; + } + + #block-{{ block.id }} .xc-comparison-column__line-header { + text-align: {{ block.settings.header_text_align }}; + } +{% endfor %} + +#section-{{ section.id }} .xc-comparison-column__line.line1 { + min-height: {{ section.settings.line1_min_height }}px; +} + +#section-{{ section.id }} .xc-comparison-column__line.line2 { + min-height: {{ section.settings.line2_min_height }}px; +} + +#section-{{ section.id }} .xc-comparison-column__line.line3 { + min-height: {{ section.settings.line3_min_height }}px; +} + +#section-{{ section.id }} .xc-comparison-column__line.line4 { + min-height: {{ section.settings.line4_min_height }}px; +} + +#section-{{ section.id }} .xc-comparison-column__line.line5 { + min-height: {{ section.settings.line5_min_height }}px; +} + +#section-{{ section.id }} .xc-comparison-column__line.line6 { + min-height: {{ section.settings.line6_min_height }}px; +} + +#section-{{ section.id }} .xc-comparison-column__line.line7 { + min-height: {{ section.settings.line7_min_height }}px; +} + +#section-{{ section.id }} .xc-comparison-column__line.line8 { + min-height: {{ section.settings.line8_min_height }}px; +} + +#section-{{ section.id }} .xc-comparison-column__line.line9 { + min-height: {{ section.settings.line9_min_height }}px; +} + +#section-{{ section.id }} .xc-comparison-column__line.line10 { + min-height: {{ section.settings.line10_min_height }}px; +} + +#section-{{ section.id }} .xc-comparison-column__line.line11 { + min-height: {{ section.settings.line11_min_height }}px; +} + +#section-{{ section.id }} .xc-comparison-column__line.line12 { + min-height: {{ section.settings.line12_min_height }}px; +} + +#section-{{ section.id }} .xc-comparison-column__line.line13 { + min-height: {{ section.settings.line13_min_height }}px; +} + +#section-{{ section.id }} .xc-comparison-column__line.line14 { + min-height: {{ section.settings.line14_min_height }}px; +} + +#section-{{ section.id }} .xc-comparison-column__line.line15 { + min-height: {{ section.settings.line15_min_height }}px; +} + +#section-{{ section.id }} .xc-comparison-column__line.line16 { + min-height: {{ section.settings.line16_min_height }}px; +} + +@media screen and (max-width: 1200px) { + .xc-comparison .hide-mobile { + display: none; + } + + .xc-comparison-column { + min-width: unset; + } + + .xc-comparison-column__img { + width: 100%; + height: auto; + } + + .xc-comparison-column__btn-wrapper { + flex-direction: column; + text-align: center; + } + + .xc-comparison-column__btn-wrapper .btn { + margin-bottom: 10px; + } + + .xc-comparison-column__line-header.hide-desk { + display: block; + } + + {% for block in section.blocks %} + #block-{{ block.id }} { + max-width: calc((100% / {{ section.blocks | size | minus: 1 }}) - 3%); + } + {% endfor %} + + .xc-comparison-column__line-content { + text-align: center; + } + + #section-{{ section.id }} .xc-comparison-column__line.line12 .xc-comparison-column__line-content { + text-align: left; + } + + #section-{{ section.id }} .xc-comparison-column__line.line1 { + min-height: calc({{ section.settings.line1_min_height }}px - 105px); + } + + #section-{{ section.id }} .xc-comparison-column__line.line3 { + min-height: calc({{ section.settings.line1_min_height }}px - 48px); + } + + #section-{{ section.id }} .xc-comparison-column__line.line4 { + min-height: calc({{ section.settings.line1_min_height }}px - 77px); + } + + #section-{{ section.id }} .xc-comparison-column__line.line8 { + min-height: calc({{ section.settings.line1_min_height }}px - 135px); + } + + #section-{{ section.id }} .xc-comparison-column__line.line11 { + min-height: calc({{ section.settings.line1_min_height }}px - 135px); + } +} +{% endstyle %} +
+
+
+ {% for block in section.blocks %} + {% assign hide_block_mobile_class = "" %} + {% if block.settings.hide_block_mobile %} + {% assign hide_block_mobile_class = "hide-mobile" %} + {% endif %} +
+ {% render "xc-comparison-column", settings: block.settings %} +
+ {% endfor %} +
+
+
+{% schema %} +{ + "name": "X-Carve Comparison", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 36 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 36 + }, + { + "type": "select", + "id": "color_scheme", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "inverse", + "label": "t:sections.all.colors.label" + }, + { + "type": "header", + "content": "Lines Settings" + }, + { + "type": "range", + "id": "line1_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 1 Min Height", + "default": 335 + }, + { + "type": "range", + "id": "line2_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 2 Min Height", + "default": 95 + }, + { + "type": "range", + "id": "line3_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 3 Min Height", + "default": 95 + }, + { + "type": "range", + "id": "line4_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 4 Min Height", + "default": 95 + }, + { + "type": "range", + "id": "line5_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 5 Min Height", + "default": 95 + }, + { + "type": "range", + "id": "line6_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 6 Min Height", + "default": 95 + }, + { + "type": "range", + "id": "line7_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 7 Min Height", + "default": 95 + }, + { + "type": "range", + "id": "line8_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 8 Min Height", + "default": 95 + }, + { + "type": "range", + "id": "line9_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 9 Min Height", + "default": 95 + }, + { + "type": "range", + "id": "line10_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 10 Min Height", + "default": 95 + }, + { + "type": "range", + "id": "line11_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 11 Min Height", + "default": 95 + }, + { + "type": "range", + "id": "line12_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 12 Min Height", + "default": 95 + }, + { + "type": "range", + "id": "line13_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 13 Min Height", + "default": 95 + }, + { + "type": "range", + "id": "line14_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 14 Min Height", + "default": 95 + }, + { + "type": "range", + "id": "line15_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 15 Min Height", + "default": 95 + }, + { + "type": "range", + "id": "line16_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 16 Min Height", + "default": 95 + } + ], + "blocks": [ + { + "type": "xc-comparison-column", + "name": "Comparison Column", + "settings": [ + { + "type": "richtext", + "id": "title", + "label": "Title" + }, + { + "type": "image_picker", + "id": "image", + "label": "Image" + }, + { + "type": "color", + "id": "bg_color", + "label": "Background Color" + }, + { + "type": "color", + "id": "color", + "label": "Color", + "default": "#000000" + }, + { + "type": "color", + "id": "line_sep_color", + "label": "Line Separator Color", + "default": "#C5C5C5" + }, + { + "type": "checkbox", + "id": "hide_line_title_desk", + "label": "Hide Line Title on Desktop", + "default": false + }, + { + "type": "checkbox", + "id": "hide_block_mobile", + "label": "Hide Block Mobile", + "default": false + }, + { + "type": "checkbox", + "id": "show_buttons", + "label": "Show Buttons", + "default": true + }, + { + "type": "url", + "id": "orange_btn_url", + "label": "Orange Button URL" + }, + { + "type": "text", + "id": "orange_btn_label", + "label": "Orange Button Label", + "default": "Buy now" + }, + { + "type": "url", + "id": "black_btn_url", + "label": "Black Button URL" + }, + { + "type": "text", + "id": "black_btn_label", + "label": "Black Button Label", + "default": "Learn more" + }, + { + "type": "select", + "id": "header_text_align", + "options": [ + { + "value": "left", + "label": "Left" + }, + { + "value": "center", + "label": "Center" + }, + { + "value": "right", + "label": "Right" + }, + { + "value": "justify", + "label": "Justify" + } + ], + "default": "left", + "label": "Header Text Alignment" + }, + { + "type": "richtext", + "id": "optmized_for_text", + "label": "'Who is it optimized for?'" + }, + { + "type": "richtext", + "id": "target_customers_text", + "label": "'What types of products do people make with this?'" + }, + { + "type": "richtext", + "id": "cutting_area_text", + "label": "'Cutting Area'" + }, + { + "type": "richtext", + "id": "weight_text", + "label": "'Weight'" + }, + { + "type": "richtext", + "id": "gantry_text", + "label": "'Gantry'" + }, + { + "type": "richtext", + "id": "spindle_text", + "label": "'Spindle'" + }, + { + "type": "richtext", + "id": "spindle_rpm_text", + "label": "'Spindle RPM Range'" + }, + { + "type": "richtext", + "id": "accuracy_text", + "label": "'Accuracy'" + }, + { + "type": "richtext", + "id": "assembley_time_text", + "label": "'Assembly Time'" + }, + { + "type": "richtext", + "id": "materials_text", + "label": "'Materials it can cut'" + }, + { + "type": "richtext", + "id": "support_text", + "label": "'Support'" + }, + { + "type": "richtext", + "id": "software_text", + "label": "'Software'" + }, + { + "type": "richtext", + "id": "warranty_text", + "label": "'Warranty'" + }, + { + "type": "html", + "id": "price_text", + "label": "'Price'" + } + ] + } + ], + "presets": [ + { "name": "X-Carve Comparison"} + ] +} +{% endschema %} diff --git a/sections/xcp-add-to-cart.liquid b/sections/xcp-add-to-cart.liquid new file mode 100644 index 00000000000..20cd38a5ba1 --- /dev/null +++ b/sections/xcp-add-to-cart.liquid @@ -0,0 +1,112 @@ +{% style %} +.xcp-add-to-cart { + {% case section.settings.background_color %} + {% when 'white' %} + background-color: white; + {% endcase %} +} + +.xcp-add-to-card .page-width { + max-width: 1200px; + margin: 0 auto; +} + +.xcp-add-to-cart .product-form { + width: 100%; +} + +.xcp-add-to-cart .product-form button { + width: 300px; + {% case section.settings.button_position %} + {% when "left" %} + float: left; + {% when "right" %} + float: right; + {% else %} + margin: 0 auto; + {% endcase %} +} + +@media screen and (max-width: 750px) { + .xcp-add-to-cart .product-form button { + float: unset; + margin: 0 auto; + } +} +{% endstyle %} + +
+ {% render 'xcp-order-now', settings: section.settings, section_id: section.id %} +
+{% schema %} +{ + "name": "XCPro Add Btn", + "settings": [ + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 40 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 52 + }, + { + "type": "select", + "id": "background_color", + "options": [ + { + "value": "normal", + "label": "Normal" + }, + { + "value": "white", + "label": "White" + } + ], + "default": "normal", + "label": "Background Color" + }, + { + "type": "select", + "id": "button_position", + "options": [ + { + "value": "left", + "label": "Left" + }, + { + "value": "center", + "label": "Center" + }, + { + "value": "right", + "label": "Right" + } + ], + "default": "center", + "label": "Button position" + } + ], + "presets": [ + { + "name": "XCPro Add Btn" + } + ] +} +{% endschema %} diff --git a/sections/xcp-bundle.liquid b/sections/xcp-bundle.liquid new file mode 100644 index 00000000000..f4d661e248a --- /dev/null +++ b/sections/xcp-bundle.liquid @@ -0,0 +1,65 @@ +{{ 'xcp-bundle.css' | asset_url | stylesheet_tag }} + +{{section.settings.title}} + +
+ {% for block in section.blocks %} +
+ {{block.settings.image.alt}} +

{{block.settings.title}}

+ {{block.settings.body}} + {% unless forloop.last %} +

+

+ {% endunless %} +
+ + {% endfor %} +
+ +{% schema %} +{ + "name": "XCPro Bundle", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "html", + "id": "title", + "label": "Title" + } + ], + "blocks": [ + { + "name": "Bundle Item", + "type": "xcp-bundle-item", + "settings": [ + { + "type": "text", + "id": "title", + "label": "Title" + }, + { + "type": "image_picker", + "id": "image", + "label": "Image" + }, + { + "type": "richtext", + "id": "body", + "label": "Body" + }, + { + "type": "color", + "id": "background_color", + "label": "Background Color" + } + ] + } + ], + "presets": [ + { + "name": "XCPro Bundle" + } + ] +} +{% endschema %} diff --git a/sections/xcp-easel-header.liquid b/sections/xcp-easel-header.liquid new file mode 100644 index 00000000000..b1d3ac10880 --- /dev/null +++ b/sections/xcp-easel-header.liquid @@ -0,0 +1,191 @@ +{% style %} +.xcp-easel-header, .xcp-easel-header__detail { + display: flex; + width: 100%; +} + +.xcp-easel-header svg { + width: 25%; + stroke-width: 2px; +} + +.xcp-easel-header .xcp-easel-header__svg--first { + width: 69%; +} + +.xcp-easel-header__detail .xcp-easel-header__svg--first { + width: 80%; +} + +.xcp-easel-header__detail .xcp-easel-header__svg--second { + width: 20%; +} + +.xcp-easel-header .xcp-easel-header__header { + width: 25%; + text-align: center; + position: relative; + bottom: 10px; + margin: 0; +} + +.xcp-easel-sub-header__wrapper--abs { + position: absolute; + width: 100%; +} + +.xcp-easel-sub-header__wrapper--rel { + position: relative; + width: 100%; + bottom: 150px; +} + +.xcp-easel-sub-header__wrapper--center { + width: 100%; +} + +.xcp-easel-sub-header { + font-size: 24px; + text-align: center; + font-family: "AlrightSans-Light"; +} + +.xcp-easel-sub-header span { + color: var(--gradient-base-accent-2); +} + +.xcp-easel-header__wrapper--abs { + position: absolute; + width: 100%; +} +.xcp-easel-header__wrapper--rel { + position: relative; + bottom: 180px; + width: 100%; +} +.xcp-easel-header__wrapper--rel img { + width: 50%; + min-width: 160px; + margin: 0 auto; + display: block; +} + +.xcp-easel-header.desktop img { + width: 300px; + position: relative; + bottom: 69px; + margin: 0 20px; +} + +.xcp-easel-sub-header__wrapper--abs.mobile xcp-easel-sub-header { + font-size: 18px; +} + +.xcp-easel-sub-header__wrapper--abs.mobile .xcp-easel-sub-header__wrapper--rel { + bottom: 110px; +} + +.desktop { + display: flex; +} + +.mobile { + display: none; +} + +@media screen and (max-width: 750px) { + .desktop { + display: none; + } + + .mobile { + display: flex; + } + +} +{% endstyle %} +
+ + + + {% if section.settings.header_image %} + {{section.settings.header_image | image_url: width: "100%", height: 150 | image_tag: class: 'xcp-easel-header__header-image' }} + {% else %} +

Easel Pro

+ {% endif %} + + + + + + + + + +
+
+
+

+ {{section.settings.sub_text}} +

+
+
+
+ + + + + + +
+
+
+ {% if section.settings.header_image %} +
+ {{section.settings.header_image | image_url: width: "100%", height: 150 | image_tag: class: 'xcp-easel-header__header-image' }} +
+ {% else %} +

{{section.settings.header}}

+ {% endif %} +
+
+
+
+

+ {{section.settings.sub_text}} +

+
+
+ + +{% schema %} +{ + "name": "XCPro Easel Header", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "html", + "id": "header", + "label": "Header" + }, + { + "type": "image_picker", + "id": "header_image", + "label": "Header Image" + }, + { + "type": "html", + "id": "sub_text", + "label": "Sub text" + } + ], + "blocks": [ + ], + "presets": [ + { + "name": "XCPro Easel Header" + } + ] +} +{% endschema %} diff --git a/sections/xcp-faq-collapsible.liquid b/sections/xcp-faq-collapsible.liquid new file mode 100644 index 00000000000..a995c7df67c --- /dev/null +++ b/sections/xcp-faq-collapsible.liquid @@ -0,0 +1,550 @@ +{{ 'component-accordion.css' | asset_url | stylesheet_tag }} +{{ 'collapsible-content.css' | asset_url | stylesheet_tag }} + +{%- style -%} + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; + } + + @media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + } + + .xcp-faq-collapsible__content-wrapper { + max-width: 1200px; + padding: 0 40px; + } + + .xcp-faq-collapsible .collapsible-content__header h2 { + font-weight: bold; + font-size: 26px; + line-height: 26px; + } + + .xcp-faq-collapsible h3.accordion__title { + font-size: 18px; + } + + .xcp-faq-collapsible .icon-caret { + height: 1.6rem; + stroke: var(--gradient-base-accent-2); + } + + .xcp-faq-collapsible summary:hover .accordion__title { + text-decoration: none; + } + + .xcp-faq-collapsible .accordion { + border: 0; + } +{%- endstyle -%} + +
+
+
+
+
+ {%- if section.settings.caption != blank -%} +

{{ section.settings.caption | escape }}

+ {% endif %} + {%- if section.settings.heading != blank -%} +

{{ section.settings.heading | escape }}

+ {%- else -%} + + {% endif %} +
+
+ {%- if section.settings.image != blank -%} +
+
+ {{ section.settings.image.alt | escape }} +
+
+ {% endif %} +
+ {%- for block in section.blocks -%} +
+
+ + {% render 'icon-accordion', icon: block.settings.icon %} +

+ {{ block.settings.heading | default: block.settings.page.title }} +

+ {% render 'icon-caret' %} + +
+ {{ block.settings.row_content }} + {{ block.settings.page.content }} +
+
+
+ {%- endfor -%} +
+
+
+
+
+
+ +{% schema %} +{ + "name": "XCP FAQ Collapsible", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "text", + "id": "caption", + "label": "t:sections.collapsible_content.settings.caption.label" + }, + { + "type": "text", + "id": "heading", + "label": "t:sections.collapsible_content.settings.heading.label", + "default": "Collapsible content" + }, + { + "type": "select", + "id": "heading_size", + "options": [ + { + "value": "h2", + "label": "t:sections.all.heading_size.options__1.label" + }, + { + "value": "h1", + "label": "t:sections.all.heading_size.options__2.label" + }, + { + "value": "h0", + "label": "t:sections.all.heading_size.options__3.label" + } + ], + "default": "h1", + "label": "t:sections.all.heading_size.label" + }, + { + "type": "select", + "id": "heading_alignment", + "label": "t:sections.collapsible_content.settings.heading_alignment.label", + "options": [ + { + "value": "left", + "label": "t:sections.collapsible_content.settings.heading_alignment.options__1.label" + }, + { + "value": "center", + "label": "t:sections.collapsible_content.settings.heading_alignment.options__2.label" + }, + { + "value": "right", + "label": "t:sections.collapsible_content.settings.heading_alignment.options__3.label" + } + ], + "default": "center" + }, + { + "type": "select", + "id": "layout", + "label": "t:sections.collapsible_content.settings.layout.label", + "options": [ + { + "value": "none", + "label": "t:sections.collapsible_content.settings.layout.options__1.label" + }, + { + "value": "row", + "label": "t:sections.collapsible_content.settings.layout.options__2.label" + }, + { + "value": "section", + "label": "t:sections.collapsible_content.settings.layout.options__3.label" + } + ], + "default": "none" + }, + { + "type": "select", + "id": "color_scheme", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "background-1", + "label": "t:sections.all.colors.label" + }, + { + "type": "select", + "id": "container_color_scheme", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "background-2", + "label": "t:sections.collapsible_content.settings.container_color_scheme.label", + "info": "t:sections.collapsible_content.settings.container_color_scheme.info" + }, + { + "type": "checkbox", + "id": "open_first_collapsible_row", + "default": false, + "label": "t:sections.collapsible_content.settings.open_first_collapsible_row.label" + }, + { + "type": "header", + "content": "t:sections.collapsible_content.settings.header.content" + }, + { + "type": "image_picker", + "id": "image", + "label": "t:sections.collapsible_content.settings.image.label" + }, + { + "type": "select", + "id": "image_ratio", + "options": [ + { + "value": "adapt", + "label": "t:sections.collapsible_content.settings.image_ratio.options__1.label" + }, + { + "value": "small", + "label": "t:sections.collapsible_content.settings.image_ratio.options__2.label" + }, + { + "value": "large", + "label": "t:sections.collapsible_content.settings.image_ratio.options__3.label" + } + ], + "default": "adapt", + "label": "t:sections.collapsible_content.settings.image_ratio.label" + }, + { + "type": "select", + "id": "desktop_layout", + "options": [ + { + "value": "image_first", + "label": "t:sections.collapsible_content.settings.desktop_layout.options__1.label" + }, + { + "value": "image_second", + "label": "t:sections.collapsible_content.settings.desktop_layout.options__2.label" + } + ], + "default": "image_second", + "label": "t:sections.collapsible_content.settings.desktop_layout.label", + "info": "t:sections.collapsible_content.settings.desktop_layout.info" + }, + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 36 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 36 + } + ], + "blocks": [ + { + "type": "collapsible_row", + "name": "t:sections.collapsible_content.blocks.collapsible_row.name", + "settings": [ + { + "type": "text", + "id": "heading", + "default": "Collapsible row", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.label", + "info": "t:sections.collapsible_content.blocks.collapsible_row.settings.heading.info" + }, + { + "type": "select", + "id": "icon", + "options": [ + { + "value": "none", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__1.label" + }, + { + "value": "apple", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__2.label" + }, + { + "value": "banana", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__3.label" + }, + { + "value": "bottle", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__4.label" + }, + { + "value": "box", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__5.label" + }, + { + "value": "carrot", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__6.label" + }, + { + "value": "chat_bubble", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__7.label" + }, + { + "value": "check_mark", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__8.label" + }, + { + "value": "clipboard", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__9.label" + }, + { + "value": "dairy", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__10.label" + }, + { + "value": "dairy_free", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__11.label" + }, + { + "value": "dryer", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__12.label" + }, + { + "value": "eye", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__13.label" + }, + { + "value": "fire", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__14.label" + }, + { + "value": "gluten_free", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__15.label" + }, + { + "value": "heart", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__16.label" + }, + { + "value": "iron", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__17.label" + }, + { + "value": "leaf", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__18.label" + }, + { + "value": "leather", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__19.label" + }, + { + "value": "lightning_bolt", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__20.label" + }, + { + "value": "lipstick", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__21.label" + }, + { + "value": "lock", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__22.label" + }, + { + "value": "map_pin", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__23.label" + }, + { + "value": "nut_free", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__24.label" + }, + { + "value": "pants", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__25.label" + }, + { + "value": "paw_print", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__26.label" + }, + { + "value": "pepper", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__27.label" + }, + { + "value": "perfume", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__28.label" + }, + { + "value": "plane", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__29.label" + }, + { + "value": "plant", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__30.label" + }, + { + "value": "price_tag", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__31.label" + }, + { + "value": "question_mark", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__32.label" + }, + { + "value": "recycle", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__33.label" + }, + { + "value": "return", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__34.label" + }, + { + "value": "ruler", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__35.label" + }, + { + "value": "serving_dish", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__36.label" + }, + { + "value": "shirt", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__37.label" + }, + { + "value": "shoe", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__38.label" + }, + { + "value": "silhouette", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__39.label" + }, + { + "value": "snowflake", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__40.label" + }, + { + "value": "star", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__41.label" + }, + { + "value": "stopwatch", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__42.label" + }, + { + "value": "truck", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__43.label" + }, + { + "value": "washing", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.options__44.label" + } + ], + "default": "check_mark", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.icon.label" + }, + { + "type": "richtext", + "id": "row_content", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.row_content.label" + }, + { + "type": "page", + "id": "page", + "label": "t:sections.collapsible_content.blocks.collapsible_row.settings.page.label" + } + ] + } + ], + "presets": [ + { + "name": "XCP FAQ Collapsible", + "blocks": [ + { + "type": "collapsible_row" + }, + { + "type": "collapsible_row" + }, + { + "type": "collapsible_row" + }, + { + "type": "collapsible_row" + } + ] + } + ] +} +{% endschema %} diff --git a/sections/xcp-financing-highlight.liquid b/sections/xcp-financing-highlight.liquid new file mode 100644 index 00000000000..f34a57fe749 --- /dev/null +++ b/sections/xcp-financing-highlight.liquid @@ -0,0 +1,172 @@ +{% style %} +#section-{{ section.id }} { + background-color: {{ section.settings.bg_color }}; + color: {{ section.settings.color }}; +} + +.xcp-financing-highlight { + min-height: 450px; +} + +.xcp-financing-highlight__container { + margin: 0 auto; + max-width: 1200px; +} + +#section-{{ section.id }} .xcp-financing-highlight__container { + padding-top: {{ section.settings.content_padding_top }}px; +} + +.xcp-financing-highlight__bg-circle { + width: 266px; + height: 266px; + margin: 0 auto; + display: block; +} + +#section-{{ section.id }} .xcp-financing-highlight__bg-circle { + fill: {{ section.settings.circle_color }}; +} + +.xcp-financing-highlight__content-wrapper { + max-width: 383px; + margin: 0 auto; +} + +.xcp-financing-highlight__content__abs-wrapper { + position: absolute; +} + +.xcp-financing-highlight__content__rel-wrapper { + position: relative; + bottom: 280px; +} + +#section-{{ section.id }} .xcp-financing-highlight__header { + text-align: center; + color: {{ section.settings.color }}; + font-size: 16px; + font-weight: bold; + margin-block-end: 10px; +} + +#section-{{ section.id }} .xcp-financing-highlight__highlight-text { + font-size: 25px; + color: {{ section.settings.highlight_color }}; + font-weight: bold; + text-align: center; + margin-block-start: 0; + margin-block-end: 10px; +} + +#section-{{ section.id }} .xcp-financing-highlight__highlight-text span { + font-size: 40px; +} + +.xcp-financing-highlight__content__text-wrapper { + max-width: 243px; + margin: 0 auto; + border: 3px solid black; +} + +.xcp-financing-highlight__content__bottom-text { + position: relative; + bottom: 62px; + text-align: center; + font-size: 10px; + font-family: "AlrightSans-Light"; +} +{% endstyle %} +
+
+
+ + + +
+
+
+
+
+

+ {{ section.settings.header }} +

+

+ {{ section.settings.highlight_text }} +

+
+ {{ section.settings.image | image_url: width: 388 | image_tag: class: "xcp-financing-highlight__image" }} +

{{ section.settings.bottom_text }}

+
+
+
+
+
+{% schema %} +{ + "name": "XCP Financing Highlight", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "color", + "id": "bg_color", + "label": "Background Color", + "default": "#FFF" + }, + { + "type": "color", + "id": "color", + "label": "Color", + "default": "#000" + }, + { + "type": "color", + "id": "circle_color", + "label": "Circle Color", + "default": "#FFEDD7" + }, + { + "type": "range", + "id": "content_padding_top", + "min": 0, + "max": 200, + "step": 2, + "unit": "px", + "label": "Content Padding Top", + "default": 50 + }, + { + "type": "text", + "id": "header", + "label": "Header", + "default": "YOUR MONTHLY PAYMENT" + }, + { + "type": "html", + "id": "highlight_text", + "label": "Highlight Text" + }, + { + "type": "color", + "id": "highlight_color", + "label": "Highlight Color", + "default": "#F8B34F" + }, + { + "type": "image_picker", + "id": "image", + "label": "Image" + }, + { + "type": "text", + "id": "bottom_text", + "label": "Bottom text", + "default": "*for display only. actual credit terms may vary." + } + ], + "presets": [ + { "name": "XCP Financing Highlight"} + ] +} +{% endschema %} diff --git a/sections/xcp-financing-options.liquid b/sections/xcp-financing-options.liquid new file mode 100644 index 00000000000..5bf1bc9a36e --- /dev/null +++ b/sections/xcp-financing-options.liquid @@ -0,0 +1,667 @@ +{%- style -%} + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; + } + + @media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + } + + #section-{{ section.id }} { + background-color: {{ section.settings.bg_color }}; + color: {{ section.settings.color }}; + } + + .xcp-financing-options__container { + max-width: 1200px; + margin: 0 auto; + } + + .xcp-financing-options__flex-wrapper { + display: flex; + justify-content: space-between; + } + + #section-{{ section.id }} .xcp-financing-option__header-wrapper { + height: {{ section.settings.header_height }}px; + } + + .xcp-financing-option__lines-wrapper { + list-style: none; + padding-inline-start: 0; + padding: 0 20px; + } + + .xcp-financing-option__line-title.hide-desk { + display: none; + } + + .xcp-financing-option__line-title { + font-weight: bold; + font-family: "AlrightSans-Light"; + font-size: 16px; + } + + .xcp-financing-option__line-title p { + margin-block-start: 1em; + margin-block-end: 1em; + } + + .xcp-financing-option__line-body { + text-align: center; + font-family: "AlrightSans-Light"; + font-size: 14px; + } + + .xcp-financing-option__line { + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .xcp-financing-option__img { + width: auto; + margin: 0 auto; + height: 25px; + display: block; + } + + {% for block in section.blocks %} + #block-{{ block.id }} { + background-color: {{ block.settings.bg_color }}; + color: {{ block.settings.color }}; + border-radius: 10px; + } + + #block-{{ block.id }} .xcp-financing-option__header-wrapper { + background-color: {{ block.settings.header_bg_color }}; + color: {{ block.settings.header_color }}; + border-top-right-radius: 10px; + border-top-left-radius: 10px; + padding: 10px; + } + + #block-{{ block.id }} .xcp-financing-option__line-separator { + display: block; + border: 1px solid {{ block.settings.line_sep_color }}; + border-radius: 2px; + width: {{ block.settings.separator_width }}%; + height: 1px; + margin: 0 auto; + } + + #block-{{ block.id }} .xcp-financing-option__btn-wrapper { + display: flex; + justify-content: center; + padding-bottom: 40px; + } + + #block-{{ block.id }} .xcp-financing-option__btn { + font-size: 8.5px; + background-color: {{ block.settings.bottom_btn_bg_color }}; + color: {{ block.settings.bottom_btn_color }}; + padding: 12px 37px; + } + {% endfor %} + + + .section-{{ section.id }} .xcp-financing-option:first-child { + max-width: {{ section.settings.first_column_max_width }}%; + } + + .section-{{ section.id }} .xcp-financing-option { + max-width: {{ section.settings.columns_max_width }}%; + } + + .section-{{ section.id }} .xcp-financing-option__line.line1 { + min-height: {{ section.settings.line1_min_height }}px; + } + + .section-{{ section.id }} .xcp-financing-option__line.line2 { + min-height: {{ section.settings.line2_min_height }}px; + } + + .section-{{ section.id }} .xcp-financing-option__line.line3 { + min-height: {{ section.settings.line3_min_height }}px; + } + + .section-{{ section.id }} .xcp-financing-option__line.line4 { + min-height: {{ section.settings.line4_min_height }}px; + } + + .section-{{ section.id }} .xcp-financing-option__line.line5 { + min-height: {{ section.settings.line5_min_height }}px; + } + + .section-{{ section.id }} .xcp-financing-option__line.line6 { + min-height: {{ section.settings.line6_min_height }}px; + } + + .section-{{ section.id }} .xcp-financing-option__line.line7 { + min-height: {{ section.settings.line7_min_height }}px; + } + + .section-{{ section.id }} .xcp-financing-option__line.line8 { + min-height: {{ section.settings.line8_min_height }}px; + } + + .xcp-financing-options__bottom-text { + width: 75%; + margin-left: auto; + font-family: "AlrightSans-Light"; + font-size: 10px; + } + + @media screen and (max-width: 1200px) { + .xcp-financing-option__line-title.hide-desk { + display: block; + text-align: center; + font-size: 14px; + } + + .xcp-financing-option.hide-mobile { + display: none; + } + + .section-{{ section.id }} .xcp-financing-option { + {% liquid + assign blocks_count = section.blocks | size | minus: 1 + assign block_width = 100 | divided_by: blocks_count + %} + width: calc({{ block_width }}% - 3%); + min-width: 300px; + max-width: unset; + margin-right: 10px; + } + + .xcp-financing-options__bottom-text { + width: 90%; + margin: 0 auto; + } + } + + @media screen and (max-width: 935px) { + .section-{{ section.id }} .xcp-financing-option { + width: 46vw; + min-width: unset; + max-width: unset; + margin-right: 10px; + } + + .xcp-financing-options__mobile-scroll { + min-height: 787px; + overflow-x: scroll; + + } + + .xcp-financing-options__flex-wrapper { + width: 138vw; + justify-content: start; + } + + {% for block in section.blocks %} + #block-{{ block.id }} .xcp-financing-option__btn { + padding: 12px 20px; + } + {% endfor %} + + .xcp-financing-option__line { + justify-content: space-between; + } + + .section-{{ section.id }} .xcp-financing-option__line.line1 { + min-height: calc({{ section.settings.line1_min_height }}px + 85px); + } + + .section-{{ section.id }} .xcp-financing-option__line.line6 { + min-height: calc({{ section.settings.line6_min_height }}px + 84px); + } + + .section-{{ section.id }} .xcp-financing-option__line.line7 { + min-height: calc({{ section.settings.line7_min_height }}px + 84px); + } + + .section-{{ section.id }} .xcp-financing-option__line.line8 { + min-height: calc({{ section.settings.line8_min_height }}px + 77px); + } + } + + @media screen and (max-width: 400px) { + .xcp-financing-highlight__image { + width: 90%; + margin: 0 auto; + } + } +{%- endstyle -%} + +
+
+
+
+ {% for block in section.blocks %} + {% render 'xcp-financing-option', settings: block.settings, id: block.id %} + {% endfor %} +
+
+
+ {{ section.settings.bottom_text }} +
+
+
+ + +{% schema %} +{ + "name": "XCP Financing Options", + "tag": "section", + "class": "section", + "disabled_on": { + "groups": ["header", "footer"] + }, + "settings": [ + { + "type": "color", + "id": "bg_color", + "label": "Background Color", + "default": "#FFF" + }, + { + "type": "color", + "id": "color", + "label": "Color", + "default": "#000" + }, + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 36 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 36 + }, + { + "type": "richtext", + "id": "bottom_text", + "label": "Bottom Text" + }, + { + "type": "header", + "content": "Columns Settings" + }, + { + "type": "range", + "id": "first_column_max_width", + "min": 0, + "max": 100, + "step": 1, + "unit": "%", + "label": "First Column Max Width", + "default": 20 + }, + { + "type": "range", + "id": "columns_max_width", + "min": 0, + "max": 100, + "step": 1, + "unit": "%", + "label": "Columns Max Width", + "default": 21 + }, + { + "type": "header", + "content": "Lines Settings" + }, + { + "type": "range", + "id": "header_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Header Height", + "default": 25 + }, + { + "type": "range", + "id": "line1_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 1 Min Height", + "default": 25 + }, + { + "type": "range", + "id": "line2_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 2 Min Height", + "default": 25 + }, + { + "type": "range", + "id": "line3_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 3 Min Height", + "default": 25 + }, + { + "type": "range", + "id": "line4_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 4 Min Height", + "default": 25 + }, + { + "type": "range", + "id": "line5_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 5 Min Height", + "default": 25 + }, + { + "type": "range", + "id": "line6_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 6 Min Height", + "default": 25 + }, + { + "type": "range", + "id": "line7_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 7 Min Height", + "default": 25 + }, + { + "type": "range", + "id": "line8_min_height", + "min": 0, + "max": 500, + "step": 5, + "unit": "px", + "label": "Line 8 Min Height", + "default": 25 + } + ], + "blocks": [ + { + "type": "financing_option", + "name": "Financing Option", + "settings": [ + { + "type": "color", + "id": "header_bg_color", + "label": "Header Background Color" + }, + { + "type": "color", + "id": "header_color", + "label": "Header Color" + }, + { + "type": "color", + "id": "bg_color", + "label": "Background Color" + }, + { + "type": "color", + "id": "color", + "label": "Color", + "default": "#BFBFBF" + }, + { + "type": "color", + "id": "line_sep_color", + "label": "Line Separator Color", + "default": "#C5C5C5" + }, + { + "type": "range", + "id": "separator_width", + "min": 0, + "max": 100, + "step": 1, + "unit": "%", + "label": "Separator Width", + "default": 80 + }, + { + "type": "checkbox", + "id": "show_line_title_desk", + "label": "Show Line Title on Desktop", + "default": false + }, + { + "type": "checkbox", + "id": "hide_block_mobile", + "label": "Hide Block Mobile", + "default": false + }, + { + "type": "image_picker", + "id": "header_logo_img", + "label": "Header Logo Image" + }, + { + "type": "html", + "id": "header_text", + "label": "Header text" + }, + { + "type": "header", + "content": "Header padding" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 12 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 12 + }, + { + "type": "header", + "content": "Line 1" + }, + { + "type": "richtext", + "id": "line1_title", + "label": "line1 - Title", + "default": "

Who is it for?

" + }, + { + "type": "richtext", + "id": "line1_body", + "label": "line1 - Body" + }, + { + "type": "header", + "content": "Line 2" + }, + { + "type": "richtext", + "id": "line2_title", + "label": "line2 - Title", + "default": "

Interest

" + }, + { + "type": "richtext", + "id": "line2_body", + "label": "line2 - Body" + }, + { + "type": "header", + "content": "Line 3" + }, + { + "type": "richtext", + "id": "line3_title", + "label": "line3 - Title", + "default": "

Max Term Length

" + }, + { + "type": "richtext", + "id": "line3_body", + "label": "line3 - Body" + }, + { + "type": "header", + "content": "Line 4" + }, + { + "type": "richtext", + "id": "line4_title", + "label": "line4 - Title", + "default": "

Lease Fees

" + }, + { + "type": "richtext", + "id": "line4_body", + "label": "line4 - Body" + }, + { + "type": "header", + "content": "Line 5" + }, + { + "type": "richtext", + "id": "line5_title", + "label": "line5 - Title", + "default": "

Monthly Payments

" + }, + { + "type": "richtext", + "id": "line5_body", + "label": "line5 - Body" + }, + { + "type": "header", + "content": "Line 6" + }, + { + "type": "richtext", + "id": "line6_title", + "label": "line6 - Title", + "default": "

Early Payoff Option Available

" + }, + { + "type": "richtext", + "id": "line6_body", + "label": "line6 - Body" + }, + { + "type": "header", + "content": "Line 7" + }, + { + "type": "richtext", + "id": "line7_title", + "label": "line7 - Title", + "default": "

Tax Deductible

" + }, + { + "type": "richtext", + "id": "line7_body", + "label": "line7 - Body" + }, + { + "type": "header", + "content": "Line 8" + }, + { + "type": "richtext", + "id": "line8_title", + "label": "line8 - Title", + "default": "

Credit Pull

" + }, + { + "type": "richtext", + "id": "line8_body", + "label": "line8 - Body" + }, + { + "type": "header", + "content": "Bottom Button" + }, + { + "type": "color", + "id": "bottom_btn_bg_color", + "label": "Bottom Button Background Color" + }, + { + "type": "color", + "id": "bottom_btn_color", + "label": "Bottom Button Color" + }, + { + "type": "text", + "id": "bottom_btn_label", + "label": "Bottom Button Label" + }, + { + "type": "url", + "id": "bottom_btn_url", + "label": "Bottom Button URL" + } + ] + } + ], + "presets": [ + { + "name": "XCP Financing Options" + } + ] +} +{% endschema %} diff --git a/sections/xcp-financing-rich-text.liquid b/sections/xcp-financing-rich-text.liquid new file mode 100644 index 00000000000..fec4e76288c --- /dev/null +++ b/sections/xcp-financing-rich-text.liquid @@ -0,0 +1,335 @@ + + + + + + +{%- style -%} + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; + } + + @media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + } + + .xcp-financing-rich-text .rich-text__heading { + font-family: "AlrightSans-Light"; + font-size: 32px; + } + + .xcp-financing-rich-text .rich-text__text { + font-family: "AlrightSans-Light"; + font-size: 16px; + color: black; + max-width: 400px; + margin: 0 auto; + padding-top: 15px; + } +{%- endstyle -%} + +
+
+
+
+ {%- for block in section.blocks -%} + {%- case block.type -%} + {%- when 'heading' -%} +

+ {{ block.settings.heading | replace: 'p>', 'span>' }} +

+ {%- when 'caption' -%} +

+ {{ block.settings.caption | escape }} +

+ {%- when 'text' -%} +
+ {{ block.settings.text }} +
+ {%- when 'button' -%} +
+ {%- if block.settings.button_label != blank -%} + {{ block.settings.button_label | escape }} + {%- endif -%} + {%- if block.settings.button_label_2 != blank -%} + {{ block.settings.button_label_2 | escape }} + {%- endif -%} +
+ {%- endcase -%} + {%- endfor -%} +
+
+
+
+ +{% schema %} +{ + "name": "XCP Financing Rich Text", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "select", + "id": "desktop_content_position", + "options": [ + { + "value": "left", + "label": "t:sections.rich-text.settings.desktop_content_position.options__1.label" + }, + { + "value": "center", + "label": "t:sections.rich-text.settings.desktop_content_position.options__2.label" + }, + { + "value": "right", + "label": "t:sections.rich-text.settings.desktop_content_position.options__3.label" + } + ], + "default": "center", + "label": "t:sections.rich-text.settings.desktop_content_position.label", + "info": "t:sections.rich-text.settings.desktop_content_position.info" + }, + { + "type": "select", + "id": "content_alignment", + "options": [ + { + "value": "left", + "label": "t:sections.rich-text.settings.content_alignment.options__1.label" + }, + { + "value": "center", + "label": "t:sections.rich-text.settings.content_alignment.options__2.label" + }, + { + "value": "right", + "label": "t:sections.rich-text.settings.content_alignment.options__3.label" + } + ], + "default": "center", + "label": "t:sections.rich-text.settings.content_alignment.label" + }, + { + "type": "select", + "id": "color_scheme", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "background-1", + "label": "t:sections.all.colors.label" + }, + { + "type": "checkbox", + "id": "full_width", + "default": true, + "label": "t:sections.rich-text.settings.full_width.label" + }, + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 40 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 52 + } + ], + "blocks": [ + { + "type": "heading", + "name": "t:sections.rich-text.blocks.heading.name", + "limit": 3, + "settings": [ + { + "type": "richtext", + "id": "heading", + "default": "

Talk about your brand

", + "label": "t:sections.rich-text.blocks.heading.settings.heading.label" + }, + { + "type": "select", + "id": "heading_size", + "options": [ + { + "value": "h2", + "label": "t:sections.all.heading_size.options__1.label" + }, + { + "value": "h1", + "label": "t:sections.all.heading_size.options__2.label" + }, + { + "value": "h0", + "label": "t:sections.all.heading_size.options__3.label" + }, + { + "value": "hxl", + "label": "t:sections.all.heading_size.options__4.label" + } + ], + "default": "h1", + "label": "t:sections.all.heading_size.label" + } + ] + }, + { + "type": "caption", + "name": "t:sections.rich-text.blocks.caption.name", + "limit": 3, + "settings": [ + { + "type": "text", + "id": "caption", + "default": "Add a tagline", + "label": "t:sections.rich-text.blocks.caption.settings.text.label" + }, + { + "type": "select", + "id": "text_style", + "options": [ + { + "value": "subtitle", + "label": "t:sections.rich-text.blocks.caption.settings.text_style.options__1.label" + }, + { + "value": "caption-with-letter-spacing", + "label": "t:sections.rich-text.blocks.caption.settings.text_style.options__2.label" + } + ], + "default": "caption-with-letter-spacing", + "label": "t:sections.rich-text.blocks.caption.settings.text_style.label" + }, + { + "type": "select", + "id": "text_size", + "options": [ + { + "value": "small", + "label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__1.label" + }, + { + "value": "medium", + "label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__2.label" + }, + { + "value": "large", + "label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__3.label" + } + ], + "default": "medium", + "label": "t:sections.rich-text.blocks.caption.settings.caption_size.label" + } + ] + }, + { + "type": "text", + "name": "t:sections.rich-text.blocks.text.name", + "limit": 3, + "settings": [ + { + "type": "richtext", + "id": "text", + "default": "

Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.

", + "label": "t:sections.rich-text.blocks.text.settings.text.label" + } + ] + }, + { + "type": "button", + "name": "t:sections.rich-text.blocks.buttons.name", + "limit": 2, + "settings": [ + { + "type": "text", + "id": "button_label", + "default": "Button label", + "label": "t:sections.rich-text.blocks.buttons.settings.button_label_1.label", + "info": "t:sections.rich-text.blocks.buttons.settings.button_label_1.info" + }, + { + "type": "url", + "id": "button_link", + "label": "t:sections.rich-text.blocks.buttons.settings.button_link_1.label" + }, + { + "type": "checkbox", + "id": "button_style_secondary", + "default": false, + "label": "t:sections.rich-text.blocks.buttons.settings.button_style_secondary_1.label" + }, + { + "type": "text", + "id": "button_label_2", + "label": "t:sections.rich-text.blocks.buttons.settings.button_label_2.label", + "info": "t:sections.rich-text.blocks.buttons.settings.button_label_2.info" + }, + { + "type": "url", + "id": "button_link_2", + "label": "t:sections.rich-text.blocks.buttons.settings.button_link_2.label" + }, + { + "type": "checkbox", + "id": "button_style_secondary_2", + "default": false, + "label": "t:sections.rich-text.blocks.buttons.settings.button_style_secondary_2.label" + } + ] + } + ], + "presets": [ + { + "name": "XCP Financing Rich Text", + "blocks": [ + { + "type": "heading" + }, + { + "type": "text" + }, + { + "type": "button" + } + ] + } + ] +} +{% endschema %} diff --git a/sections/xcp-flag.liquid b/sections/xcp-flag.liquid new file mode 100644 index 00000000000..d81d2ae5928 --- /dev/null +++ b/sections/xcp-flag.liquid @@ -0,0 +1,141 @@ +{% style %} +.section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; +} + +@media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } +} +.xcp-flag--wrapper { + display: flex; +} + +.xcp-flag--wrapper svg { + width: 40%; + height: 65px; + fill: var(--gradient-base-accent-2); + stroke: var(--gradient-base-accent-2); +} + +.xcp-flag--detail svg { + width: 50px; + height: 65px; + fill: var(--gradient-base-accent-2); + stroke: var(--gradient-base-accent-2); +} + +.xcp-flag--detail svg path { + transform: rotate(90deg); +} + +.xcp-flag__content-wrapper--abs { + position: absolute; + width: 40%; +} + +.xcp-flag__content-wrapper--rel { + position: relative; +} + +.xcp-flag__content-wrapper { + font-weight: bold; + color: black; + width: 100%; + text-align: right; + font-size: 14px; + text-transform: uppercase; + padding-top: 7px; +} + +.xcp-flag__content-wrapper span { + color: white; +} + +.xcp-flag__content { + width: 193px; + float: right; + text-align: left; +} + +@media screen and (max-width: 750px) { + .xcp-flag__content-wrapper--abs { + width: 90%; + } + + .xcp-flag--wrapper svg { + width: 100%; + } + + .xcp-flag__content-wrapper { + text-align: left; + margin-left: 28px; + } + + .xcp-flag__content { + float: left; + } +} +{% endstyle %} +
+ + + + + + + +
+
+
+
+ {{section.settings.content}} +
+
+
+
+
+{% schema %} +{ + "name": "XCPro Flag", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "html", + "id": "content", + "label": "Content" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 36 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 36 + } + ], + "blocks": [ + ], + "presets": [ + { + "name": "XCPro Flag" + } + ] +} +{% endschema %} diff --git a/sections/xcp-grid-carousel.liquid b/sections/xcp-grid-carousel.liquid new file mode 100644 index 00000000000..b1a05d78d95 --- /dev/null +++ b/sections/xcp-grid-carousel.liquid @@ -0,0 +1,262 @@ +{% assign image_blocks = section.blocks | where: 'type', 'image' %} +{% assign bottom_text_block = section.blocks | where: 'type', 'desktop_bottom_text' | first %} + +{% style %} +.xcp-grid-carousel { + padding-top: {{section.settings.padding_top}}px; + padding-bottom: {{section.settings.padding_bottom}}px; +} + +.xcp-grid-carousel__bottom-desktop-text { + {% if bottom_text_block %} + padding-top: {{bottom_text_block.settings.padding_top}}px; + padding-bottom: {{bottom_text_block.settings.padding_bottom}}px; + {% endif %} + + text-align: center; + font-size: 20px; +} + +.xcp-grid-carousel__grid { + max-width: 1200px; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.xcp-grid-carousel__grid img { + width: 32%; + min-width: 347px; + margin-bottom: {{section.settings.grid_img_margin_bottom}}px; +} + +.xcp-grid-carousel__carousel-wrapper { + display: none; +} + +.xcp-grid-carousel__carousel__left-arrow, .xcp-grid-carousel__carousel__right-arrow { + width: 80px; + height: 80px; + fill: var(--gradient-base-accent-2); + z-index: 2; + margin-top: 30%; + padding: 0 5px; + +} + +.xcp-grid-carousel__carousel-carousel--wrapper { + position: absolute; +} +.xcp-grid-carousel__carousel-carousel { + position: relative; + max-width: 1200px; + margin: 0 auto; + display: flex; +} + +.xcp-grid-carousel__carousel__inner--wrapper { + overflow: hidden; + width: 95%; + margin: 0 auto; +} + +.xcp-grid-carousel__carousel__inner { + flex-wrap: nowrap; + width: 20000px; + position: relative; + display: flex; + justify-content: start; +} + +.xcp-grid-carousel__carousel__inner img { + position: relative; + {% if section.settings.show_arrows_mobile %} + width: 79vw; + {% else %} + width: 83vw; + {% endif %} + margin-right: 20px; + object-fit: contain; +} +.xcp-grid-carousel__carousel-indicators { + list-style: none; + padding-inline-start: 0; + display: flex; + justify-content: center; +} + +.xcp-grid-carousel__carousel-indicators li { + width: 10px; + height: 10px; + fill: white; + margin-right: 5px; + position: relative; + bottom: 25px; +} + +.xcp-grid-carousel__carousel-indicators li .active { + fill: var(--gradient-base-accent-2); +} + +@media (max-width: 750px) { + .xcp-grid-carousel { + width: 90%; + margin: 0 auto; + } + .xcp-grid-carousel__grid { + display: none; + } + .xcp-grid-carousel__bottom-desktop-text { + display: none; + } + .xcp-grid-carousel__carousel-wrapper { + display: block; + } +} + +{% endstyle %} + +
+
+ {% for img_block in image_blocks %} + {{ img_block.settings.image | image_url: width: 347, height: 232 | image_tag }} + {% endfor %} +
+
+
+ {% if section.settings.show_arrows_mobile %} +
+ +
+ {% endif %} +
+
+ {% for img_block in image_blocks %} + {% assign image_class = "xcp-grid-carousel__carousel__image" %} + {% if forloop.first %} + {% assign image_class = image_class | append: ' active' %} + {% endif %} + + {% endfor %} +
+
+ {% if section.settings.show_arrows_mobile %} +
+ +
+ {% endif %} +
+
    + {% for img_block in image_blocks %} + {% assign indicator_class = "xcp-grid-carousel__carousel__indicator" %} + {% if forloop.first %} + {% assign indicator_class = indicator_class | append: ' active' %} + {% endif %} +
  • + +
    • + {% endfor %} +
+ +
+

+ {{bottom_text_block.settings.text}} +

+
+ +{% schema %} +{ + "name": "XCPro Grid Carousel", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "range", + "id": "padding_top", + "label": "Padding Top", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 40 + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding Bottom", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 0 + }, + { + "type": "range", + "id": "grid_img_margin_bottom", + "label": "Grid image Margin Bottom", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 20 + }, + { + "type": "checkbox", + "id": "show_arrows_mobile", + "label": "Show arrows on mobile", + "default": false + } + ], + "blocks": [ + { + "name": "Image", + "type": "image", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Image" + } + ] + }, + { + "name": "Desktop bottom text", + "type": "desktop_bottom_text", + "limit": 1, + "settings": [ + { + "type": "html", + "id": "text", + "label": "text" + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding Top", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 0 + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding Bottom", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 0 + } + ] + } + ], + "presets": [ + { + "name": "XCPro Grid Carousel" + } + ] +} +{% endschema %} diff --git a/sections/xcp-hero.liquid b/sections/xcp-hero.liquid new file mode 100644 index 00000000000..2e8cd3e20b2 --- /dev/null +++ b/sections/xcp-hero.liquid @@ -0,0 +1,306 @@ +{%- assign video_id = section.settings.background_video.id | default: section.settings.background_video_url.id -%} + +{% style %} +.xcp-overview__hero__video-bg { + position: relative; + width: 100%; + height: 676px; + overflow: hidden; +} + +.xcp-overview__hero__video-bg::after { + content: " "; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgb(2,0,36); + background: linear-gradient(90deg, var(--gradient-base-background-1) 0%, rgba(255,255,255,0) 82%); +} + +.xcp-overview__hero__video-bg iframe{ + position: absolute; + width: 160vw; + height: 90vw; + bottom: -{{section.settings.video_bottom_position}}vw; + right: -{{section.settings.video_right_position}}px; +} + +@media screen and (max-width: 1130px) { + .xcp-overview__hero__video-bg iframe{ + bottom: 0; + } +} + +.xcp-overview__hero__content--wrapper { + position: absolute; + width: 100% +} + +.xcp-overview__hero__content--wrapper-abs { + position: relative; + bottom: {{section.settings.content_bottom}}px; + width: 100%; +} + +.xcp-overview__hero__content--wrapper-center { + max-width: 1200px; + margin: 0 auto; + padding-left: {{section.settings.content_padding_left}}px; +} + +.xcp-overview__hero__content__header { + font-size: 30px; + max-width: 381px; + line-height: 33px; +} + +.xcp-overview__hero__content__header span { + color: var(--gradient-base-accent-2); +} + +.xcp-overview__hero__content__text { + color: white; + max-width: 380px; + font-size: 14px; + line-height: 19px; + font-family: 'AlrightSans-Light'; + font-weight: bold; +} + +.xcp-hero .desktop { + display: block; +} + +.xcp-hero .mobile { + display: none; +} + +.xcp-overview__hero__img { + width: 100%; +} + +.xcp-overview__hero__overlay { + min-height: 650px; + padding: 20px; +} + +@media (max-width: 750px) { + .xcp-hero .desktop { + display: none; + } + + .xcp-hero .mobile { + display: block; + } + + .xcp-hero .xcp-overview__hero__content--wrapper-abs { + left: 20px; + top: -3px; + max-width: 70vw; + } + + .xcp-overview__hero__content__header { + font-size: 20px; + } + + .xcp-overview__hero__overlay { + min-height: unset; + padding: 20px; + } + + .xcp-overview__hero__overlay::after { + content: " "; + display: block; + position: absolute; + top: 249px; + left: 0; + width: 100%; + height: 31vw; + background: rgb(2,0,36); + background: linear-gradient(180deg, var(--gradient-base-background-1) 0%, rgba(255,255,255,0) 82%); + } + + .xcp-overview__hero__blocks { + width: 80%; + margin: 0 auto; + } + + .xcp-overview__hero__blocks .btn { + width: 100%; + text-align: center; + } + + .xcp-overview__hero__content--wrapper { + z-index: 2; + } +} +{% endstyle %} +
+
+ {%- if section.settings.video == null and section.settings.background_video_url != null -%} + {%- if section.settings.background_video_url.type == 'youtube' -%} + + {%- else -%} + + {%- endif -%} + {%- else -%} + {{ section.settings.video | video_tag: controls: false, muted: true }} + {%- endif -%} +
+
+
+

{{section.settings.header}}

+
+
+
+ +
+
+
+
+

{{section.settings.header}}

+ {% for block in section.blocks %} + {% case block.type %} + {% when 'text' %} +
+ {{block.settings.content}} +
+ {% when 'btn' %} + {{block.settings.label}} + {% endcase %} + {% endfor %} +
+
+
+
+ {% for block in section.blocks %} + {% case block.type %} + {% when 'text' %} +
+ {{block.settings.content}} +
+ {% when 'btn' %} + {{block.settings.label}} + {% endcase %} + {% endfor %} +
+
+{% schema %} +{ + "name": "XCP Hero", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "video", + "id": "background_video", + "label": "Background Video" + }, + { + "type": "video_url", + "id": "background_video_url", + "label": "Background Video URL", + "accept": [ + "youtube", + "vimeo" + ] + }, + { + "type": "image_picker", + "id": "img_mobile", + "label": "Mobile image" + }, + { + "type": "html", + "id": "header", + "label": "Header" + }, + { + "type": "range", + "id": "content_padding_left", + "label": "Content padding left", + "min": 0, + "max": 1000, + "step": 10, + "unit": "px", + "default": 100 + }, + { + "type": "range", + "id": "content_bottom", + "label": "Content bottom", + "min": 340, + "max": 710, + "step": 10, + "unit": "px", + "default": 560 + }, + { + "type": "range", + "id": "video_bottom_position", + "label": "Video Bottom position", + "min": 0, + "max": 300, + "step": 10, + "unit": "vw", + "default": 30 + }, + { + "type": "range", + "id": "video_right_position", + "label": "Video Bottom position", + "min": 0, + "max": 1000, + "step": 10, + "unit": "px", + "default": 570 + } + ], + "blocks": [ + { + "name": "Content", + "type": "text", + "settings": [ + { + "type": "richtext", + "id": "content", + "label": "Content" + } + ] + }, + { + "name": "Button", + "type": "btn", + "settings": [ + { + "type": "text", + "id": "label", + "label": "Label" + }, + { + "type": "url", + "id": "link", + "label": "Link" + } + ] + } + ], + "presets": [ + { + "name": "XCPro Hero" + } + ] +} +{% endschema %} diff --git a/sections/xcp-image-floating-text.liquid b/sections/xcp-image-floating-text.liquid new file mode 100644 index 00000000000..bc571e6131f --- /dev/null +++ b/sections/xcp-image-floating-text.liquid @@ -0,0 +1,177 @@ +{% style %} +.xcp-image-floating-text { + width: 100%; + height: 590px; +} +.xcp-image-floating-text-background-image { + width: 100%; + height: auto; + min-height: 590px; + overflow: hidden; + object-fit: cover; +} + +.xcp-image-float-text__content-wrapper--abs { + width: 100%; + position: absolute; +} + +.xcp-image-float-text__content-wrapper--rel { + position: relative; + height: 590px; +} +.xcp-image-float-text__content-wrapper--center { + max-width: 1200px; + margin: 0 auto; +} + +.xcp-image-float-text__content-wrapper { + color: black; + width: 365px; + float: right; + margin-top: 84px; +} + +.xcp-image-float-text__content__title { + font-size: 32px; + text-transform: uppercase; + line-height: 40px; + font-family: AlrightSans-Light; +} + +.xcp-image-float-text__content__content { + font-family: AlrightSans-Light; + font-size: 14px; + line-height: 19px; + font-weight: bold; +} +.xcp-image-float-text__content__title strong, .xcp-image-float-text__content__title b { + font-family: var(--font-heading-family); +} +.xcp-image-floating-text .mobile { + display: none; +} + +@media screen and (max-width: 750px) { + .xcp-image-floating-text .desktop { + display: none; + } + + .xcp-image-floating-text .mobile { + display: block; + } + .xcp-image-floating-text-background-image { + min-height: unset; + margin: 0 auto; + } + .xcp-image-float-text__content-wrapper { + color: white; + margin-top: 0; + float: unset; + margin: 0 auto; + } + .xcp-image-float-text__content-wrapper--abs, .xcp-image-float-text__content-wrapper--rel { + position: initial; + } + + .xcp-image-float-text__content__title { + text-align: center; + font-size: 24px + } + .xcp-image-float-text__content__content { + text-align: center; + } + .xcp-image-float-text__content__button { + width: 100%; + text-align: center; + } +} +{% endstyle %} +
+ {{ section.settings.image | image_url: width: 500 | image_tag: class: 'xcp-image-floating-text-background-image mobile'}} +
+
+
+
+ {% for block in section.blocks %} + {% case block.type%} + {% when 'title' %} +

+ {{block.settings.content}} +

+ {% when 'text' %} +
+ {{block.settings.content}} +
+ {% when 'button' %} + + {{block.settings.label}} + + {% endcase %} + {% endfor %} +
+
+
+
+ {{ section.settings.image | image_url: width: 2000 | image_tag: class: 'xcp-image-floating-text-background-image desktop'}} +
+{% schema %} +{ + "name": "XCPro Image Floating Text", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Image" + } + ], + "blocks": [ + { + "name": "Title", + "type": "title", + "settings": [ + { + "type": "html", + "id": "content", + "label": "Content" + } + ] + }, + { + "name": "Text", + "type": "text", + "settings": [ + { + "type": "richtext", + "id": "content", + "label": "Content" + } + ] + }, + { + "name": "Button", + "type": "button", + "settings": [ + { + "type": "text", + "id": "label", + "label": "Label" + }, + { + "type": "url", + "id": "url", + "label": "URL" + } + ] + } + + ], + "presets": [ + { + "name": "XCPro Image Floating Text" + } + ] +} +{% endschema %} diff --git a/sections/xcp-image-with-text.liquid b/sections/xcp-image-with-text.liquid new file mode 100644 index 00000000000..6c2362771cf --- /dev/null +++ b/sections/xcp-image-with-text.liquid @@ -0,0 +1,514 @@ +{{ 'component-image-with-text.css' | asset_url | stylesheet_tag }} + +{%- style -%} + .xcp-color-accent-2 { + color: var(--gradient-base-accent-2); + } + .xcp-color-normal { + color: rgba(var(--color-foreground), 0.75); + } + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; + } + + @media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + } + + .xcp-image-with-text { + max-width: 1200px; + margin: 0 auto; + } + + .xcp-image-with-text .image-with-text__text-item { + max-width: 47%; + } + + .xcp-image-with-text__grid { + justify-content: start; + } + + .xcp-image-with-text__media_item { + position: absolute !important; + left: 49%; + } + + .xcp-image-with-text__media { + position: relative; + width: 657px; + height: 424px; + } + + .xcp-image-with-text .xcp-btn-white-border { + background: black; + color: white; + border: 1px solid white; + font-size: 14px; + padding: 12px 36px; + text-align: center; + } + + .xcp-image-with-text .image-with-text__heading { + font-family: AlrightSans-Light; + font-size: 22px; + font-weight: bold; + } + + .xcp-image-with-text .image-with-text__text { + font-family: AlrightSans-Light; + font-size: 18px; + } + + @media screen and (max-width: 750px) { + .xcp-image-with-text .image-with-text__text-item { + max-width: unset; + width: 100%; + } + .xcp-image-with-text .xcp-btn-white-border { + width: 100%; + } + .xcp-image-with-text__media_item { + position: relative !important; + left: 0; + } + + .xcp-image-with-text__media { + position: initial; + } + + .xcp-image-with-text__media { + width: 100%; + height: auto; + } + } + + @media screen and (max-width: 1305px) { + .xcp-image-with-text__media { + width: 50vw; + } + } +{%- endstyle -%} + +
+
+
+
+ {%- if section.settings.image != blank -%} + {{ section.settings.image.alt | escape }} + {%- else -%} + {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }} + {%- endif -%} +
+
+
+
+ {%- for block in section.blocks -%} + {% case block.type %} + {%- when 'heading' -%} +

+ {{ block.settings.heading | escape }} +

+ {%- when 'caption' -%} +

{{ block.settings.caption | escape }}

+ {%- when 'text' -%} +
{{ block.settings.text }}
+ {%- when 'button' -%} + {%- if block.settings.button_label != blank -%} + + {{ block.settings.button_label | escape }} + + {%- endif -%} + {%- endcase -%} + {%- endfor -%} +
+
+
+
+ +{% schema %} +{ + "name": "XCP Image with Text", + "class": "section", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "t:sections.image-with-text.settings.image.label" + }, + { + "type": "select", + "id": "height", + "options": [ + { + "value": "adapt", + "label": "t:sections.image-with-text.settings.height.options__1.label" + }, + { + "value": "small", + "label": "t:sections.image-with-text.settings.height.options__2.label" + }, + { + "value": "large", + "label": "t:sections.image-with-text.settings.height.options__3.label" + } + ], + "default": "adapt", + "label": "t:sections.image-with-text.settings.height.label" + }, + { + "type": "select", + "id": "desktop_image_width", + "options": [ + { + "value": "small", + "label": "t:sections.image-with-text.settings.desktop_image_width.options__1.label" + }, + { + "value": "medium", + "label": "t:sections.image-with-text.settings.desktop_image_width.options__2.label" + }, + { + "value": "large", + "label": "t:sections.image-with-text.settings.desktop_image_width.options__3.label" + } + ], + "default": "medium", + "label": "t:sections.image-with-text.settings.desktop_image_width.label", + "info": "t:sections.image-with-text.settings.desktop_image_width.info" + }, + { + "type": "select", + "id": "layout", + "options": [ + { + "value": "image_first", + "label": "t:sections.image-with-text.settings.layout.options__1.label" + }, + { + "value": "text_first", + "label": "t:sections.image-with-text.settings.layout.options__2.label" + } + ], + "default": "image_first", + "label": "t:sections.image-with-text.settings.layout.label", + "info": "t:sections.image-with-text.settings.layout.info" + }, + { + "type": "select", + "id": "desktop_content_position", + "options": [ + { + "value": "top", + "label": "t:sections.image-with-text.settings.desktop_content_position.options__1.label" + }, + { + "value": "middle", + "label": "t:sections.image-with-text.settings.desktop_content_position.options__2.label" + }, + { + "value": "bottom", + "label": "t:sections.image-with-text.settings.desktop_content_position.options__3.label" + } + ], + "default": "top", + "label": "t:sections.image-with-text.settings.desktop_content_position.label" + }, + { + "type": "select", + "id": "desktop_content_alignment", + "options": [ + { + "value": "left", + "label": "t:sections.image-with-text.settings.desktop_content_alignment.options__1.label" + }, + { + "value": "center", + "label": "t:sections.image-with-text.settings.desktop_content_alignment.options__2.label" + }, + { + "value": "right", + "label": "t:sections.image-with-text.settings.desktop_content_alignment.options__3.label" + } + ], + "default": "left", + "label": "t:sections.image-with-text.settings.desktop_content_alignment.label" + }, + { + "type": "select", + "id": "content_layout", + "options": [ + { + "value": "no-overlap", + "label": "t:sections.image-with-text.settings.content_layout.options__1.label" + }, + { + "value": "overlap", + "label": "t:sections.image-with-text.settings.content_layout.options__2.label" + } + ], + "default": "no-overlap", + "label": "t:sections.image-with-text.settings.content_layout.label" + }, + { + "type": "select", + "id": "color_scheme", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "background-1", + "label": "t:sections.all.colors.label" + }, + { + "type": "header", + "content": "Mobile layout" + }, + { + "type": "select", + "id": "mobile_content_alignment", + "options": [ + { + "value": "left", + "label": "t:sections.image-with-text.settings.mobile_content_alignment.options__1.label" + }, + { + "value": "center", + "label": "t:sections.image-with-text.settings.mobile_content_alignment.options__2.label" + }, + { + "value": "right", + "label": "t:sections.image-with-text.settings.mobile_content_alignment.options__3.label" + } + ], + "default": "left", + "label": "t:sections.image-with-text.settings.mobile_content_alignment.label" + }, + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 36 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 36 + } + ], + "blocks": [ + { + "type": "heading", + "name": "t:sections.image-with-text.blocks.heading.name", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "heading", + "default": "Image with text", + "label": "t:sections.image-with-text.blocks.heading.settings.heading.label" + }, + { + "type": "select", + "id": "heading_size", + "options": [ + { + "value": "h2", + "label": "t:sections.all.heading_size.options__1.label" + }, + { + "value": "h1", + "label": "t:sections.all.heading_size.options__2.label" + }, + { + "value": "h0", + "label": "t:sections.all.heading_size.options__3.label" + } + ], + "default": "h1", + "label": "t:sections.all.heading_size.label" + } + ] + }, + { + "type": "caption", + "name": "t:sections.image-with-text.blocks.caption.name", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "caption", + "default": "Add a tagline", + "label": "t:sections.image-with-text.blocks.caption.settings.text.label" + }, + { + "type": "select", + "id": "text_style", + "options": [ + { + "value": "subtitle", + "label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label" + }, + { + "value": "caption-with-letter-spacing", + "label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label" + } + ], + "default": "caption-with-letter-spacing", + "label": "t:sections.image-with-text.blocks.caption.settings.text_style.label" + }, + { + "type": "select", + "id": "text_size", + "options": [ + { + "value": "small", + "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label" + }, + { + "value": "medium", + "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label" + }, + { + "value": "large", + "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label" + } + ], + "default": "medium", + "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.label" + } + ] + }, + { + "type": "text", + "name": "t:sections.image-with-text.blocks.text.name", + "settings": [ + { + "type": "richtext", + "id": "text", + "default": "

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

", + "label": "t:sections.image-with-text.blocks.text.settings.text.label" + }, + { + "type": "select", + "id": "text_style", + "options": [ + { + "value": "body", + "label": "t:sections.image-with-text.blocks.text.settings.text_style.options__1.label" + }, + { + "value": "subtitle", + "label": "t:sections.image-with-text.blocks.text.settings.text_style.options__2.label" + } + ], + "default": "body", + "label": "t:sections.image-with-text.blocks.text.settings.text_style.label" + }, + { + "type": "select", + "id": "text_color", + "options": [ + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "normal", + "label": "Normal" + } + ], + "default": "normal", + "label": "t:sections.all.colors.label" + } + ] + }, + { + "type": "button", + "name": "t:sections.image-with-text.blocks.button.name", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "button_label", + "default": "Button label", + "label": "t:sections.image-with-text.blocks.button.settings.button_label.label", + "info": "t:sections.image-with-text.blocks.button.settings.button_label.info" + }, + { + "type": "url", + "id": "button_link", + "label": "t:sections.image-with-text.blocks.button.settings.button_link.label" + } + ] + } + ], + "presets": [ + { + "name": "XCP Image with Text", + "blocks": [ + { + "type": "heading" + }, + { + "type": "text" + }, + { + "type": "button" + } + ] + } + ] +} +{% endschema %} diff --git a/sections/xcp-multicolumn-requirements.liquid b/sections/xcp-multicolumn-requirements.liquid new file mode 100644 index 00000000000..985ec77edd9 --- /dev/null +++ b/sections/xcp-multicolumn-requirements.liquid @@ -0,0 +1,445 @@ +{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }} +{{ "xcp-multicolumn-requirements.css" | asset_url | stylesheet_tag }} + + + + +{%- style -%} + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; + } + + @media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + + } + .xcp-multicolumn { + max-width: 1200px; + margin-right: auto !important; + margin-left: auto !important; + } + + .xcp-multicolumn .grid__item { + width: 50%; + min-width: 400px; + font-size: 14px; + } + .xcp-multicolumn .title { + font-size: 24px; + max-width: 200px; + margin-top: 33px; + } + + .xcp-multicolumn li li { + list-style: disc; + } + + @media screen and (max-width: 750px) { + .xcp-multicolumn .grid__item { + width: 100%; + min-width: unset; + } + .xcp-multicolumn { + width: 95%; + margin-right: auto !important; + margin-left: auto !important; + } + } + + @media screen and (max-width: 1300px) { + .xcp-multicolumn .title { + text-align: center; + width: 100%; + max-width: unset; + } + .xcp-multicolumn .title-wrapper-with-link { + width: 100%; + } + + } +{%- endstyle -%} + +{%- liquid + assign columns_mobile_int = section.settings.columns_mobile | plus: 0 + assign show_mobile_slider = false + if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int + assign show_mobile_slider = true + endif +-%} + +
+
+ {%- unless section.settings.title == blank -%} +
+

+ {{ section.settings.title }} +

+ {%- if section.settings.button_label != blank and show_mobile_slider -%} + {{ section.settings.button_label | escape }} + {%- endif -%} +
+ {%- endunless -%} + +
    + {%- liquid + assign highest_ratio = 0 + for block in section.blocks + if block.settings.image.aspect_ratio > highest_ratio + assign highest_ratio = block.settings.image.aspect_ratio + endif + endfor + -%} + {%- for block in section.blocks -%} + {%- assign empty_column = '' -%} + {%- if block.settings.image == blank and block.settings.title == blank and block.settings.text == blank and block.settings.link_label == blank -%} + {%- assign empty_column = ' multicolumn-list__item--empty' -%} + {%- endif -%} + +
  • +
    + {%- if block.settings.image != blank -%} + {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %} + {% assign spaced_image = true %} + {% endif %} +
    +
    + {{ block.settings.image.alt }} +
    +
    + {%- endif -%} +
    + {%- if block.settings.title != blank -%} +

    {{ block.settings.title | escape }}

    + {%- endif -%} + {%- if block.settings.text != blank -%} +
    {{ block.settings.text }}
    + {%- endif -%} + {%- if block.settings.link_label != blank -%} + {{ block.settings.link_label | escape }} {% render 'icon-arrow' %} + {%- endif -%} +
    +
    +
    • + {%- endfor -%} +
+ + {%- if show_mobile_slider -%} +
+ +
+ 1 + + + {{ section.blocks.size }} +
+ +
+ {%- endif -%} + +
+ {%- if section.settings.button_label != blank -%} + + {{ section.settings.button_label | escape }} + + {%- endif -%} +
+
+
+ +{% schema %} +{ + "name": "XCPro Multicolumn Req", + "class": "section", + "tag": "section", + "settings": [ + { + "type": "html", + "id": "title", + "default": "Multicolumn", + "label": "Title HTML" + }, + { + "type": "select", + "id": "heading_size", + "options": [ + { + "value": "h2", + "label": "t:sections.all.heading_size.options__1.label" + }, + { + "value": "h1", + "label": "t:sections.all.heading_size.options__2.label" + }, + { + "value": "h0", + "label": "t:sections.all.heading_size.options__3.label" + } + ], + "default": "h1", + "label": "t:sections.all.heading_size.label" + }, + { + "type": "select", + "id": "image_width", + "options": [ + { + "value": "third", + "label": "t:sections.multicolumn.settings.image_width.options__1.label" + }, + { + "value": "half", + "label": "t:sections.multicolumn.settings.image_width.options__2.label" + }, + { + "value": "full", + "label": "t:sections.multicolumn.settings.image_width.options__3.label" + } + ], + "default": "full", + "label": "t:sections.multicolumn.settings.image_width.label" + }, + { + "type": "select", + "id": "image_ratio", + "options": [ + { + "value": "adapt", + "label": "t:sections.multicolumn.settings.image_ratio.options__1.label" + }, + { + "value": "portrait", + "label": "t:sections.multicolumn.settings.image_ratio.options__2.label" + }, + { + "value": "square", + "label": "t:sections.multicolumn.settings.image_ratio.options__3.label" + }, + { + "value": "circle", + "label": "t:sections.multicolumn.settings.image_ratio.options__4.label" + } + ], + "default": "adapt", + "label": "t:sections.multicolumn.settings.image_ratio.label" + }, + { + "type": "range", + "id": "columns_desktop", + "min": 1, + "max": 6, + "step": 1, + "default": 3, + "label": "t:sections.multicolumn.settings.columns_desktop.label" + }, + { + "type": "select", + "id": "column_alignment", + "options": [ + { + "value": "left", + "label": "t:sections.multicolumn.settings.column_alignment.options__1.label" + }, + { + "value": "center", + "label": "t:sections.multicolumn.settings.column_alignment.options__2.label" + } + ], + "default": "left", + "label": "t:sections.multicolumn.settings.column_alignment.label" + }, + { + "type": "select", + "id": "background_style", + "options": [ + { + "value": "none", + "label": "t:sections.multicolumn.settings.background_style.options__1.label" + }, + { + "value": "primary", + "label": "t:sections.multicolumn.settings.background_style.options__2.label" + } + ], + "default": "primary", + "label": "t:sections.multicolumn.settings.background_style.label" + }, + { + "type": "text", + "id": "button_label", + "default": "Button label", + "label": "t:sections.multicolumn.settings.button_label.label" + }, + { + "type": "url", + "id": "button_link", + "label": "t:sections.multicolumn.settings.button_link.label" + }, + { + "type": "select", + "id": "color_scheme", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "background-1", + "label": "t:sections.all.colors.label" + }, + { + "type": "header", + "content": "t:sections.multicolumn.settings.header_mobile.content" + }, + { + "type": "select", + "id": "columns_mobile", + "options": [ + { + "value": "1", + "label": "t:sections.multicolumn.settings.columns_mobile.options__1.label" + }, + { + "value": "2", + "label": "t:sections.multicolumn.settings.columns_mobile.options__2.label" + } + ], + "default": "1", + "label": "t:sections.multicolumn.settings.columns_mobile.label" + }, + { + "type": "checkbox", + "id": "swipe_on_mobile", + "default": false, + "label": "t:sections.multicolumn.settings.swipe_on_mobile.label" + }, + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 36 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 36 + }, + { + "type": "text", + "id": "margin_top", + "label": "Margin Top", + "default": "20px" + }, + { + "type": "text", + "id": "title_width", + "label": "Title Width", + "default": "200px" + } + ], + "blocks": [ + { + "type": "column", + "name": "t:sections.multicolumn.blocks.column.name", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "t:sections.multicolumn.blocks.column.settings.image.label" + }, + { + "type": "text", + "id": "title", + "default": "Column", + "label": "t:sections.multicolumn.blocks.column.settings.title.label" + }, + { + "type": "richtext", + "id": "text", + "default": "

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

", + "label": "t:sections.multicolumn.blocks.column.settings.text.label" + }, + { + "type": "text", + "id": "link_label", + "label": "t:sections.multicolumn.blocks.column.settings.link_label.label" + }, + { + "type": "url", + "id": "link", + "label": "t:sections.multicolumn.blocks.column.settings.link.label" + } + ] + } + ], + "presets": [ + { + "name": "XCPro Multicolumn Req", + "blocks": [ + { + "type": "column" + }, + { + "type": "column" + }, + { + "type": "column" + } + ] + } + ] +} +{% endschema %} diff --git a/sections/xcp-multicolumn.liquid b/sections/xcp-multicolumn.liquid new file mode 100644 index 00000000000..9108f07e5d0 --- /dev/null +++ b/sections/xcp-multicolumn.liquid @@ -0,0 +1,623 @@ +{{ 'section-multicolumn.css' | asset_url | stylesheet_tag }} + + + +{%- style -%} + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; + } + + @media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + + .xcp-multicolumn .multicolumn-list.grid--4-col-desktop .grid__item { + width: 25%; + } + } + + .xcp-multicolumn .page-width{ + max-width: 1200px; + margin: 0 auto; + } + + .xcp-multicolumn .multicolumn-card { + margin-right: {{ section.settings.card_margin_right}}px; + } + + .xcp-multicolumn .multicolumn-card__info h3 { + text-align: center; + {% if section.settings.heading_color == 'orange'%} + color: var(--gradient-base-accent-2); + {% else %} + color: var(--color-base-text); + {% endif %} + {% if section.settings.heading_style == 'thin' %} + font-family: 'AlrightSans-Thin'; + {% else %} + font-family: var(--font-heading-family); + {% endif %} + } + + .xcp-multicolumn .desktop { + display: block; + } + + .xcp-multicolumn .mobile { + display: none; + } + + .xcp-multicolumn .multicolumn-card__info .rte { + text-align: center; + color: white; + font-family: 'AlrightSans-Light' + } + + .xcp-multicolumn-card__video-wrapper { + width: 99%; + margin: 0 auto !important; + } + + .xcp-multicolumn__video--wrapper { + position: relative; + } + + .xcp-multicolumn__video { + position: absolute; + width: 200%; + min-height: 300px; + left: 0; + border: 0; + } + + @media screen and (max-width: 1179px) { + .xcp-multicolumn__video { + position: unset; + width: 100%; + height: 100%; + } + + .xcp-multicolumn .media.media--transparent.media--adapt.xcp-media-video { + padding-bottom: 48% !important; + } + } + + @media screen and (max-width: 750px) { + .xcp-multicolumn .desktop { + display: none; + } + + .xcp-multicolumn .mobile { + display: block; + } + .xcp-multicolumn .multicolumn-card { + margin-bottom: {{ section.settings.card_margin_right}}px; + margin-right: 0; + } + } + +{%- endstyle -%} + +{%- liquid + assign columns_mobile_int = section.settings.columns_mobile | plus: 0 + assign show_mobile_slider = false + if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int + assign show_mobile_slider = true + endif +-%} + +
+
+ {%- unless section.settings.title == blank -%} +
+

+ {{ section.settings.title | escape }} +

+ {%- if section.settings.button_label != blank and show_mobile_slider -%} + {{ section.settings.button_label | escape }} + {%- endif -%} +
+ {%- endunless -%} + +
    + {%- liquid + assign highest_ratio = 0 + for block in section.blocks + if block.settings.image.aspect_ratio > highest_ratio + assign highest_ratio = block.settings.image.aspect_ratio + endif + endfor + -%} + {%- for block in section.blocks -%} + {%- assign empty_column = '' -%} + {%- if block.settings.image == blank and block.settings.title == blank and block.settings.text == blank and block.settings.link_label == blank -%} + {%- assign empty_column = ' multicolumn-list__item--empty' -%} + {%- endif -%} + +
  • +
    + {%- if block.settings.video or block.settings.video_url -%} +
    +
    +
    + {%- if block.settings.video == null and block.settings.video_url != null -%} + {%- assign video_id = block.settings.video.id | default: block.settings.video_url.id %} + {%- liquid + assign loop = '' + if block.settings.enable_video_looping + assign loop = '&loop=1&playlist=' | append: video_id + endif + -%} + {%- if block.settings.video_url.type == 'youtube' -%} + + {%- else -%} + + {%- endif -%} + {%- else -%} + {{ block.settings.video + | video_tag: + image_size: "1100x", + autoplay: true, + loop: block.settings.enable_video_looping, + controls: true, + muted: false, + class: 'xcp-multicolumn__video' + }} + {%- endif -%} +
    +
    +
    + {%- endif -%} + {%- if block.settings.image != blank and block.settings.video == nil and blocks.settings.video_url == nil -%} + {% if section.settings.image_ratio == 'adapt' or section.settings.image_ratio == 'circle' %} + {% assign spaced_image = true %} + {% endif %} + {%- assign img_mobile_class = "" -%} + {% if block.settings.video or block.settings.video_url %} + {%- assign img_mobile_class = "mobile" -%} + {% endif %} +
    +
    + {{ block.settings.image.alt }} +
    +
    + {%- endif -%} +
    + {%- if block.settings.title != blank -%} + {% if block.settings.bold_heading %} +

    {{ block.settings.title | escape }}

    + {% else %} +

    {{ block.settings.title | escape }}

    + {% endif %} + {%- endif -%} + {%- if block.settings.text != blank -%} +
    {{ block.settings.text }}
    + {%- endif -%} + {%- if block.settings.link_label != blank -%} + {{ block.settings.link_label | escape }} {% render 'icon-arrow' %} + {%- endif -%} +
    +
    +
    • + {%- endfor -%} +
+ + {%- if show_mobile_slider -%} +
+ +
+ 1 + + + {{ section.blocks.size }} +
+ +
+ {%- endif -%} + +
+ {%- if section.settings.button_label != blank -%} + + {{ section.settings.button_label | escape }} + + {%- endif -%} +
+
+
+ + + + +{% schema %} +{ + "name": "XCP Multicolumn", + "class": "section", + "tag": "section", + "settings": [ + { + "type": "text", + "id": "title", + "default": "Multicolumn", + "label": "t:sections.multicolumn.settings.title.label" + }, + { + "type": "select", + "id": "heading_size", + "options": [ + { + "value": "h2", + "label": "t:sections.all.heading_size.options__1.label" + }, + { + "value": "h1", + "label": "t:sections.all.heading_size.options__2.label" + }, + { + "value": "h0", + "label": "t:sections.all.heading_size.options__3.label" + } + ], + "default": "h1", + "label": "t:sections.all.heading_size.label" + }, + { + "type": "select", + "id": "heading_style", + "options": [ + { + "value": "normal", + "label": "Normal" + }, + { + "value": "thin", + "label": "Thin" + } + ], + "default": "normal", + "label": "Heading Style" + }, + { + "type": "select", + "id": "image_width", + "options": [ + { + "value": "third", + "label": "t:sections.multicolumn.settings.image_width.options__1.label" + }, + { + "value": "half", + "label": "t:sections.multicolumn.settings.image_width.options__2.label" + }, + { + "value": "full", + "label": "t:sections.multicolumn.settings.image_width.options__3.label" + } + ], + "default": "full", + "label": "t:sections.multicolumn.settings.image_width.label" + }, + { + "type": "select", + "id": "image_ratio", + "options": [ + { + "value": "adapt", + "label": "t:sections.multicolumn.settings.image_ratio.options__1.label" + }, + { + "value": "portrait", + "label": "t:sections.multicolumn.settings.image_ratio.options__2.label" + }, + { + "value": "square", + "label": "t:sections.multicolumn.settings.image_ratio.options__3.label" + }, + { + "value": "circle", + "label": "t:sections.multicolumn.settings.image_ratio.options__4.label" + } + ], + "default": "adapt", + "label": "t:sections.multicolumn.settings.image_ratio.label" + }, + { + "type": "range", + "id": "columns_desktop", + "min": 1, + "max": 6, + "step": 1, + "default": 3, + "label": "t:sections.multicolumn.settings.columns_desktop.label" + }, + { + "type": "select", + "id": "column_alignment", + "options": [ + { + "value": "left", + "label": "t:sections.multicolumn.settings.column_alignment.options__1.label" + }, + { + "value": "center", + "label": "t:sections.multicolumn.settings.column_alignment.options__2.label" + } + ], + "default": "left", + "label": "t:sections.multicolumn.settings.column_alignment.label" + }, + { + "type": "select", + "id": "background_style", + "options": [ + { + "value": "none", + "label": "t:sections.multicolumn.settings.background_style.options__1.label" + }, + { + "value": "primary", + "label": "t:sections.multicolumn.settings.background_style.options__2.label" + } + ], + "default": "primary", + "label": "t:sections.multicolumn.settings.background_style.label" + }, + { + "type": "text", + "id": "button_label", + "default": "Button label", + "label": "t:sections.multicolumn.settings.button_label.label" + }, + { + "type": "url", + "id": "button_link", + "label": "t:sections.multicolumn.settings.button_link.label" + }, + { + "type": "select", + "id": "color_scheme", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "background-1", + "label": "t:sections.all.colors.label" + }, + { + "type": "header", + "content": "t:sections.multicolumn.settings.header_mobile.content" + }, + { + "type": "select", + "id": "columns_mobile", + "options": [ + { + "value": "1", + "label": "t:sections.multicolumn.settings.columns_mobile.options__1.label" + }, + { + "value": "2", + "label": "t:sections.multicolumn.settings.columns_mobile.options__2.label" + } + ], + "default": "1", + "label": "t:sections.multicolumn.settings.columns_mobile.label" + }, + { + "type": "checkbox", + "id": "swipe_on_mobile", + "default": false, + "label": "t:sections.multicolumn.settings.swipe_on_mobile.label" + }, + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 36 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 36 + }, + { + "type": "range", + "id": "card_margin_right", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "label": "Card Margin Right", + "default": 30 + }, + { + "type": "select", + "id": "heading_color", + "options": [ + { + "value": "orange", + "label": "Orange" + }, + { + "value": "normal", + "label": "normal" + } + ], + "default": "orange", + "label": "Heading color" + }, + { + "type": "checkbox", + "id": "bold_heading", + "label": "Bold heading", + "default": true + }, + { + "type": "select", + "id": "button_position", + "options": [ + { + "value": "left", + "label": "Left" + }, + { + "value": "center", + "label": "Center" + }, + { + "value": "right", + "label": "Right" + } + ], + "default": "center", + "label": "Button position" + } + ], + "blocks": [ + { + "type": "column", + "name": "t:sections.multicolumn.blocks.column.name", + "settings": [ + { + "type": "video", + "id": "video", + "label": "Video" + }, + { + "type": "video_url", + "id": "video_url", + "label": "Video URL", + "accept": [ + "youtube", + "vimeo" + ] + }, + { + "type": "range", + "id": "video_left", + "min": 40, + "max": 270, + "step": 5, + "unit": "px", + "label": "Card Video left position", + "default": 70 + }, + { + "type": "image_picker", + "id": "image", + "label": "t:sections.multicolumn.blocks.column.settings.image.label" + }, + { + "type": "text", + "id": "title", + "default": "Column", + "label": "t:sections.multicolumn.blocks.column.settings.title.label" + }, + { + "type": "richtext", + "id": "text", + "default": "

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

", + "label": "t:sections.multicolumn.blocks.column.settings.text.label" + }, + { + "type": "text", + "id": "link_label", + "label": "t:sections.multicolumn.blocks.column.settings.link_label.label" + }, + { + "type": "url", + "id": "link", + "label": "t:sections.multicolumn.blocks.column.settings.link.label" + } + ] + } + ], + "presets": [ + { + "name": "XCP Multicolumn", + "blocks": [ + { + "type": "column" + }, + { + "type": "column" + }, + { + "type": "column" + } + ] + } + ] +} +{% endschema %} diff --git a/sections/xcp-navbar.liquid b/sections/xcp-navbar.liquid new file mode 100644 index 00000000000..8ddd6ba6ba6 --- /dev/null +++ b/sections/xcp-navbar.liquid @@ -0,0 +1,431 @@ +{{ 'xcp-navbar.css' | asset_url | stylesheet_tag }} +{{ 'buttons.css' | asset_url | stylesheet_tag }} +{% assign nav_items = section.blocks | where: 'type', 'xcp-nav-item' %} +{%- assign schedule_call_block = section.blocks | where: 'type', 'xcp-nav-schedule-a-call' | first -%} +{%- assign order_now_block = section.blocks | where: 'type', 'xcp-nav-order-now' | first -%} +{%- assign orange_btn_block = section.blocks | where: 'type', 'orange-button' | first -%} +{%- assign white_btn = section.blocks | where: 'type', 'xcp-white-btn' | first -%} + +{% style %} + .xcp-navbar__container .btn-primary { + color: black; + font-size: 12px; + padding: 4px 14px; + line-height: 2; + } + + .xcp-navbar__menu-item-dropdown--wrapper { + position: absolute; + width: 0; + } + + .xcp-navbar__container .hide { + display: none + } + .xcp-navbar__menu-item-dropdown { + position: relative; + top: 102px; + display: flex; + flex-direction: column; + background-color: white; + left: 111px; + border-radius: 10px; + padding-inline-start: 0; + padding-inline-end: 0; + min-width: 200px; + padding: 5px 0; + z-index: 105; + } + .xcp-navbar__menu-item--desktop { + cursor: pointer; + } + + .xcp-navbar__menu-item-dropdown a { + color: black; + padding: 4px 15px; + overflow: hidden; + font-size: 13px; + } + + .xcp-navbar__menu-item-dropdown--mobile { + display: flex; + flex-direction: column; + padding-inline-start: 0; + list-style: none; + } + + .xcp-navbar-item-dropdown__menu-button { + width: 30px; + height: 30px; + float-right + } + + + .xcp-navbar__menu-item-dropdown--mobile li { + color: inherit; + padding: 4px 15px; + } + + .xcp-navbar__menu-item-dropdown a:active { + color: white; + color: #0088cc; + text-decoration: none; + } + + .xcp-navbar__menu-item-dropdown a:hover { + color: white; + background-color: #7d55c7; + } + + .xcp-navbar__container .btn-primary { + border-radius: 2px; + font-weight: normal; + display: inline-flex; + align-items: center; + } + + .xcp-navbar__schedule-demo.btn-primary { + color: white; + border: 1px solid var(--gradient-base-accent-2); + background-color: rgb(var(--color-background)); + } + + .xcp-navbar__container .xcp-navbar__white-btn { + background-color: #eee; + } + + .xcp-navbar__container .xcp-navbar__white-btn:hover { + filter: brightness(85%); + color: black; + } +{% endstyle %} + +
+ + + + + + +
+ +
+
+
+ +
+
+
+ +{% comment %} +Calendly Widget +{% endcomment %} + + +{% comment %} +Custom Mobile Nav +{% endcomment %} + + +{% schema %} + { + "name": "XCPro Navbar", + "tag": "section", + "class": "section", + "settings": [], + "blocks": [ + { + "name": "Nav Item", + "type": "xcp-nav-item", + "settings": [ + { + "type": "text", + "id": "label", + "label": "Label" + }, { + "type": "url", + "id": "href", + "label": "HRef" + }, { + "type": "checkbox", + "id": "selected", + "label": "Selected", + "default": false + } + ] + }, + { + "name": "Nav Item Dropdown", + "type": "xcp-nav-item-dropdown", + "settings": [ + { + "type": "text", + "id": "label", + "label": "Label" + }, + { + "type": "text", + "id": "inner_label_1", + "label": "Inner Label 1" + }, + { + "type": "url", + "id": "inner_url_1", + "label": "Inner URL 1" + }, + { + "type": "text", + "id": "inner_label_2", + "label": "Inner Label 2" + }, { + "type": "url", + "id": "inner_url_2", + "label": "Inner URL 2" + }, { + "type": "text", + "id": "inner_label_3", + "label": "Inner Label 3" + }, { + "type": "url", + "id": "inner_url_3", + "label": "Inner URL 3" + }, { + "type": "text", + "id": "inner_label_4", + "label": "Inner Label 4" + }, { + "type": "url", + "id": "inner_url_4", + "label": "Inner URL 4" + } + ] + }, + { + "name": "White Button", + "type": "xcp-white-btn", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "label", + "label": "Label" + }, { + "type": "url", + "id": "url", + "label": "URL" + } + ] + }, + { + "name": "Schedule a call", + "type": "xcp-nav-schedule-a-call", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "label", + "label": "Label", + "default": "Schedule a Demo" + } + ] + }, { + "name": "Order Now", + "type": "xcp-nav-order-now", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "label", + "label": "Label", + "default": "Order Now" + } + ] + }, { + "name": "Orange Button", + "type": "orange-button", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "label", + "label": "Label", + "default": "Order Now" + }, { + "type": "url", + "id": "url", + "label": "URL" + } + + ] + } + ], + "presets": [ + { + "name": "XCPro Navbar" + } + ] + } +{% endschema %} diff --git a/sections/xcp-pick-your-pro.liquid b/sections/xcp-pick-your-pro.liquid new file mode 100644 index 00000000000..6015c58480d --- /dev/null +++ b/sections/xcp-pick-your-pro.liquid @@ -0,0 +1,172 @@ +{% style %} + +.section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; +} + +.xcp-pick-your-pro { + max-width: 1200px; + margin: 0 auto; + display: flex; + flex-wrap: wrap; +} + +.xcp-pick-your-pro .xcp-pick-your-pro__product-card { + width: 50%; + min-width: 600px; +} + +.xcp-pick-your-pro .xcp-pick-your-pro__product-card__title { + font-size: 24px; + text-align: center; +} + +.xcp-pick-your-pro .xcp-pick-your-pro__product-card__price { + font-size: 24px; + width: 100%; + text-align: center; + font-weight: bold; + color: var(--gradient-base-accent-2); +} + +.xcp-pick-your-pro__product-card__image { + margin: 0 auto; + display: block; + width: 90%; + height: auto; +} + +.xcp-pick-your-pro .btn { + width: 212px; + margin: 0 auto; + display: flex; + justify-content: center; +} + +.xcp-pick-your-pro .xcp-affirm { + font-size: 21px; +} +@media screen and (max-width: 1200px) { + .xcp-pick-your-pro .xcp-pick-your-pro__product-card { + width: 100%; + margin-bottom: 20px; + } +} + +@media screen and (max-width: 750px) { + .xcp-pick-your-pro .xcp-pick-your-pro__product-card { + min-width: unset; + width: 98% + margin: 0 1% + } + + .xcp-pick-your-pro__product-card__image { + } +} +{% endstyle %} +{% assign product_blocks = section.blocks | where: 'type', 'product-card' %} +
+
+ {% for block in product_blocks %} +
+ {{block.settings.image | image_url: width: 1000 | image_tag: class: 'xcp-pick-your-pro__product-card__image' }} +

{{block.settings.product.title}}

+ {% render 'xcp-affirm-overview', product: block.settings.product %} +

{{block.settings.product.price | money }}

+ {{block.settings.button_text}} +
+ {% endfor %} +
+
+ +{% schema %} +{ + "name": "XCP Pick Your Pro", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 36 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 36 + }, + { + "type": "select", + "id": "color_scheme", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "background-1", + "label": "t:sections.all.colors.label" + } + ], + "blocks": [ + { + "name": "Product Card", + "type": "product-card", + "settings": [ + { + "type": "product", + "label": "Product", + "id": "product" + }, + { + "type": "image_picker", + "label": "Image", + "id": "image" + }, + { + "type": "text", + "label": "Button text", + "id": "button_text" + }, + { + "type": "url", + "label": "Button link", + "id": "button_link" + } + ] + } + ], + "presets": [ + { + "name": "XCP Pick Your Pro" + } + ] +} +{% endschema %} diff --git a/sections/xcp-product.liquid b/sections/xcp-product.liquid new file mode 100644 index 00000000000..3508fc61086 --- /dev/null +++ b/sections/xcp-product.liquid @@ -0,0 +1,1877 @@ +
+ {{ 'section-main-product.css' | asset_url | stylesheet_tag }} + {{ 'component-accordion.css' | asset_url | stylesheet_tag }} + {{ 'component-price.css' | asset_url | stylesheet_tag }} + {{ 'component-rte.css' | asset_url | stylesheet_tag }} + {{ 'component-slider.css' | asset_url | stylesheet_tag }} + {{ 'component-rating.css' | asset_url | stylesheet_tag }} + {{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }} + {{ 'component-deferred-media.css' | asset_url | stylesheet_tag }} + + {%- style -%} + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; + } + + .xcp-product .price { + {% if section.settings.background_color == 'white' %} + color: black; + {% else %} + color: white; + {% endif %} + } + + .xcp-product .price__container { + font-size: 18pt; + } + + .xcp-product .price--on-sale .price-item--regular { + font-size: 18pt; + font-weight: normal; + {% if section.settings.background_color == 'white' %} + color: black; + {% else %} + color: white; + {% endif %} + } + + .xcp-product .price--on-sale { + color: var(--gradient-base-accent-2); + font-weight: bold; + } + + .xcp-product .price--on-sale .xcp-affirm { + font-weight: normal; + } + + {% if section.settings.background_color == 'white' %} + .xcp-affirm { + color: black; + } + .affirm-as-low-as .affirm-modal-trigger { + color: black !important; + } + + .__affirm-logo.__affirm-logo-white { + color: black; + } + {% endif %} + + @media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + } + + .desktop { + display: block; + } + + .mobile { + display: none; + } + + + .product-title { + margin-bottom: 0; + } + + .product__info-container .product__description { + margin: 0.5rem 0; + } + + .xcp-product { + max-width: 1200px; + margin: 0 auto; + } + + .xcp-product .product__media-gallery { + margin-left: 0; + width: 100%; + } + + .xcp-product .product__info-wrapper { + max-width: 50% !important; + } + + .xcp-price__price-diff { + color: black; + font-size: 18pt; + line-height: 24pt; + font-weight: 400; + letter-spacing: 0.06rem; + } + + .xcp-product .xc-three-column-text .xc-three-column-text__columns { + display: flex; + list-style: none; + justify-content: space-between; + } + + @media screen and (max-width: 750px) { + .product-form { + max-width: unset !important; + } + + .desktop { + display: none; + } + + .mobile { + display: block; + } + + .product__media-item { + width: 90% !important; + margin: 0 10% !important; + } + + .xcp-product .product__info-wrapper { + max-width: 100% !important; + } + } + {%- endstyle -%} + + + + {%- assign first_3d_model = product.media | where: "media_type", "model" | first -%} + {%- if first_3d_model -%} + {{ 'component-product-model.css' | asset_url | stylesheet_tag }} + + + {%- endif -%} + {% assign title = section.blocks | where: 'type', 'title' | first %} + {% assign price = section.blocks | where: 'type', 'xcp-price' | first %} + +
+ {%- if title -%} +
+

{{ product.title | escape }}

+ +

+ {{ product.title | escape }} +

+ +
+ {%- endif -%} + {% if price %} +
+
+ {%- render 'xcp-price', product: product, use_variant: true, show_badges: true, price_class: 'price--large', settings: block.settings -%} +
+
+ {%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%} + {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%} + + {% comment%} + hide "From $X/mo with Shop Pay" banner + {{ form | payment_terms }} + {% endcomment %} + {%- endform -%} +
+
+ {% endif %} + +
+ + + + +
    + {%- liquid + assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' + assign media_count = product.media.size + if section.settings.hide_variants and media_count > 1 + assign media_count = media_count | minus: variant_images.size | plus: 1 + endif + + if section.settings.media_size == 'large' + assign media_width = 0.65 + elsif section.settings.media_size == 'medium' + assign media_width = 0.55 + elsif section.settings.media_size == 'small' + assign media_width = 0.45 + endif + -%} + {%- if product.selected_or_first_available_variant.featured_media != null -%} + {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%} +
  • + {%- assign media_position = 1 -%} + {% render 'product-thumbnail', media: featured_media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: false %} +
    • + {%- endif -%} + {%- for media in product.media -%} + {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%} +
  • + {%- liquid + assign media_position = media_position | default: 0 | plus: 1 + assign lazy_load = false + if media_position > 1 + assign lazy_load = true + endif + render 'product-thumbnail', media: media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: lazy_load + -%} +
    • + {%- endunless -%} + {%- endfor -%} +
+
+ +
+ 1 + + + {{ media_count }} +
+ +
+ + {%- if first_3d_model -%} + + {%- endif -%} + {%- if media_count > 1 and section.settings.gallery_layout != 'stacked' or section.settings.mobile_thumbnails == 'show' -%} + + +
    + {%- if featured_media != null -%} + {%- liquid + capture media_index + if featured_media.media_type == 'model' + increment model_index + elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' + increment video_index + elsif featured_media.media_type == 'image' + increment image_index + endif + endcapture + assign media_index = media_index | plus: 1 + -%} +
  • + +
    • + {%- endif -%} + {%- for media in product.media -%} + {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%} + {%- liquid + capture media_index + if media.media_type == 'model' + increment model_index + elsif media.media_type == 'video' or media.media_type == 'external_video' + increment video_index + elsif media.media_type == 'image' + increment image_index + endif + endcapture + assign media_index = media_index | plus: 1 + -%} +
  • + {%- if media.media_type == 'model' -%} + + {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%} + + {%- endif -%} + +
    • + {%- endunless -%} + {%- endfor -%} +
+ + + {%- endif -%} + +
+
+
+ {%- assign product_form_id = 'product-form-' | append: section.id -%} + + {%- for block in section.blocks -%} + {%- case block.type -%} + {%- when '@app' -%} + {% render block %} + {%- when 'text' -%} +

+ {{- block.settings.text -}} +

+ {%- when 'title' -%} +
+

{{ product.title | escape }}

+ +

+ {{ product.title | escape }} +

+ +
+ {%- when 'price' -%} +
+
+ {%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%} +
+ {%- if shop.taxes_included or shop.shipping_policy.body != blank -%} +
+ {%- if shop.taxes_included -%} + {{ 'products.product.include_taxes' | t }} + {%- endif -%} + {%- if shop.shipping_policy.body != blank -%} + {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }} + {%- endif -%} +
+ {%- endif -%} +
+ {%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%} + {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%} + + {% comment%} + hide "From $X/mo with Shop Pay" banner + {{ form | payment_terms }} + {% endcomment %} + {%- endform -%} +
+ {%- when 'xcp-price' -%} +
+
+
+ {%- render 'xcp-price', product: product, use_variant: true, show_badges: true, price_class: 'price--large', settings: block.settings -%} +
+
+ {%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%} + {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%} + + {% comment%} + hide "From $X/mo with Shop Pay" banner + {{ form | payment_terms }} + {% endcomment %} + {%- endform -%} +
+
+ {%- when 'description' -%} + {%- if product.description != blank -%} +
+ {{ product.description }} +
+ {%- endif -%} + {%- when 'custom_liquid' -%} + {{ block.settings.custom_liquid }} + {%- when 'collapsible_tab' -%} +
+
+ +
+ {% render 'icon-accordion', icon: block.settings.icon %} +

+ {{ block.settings.heading | default: block.settings.page.title }} +

+
+ {% render 'icon-caret' %} + +
+ {{ block.settings.content }} + {{ block.settings.page.content }} +
+
+
+ {%- when 'quantity_selector' -%} +
+ + + + + + + +
+ {%- when 'popup' -%} + + + + + {{- block.settings.text -}} + + {%- when 'share' -%} + + + {%- when 'variant_picker' -%} + {%- unless product.has_only_default_variant -%} + {%- if block.settings.picker_type == 'button' -%} + + {%- for option in product.options_with_values -%} +
+ {{ option.name }} + {%- for value in option.values -%} + + + {%- endfor -%} +
+ {%- endfor -%} + + + {%- else -%} + + {%- for option in product.options_with_values -%} +
+ +
+ + {% render 'icon-caret' %} +
+
+ {%- endfor -%} + + + + {%- endif -%} + {%- endunless -%} + + + + {%- when 'buy_buttons' -%} +
+ + + + {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} + +
+ + {%- if block.settings.show_dynamic_checkout -%} + {{ form | payment_button }} + {%- endif -%} +
+ {%- endform -%} + + + {{ 'component-pickup-availability.css' | asset_url | stylesheet_tag }} + + {%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities | where: 'pick_up_enabled', true -%} + + 0 %} + available + {% endif %} + data-root-url="{{ routes.root_url }}" + data-variant-id="{{ product.selected_or_first_available_variant.id }}" + data-has-only-default-variant="{{ product.has_only_default_variant }}" + > + + +
+
+ + {%- when 'rating' -%} + {%- if product.metafields.reviews.rating.value != blank -%} + {% liquid + assign rating_decimal = 0 + assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1 + if decimal >= 0.3 and decimal <= 0.7 + assign rating_decimal = 0.5 + elsif decimal > 0.7 + assign rating_decimal = 1 + endif + %} + +

+ +

+

+ + +

+ {%- endif -%} + {%- when "xcp-rich-text" -%} + {{block.settings.content}} + {%- when "xcp-size-select" -%} + {% render 'xcp-size-select', settings: block.settings %} + {%- when "xcp-clyde-cta" -%} + {% render 'xcp-clyde-cta' %} + {%- when "xc-three-column-text" -%} + {% render 'xc-three-column-text', settings: block.settings %} + {%- endcase -%} + {%- endfor -%} + + {{ 'products.product.view_full_details' | t }} + {% render 'icon-arrow' %} + +
+
+ {%- if section.settings.media_position == 'right' -%} +
+ + + + +
    + {%- assign media_position = 0 -%} + {%- if product.selected_or_first_available_variant.featured_media != null -%} + {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%} +
  • + {%- assign media_position = 1 -%} + {% render 'product-thumbnail', media: featured_media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: false %} +
    • + {%- endif -%} + {%- for media in product.media -%} + {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%} +
  • + {%- liquid + assign media_position = media_position | default: 0 | plus: 1 + assign lazy_load = false + if media_position > 1 + assign lazy_load = true + endif + render 'product-thumbnail', media: media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: lazy_load + -%} +
    • + {%- endunless -%} + {%- endfor -%} +
+ + {%- if first_3d_model -%} + + {%- endif -%} + {%- if media_count > 1 and section.settings.gallery_layout != 'stacked' or section.settings.mobile_thumbnails == 'show' -%} + + +
    + {%- if featured_media != null -%} + {%- liquid + capture media_index + if featured_media.media_type == 'model' + increment model_index_right + elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' + increment video_index_right + elsif featured_media.media_type == 'image' + increment image_index_right + endif + endcapture + assign media_index = media_index | plus: 1 + -%} +
  • + +
    • + {%- endif -%} + {%- for media in product.media -%} + {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%} + {%- liquid + capture media_index + if media.media_type == 'model' + increment model_index_right + elsif media.media_type == 'video' or media.media_type == 'external_video' + increment video_index_right + elsif media.media_type == 'image' + increment image_index_right + endif + endcapture + assign media_index = media_index | plus: 1 + -%} +
  • + {%- if media.media_type == 'model' -%} + + {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%} + + {%- endif -%} + +
    • + {%- endunless -%} + {%- endfor -%} +
+ + + {%- endif -%} + +
+ {%- endif -%} +
+ + + + + + {% assign popups = section.blocks | where: "type", "popup" %} + {%- for block in popups -%} + + + + {%- endfor -%} + + {%- if product.media.size > 0 -%} + + + {%- endif -%} + + {%- if first_3d_model -%} + + + {%- endif -%} + + + + {%- liquid + if product.selected_or_first_available_variant.featured_media + assign seo_media = product.selected_or_first_available_variant.featured_media + else + assign seo_media = product.featured_media + endif + -%} + + +
+ +{% schema %} +{ + "name": "XCPro Product Info", + "tag": "section", + "class": "section", + "blocks": [ + { + "type": "@app" + }, + { + "type": "text", + "name": "t:sections.main-product.blocks.text.name", + "settings": [ + { + "type": "text", + "id": "text", + "default": "Text block", + "label": "t:sections.main-product.blocks.text.settings.text.label" + }, + { + "type": "select", + "id": "text_style", + "options": [ + { + "value": "body", + "label": "t:sections.main-product.blocks.text.settings.text_style.options__1.label" + }, + { + "value": "subtitle", + "label": "t:sections.main-product.blocks.text.settings.text_style.options__2.label" + }, + { + "value": "uppercase", + "label": "t:sections.main-product.blocks.text.settings.text_style.options__3.label" + } + ], + "default": "body", + "label": "t:sections.main-product.blocks.text.settings.text_style.label" + } + ] + }, + { + "type": "title", + "name": "t:sections.main-product.blocks.title.name", + "limit": 1 + }, + { + "type": "price", + "name": "t:sections.main-product.blocks.price.name", + "limit": 1 + }, + { + "type": "quantity_selector", + "name": "t:sections.main-product.blocks.quantity_selector.name", + "limit": 1 + }, + { + "type": "variant_picker", + "name": "t:sections.main-product.blocks.variant_picker.name", + "limit": 1, + "settings": [ + { + "type": "select", + "id": "picker_type", + "options": [ + { + "value": "dropdown", + "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__1.label" + }, + { + "value": "button", + "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__2.label" + } + ], + "default": "button", + "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.label" + } + ] + }, + { + "type": "buy_buttons", + "name": "t:sections.main-product.blocks.buy_buttons.name", + "limit": 1, + "settings": [ + { + "type": "checkbox", + "id": "show_dynamic_checkout", + "default": true, + "label": "t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.label", + "info": "t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.info" + } + ] + }, + { + "type": "description", + "name": "t:sections.main-product.blocks.description.name", + "limit": 1 + }, + { + "type": "xcp-affirm", + "name": "XCPro Affirm" + }, + { + "type": "xcp-price", + "name": "XCPro Price", + "settings": [ + { + "id": "currency_code_enabled", + "type": "checkbox", + "label": "Currency Code enabled", + "default": false + }, + { + "id": "price_color", + "type": "color", + "label": "Price Color", + "default": "#FFB762" + }, + { + "id": "affirm_text", + "type": "richtext", + "label": "Affirm Text" + } + ] + }, + { + "type": "share", + "name": "t:sections.main-product.blocks.share.name", + "limit": 1, + "settings": [ + { + "type": "text", + "id": "share_label", + "label": "t:sections.main-product.blocks.share.settings.text.label", + "default": "Share" + }, + { + "type": "paragraph", + "content": "t:sections.main-product.blocks.share.settings.featured_image_info.content" + }, + { + "type": "paragraph", + "content": "t:sections.main-product.blocks.share.settings.title_info.content" + } + ] + }, + { + "type": "custom_liquid", + "name": "t:sections.main-product.blocks.custom_liquid.name", + "settings": [ + { + "type": "liquid", + "id": "custom_liquid", + "label": "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.label", + "info": "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.info" + } + ] + }, + { + "type": "collapsible_tab", + "name": "t:sections.main-product.blocks.collapsible_tab.name", + "settings": [ + { + "type": "text", + "id": "heading", + "default": "Collapsible row", + "info": "t:sections.main-product.blocks.collapsible_tab.settings.heading.info", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.heading.label" + }, + { + "type": "select", + "id": "icon", + "options": [ + { + "value": "none", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__1.label" + }, + { + "value": "apple", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__2.label" + }, + { + "value": "banana", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__3.label" + }, + { + "value": "bottle", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__4.label" + }, + { + "value": "box", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__5.label" + }, + { + "value": "carrot", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__6.label" + }, + { + "value": "chat_bubble", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__7.label" + }, + { + "value": "check_mark", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__8.label" + }, + { + "value": "clipboard", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__9.label" + }, + { + "value": "dairy", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__10.label" + }, + { + "value": "dairy_free", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__11.label" + }, + { + "value": "dryer", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__12.label" + }, + { + "value": "eye", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__13.label" + }, + { + "value": "fire", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__14.label" + }, + { + "value": "gluten_free", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__15.label" + }, + { + "value": "heart", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__16.label" + }, + { + "value": "iron", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__17.label" + }, + { + "value": "leaf", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__18.label" + }, + { + "value": "leather", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__19.label" + }, + { + "value": "lightning_bolt", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__20.label" + }, + { + "value": "lipstick", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__21.label" + }, + { + "value": "lock", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__22.label" + }, + { + "value": "map_pin", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__23.label" + }, + { + "value": "nut_free", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__24.label" + }, + { + "value": "pants", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__25.label" + }, + { + "value": "paw_print", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__26.label" + }, + { + "value": "pepper", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__27.label" + }, + { + "value": "perfume", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__28.label" + }, + { + "value": "plane", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__29.label" + }, + { + "value": "plant", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__30.label" + }, + { + "value": "price_tag", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__31.label" + }, + { + "value": "question_mark", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__32.label" + }, + { + "value": "recycle", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__33.label" + }, + { + "value": "return", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__34.label" + }, + { + "value": "ruler", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__35.label" + }, + { + "value": "serving_dish", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__36.label" + }, + { + "value": "shirt", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__37.label" + }, + { + "value": "shoe", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__38.label" + }, + { + "value": "silhouette", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__39.label" + }, + { + "value": "snowflake", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__40.label" + }, + { + "value": "star", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__41.label" + }, + { + "value": "stopwatch", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__42.label" + }, + { + "value": "truck", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label" + }, + { + "value": "washing", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__44.label" + } + ], + "default": "check_mark", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.label" + }, + { + "type": "richtext", + "id": "content", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.content.label" + }, + { + "type": "page", + "id": "page", + "label": "t:sections.main-product.blocks.collapsible_tab.settings.page.label" + } + ] + }, + { + "type": "xcp-rich-text", + "name": "XCP Rich Text", + "settings": [ + { + "type": "richtext", + "id": "content", + "label": "Content" + } + ] + }, + { + "type": "popup", + "name": "t:sections.main-product.blocks.popup.name", + "settings": [ + { + "type": "text", + "id": "text", + "default": "Pop-up link text", + "label": "t:sections.main-product.blocks.popup.settings.link_label.label" + }, + { + "id": "page", + "type": "page", + "label": "t:sections.main-product.blocks.popup.settings.page.label" + } + ] + }, + { + "type": "rating", + "name": "t:sections.main-product.blocks.rating.name", + "limit": 1, + "settings": [ + { + "type": "paragraph", + "content": "t:sections.main-product.blocks.rating.settings.paragraph.content" + } + ] + }, + { + "type": "xcp-size-select", + "name": "XCPro size select", + "settings": [ + { + "type": "text", + "id": "header", + "label": "header", + "default": "Size:" + }, + { + "type": "text", + "id": "label_4x4", + "label": "Label 4x4", + "default": "4x4" + }, + { + "type": "url", + "id": "link_4x4_page", + "label": "Link 4x4 Page" + }, + { + "type": "checkbox", + "id": "selected_4x4", + "label": "Selected 4x4" + }, + { + "type": "text", + "id": "label_4x2", + "label": "Label 4x2", + "default": "4x2" + }, + { + "type": "url", + "id": "link_4x2_page", + "label": "Link 4x2 Page" + }, + { + "type": "checkbox", + "id": "selected_4x2", + "label": "Selected 4x2" + } + ] + }, + { + "type": "xcp-clyde-cta", + "name": "XCPro Clyde CTA", + "settings": [] + }, + { + "type": "xc-three-column-text", + "name": "XC Three Column text", + "settings": [ + { + "type": "text", + "id": "heading", + "label": "heading" + }, + { + "type": "range", + "id": "max_width", + "label": "Max Width", + "min": 0, + "max": 100, + "step": 1, + "unit": "%", + "default": 73 + }, + { + "type": "richtext", + "id": "text1", + "label": "Text 1" + }, + { + "type": "richtext", + "id": "text2", + "label": "Text 2" + }, + { + "type": "richtext", + "id": "text3", + "label": "Text 3" + } + ] + } + ], + "settings": [ + { + "type": "checkbox", + "id": "enable_sticky_info", + "default": true, + "label": "t:sections.main-product.settings.enable_sticky_info.label" + }, + { + "type": "header", + "content": "t:sections.main-product.settings.header.content", + "info": "t:sections.main-product.settings.header.info" + }, + { + "type": "select", + "id": "media_position", + "options": [ + { + "value": "left", + "label": "t:sections.main-product.settings.media_position.options__1.label" + }, + { + "value": "right", + "label": "t:sections.main-product.settings.media_position.options__2.label" + } + ], + "default": "left", + "label": "t:sections.main-product.settings.media_position.label", + "info": "t:sections.main-product.settings.media_position.info" + }, + { + "type": "select", + "id": "gallery_layout", + "options": [ + { + "value": "stacked", + "label": "t:sections.main-product.settings.gallery_layout.options__1.label" + }, + { + "value": "thumbnail", + "label": "t:sections.main-product.settings.gallery_layout.options__2.label" + }, + { + "value": "thumbnail_slider", + "label": "t:sections.main-product.settings.gallery_layout.options__3.label" + } + ], + "default": "stacked", + "label": "t:sections.main-product.settings.gallery_layout.label" + }, + { + "type": "select", + "id": "media_size", + "options": [ + { + "value": "small", + "label": "t:sections.main-product.settings.media_size.options__1.label" + }, + { + "value": "medium", + "label": "t:sections.main-product.settings.media_size.options__2.label" + }, + { + "value": "large", + "label": "t:sections.main-product.settings.media_size.options__3.label" + } + ], + "default": "large", + "label": "t:sections.main-product.settings.media_size.label", + "info": "t:sections.main-product.settings.media_size.info" + }, + { + "type": "select", + "id": "mobile_thumbnails", + "options": [ + { + "value": "show", + "label": "t:sections.main-product.settings.mobile_thumbnails.options__1.label" + }, + { + "value": "hide", + "label": "t:sections.main-product.settings.mobile_thumbnails.options__2.label" + } + ], + "default": "hide", + "label": "t:sections.main-product.settings.mobile_thumbnails.label" + }, + { + "type": "checkbox", + "id": "hide_variants", + "default": false, + "label": "t:sections.main-product.settings.hide_variants.label" + }, + { + "type": "checkbox", + "id": "enable_video_looping", + "default": false, + "label": "t:sections.main-product.settings.enable_video_looping.label" + }, + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 36 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 36 + }, + { + "type": "select", + "id": "background_color", + "options": [ + { + "value": "white", + "label": "White" + }, + { + "value": "dark", + "label": "Dark" + } + ], + "default": "dark", + "label": "t:sections.main-product.settings.mobile_thumbnails.label" + } + ] +} +{% endschema %} diff --git a/sections/xcp-rich-text.liquid b/sections/xcp-rich-text.liquid new file mode 100644 index 00000000000..cd58a3f22f7 --- /dev/null +++ b/sections/xcp-rich-text.liquid @@ -0,0 +1,382 @@ + + + + + + +{%- style -%} + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; + } + + @media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + } + + .xcp-rich-text-section-{{section.id}} .xcp-rich-text__heading strong { + {% if section.settings.heading_bold_color == "accent-2" %} + color: var(--gradient-base-accent-2); + {% endif %} + } + + .xcp-rich-text .rich-text__blocks { + max-width: unset; + } + + .xcp-rich-text__heading { + width: 100%; + } + + .xcp-rich-text-section-{{section.id}} .xcp-rich-text__heading--figma-font-size { + font-size: 32px; + font-family: "AlrightSans-Light"; + } + + .xcp-rich-text-section-{{section.id}} .xcp-rich-text__heading--figma-font-size strong{ + font-family: var(--font-heading-family); + } +{%- endstyle -%} + +
+ {% if section.settings.show_top_section_sep %} + {% render "xcp-section-sep" %} + {% endif %} +
+
+
+ {%- for block in section.blocks -%} + {%- case block.type -%} + {%- when 'heading' -%} +

+ {{ block.settings.heading | replace: 'p>', 'span>' }} +

+ {%- when 'caption' -%} +

+ {{ block.settings.caption | escape }} +

+ {%- when 'text' -%} +
+ {{ block.settings.text }} +
+ {%- when 'button' -%} +
+ {%- if block.settings.button_label != blank -%} + {{ block.settings.button_label | escape }} + {%- endif -%} + {%- if block.settings.button_label_2 != blank -%} + {{ block.settings.button_label_2 | escape }} + {%- endif -%} +
+ {%- endcase -%} + {%- endfor -%} +
+
+
+ {% if section.settings.show_bottom_section_sep %} + {% render 'xcp-section-sep' %} + {% endif %} +
+ +{% schema %} +{ + "name": "XCP Rich Text", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "select", + "id": "desktop_content_position", + "options": [ + { + "value": "left", + "label": "t:sections.rich-text.settings.desktop_content_position.options__1.label" + }, + { + "value": "center", + "label": "t:sections.rich-text.settings.desktop_content_position.options__2.label" + }, + { + "value": "right", + "label": "t:sections.rich-text.settings.desktop_content_position.options__3.label" + } + ], + "default": "center", + "label": "t:sections.rich-text.settings.desktop_content_position.label", + "info": "t:sections.rich-text.settings.desktop_content_position.info" + }, + { + "type": "select", + "id": "content_alignment", + "options": [ + { + "value": "left", + "label": "t:sections.rich-text.settings.content_alignment.options__1.label" + }, + { + "value": "center", + "label": "t:sections.rich-text.settings.content_alignment.options__2.label" + }, + { + "value": "right", + "label": "t:sections.rich-text.settings.content_alignment.options__3.label" + } + ], + "default": "center", + "label": "t:sections.rich-text.settings.content_alignment.label" + }, + { + "type": "select", + "id": "color_scheme", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "background-1", + "label": "t:sections.all.colors.label" + }, + { + "type": "checkbox", + "id": "full_width", + "default": true, + "label": "t:sections.rich-text.settings.full_width.label" + }, + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 40 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 52 + }, + { + "type": "select", + "id": "heading_bold_color", + "options": [ + { + "value": "normal", + "label": "Normal" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + } + ], + "default": "normal", + "label": "Heading bold color" + }, + { + "type": "checkbox", + "id": "show_top_section_sep", + "label": "Show top section separator", + "default": false + }, + { + "type": "checkbox", + "id": "show_bottom_section_sep", + "label": "Show bottom section separator", + "default": false + } + ], + "blocks": [ + { + "type": "heading", + "name": "t:sections.rich-text.blocks.heading.name", + "limit": 3, + "settings": [ + { + "type": "richtext", + "id": "heading", + "default": "

Talk about your brand

", + "label": "t:sections.rich-text.blocks.heading.settings.heading.label" + }, + { + "type": "select", + "id": "heading_size", + "options": [ + { + "value": "xcp-rich-text__heading--figma-font-size", + "label": "Figma font size" + }, + { + "value": "h2", + "label": "t:sections.all.heading_size.options__1.label" + }, + { + "value": "h1", + "label": "t:sections.all.heading_size.options__2.label" + }, + { + "value": "h0", + "label": "t:sections.all.heading_size.options__3.label" + }, + { + "value": "hxl", + "label": "t:sections.all.heading_size.options__4.label" + } + ], + "default": "xcp-rich-text__heading--figma-font-size", + "label": "t:sections.all.heading_size.label" + } + ] + }, + { + "type": "caption", + "name": "t:sections.rich-text.blocks.caption.name", + "limit": 3, + "settings": [ + { + "type": "text", + "id": "caption", + "default": "Add a tagline", + "label": "t:sections.rich-text.blocks.caption.settings.text.label" + }, + { + "type": "select", + "id": "text_style", + "options": [ + { + "value": "subtitle", + "label": "t:sections.rich-text.blocks.caption.settings.text_style.options__1.label" + }, + { + "value": "caption-with-letter-spacing", + "label": "t:sections.rich-text.blocks.caption.settings.text_style.options__2.label" + } + ], + "default": "caption-with-letter-spacing", + "label": "t:sections.rich-text.blocks.caption.settings.text_style.label" + }, + { + "type": "select", + "id": "text_size", + "options": [ + { + "value": "small", + "label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__1.label" + }, + { + "value": "medium", + "label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__2.label" + }, + { + "value": "large", + "label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__3.label" + } + ], + "default": "medium", + "label": "t:sections.rich-text.blocks.caption.settings.caption_size.label" + } + ] + }, + { + "type": "text", + "name": "t:sections.rich-text.blocks.text.name", + "limit": 3, + "settings": [ + { + "type": "richtext", + "id": "text", + "default": "

Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.

", + "label": "t:sections.rich-text.blocks.text.settings.text.label" + } + ] + }, + { + "type": "button", + "name": "t:sections.rich-text.blocks.buttons.name", + "limit": 2, + "settings": [ + { + "type": "text", + "id": "button_label", + "default": "Button label", + "label": "t:sections.rich-text.blocks.buttons.settings.button_label_1.label", + "info": "t:sections.rich-text.blocks.buttons.settings.button_label_1.info" + }, + { + "type": "url", + "id": "button_link", + "label": "t:sections.rich-text.blocks.buttons.settings.button_link_1.label" + }, + { + "type": "checkbox", + "id": "button_style_secondary", + "default": false, + "label": "t:sections.rich-text.blocks.buttons.settings.button_style_secondary_1.label" + }, + { + "type": "text", + "id": "button_label_2", + "label": "t:sections.rich-text.blocks.buttons.settings.button_label_2.label", + "info": "t:sections.rich-text.blocks.buttons.settings.button_label_2.info" + }, + { + "type": "url", + "id": "button_link_2", + "label": "t:sections.rich-text.blocks.buttons.settings.button_link_2.label" + }, + { + "type": "checkbox", + "id": "button_style_secondary_2", + "default": false, + "label": "t:sections.rich-text.blocks.buttons.settings.button_style_secondary_2.label" + } + ] + } + ], + "presets": [ + { + "name": "XCP Rich Text", + "blocks": [ + { + "type": "heading" + }, + { + "type": "text" + }, + { + "type": "button" + } + ] + } + ] +} +{% endschema %} diff --git a/sections/xcp-section-separator.liquid b/sections/xcp-section-separator.liquid new file mode 100644 index 00000000000..13053c269eb --- /dev/null +++ b/sections/xcp-section-separator.liquid @@ -0,0 +1,21 @@ +
+{% schema %} +{ + "name": "XCP Section Sep", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "color", + "id": "separator_color", + "label": "Separator color", + "default": "#FFB256" + } + ], + "presets": [ + { + "name": "XCPro Section Sep" + } + ] +} +{% endschema %} diff --git a/sections/xcp-spec-deco-btn.liquid b/sections/xcp-spec-deco-btn.liquid new file mode 100644 index 00000000000..ea848255e43 --- /dev/null +++ b/sections/xcp-spec-deco-btn.liquid @@ -0,0 +1,128 @@ +{% style %} +.xcp-spec-deco-btn .container { + max-width: 1200px; + margin: 0 auto; +} + +.xcp-spec-deco-btn.section-{{section.id}} .xcp-spec-deco-btn__inner { + padding: {{section.settings.inner_padding}}px; + background-color: {{section.settings.inner_background_color}}; +} + +.xcp-spec-deco-btn__content-wrapper { + position: relative; +} + +.xcp-spec-deco-btn__content-wrapper--abs { + position: absolute; + width: 100%; + margin-top: 60px; +} + +.xcp-spec-deco-btn__content__text { + text-align: center; + font-size: 32px; + margin-bottom: 20px; + color: white; + line-height: 32px; +} + +.xcp-spec-deco-btn__btn { + width: 182px; + text-align: center; + margin: 0 auto; + display: block; + padding: 12px 30px; +} + +.xcp-spec-deco-btn__image { + width: 100%; + max-height: 220px; + object-fit: cover; +} + +@media screen and (max-width: 750px) { + .xcp-spec-deco-btn__content-wrapper--abs { + margin-top: 20px; + } +} +{% endstyle %} +
+
+
+
+
+
+ {{section.settings.text}} +
+ {{section.settings.btn_label}} +
+
+ {% if section.settings.image %} +
+ {{section.settings.image | image_url: width: 2000 | image_tag: class: "xcp-spec-deco-btn__image"}} +
+ {% endif %} +
+
+
+{% schema %} +{ + "name": "XCP Spec Decorated Button", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "range", + "id": "section_padding", + "label": "Section Padding", + "min": 0, + "max": 100, + "unit": "px", + "step": 1, + "default": 30 + }, + { + "type": "range", + "id": "inner_padding", + "label": "Inner Padding", + "min": 0, + "max": 100, + "unit": "px", + "step": 1, + "default": 30 + }, + { + "type": "color", + "id": "inner_background_color", + "label": "Inner Background Color", + "default": "#333636" + }, + { + "type": "image_picker", + "id": "image", + "label": "Image" + }, + { + "type": "text", + "id": "text", + "label": "Text" + }, + { + "type": "text", + "id": "btn_label", + "label": "Button Label" + }, + { + "type": "url", + "id": "btn_url", + "label": "Button URL" + } + ], + "presets": [ + { + "name": "XCP Spec Decorated Button" + } + ] +} +{% endschema %} diff --git a/sections/xcp-spec-small-text.liquid b/sections/xcp-spec-small-text.liquid new file mode 100644 index 00000000000..023569c9e66 --- /dev/null +++ b/sections/xcp-spec-small-text.liquid @@ -0,0 +1,74 @@ +{% style %} + +.xcp-spec-small-text .container { + max-width: 1200px; + margin: 0 auto; +} + +.xcp-spec-small-text.section-{{section.id}} .xcp-xcp-small-text__content { + text-align: {{section.settings.text_align}}; + padding: {{section.settings.padding}}px; +} + + +{% endstyle %} +
+
+
+ {{section.settings.content}} +
+
+
+{% schema %} +{ + "name": "XCP Spec Small Text", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "richtext", + "id": "content", + "label": "Content" + }, + { + "type": "select", + "id": "text_align", + "options": [ + { + "value": "left", + "label": "left" + }, + { + "value": "center", + "label": "Center" + }, + { + "value": "right", + "label": "Right" + }, + { + "value": "justify", + "label": "Justify" + } + ], + "default": "left", + "label": "Text Allignment" + }, + { + "type": "range", + "id": "padding", + "label": "Padding", + "min": 0, + "max": 100, + "unit": "px", + "step": 1, + "default": 40 + } + ], + "presets": [ + { + "name": "XCPro Spec Small Text" + } + ] +} +{% endschema %} diff --git a/sections/xcp-spec.liquid b/sections/xcp-spec.liquid new file mode 100644 index 00000000000..13da3570e2a --- /dev/null +++ b/sections/xcp-spec.liquid @@ -0,0 +1,231 @@ +{% style %} +.xcp-spec .container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.xcp-spec-section-{{section.id}} .inv-hr { + width: 100%; + background: {{section.settings.separator_color}}; +} + +.xcp-spec .xcp-spec__flex-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.xcp-spec .xcp-spec__flex-wrapper h2 { + font-size: 35px; + font-weight: bold; +} + +.xcp-spec-section-{{section.id}} .xcp-spec__header-wrapper { + width: {{section.settings.header_wrapper_width}}%; +} + +.xcp-spec__content-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: start; +} + +.xcp-spec-section-{{section.id}} .xcp-spec__content-wrapper { + width: calc(100% - {{section.settings.header_wrapper_width}}%); +} + +.xcp-spec__card { + max-width: 50%; + margin-right: 9%; + font-size: 18px; +} + +.xcp-spec .xcp-spec__card__image { + width: 300px; + height: 300px; + margin: 0 auto; + display: block; +} + +.xcp-spec__header-{{section.id}} { + padding-top: {{section.settings.header_top_padding}}px; +} + +.xcp-spec__flex-wrapper--section-{{section.id}} { + padding-top: {{section.settings.section_top_padding}}px; + padding-bottom: {{section.settings.section_bottom_padding}}px; +} + +@media screen and (max-width: 1200px) { + .xcp-spec__flex-wrapper { + flex-direction: column; + } + .xcp-spec__header-{{section.id}} { + padding-top: 20px; + } + + .xcp-spec-section-{{section.id}} .xcp-spec__header-wrapper { + width: 100%; + text-align: center; + } + + .xcp-spec-section-{{section.id}} .xcp-spec__content-wrapper { + width: 100%; + } + + .xcp-spec__card { + width: 100%; + max-width: unset !important; + margin-right: 0; + margin: 0 auto; + } +} + +{% endstyle %} +
+
+ {% if section.settings.show_top_separator %} +
+ {% endif %} +
+
+

{{section.settings.header}}

+
+
+ {% for block in section.blocks %} +
+ {% if block.settings.image %} + + {% endif %} + {% if block.settings.content %} +
+ {{block.settings.content}} +
+ {% endif %} +
+ {% endfor %} +
+
+ {% if section.settings.show_bottom_separator %} +
+ {% endif %} +
+
+{% schema %} +{ + "name": "XCP Spec", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "color", + "id": "background_color", + "label": "Background color", + "default": "#FFB256" + }, + { + "type": "color", + "id": "separator_color", + "label": "Separator color", + "default": "#a2a2a2" + }, + { + "type": "color", + "id": "color", + "label": "Color", + "default": "#FFB256" + }, + { + "type": "checkbox", + "id": "show_top_separator", + "label": "Show Top Separator", + "default": false + }, + { + "type": "checkbox", + "id": "show_bottom_separator", + "label": "Show Bottom Separator", + "default": false + }, + { + "type": "html", + "id": "header", + "label": "Header" + }, + { + "type": "range", + "id": "header_top_padding", + "label": "Header Top Padding", + "min": 0, + "max": 370, + "unit": "px", + "step": 5, + "default": 180 + }, + { + "type": "range", + "id": "section_top_padding", + "label": "Section Top Padding", + "min": 0, + "max": 500, + "unit": "px", + "step": 5, + "default": 80 + }, + { + "type": "range", + "id": "section_bottom_padding", + "label": "Section Bottom Padding", + "min": 0, + "max": 500, + "unit": "px", + "step": 5, + "default": 80 + }, + { + "type": "range", + "id": "header_wrapper_width", + "label": "Header Wrapper Width", + "min": 0, + "max": 100, + "unit": "%", + "step": 1, + "default": 35 + } + ], + "blocks": [ + { + "type": "card", + "name": "Card", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Image" + }, + { + "type": "richtext", + "id": "content", + "label": "Content" + }, + { + "type": "range", + "id": "image_width", + "label": "Image Width", + "min": 0, + "max": 1000, + "unit": "px", + "step": 10, + "default": 300 + } + ] + } + ], + "presets": [ + { + "name": "XCPro Spec" + } + ] +} +{% endschema %} diff --git a/sections/xcp-text-carousel.liquid b/sections/xcp-text-carousel.liquid new file mode 100644 index 00000000000..a05bd8d2703 --- /dev/null +++ b/sections/xcp-text-carousel.liquid @@ -0,0 +1,319 @@ +{% style %} +.section-{{ section.id }}--padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; +} + +@media screen and (min-width: 750px) { + .section-{{ section.id }}--padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } +} +.xcp-text-carousel .container { + max-width: 1200px; + margin: 0 auto; + padding: 0 30px; +} + +.xcp-text-corousel__flex-wrapper { + display: flex; + flex-wrap: wrap; +} +.xcp-text-carousel__main-header { + color: var(--gradient-base-accent-2); + font-size: 44px; + font-weight: 400; + margin-block-start: 10px; + margin-block-end: 0; +} + +.xcp-text-corousel__text-side, .xcp-text-carousel__carousel-side { + width: 50%; +} + +.xcp-text-corousel__heading { + font-size: 33px; + line-height: 1; + color: white; +} +.xcp-text-corousel__text { + text-align: justify; +} + +.xcp-text-corousel__carousel-side { + width: 45%; + margin: 0 auto; +} + +.xcp-text-carousel__carousel-wrapper { +} + +.xcp-text-carousel__carousel__inner--wrapper { + height: 100%; + width: 100%; +} + +.xcp-text-carousel__carousel__inner { + width: 100%; + height: auto; +} +.xcp-text-carousel__image-position { + display: flex; + overflow: hidden; + height: 100%; + max-height: 340px; +} + +.xcp-text-carousel__carousel__inner img { + width: 100%; + height: auto; + object-fit: cover; + object-position: center; +} + +.xcp-text-carousel__carousel-indicators { + list-style: none; + padding-inline-start: 0; + display: flex; + justify-content: center; + margin-top: 30px; +} + +.xcp-text-carousel__carousel-indicators li { + width: 10px; + height: 10px; + fill: white; + margin-right: 5px; + position: relative; + bottom: 25px; +} + +.xcp-text-carousel__carousel-indicators li .active { + fill: var(--gradient-base-accent-2); +} + +.xcp-text-carousel__carousel__left-arrow, .xcp-text-carousel__carousel__right-arrow { + width: 30px; + height: 30px; + fill: var(--gradient-base-accent-2); + z-index: 2; + padding: 0 5px; + margin-top: 14px; +} + +.xcp-text-carousel__carousel__thumbnails { + display: flex; + margin: 20px auto; +} + +.xcp-text-carousel__carousel__thumnail-frame { + height: 100%; + overflow: hidden; + width: 100%; + display: flex; +} + +.xcp-text-carousel__carousel__thumnail-frame img { + height: 60px; + width: auto; + margin: 0 auto; + margin-right: 10px; +} + +.xcp-text-carousel__thumbnail__image.active { + border: solid 2px white; + border-radius: 2px; +} + +.xcp-text-carousel .desktop { + display: flex; +} + +.xcp-text-carousel .mobile { + display: none; + +} + +.xcp-text-carousel.section-{{section.id}} { + background: {{section.settings.background_color}}; +} + +@media screen and (max-width: 750px) { + .xcp-text-carousel .desktop { + display: none; + } + + .xcp-text-carousel .mobile { + display: flex; + } + + .xcp-text-corousel__flex-wrapper { + } + + .xcp-text-corousel__text-side, .xcp-text-carousel__carousel-side { + width: 100%; + } + .xcp-text-corousel__carousel-side { + width: 100%; + } + + .xcp-text-carousel__main-header { + text-align: center; + } + + .xcp-text-corousel__heading { + font-size: 16px; + text-align: center; + } +} + +{% endstyle %} +{%- assign image_blocks = section.blocks | where: 'type', 'image' -%} +
+
+

{{section.settings.main_header}}

+
+
+ {% for block in section.blocks -%} + {% case block.type %} + {% when 'heading' %} +
{{block.settings.content}}
+ {% when 'text' %} +
{{block.settings.content}}
+ {% endcase %} + {% endfor -%} +
+
+
+
+
+
+
+ {% for img_block in image_blocks %} + {% assign image_class = "xcp-text-carousel__carousel__image" %} + {% if forloop.first %} + {% assign image_class = image_class | append: ' active' %} + {% endif %} + + {% endfor %} +
+
+
+
+
+
+ +
+
+ {% for img_block in image_blocks %} + {% assign image_class = "xcp-text-carousel__thumbnail__image" %} + {% if forloop.first %} + {% assign image_class = image_class | append: ' active' %} + {% endif %} + + {% endfor %} +
+
+ +
+
+
    + {% for img_block in image_blocks %} + {% assign indicator_class = "xcp-text-carousel__carousel__indicator" %} + {% if forloop.first %} + {% assign indicator_class = indicator_class | append: ' active' %} + {% endif %} +
  • + +
    • + {% endfor %} +
+ +
+
+
+
+
+ + +{% schema %} +{ + "name": "XCP Text Carousel", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "text", + "id": "main_header", + "label": "Main header" + }, + { + "type": "color", + "id": "background_color", + "label": "Background Color", + "default": "#1d1d1d" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 100 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 100 + } + ], + "blocks": [ + { + "name": "Image", + "type": "image", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Image" + } + ] + }, + { + "name": "Heading", + "type": "heading", + "settings": [ + { + "type": "richtext", + "id": "content", + "label": "Content" + } + ] + }, + { + "name": "Text", + "type": "text", + "settings": [ + { + "type": "richtext", + "id": "content", + "label": "Content" + } + ] + } + ], + "presets": [ + { + "name": "XCP Text Carousel" + } + ] +} +{% endschema %} diff --git a/sections/xcp-video-testimonial.liquid b/sections/xcp-video-testimonial.liquid new file mode 100644 index 00000000000..995c046ff70 --- /dev/null +++ b/sections/xcp-video-testimonial.liquid @@ -0,0 +1,282 @@ +{% style %} +.section-{{ section.id }}--padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; +} + +@media screen and (min-width: 750px) { + .section-{{ section.id }}--padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } +} + +.xcp-video-testimonial__text-testimonial--wrapper.background-color-light { + background-color: #333636; + background: color +} + +.xcp-video-testimonial .container { + max-width: 1200px; + margin: 0 auto; + padding: 0 30px; +} + +.xcp-video-testimonial__flex-wrapper { + display: flex; +} +.xcp-video-testimonial__header { + font-size: 44px; + margin-block-start: 0.5rem; +} + +.xcp-video-testimonial__header span { + color: var(--gradient-base-accent-2); +} + +.xcp-video-testimonial__content-side { + width: 60%; + min-height: 286px; +} +.xcp-video-testimonial__video-side { + width: 40%; +} + +.xcp-video-testimonial__text-testimonial--wrapper { + padding: 20px 20px; +} + +.xcp-video-testimonial__text-testimonial { + font-size: 14px; + text-align: justify; + font-style: italic; +} + +.xcp-video-testimonial__author { + font-size: 14px; + text-align: right; + font-weight: bold; +} + +.xcp-video-testimonial__video { + width: 34vw; + height: 100%; + margin: 0 auto; + display: block; + border: 0; + margin-left: 30px; +} + +.xcp-video-testimonial .desktop { + display: block; +} + +.xcp-video-testimonial .mobile { + display: none; +} + +@media screen and (max-width: 750px) { + .xcp-video-testimonial .desktop { + display: none; + } + + .xcp-video-testimonial .mobile { + display: block; + } + + .xcp-video-testimonial__video-side, .xcp-video-testimonial__content-side { + width: 100%; + } + + .xcp-video-testimonial__header { + font-size: 28px; + text-align: center; + } + .xcp-video-testimonial__video { + width: unset; + margin-left: 0; + margin: 20px auto; + } +} + +{% endstyle %} +{%- assign video_id = section.settings.video_url.id -%} +
+
+
+
+

{{section.settings.header}}

+
+ {%- if section.settings.video_url and section.settings.video_url.type == 'youtube' -%} + + {%- else -%} + + {%- endif -%} +
+
+
+ {{section.settings.testimonial}} +
+

+ - {{section.settings.author}} +

+
+
+
+ {%- if section.settings.video_url and section.settings.video_url.type == 'youtube' -%} + + {%- else -%} + + {%- endif -%} +
+
+
+
+{% schema %} +{ + "name": "XCP Video Testimonial", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "html", + "id": "header", + "label": "Header" + }, + { + "type": "richtext", + "id": "testimonial", + "label": "Testimonal" + }, + { + "type": "text", + "id": "author", + "label": "Author" + }, + { + "type": "video_url", + "id": "video_url", + "label": "Video URL", + "accept": [ + "youtube", + "vimeo" + ] + }, + { + "type": "select", + "id": "section_bg_color", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "background-1", + "label": "Section Backgroung color" + }, + { + "type": "select", + "id": "testimonial_bg_color", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "light", + "label": "Background 1 light" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "light", + "label": "Testimonial Backgroung color" + }, + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 40 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 52 + } + ], + "blocks": [ + ], + "presets": [ + { + "name": "XCP Video Testimonial" + } + ] +} +{% endschema %} diff --git a/sections/xcp-video.liquid b/sections/xcp-video.liquid new file mode 100644 index 00000000000..45de3a3045b --- /dev/null +++ b/sections/xcp-video.liquid @@ -0,0 +1,291 @@ +{{ 'video-section.css' | asset_url | stylesheet_tag }} +{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }} + +{%- style -%} + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; + } + + @media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + } + + .xcp-video .video-section__media--wrapper iframe { + width: 100%; + min-height: 567px; + border: 0; + } + + .video-section__media--wrapper-{{section.id}} { + width: {{section.settings.video_width}}%; + margin: 0 auto; + } + + @media screen and (max-width: 750px) { + .video-section__media--wrapper-{{section.id}} { + width: 100%; + } + } +{%- endstyle -%} + +{%- liquid + assign video_id = section.settings.video.id | default: section.settings.video_url.id + assign video_alt = section.settings.video.alt | default: section.settings.description + assign alt = 'sections.video.load_video' | t: description: video_alt | escape + assign poster = section.settings.video.preview_image | default: section.settings.cover_image + + if section.settings.video != null + assign ratio_diff = section.settings.video.aspect_ratio | minus: poster.aspect_ratio | abs + if ratio_diff < 0.01 and ratio_diff > 0 + assign fix_ratio = true + endif + endif +-%} + +{%- capture sizes -%} + {% if section.settings.full_width -%} + 100vw + {%- else -%} + (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) + calc(100vw - 10rem), 100vw + {%- endif %} +{%- endcapture -%} + +
+
+
+ {%- unless section.settings.heading == blank -%} +
+

{{ section.settings.heading }}

+
+ {%- endunless -%} +
+ +
+
+ {%- if section.settings.video == null and section.settings.video_url != null -%} + {%- liquid + assign loop = '' + if section.settings.enable_video_looping + assign loop = '&loop=1&playlist=' | append: video_id + endif + -%} + {%- if section.settings.video_url.type == 'youtube' -%} + + {%- else -%} + + {%- endif -%} + {%- else -%} + {{ section.settings.video + | video_tag: + image_size: "1100x", + autoplay: true, + loop: section.settings.enable_video_looping, + controls: true, + muted: false + }} + {%- endif -%} +
+
+
+
+ +{% schema %} +{ + "name": "XCPro Video", + "tag": "section", + "class": "section", + "disabled_on": { + "groups": ["header", "footer"] + }, + "settings": [ + { + "type": "inline_richtext", + "id": "heading", + "default": "Video", + "label": "t:sections.video.settings.heading.label" + }, + { + "type": "select", + "id": "heading_size", + "options": [ + { + "value": "h2", + "label": "t:sections.all.heading_size.options__1.label" + }, + { + "value": "h1", + "label": "t:sections.all.heading_size.options__2.label" + }, + { + "value": "h0", + "label": "t:sections.all.heading_size.options__3.label" + } + ], + "default": "h1", + "label": "t:sections.all.heading_size.label" + }, + { + "type": "checkbox", + "id": "enable_video_looping", + "label": "t:sections.video.settings.enable_video_looping.label", + "default": false + }, + { + "type": "header", + "content": "t:sections.video.settings.header__1.content" + }, + { + "type": "video", + "id": "video", + "label": "t:sections.video.settings.video.label" + }, + { + "type": "header", + "content": "t:sections.video.settings.header__2.content" + }, + { + "type": "paragraph", + "content": "t:sections.video.settings.paragraph.content" + }, + { + "type": "video_url", + "id": "video_url", + "accept": ["youtube", "vimeo"], + "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc", + "label": "t:sections.video.settings.video_url.label", + "info": "t:sections.video.settings.video_url.info" + }, + { + "type": "range", + "id": "video_width", + "min": 0, + "max": 100, + "step": 1, + "unit": "%", + "label": "Video Width", + "default": 73 + }, + { + "type": "text", + "id": "description", + "label": "t:sections.video.settings.description.label", + "info": "t:sections.video.settings.description.info" + }, + { + "type": "header", + "content": "t:sections.video.settings.header__3.content" + }, + { + "type": "checkbox", + "id": "full_width", + "label": "t:sections.video.settings.full_width.label", + "default": false + }, + { + "type": "select", + "id": "color_scheme", + "options": [ + { + "value": "accent-1", + "label": "t:sections.all.colors.accent_1.label" + }, + { + "value": "accent-2", + "label": "t:sections.all.colors.accent_2.label" + }, + { + "value": "background-1", + "label": "t:sections.all.colors.background_1.label" + }, + { + "value": "background-2", + "label": "t:sections.all.colors.background_2.label" + }, + { + "value": "inverse", + "label": "t:sections.all.colors.inverse.label" + } + ], + "default": "background-1", + "label": "t:sections.all.colors.label" + }, + { + "type": "header", + "content": "t:sections.all.padding.section_padding_heading" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_top", + "default": 36 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "label": "t:sections.all.padding.padding_bottom", + "default": 36 + } + ], + "presets": [ + { + "name": "t:sections.video.presets.name" + } + ] +} +{% endschema %} diff --git a/snippets/icon-cart-inventables.liquid b/snippets/icon-cart-inventables.liquid new file mode 100644 index 00000000000..17325d26567 --- /dev/null +++ b/snippets/icon-cart-inventables.liquid @@ -0,0 +1,10 @@ + diff --git a/snippets/icon-cart.liquid b/snippets/icon-cart.liquid index 4f58ea77a86..a36bb217387 100644 --- a/snippets/icon-cart.liquid +++ b/snippets/icon-cart.liquid @@ -1,3 +1,3 @@ diff --git a/snippets/inv-product-thumbnail.liquid b/snippets/inv-product-thumbnail.liquid new file mode 100644 index 00000000000..f8870f234a5 --- /dev/null +++ b/snippets/inv-product-thumbnail.liquid @@ -0,0 +1,198 @@ +{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} +{% comment %} + Renders a product thumbnail with a modal-opener + + Accepts: + - media: {Object} Product Media object + - position: {String} Position of the media. Used for accessible label. + - loop: {Boolean} Enable video looping (optional) + - modal_id: {String} The product modal that will be shown by clicking the thumbnail + - xr_button: {Boolean} Renders the "View in your space" button (shopify-xr-button) if the media is a 3D Model + - media_width: {Float} The width percentage that the media column occupies on desktop. + - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional) + + Usage: + {% render 'product-thumbnail', + media: media, + position: forloop.index, + loop: section.settings.enable_video_looping, + modal_id: section.id + %} +{% endcomment %} + + + + + + +
+
+ {{ media.preview_image.alt | escape }} +
+
+ + + +{%- if media.media_type != 'image' -%} + {%- if media.media_type == 'model' -%} + + {%- else -%} + + {%- endif -%} + + + + {%- if media.media_type == 'model' -%} + + {%- if xr_button -%} + + {%- endif -%} + {%- else -%} + + {%- endif -%} +{%- endif -%} diff --git a/snippets/monitor_svg.liquid b/snippets/monitor_svg.liquid new file mode 100644 index 00000000000..3965d28f231 --- /dev/null +++ b/snippets/monitor_svg.liquid @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/snippets/quote.liquid b/snippets/quote.liquid new file mode 100644 index 00000000000..875824a0710 --- /dev/null +++ b/snippets/quote.liquid @@ -0,0 +1,3 @@ + + + diff --git a/snippets/shogun-head.liquid b/snippets/shogun-head.liquid new file mode 100644 index 00000000000..755b78eb8f1 --- /dev/null +++ b/snippets/shogun-head.liquid @@ -0,0 +1,17 @@ +{% comment %} +Auto-generated by Shogun. +This file can be re-written at any time. +{% endcomment %} + +{% if product and product.metafields.shogun.head %} + {{product.metafields.shogun.head}} +{% endif %} + +{% if page and page.metafields.shogun.head %} + {{page.metafields.shogun.head}} +{% endif %} + +{% if article and article.metafields.shogun.head %} + {{article.metafields.shogun.head}} +{% endif %} + diff --git a/snippets/shogun-products.liquid b/snippets/shogun-products.liquid new file mode 100644 index 00000000000..930314800f1 --- /dev/null +++ b/snippets/shogun-products.liquid @@ -0,0 +1,33 @@ +{% comment %} +Auto-generated by Shogun. +This file can be re-written at any time. +{% endcomment %} + +{% assign handles = content.metafields.shogun.products | split: "," | slice: 0, 20 %} +{% if handles.size > 0 %} + +{% endif %} + +{% if cart and cart.currency and cart.currency.iso_code %} + +{% endif %} diff --git a/snippets/x-carve-price.liquid b/snippets/x-carve-price.liquid new file mode 100644 index 00000000000..15c7cc50ce0 --- /dev/null +++ b/snippets/x-carve-price.liquid @@ -0,0 +1,95 @@ +{% comment %} + Renders a list of product's price (regular, sale) + + Accepts: + - product: {Object} Product Liquid object (optional) + - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional) + - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional) + - price_class: {String} Adds a price class to the price element (optional) + + Usage: + {% render 'price', product: product %} +{% endcomment %} +{%- liquid + if use_variant + assign target = product.selected_or_first_available_variant + else + assign target = product + endif + + assign compare_at_price = target.compare_at_price + assign price = target.price | default: 1999 + assign available = target.available | default: false + assign money_price = price | money + if settings.currency_code_enabled + assign money_price = price | money_with_currency + endif + + if target == product and product.price_varies + assign money_price = 'products.product.price.from_price_html' | t: price: money_price + endif +-%} + +
+
+ {%- comment -%} + Explanation of description list: + - div.price__regular: Displayed when there are no variants on sale + - div.price__sale: Displayed when a variant is a sale + {%- endcomment -%} +
+

HELLO

+ + + {{ money_price }} + +
+
+

HELLO

+ {%- unless product.price_varies == false and product.compare_at_price_varies %} + + + + {% if settings.currency_code_enabled %} + {{ compare_at_price | money_with_currency }} + {% else %} + {{ compare_at_price | money }} + {% endif %} + + + {%- endunless -%} + + + {{ money_price }} + +
+ + + + {{- product.selected_or_first_available_variant.unit_price | money -}} + + + + {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%} + {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}} + {%- endif -%} + {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }} + + + +
+ {%- if show_badges -%} + + {{ 'products.product.on_sale' | t }} + + + + {{ 'products.product.sold_out' | t }} + + {%- endif -%} +
diff --git a/snippets/xc-comparison-column.liquid b/snippets/xc-comparison-column.liquid new file mode 100644 index 00000000000..46d2f45e17e --- /dev/null +++ b/snippets/xc-comparison-column.liquid @@ -0,0 +1,102 @@ +{% liquid + assign line_title_class = "" + if settings.hide_line_title_desk + assign line_title_class = 'hide-desk' + endif +%} +
+
+ {% if settings.image %} + {{ settings.image | image_url: width: 500 | image_tag: class: "xc-comparison-column__img" }} +
{{ settings.title }}
+ {% else %} +
{{ settings.title }}
+ {% endif %} +
+
+
+ {% if settings.show_buttons %} +
+ {% if settings.orange_btn_label != "" %} + {{ settings.orange_btn_label }} + {% endif %} + {% if settings.black_btn_label != "" %} + {{ settings.black_btn_label }} + {% endif %} +
+ {% else %} +
+ {% endif %} +
+
+
+
Who is it optimized for?
+
{{ settings.optmized_for_text }}
+
+
+
+
What types of products do people make with this?
+
{{ settings.target_customers_text }}
+
+
+
+
Cutting Area
+
{{ settings.cutting_area_text }}
+
+
+
+
Weight
+
{{ settings.weight_text }}
+
+
+
+
Gantry
+
{{ settings.gantry_text }}
+
+
+
+
Spindle
+
{{ settings.spindle_text }}
+
+
+
+
Spindle RPM Range
+
{{ settings.spindle_rpm_text }}
+
+
+
+
Accuracy
+
{{ settings.accuracy_text }}
+
+
+
+
Assembly Time
+
{{ settings.assembley_time_text }}
+
+
+
+
Materials it can cut
+
{{ settings.materials_text }}
+
+
+
+
Support
+
{{ settings.support_text }}
+
+
+
+
Software
+
{{ settings.software_text }}
+
+
+
+
Warranty
+
{{ settings.warranty_text }}
+
+
+
+
Price
+

{{ settings.price_text }}

+
+
+
diff --git a/snippets/xc-three-column-text.liquid b/snippets/xc-three-column-text.liquid new file mode 100644 index 00000000000..a6dca8b31fa --- /dev/null +++ b/snippets/xc-three-column-text.liquid @@ -0,0 +1,16 @@ +
+ {% if settings.heading %} +

{{settings.heading}}

+ {% endif %} +
    +
  • + {{settings.text1}} +
    • +
  • + {{settings.text2}} +
    • +
  • + {{settings.text3}} +
    • +
+
diff --git a/snippets/xcp-affirm-overview.liquid b/snippets/xcp-affirm-overview.liquid new file mode 100644 index 00000000000..e7f6947eee8 --- /dev/null +++ b/snippets/xcp-affirm-overview.liquid @@ -0,0 +1,30 @@ +{% style %} +@media only screen and (max-width: 960px) { + .affirm-as-low-as { + margin-top:-4px + } +} + +.affirm-as-low-as .affirm-modal-trigger { + color: #eee; + text-decoration: underline; +} + +.xcp-affirm { + padding-top: 5px; + font-size: 24px; + font-family: "AlrightSans-Light"; + text-align: center; +} +.kit-select__affirm-explanation-message { + font-size: 10px; +} + +.__affirm-logo.__affirm-logo-white.__ligature__affirm_full_logo__:after, .__affirm-logo.__affirm-logo-white.__ligature__affirm_short_logo__:after { + color: #0FA0EA; +} +{% endstyle %} + +
+
+
diff --git a/snippets/xcp-affirm.liquid b/snippets/xcp-affirm.liquid new file mode 100644 index 00000000000..68af6f73794 --- /dev/null +++ b/snippets/xcp-affirm.liquid @@ -0,0 +1,32 @@ +{% style %} +@media only screen and (max-width: 960px) { + .affirm-as-low-as { + margin-top:-4px + } +} + +.affirm-as-low-as .affirm-modal-trigger { + color: #eee; + text-decoration: underline; +} + +.xcp-affirm { + padding-top: 5px; + font-size: 12px; +} +.kit-select__affirm-explanation-message { + font-size: 10px; +} + +.__affirm-logo.__affirm-logo-white.__ligature__affirm_full_logo__:after, .__affirm-logo.__affirm-logo-white.__ligature__affirm_short_logo__:after { + color: #0FA0EA; +} +{% endstyle %} + +
+
+ +
+ {{ affirm_text }} +
+
diff --git a/snippets/xcp-clyde-cta.liquid b/snippets/xcp-clyde-cta.liquid new file mode 100644 index 00000000000..b8784bcbc36 --- /dev/null +++ b/snippets/xcp-clyde-cta.liquid @@ -0,0 +1,36 @@ +{% style %} +.product-form { + background: none; +} +.product-form .product-form__buttons { + width: 100%; + max-width: none; +} +.shopify-payment-button__button--unbranded { + background-color: #FFB250; + color: black; +} +.quantity { + width: 30%; + padding: 0 !important; + margin: 0; +} +.quantity__input { + text-align: center !important; + padding: 0 5px 0 5px 0 !important; + margin: 0; + width: 2em; + flex-grow: 0 !important; +} +.quantity__button { + width: fit-content !important; +} + +#clyde-cta { + max-width: 300px; +} +{% endstyle %} + +
+ + diff --git a/snippets/xcp-financing-option.liquid b/snippets/xcp-financing-option.liquid new file mode 100644 index 00000000000..e2263d66d08 --- /dev/null +++ b/snippets/xcp-financing-option.liquid @@ -0,0 +1,100 @@ +{% assign line_title_class = "" %} +{% unless settings.show_line_title_desk %} + {% assign line_title_class = "hide-desk" %} +{% endunless %} + +{% assign block_class= "" %} +{% if settings.hide_block_mobile %} + {% assign block_class= "hide-mobile" %} +{% endif %} +
+
+ {% if settings.header_logo_img %} + {{ settings.header_logo_img | image_url: width: 500 | image_tag: class: 'xcp-financing-option__img' }} + {% else %} +
+ {{ settings.header_text }} +
+ {% endif %} +
+
    +
  • +
    + {{ settings.line1_title }} +
    +
    + {{ settings.line1_body }} +
    +
    +
    • +
  • +
    + {{ settings.line2_title }} +
    +
    + {{ settings.line2_body }} +
    +
    +
    • +
  • +
    + {{ settings.line3_title }} +
    +
    + {{ settings.line3_body }} +
    +
    +
    • +
  • +
    + {{ settings.line4_title }} +
    +
    + {{ settings.line4_body }} +
    +
    +
    • +
  • +
    + {{ settings.line5_title }} +
    +
    + {{ settings.line5_body }} +
    +
    +
    • +
  • +
    + {{ settings.line6_title }} +
    +
    + {{ settings.line6_body }} +
    +
    +
    • +
  • +
    + {{ settings.line7_title }} +
    +
    + {{ settings.line7_body }} +
    +
    +
    • +
  • +
    + {{ settings.line8_title }} +
    +
    + {{ settings.line8_body }} +
    +
    • +
+ {% if settings.bottom_btn_label != "" %} +
+ + {{ settings.bottom_btn_label }} + +
+ {% endif %} +
diff --git a/snippets/xcp-order-now.liquid b/snippets/xcp-order-now.liquid new file mode 100644 index 00000000000..a7b35aeeac7 --- /dev/null +++ b/snippets/xcp-order-now.liquid @@ -0,0 +1,82 @@ + +{{ 'xcp-add-to-cart.css' | asset_url | stylesheet_tag }} +{%- style -%} +.section-{{ section_id }}-padding { + padding-top: calc({{ settings.padding_top }}px * 0.75); + padding-bottom: calc({{ settings.padding_bottom }}px * 0.75); +} + +@media screen and (min-width: 750px) { + .section-{{ section_id }}-padding { + padding-top: {{ settings.padding_top }}px; + padding-bottom: {{ settings.padding_bottom }}px; + } +} +{%- endstyle -%} + + +
+ + + + {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} + +
+ + {%- if settings.show_dynamic_checkout -%} + {{ form | payment_button }} + {%- endif -%} +
+ {%- endform -%} + +
diff --git a/snippets/xcp-price.liquid b/snippets/xcp-price.liquid new file mode 100644 index 00000000000..73423f4f904 --- /dev/null +++ b/snippets/xcp-price.liquid @@ -0,0 +1,111 @@ +{% comment %} + Renders a list of product's price (regular, sale) + + Accepts: + - product: {Object} Product Liquid object (optional) + - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional) + - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional) + - price_class: {String} Adds a price class to the price element (optional) + + Usage: + {% render 'price', product: product %} +{% endcomment %} +{% style %} +.price-item { + color: {{settings.price_color}}; + font-weight: bold; + font-size: 32px; +} +{% endstyle %} +{%- liquid + if use_variant + assign target = product.selected_or_first_available_variant + else + assign target = product + endif + + assign show_badges = false + + assign compare_at_price = target.compare_at_price + assign price = target.price | default: 1999 + assign available = target.available | default: false + assign money_price = price | money + if settings.currency_code_enabled + assign money_price = price | money_with_currency + endif + + if compare_at_price != price + assign diff_price = compare_at_price | minus: price + endif + + if target == product and product.price_varies + assign money_price = 'products.product.price.from_price_html' | t: price: money_price + endif +-%} + +
+
+ {%- comment -%} + Explanation of description list: + - div.price__regular: Displayed when there are no variants on sale + - div.price__sale: Displayed when a variant is a sale + {%- endcomment -%} +
+ + + {{ money_price }} + +
+
+ {%- unless product.price_varies == false and product.compare_at_price_varies %} + + + + {% if settings.currency_code_enabled %} + {{ compare_at_price | money_with_currency }} + {% else %} + {{ compare_at_price | money }} + {% endif %} + + + {%- endunless -%} + + NOW {{ money_price }} + + + ({{diff_price | money_without_trailing_zeros }} savings) + +
+ + + + {{- product.selected_or_first_available_variant.unit_price | money -}} + + + + {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%} + {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}} + {%- endif -%} + {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }} + + + +
+ {%- if show_badges -%} + + {{ 'products.product.on_sale' | t }} + + + + {{ 'products.product.sold_out' | t }} + + {%- endif -%} +
+ {% render "xcp-affirm", affirm_text: settings.affirm_text %} +
+
diff --git a/snippets/xcp-section-sep.liquid b/snippets/xcp-section-sep.liquid new file mode 100644 index 00000000000..b166ea255c9 --- /dev/null +++ b/snippets/xcp-section-sep.liquid @@ -0,0 +1 @@ +
diff --git a/snippets/xcp-size-select.liquid b/snippets/xcp-size-select.liquid new file mode 100644 index 00000000000..d8a324c00c7 --- /dev/null +++ b/snippets/xcp-size-select.liquid @@ -0,0 +1,70 @@ +{% style %} +.xcp-size-select { + display: flex; + align-items: center; + width: 200px; +} +.xcp-size-select .xcp__size-word { + margin-right: 10px; + padding-top: 2px +} +.xcp-size-select .xcp-size-select__btn .selected { + color: var(--gradient-base-background-1); + font-weight: normal; + text-transform: none; + padding: 4px 20px; + margin: 0 8px; + height: 36px; + display: inline-flex; + align-items: center; +} +.xcp-size-select .xcp-size-select__btn:hover { + text-decoration: none; + color: var(--gradient-base-background-1); +} +.xcp-size-select .xcp-size-select__btn { + color: #eee; + background-color: var(--gradient-base-background-1); + border: 2px solid #eee; + font-weight: normal; + text-transform: none; + padding: 4px 20px; + margin: 0 8px; +} + +.xcp-size-select .xcp-size-select__btn:hover, +.xcp-size-select .xcp-size-select__btn.selected { + background-color: #ffb256; + border: 2px solid #ffb256; + color: black; + cursor: default; +} + +button.xcp-size-select__btn, a.xcp-size-select__btn { + height: 41px; +} +{% endstyle %} +{%- capture btn_4x4_tag -%} + {%- if settings.selected_4x4 -%} + button + {%- else -%} + a + {%- endif -%} +{%- endcapture -%} + +{%- capture btn_4x4_class -%} + {%- if settings.selected_4x4 -%} + selected disabled + {%- endif -%} +{%- endcapture -%} +{%- capture btn_4x2_class -%} + {%- if settings.selected_4x2 -%} + selected + {%- endif -%} +{%- endcapture -%} + +
+ {{settings.header}} + <{{btn_4x4_tag}} class="btn btn-primary xcp-size-select__btn {{btn_4x4_class}}" href="{{settings.link_4x4_page}}">{{settings.label_4x4}} + {{settings.label_4x2}} +
diff --git a/templates/cart.json b/templates/cart.json index 00ff37e5833..2060ecac3c0 100644 --- a/templates/cart.json +++ b/templates/cart.json @@ -1,9 +1,34 @@ { "sections": { + "25565910-aea5-483b-b77d-f99be0411723": { + "type": "rich-text", + "blocks": { + "template--15826939904057__25565910-aea5-483b-b77d-f99be0411723-167752608751c75280-1": { + "type": "text", + "settings": { + "text": "

Questions? Visit our support center.<\/a><\/p>" + } + } + }, + "block_order": [ + "template--15826939904057__25565910-aea5-483b-b77d-f99be0411723-167752608751c75280-1" + ], + "settings": { + "desktop_content_position": "right", + "content_alignment": "right", + "color_scheme": "background-1", + "full_width": true, + "padding_top": 0, + "padding_bottom": 0 + } + }, "cart-items": { "type": "main-cart-items", + "custom_css": [ + ".cart-item__image {max-height: calc(18rem \/ var(--font-body-scale)); width: auto;}" + ], "settings": { - "padding_top": 36, + "padding_top": 0, "padding_bottom": 36 } }, @@ -24,32 +49,37 @@ "block_order": [ "subtotal", "buttons" - ] + ], + "settings": { + } }, - "featured-collection": { - "type": "featured-collection", + "2278cb54-4722-450e-8ccf-b1c3559be9ba": { + "type": "rich-text", + "blocks": { + "template--15826939904057__2278cb54-4722-450e-8ccf-b1c3559be9ba-16782869295fe52c90-1": { + "type": "text", + "settings": { + "text": "

To ensure the best delivery experience, we use trackable, reliable, and insured shipping partners.<\/p>" + } + } + }, + "block_order": [ + "template--15826939904057__2278cb54-4722-450e-8ccf-b1c3559be9ba-16782869295fe52c90-1" + ], "settings": { - "title": "Featured collection", - "heading_size": "h2", - "collection": "all", - "products_to_show": 4, - "columns_desktop": 4, + "desktop_content_position": "right", + "content_alignment": "right", "color_scheme": "background-1", - "show_view_all": true, - "swipe_on_mobile": false, - "image_ratio": "square", - "show_secondary_image": false, - "show_vendor": false, - "show_rating": false, - "columns_mobile": "2", - "padding_top": 36, - "padding_bottom": 36 + "full_width": true, + "padding_top": 0, + "padding_bottom": 0 } } }, "order": [ + "25565910-aea5-483b-b77d-f99be0411723", "cart-items", "cart-footer", - "featured-collection" + "2278cb54-4722-450e-8ccf-b1c3559be9ba" ] } diff --git a/templates/collection.cabinetmaker-collection.json b/templates/collection.cabinetmaker-collection.json new file mode 100644 index 00000000000..b6fdb2442ae --- /dev/null +++ b/templates/collection.cabinetmaker-collection.json @@ -0,0 +1,39 @@ +{ + "sections": { + "banner": { + "type": "main-collection-banner", + "settings": { + "show_collection_description": true, + "show_collection_image": false, + "color_scheme": "background-1" + } + }, + "product-grid": { + "type": "main-collection-product-grid", + "custom_css": [ + ".card-wrapper {width: 250px;}", + ".card .card__inner .card__media {width: 100%;}", + "img {width: 250px; height: 250px; object-fit: scale-down;}" + ], + "settings": { + "products_per_page": 16, + "columns_desktop": 4, + "image_ratio": "square", + "show_secondary_image": false, + "show_vendor": false, + "show_rating": false, + "enable_quick_add": false, + "enable_filtering": true, + "filter_type": "horizontal", + "enable_sorting": true, + "columns_mobile": "2", + "padding_top": 36, + "padding_bottom": 36 + } + } + }, + "order": [ + "banner", + "product-grid" + ] +} diff --git a/templates/collection.json b/templates/collection.json index f21fa3a4c12..b6fdb2442ae 100644 --- a/templates/collection.json +++ b/templates/collection.json @@ -10,14 +10,21 @@ }, "product-grid": { "type": "main-collection-product-grid", + "custom_css": [ + ".card-wrapper {width: 250px;}", + ".card .card__inner .card__media {width: 100%;}", + "img {width: 250px; height: 250px; object-fit: scale-down;}" + ], "settings": { "products_per_page": 16, "columns_desktop": 4, - "image_ratio": "adapt", + "image_ratio": "square", "show_secondary_image": false, "show_vendor": false, "show_rating": false, + "enable_quick_add": false, "enable_filtering": true, + "filter_type": "horizontal", "enable_sorting": true, "columns_mobile": "2", "padding_top": 36, diff --git a/templates/customers/login.json b/templates/customers/login.json index ece53782e3b..fa8a473b1a0 100644 --- a/templates/customers/login.json +++ b/templates/customers/login.json @@ -1,10 +1,12 @@ { "sections": { "main": { - "type": "main-login" + "type": "shopify-login", + "settings": { + } } }, "order": [ "main" ] -} +} \ No newline at end of file diff --git a/templates/customers/register.json b/templates/customers/register.json index 3d82f084fd3..79b92435f71 100644 --- a/templates/customers/register.json +++ b/templates/customers/register.json @@ -1,4 +1,5 @@ { + "layout": "inventables", "sections": { "main": { "type": "main-register" diff --git a/templates/customers/reset_password.json b/templates/customers/reset_password.json index cf74f5bdda2..2373b5e8678 100644 --- a/templates/customers/reset_password.json +++ b/templates/customers/reset_password.json @@ -1,4 +1,5 @@ { + "layout": "inventables", "sections": { "main": { "type": "main-reset-password" diff --git a/templates/index.json b/templates/index.json index 14ea5d442d6..5586b0a72b4 100644 --- a/templates/index.json +++ b/templates/index.json @@ -1,211 +1,217 @@ { + "layout": "industries", "sections": { - "image_banner": { - "type": "image-banner", + "f7804a16-8dc5-4525-b0e9-aba628fbf839": { + "type": "industries-hero", + "settings": { + "bg_color": "#1d1d1d", + "title": "ONE<\/b> PLATFORM TO SCALE YOUR
CABINETMAKING BUSINESS<\/strong>", + "image": "shopify:\/\/shop_images\/cabinetmaker-hero.png", + "image_mobile": "shopify:\/\/shop_images\/cabinet_maker_hero_mobile.jpg", + "subtext": "From digital design and CNC machine manufacturing to cost management and client collaboration. An all-in-one, easy-to-use platform.", + "text_color": "#FFF", + "text_color_mobile": "#FFF", + "subtext_max_width": 46, + "show_linear_gradient": true, + "hero_gradient_width": 50, + "cta_btn_text": "Get Started", + "cta_btn_url": "https:\/\/easel.inventables.com\/cabinetmaker-signup" + } + }, + "5e1c5caa-0bad-4df6-8186-2272deeb2e88": { + "type": "industries-workflow", "blocks": { - "heading": { - "type": "heading", + "bcd0382d-5399-4c68-b071-f3dbe924af16": { + "type": "workflow_item", + "settings": { + "workflow_image": "shopify:\/\/shop_images\/Cabinet-Design-v3_-_01_203da67e-ff31-4552-b8d2-d03ae0cc8b17.gif", + "workflow_image_text": "Transform your ideas into reality with intuitive design tools tailored for cabinetmaking.", + "workflow_name": "DESIGN" + } + }, + "a2952836-d86c-4d17-8c35-2495fb94d283": { + "type": "workflow_item", + "settings": { + "workflow_image": "shopify:\/\/shop_images\/Cabinet-Collaborate-v4_-_01.gif", + "workflow_image_text": "Seamlessly share and revise designs with clients, ensuring their vision is perfectly captured.", + "workflow_name": "COLLABORATE" + } + }, + "e6165217-0878-4fc5-9d55-2bd96e325e1d": { + "type": "workflow_item", + "settings": { + "workflow_image": "shopify:\/\/shop_images\/Cabinet-Estimate_Costs-v2_-_01.gif", + "workflow_image_text": "Estimate costs and profits for materials, hardware, and labor with automated tools, avoiding surprises", + "workflow_name": "ESTIMATE COSTS" + } + }, + "460747fd-9a77-4e10-ae3d-6a3a536d8e29": { + "type": "workflow_item", "settings": { - "heading": "Image banner", - "heading_size": "h0" + "workflow_image": "shopify:\/\/shop_images\/Cabinet-Profit-v1.gif", + "workflow_image_text": "Streamline your workflow to reduce waste and maximize profitability on every project.", + "workflow_name": "INCREASE PROFITS" } }, - "text": { - "type": "text", + "612993a4-a0cd-43f7-9a5a-12aa97f2319f": { + "type": "workflow_item", "settings": { - "text": "Give customers details about the banner image(s) or content on the template.", - "text_style": "body" + "workflow_image": "shopify:\/\/shop_images\/Cabinet-Cut-v2.gif", + "workflow_image_text": "CNC manufacturing integration facilitates quality, precision, and repeatability", + "workflow_name": "Cut on CNC" } }, - "button": { - "type": "buttons", + "b6ab737a-9219-4d5f-a3ab-f28e0e450bc2": { + "type": "workflow_item", "settings": { - "button_label_1": "Shop all", - "button_link_1": "shopify://collections/all", - "button_style_secondary_1": true, - "button_label_2": "", - "button_link_2": "", - "button_style_secondary_2": false + "workflow_image": "shopify:\/\/shop_images\/Cabinet-Cut_List-Table_Saw_-_01.gif", + "workflow_image_text": "Print cut lists optimized to cut on a table saw.", + "workflow_name": "Cut on table saw" } } }, "block_order": [ - "heading", - "text", - "button" + "bcd0382d-5399-4c68-b071-f3dbe924af16", + "a2952836-d86c-4d17-8c35-2495fb94d283", + "e6165217-0878-4fc5-9d55-2bd96e325e1d", + "460747fd-9a77-4e10-ae3d-6a3a536d8e29", + "612993a4-a0cd-43f7-9a5a-12aa97f2319f", + "b6ab737a-9219-4d5f-a3ab-f28e0e450bc2" ], "settings": { - "image_overlay_opacity": 40, - "image_height": "large", - "adapt_height_first_image": false, - "desktop_content_position": "bottom-center", - "show_text_box": false, - "desktop_content_alignment": "center", - "color_scheme": "background-1", - "mobile_content_alignment": "center", - "stack_images_on_mobile": false, - "show_text_below": false + "bg_color": "#1d1d1d", + "title": "YOUR WORKFLOW, SIMPLIFIED<\/b>", + "subtitle": "Our end-to-end solution will streamline your cabinetmaking process", + "cta_btn_text": "GET STARTED", + "cta_btn_url": "https:\/\/easel.inventables.com\/cabinetmaker-signup" } }, - "rich_text": { - "type": "rich-text", + "7730e6cc-4412-493a-9aa2-e372994e8a4b": { + "type": "industries-highlight", + "settings": { + "bg_color": "#1d1d1d", + "title": "TRADITIONAL VS. CNC MACHINE WORKFLOWS FOR CABINETMAKING<\/b>", + "video": "https:\/\/www.youtube.com\/watch?v=IX36VcpuzDc", + "cta_btn_text": "EXPLORE CNC SYSTEM", + "cta_btn_url": "https:\/\/www.inventables.com\/pages\/x-carve-pro-cnc-machine" + } + }, + "f9e3d83e-4b49-4ee1-ac06-4bad20dd91a9": { + "type": "industries-tools", "blocks": { - "heading": { - "type": "heading", + "ade0ac8e-172f-47c9-bdda-a447bf24a7e9": { + "type": "tool_item", + "settings": { + "tool_image": "shopify:\/\/shop_images\/industries_tools_cnc.png", + "tool_subtitle": "CNC MACHINE" + } + }, + "a37041b4-e011-4270-8c47-769118646b55": { + "type": "tool_item", "settings": { - "heading": "

Talk about your brand

", - "heading_size": "h1" + "tool_image": "shopify:\/\/shop_images\/industries_tools_software.png", + "tool_subtitle": "CAD\/CAM SOFTWARE" } }, - "text": { - "type": "text", + "3824db84-1e59-4f0a-b570-84bf104da207": { + "type": "tool_item", "settings": { - "text": "

Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.<\/p>" + "tool_image": "shopify:\/\/shop_images\/industries_tools_support.png", + "tool_subtitle": "TECHNICAL SUPPORT" } } }, "block_order": [ - "heading", - "text" + "ade0ac8e-172f-47c9-bdda-a447bf24a7e9", + "a37041b4-e011-4270-8c47-769118646b55", + "3824db84-1e59-4f0a-b570-84bf104da207" ], "settings": { - "color_scheme": "background-1", - "full_width": true, - "padding_top": 40, - "padding_bottom": 0 + "bg_color": "#1d1d1d", + "title": "TOOLS<\/b> IN OUR PLATFORM", + "image": "shopify:\/\/shop_images\/compare-cnc.png", + "cta_btn_text": "GET STARTED", + "cta_btn_url": "https:\/\/www.inventables.com\/pages\/x-carve-pro-cnc-machine" } }, - "featured_collection": { - "type": "featured-collection", - "settings": { - "title": "Featured products", - "heading_size": "h2", - "collection": "all", - "products_to_show": 8, - "columns_desktop": 4, - "color_scheme": "background-1", - "show_view_all": false, - "swipe_on_mobile": false, - "image_ratio": "adapt", - "show_secondary_image": true, - "show_vendor": false, - "show_rating": false, - "columns_mobile": "2", - "padding_top": 28, - "padding_bottom": 36 - } - }, - "collage": { - "type": "collage", + "7ec1fa0b-5400-4013-b862-1e5a15f2a491": { + "type": "industries-choose", "blocks": { - "collection-0": { - "type": "collection", + "885a3ee9-063e-4ab3-9998-17c75750f1d6": { + "type": "choose_item", "settings": { - "collection": "" + "image": "shopify:\/\/shop_images\/choose_industry_forniture_maker.png", + "cta_btn_text": "Furniture Makers", + "cta_btn_url": "\/pages\/cnc-furniture-making" } }, - "product": { - "type": "product", + "04acd9be-50a9-42cd-8d6f-d72ed71e9a50": { + "type": "choose_item", "settings": { - "product": "", - "second_image": false + "image": "shopify:\/\/shop_images\/choose_industry_sign_maker.png", + "cta_btn_text": "Sign Makers", + "cta_btn_url": "\/pages\/cnc-router-sign-making" } }, - "collection-1": { - "type": "collection", + "36ac9f4e-8a28-4f66-8ac9-0b3afef25f08": { + "type": "choose_item", "settings": { - "collection": "" + "image": "shopify:\/\/shop_images\/choose_industry_maker.png", + "cta_btn_text": "Makers", + "cta_btn_url": "\/pages\/cnc-router-makers" } } }, "block_order": [ - "collection-0", - "product", - "collection-1" + "885a3ee9-063e-4ab3-9998-17c75750f1d6", + "04acd9be-50a9-42cd-8d6f-d72ed71e9a50", + "36ac9f4e-8a28-4f66-8ac9-0b3afef25f08" ], "settings": { - "heading": "Multimedia collage", - "heading_size": "h2", - "desktop_layout": "left", - "mobile_layout": "collage", - "color_scheme": "background-1", - "padding_top": 36, - "padding_bottom": 36 - } - }, - "video": { - "type": "video", - "settings": { - "heading": "", - "video_url": "https://www.youtube.com/watch?v=_9VUPq3SxOc", - "heading_size": "h1", - "description": "", - "full_width": false, - "color_scheme": "background-1", - "padding_top": 36, - "padding_bottom": 36 + "bg_color": "#1d1d1d", + "title": "CHOOSE YOUR INDUSTRY<\/b>", + "subtitle": "Choose your industry to understand how we can streamline your business." } }, - "multicolumn": { - "type": "multicolumn", + "de7fbe9d-5065-481c-8eea-41b3fea7dbe0": { + "type": "industries-brands", "blocks": { - "column1": { - "type": "column", + "61c6752e-b267-41a2-92dc-2c21020092e9": { + "type": "brand_item", "settings": { - "title": "Column", - "text": "

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>", - "link_label": "", - "link": "" + "image": "shopify:\/\/shop_images\/blum.png" } }, - "column2": { - "type": "column", + "ce3645f4-62d3-419e-a9e9-783dd59442e9": { + "type": "brand_item", "settings": { - "title": "Column", - "text": "

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>", - "link_label": "", - "link": "" + "image": "shopify:\/\/shop_images\/onsrud_2.png" } }, - "column3": { - "type": "column", + "6fad69fd-4cc9-4a09-8b9a-52af4dc60e05": { + "type": "brand_item", "settings": { - "title": "Column", - "text": "

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>", - "link_label": "", - "link": "" + "image": "shopify:\/\/shop_images\/logo_amana_new_2.png" } } }, "block_order": [ - "column1", - "column2", - "column3" + "61c6752e-b267-41a2-92dc-2c21020092e9", + "ce3645f4-62d3-419e-a9e9-783dd59442e9", + "6fad69fd-4cc9-4a09-8b9a-52af4dc60e05" ], "settings": { - "title": "", - "heading_size": "h1", - "image_width": "third", - "image_ratio": "adapt", - "columns_desktop": 3, - "column_alignment": "center", - "background_style": "none", - "button_label": "", - "button_link": "", - "swipe_on_mobile": false, - "color_scheme": "background-1", - "columns_mobile": "1", - "padding_top": 36, - "padding_bottom": 36 + "bg_color": "#1d1d1d", + "title": "TRUSTED BRANDS<\/b> WE WORK WITH" } } }, "order": [ - "image_banner", - "rich_text", - "featured_collection", - "collage", - "video", - "multicolumn" + "f7804a16-8dc5-4525-b0e9-aba628fbf839", + "5e1c5caa-0bad-4df6-8186-2272deeb2e88", + "7730e6cc-4412-493a-9aa2-e372994e8a4b", + "f9e3d83e-4b49-4ee1-ac06-4bad20dd91a9", + "7ec1fa0b-5400-4013-b862-1e5a15f2a491", + "de7fbe9d-5065-481c-8eea-41b3fea7dbe0" ] } diff --git a/templates/list-collections.json b/templates/list-collections.json index b7247f30856..12987be0c7b 100644 --- a/templates/list-collections.json +++ b/templates/list-collections.json @@ -2,10 +2,17 @@ "sections": { "main": { "type": "main-list-collections", + "custom_css": [ + ".card-wrapper {width: 250px;}", + ".card .card__inner .card__media {width: 100%;}", + "img {width: 250px; height: 250px; object-fit: scale-down;}" + ], "settings": { "title": "Collections", "sort": "alphabetical", - "image_ratio": "square" + "image_ratio": "square", + "columns_desktop": 3, + "columns_mobile": "2" } } }, diff --git a/templates/page.cabinet-beta-landing.json b/templates/page.cabinet-beta-landing.json new file mode 100644 index 00000000000..36761666ffc --- /dev/null +++ b/templates/page.cabinet-beta-landing.json @@ -0,0 +1,620 @@ +{ + "sections": { + "main": { + "type": "main-page", + "disabled": true, + "settings": { + "padding_top": 28, + "padding_bottom": 28 + } + }, + "bafa7e08-fa82-4155-9bd4-9aec70798371": { + "type": "image-banner", + "blocks": { + "template--15857070309433__bafa7e08-fa82-4155-9bd4-9aec70798371-1682102576fc910bc1-0": { + "type": "heading", + "settings": { + "heading": "Easel Cabinetmaker", + "heading_size": "h0" + } + }, + "template--15857070309433__bafa7e08-fa82-4155-9bd4-9aec70798371-1682102576fc910bc1-1": { + "type": "text", + "settings": { + "text": "Configure, design, and cut cabinets in minutes.", + "text_style": "subtitle" + } + }, + "template--15857070309433__bafa7e08-fa82-4155-9bd4-9aec70798371-1682102576fc910bc1-2": { + "type": "buttons", + "settings": { + "button_label_1": "GET STARTED", + "button_link_1": "https:\/\/easel.inventables.com\/cabinetmaker-signup?utm_source=Direct+or+Organic&utm_medium=Easel+Cabinetmaker+Landing+Page&utm_campaign=Easel+Cabinetmaker+Direct+or+Organic&utm_id=Easel+Cabinetmaker", + "button_style_secondary_1": false, + "button_label_2": "", + "button_link_2": "", + "button_style_secondary_2": false + } + } + }, + "block_order": [ + "template--15857070309433__bafa7e08-fa82-4155-9bd4-9aec70798371-1682102576fc910bc1-0", + "template--15857070309433__bafa7e08-fa82-4155-9bd4-9aec70798371-1682102576fc910bc1-1", + "template--15857070309433__bafa7e08-fa82-4155-9bd4-9aec70798371-1682102576fc910bc1-2" + ], + "custom_css": [ + ".banner__text {color: white !important; font-weight: !important; font-size: 20px !important;}", + ".banner__content .button {background: #fea609; color: black; font-weight: bold;}", + ".banner__content .button::after {display: none !important;}" + ], + "settings": { + "image": "shopify:\/\/shop_images\/modern_kitchen.jpg", + "image_overlay_opacity": 10, + "image_height": "medium", + "adapt_height_first_image": false, + "desktop_content_position": "bottom-left", + "show_text_box": false, + "desktop_content_alignment": "left", + "color_scheme": "background-1", + "mobile_content_alignment": "center", + "stack_images_on_mobile": true, + "show_text_below": true + } + }, + "74e28edb-3f3e-4f3b-9b96-4cecc34680c4": { + "type": "multicolumn", + "blocks": { + "template--15857070309433__74e28edb-3f3e-4f3b-9b96-4cecc34680c4-1682007505aafcf30e-0": { + "type": "column", + "settings": { + "title": "EASY", + "text": "

Design with a simple-to-use interface<\/h3>

Invite collaborators<\/h3>", + "link_label": "", + "link": "" + } + }, + "template--15857070309433__74e28edb-3f3e-4f3b-9b96-4cecc34680c4-1682007505aafcf30e-2": { + "type": "column", + "settings": { + "title": "SMART", + "text": "

Optimize layouts of nested parts<\/h3>

Minimize material waste<\/h3>", + "link_label": "", + "link": "" + } + }, + "88c50a45-1142-4398-b30a-6674c52f4e5d": { + "type": "column", + "settings": { + "title": "FAST", + "text": "

Autogenerate cut-ready files <\/h3>

Send directly to your CNC machine<\/h3>", + "link_label": "", + "link": "" + } + } + }, + "block_order": [ + "template--15857070309433__74e28edb-3f3e-4f3b-9b96-4cecc34680c4-1682007505aafcf30e-0", + "template--15857070309433__74e28edb-3f3e-4f3b-9b96-4cecc34680c4-1682007505aafcf30e-2", + "88c50a45-1142-4398-b30a-6674c52f4e5d" + ], + "settings": { + "title": "", + "heading_size": "h1", + "image_width": "third", + "image_ratio": "adapt", + "columns_desktop": 3, + "column_alignment": "center", + "background_style": "primary", + "button_label": "", + "button_link": "", + "color_scheme": "inverse", + "columns_mobile": "1", + "swipe_on_mobile": false, + "padding_top": 24, + "padding_bottom": 24 + } + }, + "a59dca1e-e925-4c63-a70f-095c5c50cd6c": { + "type": "video", + "custom_css": [ + "@media (min-width: 950px) {.video-section__media {max-width: 950px !important; padding-bottom: 600px !important; margin: 0 auto; height: auto; }}" + ], + "settings": { + "heading": "", + "heading_size": "h2", + "enable_video_looping": false, + "video": "shopify:\/\/files\/videos\/Easel Cabinetmaker Video.mp4", + "video_url": "", + "cover_image": "shopify:\/\/shop_images\/8b0e9862b36f9ae888904cc8419c4941.png", + "description": "", + "full_width": false, + "color_scheme": "inverse", + "padding_top": 20, + "padding_bottom": 20 + } + }, + "e1b65446-7598-474f-869c-7baeec467495": { + "type": "rich-text", + "blocks": { + "template--15857070309433__e1b65446-7598-474f-869c-7baeec467495-16820168593215f71a-0": { + "type": "heading", + "settings": { + "heading": "

Easel Cabinetmaker<\/strong><\/p>", + "heading_size": "h1" + } + }, + "template--15857070309433__e1b65446-7598-474f-869c-7baeec467495-16820168593215f71a-1": { + "type": "text", + "settings": { + "text": "

Go from custom cabinet design to production in a few easy steps. <\/h3>

<\/h3>" + } + }, + "template--15857070309433__e1b65446-7598-474f-869c-7baeec467495-16820168593215f71a-2": { + "type": "button", + "settings": { + "button_label": "GET STARTED", + "button_link": "https:\/\/easel.inventables.com\/cabinetmaker-signup?utm_source=Direct+or+Organic&utm_medium=Easel+Cabinetmaker+Landing+Page&utm_campaign=Easel+Cabinetmaker+Direct+or+Organic&utm_id=Easel+Cabinetmaker", + "button_style_secondary": false, + "button_label_2": "", + "button_link_2": "", + "button_style_secondary_2": false + } + } + }, + "block_order": [ + "template--15857070309433__e1b65446-7598-474f-869c-7baeec467495-16820168593215f71a-0", + "template--15857070309433__e1b65446-7598-474f-869c-7baeec467495-16820168593215f71a-1", + "template--15857070309433__e1b65446-7598-474f-869c-7baeec467495-16820168593215f71a-2" + ], + "custom_css": [ + ".rich-text__buttons {font-weight: bold;}" + ], + "settings": { + "desktop_content_position": "center", + "content_alignment": "center", + "color_scheme": "inverse", + "full_width": true, + "padding_top": 20, + "padding_bottom": 20 + } + }, + "95aaf2e6-0c56-45e3-b004-03874ceca25d": { + "type": "collapsible-content", + "blocks": { + "template--15857070309433__95aaf2e6-0c56-45e3-b004-03874ceca25d-1682431702b1f2caa9-0": { + "type": "collapsible_row", + "settings": { + "heading": "Cabinet Types", + "icon": "box", + "row_content": "