diff --git a/assets/cart-notification.js b/assets/cart-notification.js index 7e8a06cdf2e..39ceab30ca4 100644 --- a/assets/cart-notification.js +++ b/assets/cart-notification.js @@ -43,6 +43,8 @@ class CartNotification extends HTMLElement { ); }); + // test + if (this.header) this.header.reveal(); this.open(); } diff --git a/assets/section-main-product.css b/assets/section-main-product.css index c9dfc5825a7..6de5c4ef982 100644 --- a/assets/section-main-product.css +++ b/assets/section-main-product.css @@ -1,1494 +1,1531 @@ -product-info { - display: block; -} - -.product { - margin: 0; -} - -.product.grid { - gap: 0; -} - -.product--no-media { - max-width: 57rem; - margin: 0 auto; -} - -.product__media-wrapper { - padding-left: 0; -} - -@media screen and (min-width: 750px) { - .product__column-sticky { - display: block; - position: sticky; - top: 3rem; - z-index: 2; - } - - .product--thumbnail .thumbnail-list { - padding-right: var(--media-shadow-horizontal-offset); - } - - .product__info-wrapper { - padding: 0 0 0 5rem; - } - - .product__info-wrapper--extra-padding { - padding: 0 0 0 8rem; - } - - .product--right .product__info-wrapper { - padding: 0 5rem 0 0; - } - - .product--right .product__info-wrapper--extra-padding { - padding: 0 8rem 0 0; - } - - .product--right .product__media-list { - margin-bottom: 2rem; - } - - .product__media-container .slider-buttons { - display: none; - } - - .product--right .product__media-wrapper { - order: 2; - } -} - -@media screen and (min-width: 990px) { - .product--large:not(.product--no-media) .product__media-wrapper { - max-width: 65%; - width: calc(65% - var(--grid-desktop-horizontal-spacing) / 2); - } - - .product--large:not(.product--no-media) .product__info-wrapper { - padding: 0 0 0 4rem; - max-width: 35%; - width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2); - } - - .product--large:not(.product--no-media).product--right .product__info-wrapper { - padding: 0 4rem 0 0; - } - - .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); - } - - .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); - } -} - -/* Dynamic checkout */ - -.shopify-payment-button__button { - font-family: inherit; - min-height: 4.6rem; -} - -.shopify-payment-button__button [role='button'].focused { - outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important; - outline-offset: 0.3rem; - box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)), - 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3) !important; -} - -.shopify-payment-button__button [role='button']:focus:not(:focus-visible) { - outline: 0; - box-shadow: none !important; -} - -.shopify-payment-button__button [role='button']:focus-visible { - outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important; - box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)), - 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3) !important; -} - -.shopify-payment-button__button--unbranded { - background-color: rgba(var(--color-button), var(--alpha-button-background)); - color: rgb(var(--color-button-text)); - font-size: 1.4rem; - line-height: calc(1 + 0.2 / var(--font-body-scale)); - letter-spacing: 0.07rem; -} - -.shopify-payment-button__button--unbranded::selection { - background-color: rgba(var(--color-button-text), 0.3); -} - -.shopify-payment-button__button--unbranded:hover, -.shopify-payment-button__button--unbranded:hover:not([disabled]) { - background-color: rgba(var(--color-button), var(--alpha-button-background)); -} - -.shopify-payment-button__more-options { - margin: 1.6rem 0 1rem; - font-size: 1.2rem; - line-height: calc(1 + 0.5 / var(--font-body-scale)); - letter-spacing: 0.05rem; - text-decoration: underline; - text-underline-offset: 0.3rem; -} - -.shopify-payment-button__button + .shopify-payment-button__button--hidden { - display: none; -} - -/* Product form */ - -.product-form { - display: block; -} - -.product-form__error-message-wrapper:not([hidden]) { - display: flex; - align-items: flex-start; - font-size: 1.3rem; - line-height: 1.4; - letter-spacing: 0.04rem; - margin-bottom: 1.5rem; -} - -.product-form__error-message-wrapper .svg-wrapper { - flex-shrink: 0; - width: 1.5rem; - height: 1.5rem; - margin-right: 0.7rem; - margin-top: 0.25rem; -} - -/* Form Elements */ -.product-form__input { - flex: 0 0 100%; - padding: 0; - margin: 0 0 1.2rem 0; - max-width: 44rem; - min-width: fit-content; - border: none; -} - -.product-form__input .form__label { - padding-left: 0; -} - -.product-form__input .select { - max-width: 100%; -} - -.product-form__input .svg-wrapper { - right: 1.5rem; -} - -.product-form__submit { - margin-bottom: 1rem; -} - -.product-form__submit[aria-disabled='true'] + .shopify-payment-button .shopify-payment-button__button[disabled], -.product-form__submit[disabled] + .shopify-payment-button .shopify-payment-button__button[disabled] { - cursor: not-allowed; - opacity: 0.5; -} - -@media screen and (forced-colors: active) { - .product-form__submit[aria-disabled='true'] { - color: Window; - } -} - -/* Overrides */ -.shopify-payment-button__more-options { - color: rgb(var(--color-foreground)); -} - -.shopify-payment-button__button { - font-size: 1.5rem; - letter-spacing: 0.1rem; -} - -/* Product info */ - -.product__info-container > * + * { - margin: 1.5rem 0; -} - -.product__info-container iframe { - max-width: 100%; -} - -.product__info-container .product-form, -.product__info-container .product__description, -.product__info-container .icon-with-text { - margin: 2.5rem 0; -} - -.product__text { - margin-bottom: 0; -} - -a.product__text { - display: block; - text-decoration: none; - color: rgba(var(--color-foreground), 0.75); -} - -.product__text.caption-with-letter-spacing { - text-transform: uppercase; -} - -.product__title { - word-break: break-word; - margin-bottom: 1.5rem; -} - -.product__title > * { - margin: 0; -} - -.product__title > a { - display: none; -} - -.product__title + .product__text.caption-with-letter-spacing { - margin-top: -1.5rem; -} - -.product__text.caption-with-letter-spacing + .product__title { - margin-top: 0; -} - -.product__accordion .accordion__content { - padding: 0 1rem; -} - -.product .price .badge { - margin-bottom: 0.5rem; -} - -.product .price__container { - margin-bottom: 0.5rem; -} - -.product .price dl { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - -.product .price--sold-out .price__badge-sale { - display: none; -} - -@media screen and (min-width: 750px) { - .product__info-container { - max-width: 60rem; - } - - .product__info-container .price--on-sale .price-item--regular { - font-size: 1.6rem; - } - - .product__info-container > *:first-child { - margin-top: 0; - } -} - -.product__description-title { - font-weight: 600; -} - -.product--no-media .product__title, -.product--no-media .product__text, -.product--no-media .product__tax, -.product--no-media .product__sku, -.product--no-media shopify-payment-terms { - text-align: center; -} - -.product--no-media .product__media-wrapper, -.product--no-media .product__info-wrapper { - padding: 0; -} - -.product__tax { - margin-top: -1.4rem; -} - -.product--no-media .share-button { - max-width: 100%; -} - -.product--no-media .product-form__quantity, -.product--no-media .share-button, -.product--no-media .product__view-details, -.product--no-media .product__pickup-availabilities, -.product--no-media .product-form { - display: flex; - align-items: center; - justify-content: center; - text-align: center; -} - -.product--no-media .product-form { - flex-direction: column; -} - -.product--no-media .product-form > .form { - max-width: 30rem; - width: 100%; -} - -.product--no-media .product-form__quantity { - flex-direction: column; - max-width: 100%; -} - -.product-form__quantity .form__label { - margin-bottom: 0.6rem; -} - -.price-per-item__label.form__label { - margin-bottom: 0rem; -} - -.product-form__quantity-top .form__label { - margin-bottom: 1.2rem; -} - -.product-form__buttons { - max-width: 44rem; -} - -.product--no-media .product__info-container > modal-opener { - display: block; - text-align: center; -} - -.product--no-media .product-popup-modal__button { - padding-right: 0; -} - -.product--no-media .price { - text-align: center; -} - -/* Product media */ -.product__media-list video { - border-radius: calc(var(--media-radius) - var(--media-border-width)); -} - -@media screen and (max-width: 749px) { - .product__media-list { - margin-left: -2.5rem; - margin-bottom: 3rem; - width: calc(100% + 4rem); - } - - .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) { - margin-left: -1.5rem; - margin-right: -1.5rem; - } - - .slider.product__media-list::-webkit-scrollbar { - height: 0.2rem; - width: 0.2rem; - } - - .product__media-list::-webkit-scrollbar-thumb { - background-color: rgb(var(--color-foreground)); - } - - .product__media-list::-webkit-scrollbar-track { - background-color: rgba(var(--color-foreground), 0.2); - } - - .product__media-list .product__media-item { - width: calc(100% - 3rem - var(--grid-mobile-horizontal-spacing)); - } - - .product--mobile-columns .product__media-item { - width: calc(50% - 1.5rem - var(--grid-mobile-horizontal-spacing)); - } -} - -@media screen and (min-width: 750px) { - .product--thumbnail .product__media-list, - .product--thumbnail_slider .product__media-list { - padding-bottom: calc(var(--media-shadow-vertical-offset) * var(--media-shadow-visible)); - } - - .product__media-list { - padding-right: calc(var(--media-shadow-horizontal-offset) * var(--media-shadow-visible)); - } - - .product--thumbnail .product__media-item:not(.is-active), - .product--thumbnail_slider .product__media-item:not(.is-active) { - display: none; - } - - .product-media-modal__content > .product__media-item--variant.product__media-item--variant { - display: none; - } - - .product-media-modal__content > .product__media-item--variant:first-child { - display: block; - } -} - -@media screen and (min-width: 750px) and (max-width: 989px) { - .product__media-list .product__media-item:first-child { - padding-left: 0; - } - - .product--thumbnail_slider .product__media-list { - margin-left: 0; - } - - .product__media-list .product__media-item { - width: 100%; - } -} - -.product__media-icon .icon { - width: 1.2rem; - height: 1.4rem; -} - -.product__media-icon, -.thumbnail__badge { - background-color: rgb(var(--color-background)); - border-radius: 50%; - border: 0.1rem solid rgba(var(--color-foreground), 0.1); - color: rgb(var(--color-foreground)); - display: flex; - align-items: center; - justify-content: center; - height: 3rem; - width: 3rem; - position: absolute; - left: 1.2rem; - top: 1.2rem; - z-index: 1; - transition: color var(--duration-short) ease, opacity var(--duration-short) ease; -} - -.product__media-video .product__media-icon { - opacity: 1; -} - -.product__modal-opener--image .product__media-toggle:hover { - cursor: zoom-in; -} - -.product__modal-opener:hover .product__media-icon { - border: 0.1rem solid rgba(var(--color-foreground), 0.1); -} - -@media screen and (min-width: 750px) { - .grid__item.product__media-item--full { - width: 100%; - } - - .product--columns .product__media-item:not(.product__media-item--single):not(:only-child) { - max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); - } - - .product--large.product--columns .product__media-item--full .deferred-media__poster-button { - height: 5rem; - width: 5rem; - } - - .product--medium.product--columns .product__media-item--full .deferred-media__poster-button { - height: 4.2rem; - width: 4.2rem; - } - - .product--medium.product--columns .product__media-item--full .deferred-media__poster-button .icon { - width: 1.8rem; - height: 1.8rem; - } - - .product--small.product--columns .product__media-item--full .deferred-media__poster-button { - height: 3.6rem; - width: 3.6rem; - } - - .product--small.product--columns .product__media-item--full .deferred-media__poster-button .icon { - width: 1.6rem; - height: 1.6rem; - } -} - -@media screen and (min-width: 990px) { - .product--stacked .product__media-item { - max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); - } - - .product:not(.product--columns) .product__media-list .product__media-item:first-child, - .product:not(.product--columns) .product__media-list .product__media-item--full { - width: 100%; - max-width: 100%; - } - - .product__modal-opener .product__media-icon { - opacity: 0; - } - - .product__modal-opener:hover .product__media-icon, - .product__modal-opener:focus .product__media-icon { - opacity: 1; - } -} - -.product__media-item > * { - display: block; - position: relative; -} - -.product__media-toggle { - display: flex; - border: none; - background-color: transparent; - color: currentColor; - padding: 0; -} - -.product__media-toggle::after { - content: ''; - cursor: pointer; - display: block; - margin: 0; - padding: 0; - position: absolute; - top: calc(var(--border-width) * -1); - right: calc(var(--border-width) * -1); - bottom: calc(var(--border-width) * -1); - left: calc(var(--border-width) * -1); - z-index: 2; -} - -.product__media-toggle:focus-visible { - outline: 0; - box-shadow: none; -} - -/* outline styling for Windows High Contrast Mode */ -@media (forced-colors: active) { - .product__media-toggle:focus-visible, - .product__media-toggle:focus-visible:after { - outline: transparent solid 1px; - outline-offset: 2px; - } -} -.product__media-toggle.focused { - outline: 0; - box-shadow: none; -} - -.product__media-toggle:focus-visible:after { - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); - border-radius: var(--media-radius); -} - -.product__media-toggle.focused:after { - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); - border-radius: var(--media-radius); -} - -.product-media-modal { - background-color: rgb(var(--color-background)); - height: 100%; - position: fixed; - top: 0; - left: 0; - width: 100%; - visibility: hidden; - opacity: 0; - z-index: -1; -} - -.product-media-modal[open] { - visibility: visible; - opacity: 1; - z-index: 101; -} - -.product-media-modal__dialog { - display: flex; - align-items: center; - height: 100vh; -} - -.product-media-modal__content { - max-height: 100vh; - width: 100%; - overflow: auto; -} - -.product-media-modal__content > *:not(.active), -.product__media-list .deferred-media { - display: none; -} - -@media screen and (min-width: 750px) { - .product-media-modal__content { - padding-bottom: 2rem; - } - - .product-media-modal__content > *:not(.active) { - display: block; - } - - .product__modal-opener:not(.product__modal-opener--image) { - display: none; - } - - .product__media-list .deferred-media { - display: block; - } -} - -@media screen and (max-width: 749px) { - .product--thumbnail .is-active .product__modal-opener:not(.product__modal-opener--image), - .product--thumbnail_slider .is-active .product__modal-opener:not(.product__modal-opener--image) { - display: none; - } - - .product--thumbnail .is-active .deferred-media, - .product--thumbnail_slider .is-active .deferred-media { - display: block; - width: 100%; - } -} - -.product-media-modal__content > * { - display: block; - height: auto; - margin: auto; -} - -.product-media-modal__content .media { - background: none; -} - -.product-media-modal__model { - width: 100%; -} - -.product-media-modal__toggle { - background-color: rgb(var(--color-background)); - border: 0.1rem solid rgba(var(--color-foreground), 0.1); - border-radius: 50%; - color: rgba(var(--color-foreground), 0.55); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - right: 2rem; - padding: 1.2rem; - position: fixed; - z-index: 2; - top: 2rem; - width: 4rem; -} - -.product-media-modal__content .deferred-media { - width: 100%; -} - -@media screen and (min-width: 750px) { - .product-media-modal__content { - padding: 2rem 11rem; - } - - .product-media-modal__content > * { - width: 100%; - } - - .product-media-modal__content > * + * { - margin-top: 2rem; - } - - .product-media-modal__toggle { - right: 5rem; - top: 2.2rem; - } -} - -@media screen and (min-width: 990px) { - .product-media-modal__content { - padding: 2rem 11rem; - } - - .product-media-modal__content > * + * { - margin-top: 1.5rem; - } - - .product-media-modal__content { - padding-bottom: 1.5rem; - } - - .product-media-modal__toggle { - right: 5rem; - } -} - -.product-media-modal__toggle:hover { - color: rgba(var(--color-foreground), 0.75); -} - -.product-media-modal__toggle .icon { - height: auto; - margin: 0; - width: 2.2rem; -} - -/* Product popup */ - -.product-popup-modal { - box-sizing: border-box; - opacity: 0; - position: fixed; - visibility: hidden; - z-index: -1; - margin: 0 auto; - top: 0; - left: 0; - overflow: auto; - width: 100%; - background: rgba(var(--color-foreground), 0.2); - height: 100%; -} - -.product-popup-modal[open] { - opacity: 1; - visibility: visible; - z-index: 101; -} - -.product-popup-modal__content { - border-radius: var(--popup-corner-radius); - background-color: rgb(var(--color-background)); - overflow: auto; - height: 80%; - margin: 0 auto; - left: 50%; - transform: translateX(-50%); - margin-top: 5rem; - width: 92%; - position: absolute; - top: 0; - padding: 0 1.5rem 0 3rem; - border-color: rgba(var(--color-foreground), var(--popup-border-opacity)); - border-style: solid; - border-width: var(--popup-border-width); - box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) - rgba(var(--color-shadow), var(--popup-shadow-opacity)); -} - -.product-popup-modal__content.focused { - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3), - var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) - rgba(var(--color-shadow), var(--popup-shadow-opacity)); -} - -.product-popup-modal__content:focus-visible { - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3), - var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) - rgba(var(--color-shadow), var(--popup-shadow-opacity)); -} - -@media screen and (min-width: 750px) { - .product-popup-modal__content { - padding-right: 1.5rem; - margin-top: 10rem; - width: 70%; - padding: 0 3rem; - } - - .product-media-modal__dialog .global-media-settings--no-shadow { - overflow: visible !important; - } -} - -.product-popup-modal__content img { - max-width: 100%; -} - -@media screen and (max-width: 749px) { - .product-popup-modal__content table { - display: block; - max-width: fit-content; - overflow-x: auto; - white-space: nowrap; - margin: 0; - } - - .product-media-modal__dialog .global-media-settings, - .product-media-modal__dialog .global-media-settings video, - .product-media-modal__dialog .global-media-settings model-viewer, - .product-media-modal__dialog .global-media-settings iframe, - .product-media-modal__dialog .global-media-settings img { - border: none; - border-radius: 0; - } -} - -.product-popup-modal__opener { - display: inline-block; -} - -.product-popup-modal__button { - font-size: 1.6rem; - padding-right: 1.3rem; - padding-left: 0; - min-height: 4.4rem; - text-underline-offset: 0.3rem; - text-decoration-thickness: 0.1rem; - transition: text-decoration-thickness var(--duration-short) ease; -} - -.product-popup-modal__button:hover { - text-decoration-thickness: 0.2rem; -} - -.product-popup-modal__content-info { - padding-right: 4.4rem; -} - -.product-popup-modal__content-info > * { - height: auto; - margin: 0 auto; - max-width: 100%; - width: 100%; -} - -@media screen and (max-width: 749px) { - .product-popup-modal__content-info > * { - max-height: 100%; - } -} - -.product-popup-modal__toggle { - background-color: rgb(var(--color-background)); - border: 0.1rem solid rgba(var(--color-foreground), 0.1); - border-radius: 50%; - color: rgba(var(--color-foreground), 0.55); - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - position: sticky; - padding: 1.2rem; - z-index: 2; - top: 1.5rem; - width: 4rem; - margin: 0 0 0 auto; -} - -.product-popup-modal__toggle:hover { - color: rgba(var(--color-foreground), 0.75); -} - -.product-popup-modal__toggle .icon { - height: auto; - margin: 0; - width: 2.2rem; -} - -.product__media-list .media > * { - overflow: hidden; -} - -.thumbnail-list { - flex-wrap: wrap; - grid-gap: 1rem; -} - -/* Fix to show some space at the end of our sliders in all browsers to be applied on thumbnails */ -.slider--mobile.thumbnail-list:after { - content: none; -} - -@media screen and (min-width: 750px) { - .product--stacked .thumbnail-list { - display: none; - } - - .thumbnail-list { - display: grid; - grid-template-columns: repeat(4, 1fr); - } -} - -.thumbnail-list_item--variant:not(:first-child) { - display: none; -} - -@media screen and (min-width: 990px) { - .thumbnail-list { - grid-template-columns: repeat(4, 1fr); - } - - .product--medium .thumbnail-list { - grid-template-columns: repeat(5, 1fr); - } - - .product--large .thumbnail-list { - grid-template-columns: repeat(6, 1fr); - } -} - -@media screen and (max-width: 749px) { - .product__media-item { - display: flex; - align-items: center; - } - - .product__modal-opener { - width: 100%; - } - - .thumbnail-slider { - display: flex; - align-items: center; - } - - .thumbnail-slider .thumbnail-list.slider { - display: flex; - padding: 0.5rem; - flex: 1; - scroll-padding-left: 0.5rem; - } - - .thumbnail-list__item.slider__slide { - width: calc(33% - 0.6rem); - } -} - -@media screen and (min-width: 750px) { - .product--thumbnail_slider .thumbnail-slider { - display: flex; - align-items: center; - } - - .thumbnail-slider .thumbnail-list.slider--tablet-up { - display: flex; - padding: 0.5rem; - flex: 1; - scroll-padding-left: 0.5rem; - } - - .product__media-wrapper .slider-mobile-gutter .slider-button { - display: none; - } - - .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide { - width: calc(25% - 0.8rem); - } - - .product--thumbnail_slider .slider-mobile-gutter .slider-button { - display: flex; - } -} - -@media screen and (min-width: 900px) { - .product--small .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide { - width: calc(25% - 0.8rem); - } - - .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide { - width: calc(20% - 0.8rem); - } -} - -.thumbnail { - position: absolute; - top: 0; - left: 0; - display: block; - height: 100%; - width: 100%; - padding: 0; - color: rgb(var(--color-foreground)); - cursor: pointer; - background-color: transparent; -} - -.thumbnail:hover { - opacity: 0.7; -} - -.thumbnail.global-media-settings img { - border-radius: 0; -} - -.thumbnail[aria-current] { - box-shadow: 0 0 0rem 0.1rem rgb(var(--color-foreground)); - border-color: rgb(var(--color-foreground)); -} - -.image-magnify-full-size { - cursor: zoom-out; - z-index: 1; - margin: 0; - border-radius: calc(var(--media-radius) - var(--media-border-width)); -} - -.image-magnify-hover { - cursor: zoom-in; -} - -.product__modal-opener--image .product__media-zoom-none, -.product__media-icon--none { - display: none; -} - -.product__modal-opener > .loading__spinner { - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - position: absolute; - display: flex; - align-items: center; - height: 48px; - width: 48px; -} - -.product__modal-opener .path { - stroke: rgb(var(--color-button)); - opacity: 0.75; -} - -@media (hover: hover) { - .product__media-zoom-hover, - .product__media-icon--hover { - display: none; - } -} - -@media screen and (max-width: 749px) { - .product__media-zoom-hover, - .product__media-icon--hover { - display: flex; - } -} - -.js .product__media { - overflow: hidden !important; -} - -.thumbnail[aria-current]:focus-visible { - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); -} - -.thumbnail[aria-current]:focus, -.thumbnail.focused { - outline: 0; - box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); -} - -/* outline styling for Windows High Contrast Mode */ -@media (forced-colors: active) { - .thumbnail[aria-current]:focus, - .thumbnail.focused { - outline: transparent solid 1px; - } -} -.thumbnail[aria-current]:focus:not(:focus-visible) { - outline: 0; - box-shadow: 0 0 0 0.1rem rgb(var(--color-foreground)); -} - -.thumbnail img { - object-fit: cover; - width: 100%; - height: 100%; - pointer-events: none; -} - -.thumbnail__badge .icon { - width: 1rem; - height: 1rem; -} - -.thumbnail__badge .icon-3d-model { - width: 1.2rem; - height: 1.2rem; -} - -.thumbnail__badge { - color: rgb(var(--color-foreground), 0.6); - height: 2rem; - width: 2rem; - left: auto; - right: calc(0.4rem + var(--media-border-width)); - top: calc(0.4rem + var(--media-border-width)); -} - -@media screen and (min-width: 750px) { - .product:not(.product--small) .thumbnail__badge { - height: 3rem; - width: 3rem; - } - - .product:not(.product--small) .thumbnail__badge .icon { - width: 1.2rem; - height: 1.2rem; - } - - .product:not(.product--small) .thumbnail__badge .icon-3d-model { - width: 1.4rem; - height: 1.4rem; - } -} - -.thumbnail-list__item { - position: relative; -} - -.thumbnail-list__item::before { - content: ''; - display: block; - padding-bottom: 100%; -} - -.product:not(.featured-product) .product__view-details { - display: none; -} - -.product__view-details { - display: block; - text-decoration: none; -} - -.product__view-details:hover { - text-decoration: underline; - text-underline-offset: 0.3rem; -} - -.product__view-details .icon { - width: 1.2rem; - margin-left: 1.2rem; - flex-shrink: 0; -} - -/* Inventory status */ - -.product__inventory { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.product__inventory .svg-wrapper, -.product__inventory svg { - width: 15px; - height: 15px; -} - -.product--no-media .product__inventory { - justify-content: center; -} - -/* This keeps the container from getting display: none; applied to it and to make sure we're not introducing some layout shift when switching to an unavailable variant */ -.product__inventory.visibility-hidden:empty { - display: block; -} - -.product__inventory.visibility-hidden:empty::after { - content: '#'; -} - -.product__inventory .icon-inventory-status circle:first-of-type { - opacity: .3; -} - -/* Icon with text */ -.icon-with-text { - --icon-size: calc(var(--font-heading-scale) * 3rem); - --icon-spacing: calc(var(--font-heading-scale) * 1rem); -} - -.icon-with-text--horizontal { - display: flex; - justify-content: center; - column-gap: 3rem; - flex-direction: row; -} - -.icon-with-text--vertical { - --icon-size: calc(var(--font-heading-scale) * 2rem); -} - -.icon-with-text .svg-wrapper { - fill: rgb(var(--color-foreground)); - height: var(--icon-size); - width: var(--icon-size); -} - -.icon-with-text--horizontal .svg-wrapper, -.icon-with-text--horizontal img { - margin-bottom: var(--icon-spacing); -} - -.icon-with-text--vertical .svg-wrapper { - min-height: var(--icon-size); - min-width: var(--icon-size); - margin-right: var(--icon-spacing); -} - -.icon-with-text img { - height: var(--icon-size); - width: var(--icon-size); - object-fit: contain; -} - -.icon-with-text--vertical img { - margin-right: var(--icon-spacing); -} - -.icon-with-text--horizontal .h4 { - padding-top: calc(var(--icon-size) + var(--icon-spacing)); - text-align: center; -} - -.icon-with-text--horizontal .svg-wrapper + .h4, -.icon-with-text--horizontal img + .h4, -.icon-with-text--horizontal.icon-with-text--text-only .h4 { - padding-top: 0; -} - -.icon-with-text__item { - display: flex; - align-items: center; -} - -.icon-with-text--horizontal .icon-with-text__item { - flex-direction: column; - width: 33%; -} - -.icon-with-text--vertical .icon-with-text__item { - margin-bottom: var(--icon-size); -} - -/* SKU block */ - -.product__sku.visibility-hidden::after { - content: '#'; -} - -/* Product-thumbnail snippet */ - -.product-media-container { - --aspect-ratio: var(--preview-ratio); - --ratio-percent: calc(1 / var(--aspect-ratio) * 100%); - position: relative; - width: 100%; - max-width: calc(100% - calc(var(--media-border-width) * 2)); -} - -.product-media-container.constrain-height { - /* arbitrary offset value based on average theme spacing and header height */ - --viewport-offset: 400px; - --constrained-min-height: 300px; - --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset))); - margin-right: auto; - margin-left: auto; -} - -.product-media-container.constrain-height.media-fit-contain { - --contained-width: calc(var(--constrained-height) * var(--aspect-ratio)); - width: min(var(--contained-width), 100%); -} - -.product-media-container .media { - padding-top: var(--ratio-percent); -} - -.product-media-container.constrain-height .media { - padding-top: min(var(--constrained-height), var(--ratio-percent)); -} - -@media screen and (max-width: 749px) { - .product-media-container.media-fit-cover { - display: flex; - align-self: stretch; - } - - .product-media-container.media-fit-cover .media { - /* allow media img element to scale relative to modal-opener/product-media-container */ - position: initial; - } -} - -@media screen and (min-width: 750px) { - .product-media-container { - max-width: 100%; - } - - .product-media-container:not(.media-type-image) { - /* override to use actual media ratio (not poster ratio) for video/models on desktop */ - --aspect-ratio: var(--ratio); - } - - .product-media-container.constrain-height { - --viewport-offset: 170px; - --constrained-min-height: 500px; - } - - .product-media-container.media-fit-cover, - .product-media-container.media-fit-cover .product__modal-opener, - .product-media-container.media-fit-cover .media { - height: 100%; - } - - .product-media-container.media-fit-cover .deferred-media__poster img { - object-fit: cover; - width: 100%; - } -} - -.product-media-container .product__modal-opener { - display: block; - position: relative; -} - -@media screen and (min-width: 750px) { - .product-media-container .product__modal-opener:not(.product__modal-opener--image) { - display: none; - } -} - -/* Recipient form */ -.recipient-form { - /* (2.88[line-height] - 1.6rem) / 2 */ - --recipient-checkbox-margin-top: 0.64rem; - - display: block; - position: relative; - max-width: 44rem; - margin-bottom: 2.5rem; -} - -.recipient-form-field-label { - margin: 0.6rem 0; -} - -.recipient-form-field-label--space-between { - display: flex; - justify-content: space-between; -} - -.recipient-checkbox { - flex-grow: 1; - font-size: 1.6rem; - display: flex; - word-break: break-word; - align-items: flex-start; - max-width: inherit; - position: relative; - cursor: pointer; -} - -.recipient-form > input[type='checkbox'] { - position: absolute; - width: 1.6rem; - height: 1.6rem; - margin: var(--recipient-checkbox-margin-top) 0; - top: 0; - left: 0; - z-index: -1; - appearance: none; - -webkit-appearance: none; -} - -.recipient-fields__field { - margin: 0 0 2rem 0; -} - -.recipient-fields .field__label { - white-space: nowrap; - text-overflow: ellipsis; - max-width: calc(100% - 3.5rem); - overflow: hidden; -} - -.recipient-checkbox > svg { - margin-top: var(--recipient-checkbox-margin-top); - margin-right: 1.2rem; - flex-shrink: 0; -} - -.recipient-form .icon-checkmark { - visibility: hidden; - position: absolute; - left: 0.28rem; - z-index: 5; - top: 0.4rem; - width: 10px; - height: 9px; -} - -.recipient-form > input[type='checkbox']:checked + label .icon-checkmark { - visibility: visible; -} - -.js .recipient-fields { - display: none; -} - -.recipient-fields hr { - margin: 1.6rem auto; -} - -.recipient-form > input[type='checkbox']:checked ~ .recipient-fields { - display: block; - animation: animateMenuOpen var(--duration-default) ease; -} -.recipient-form > input[type='checkbox']:not(:checked, :disabled) ~ .recipient-fields, -.recipient-email-label { - display: none; -} - -.js .recipient-email-label.required { - display: inline; -} - -.recipient-form ul { - line-height: calc(1 + 0.6 / var(--font-body-scale)); - padding-left: 4.4rem; - text-align: left; -} - -.recipient-form ul a { - display: inline; -} - -.recipient-form .error-message::first-letter { - text-transform: capitalize; -} - -@media screen and (forced-colors: active) { - .recipient-fields > hr { - border-top: 0.1rem solid rgb(var(--color-background)); - } - - .recipient-checkbox > svg { - background-color: inherit; - border: 0.1rem solid rgb(var(--color-background)); - } - - .recipient-form > input[type='checkbox']:checked + label .icon-checkmark { - border: none; - } -} +product-info { + display: block; +} + +.product { + margin: 0; +} + +.product.grid { + gap: 0; +} + +.product--no-media { + max-width: 57rem; + margin: 0 auto; +} + +.product__media-wrapper { + padding-left: 0; +} + +@media screen and (min-width: 750px) { + .product__column-sticky { + display: block; + position: sticky; + top: 3rem; + z-index: 2; + } + + .product--thumbnail .thumbnail-list { + padding-right: var(--media-shadow-horizontal-offset); + } + + .product__info-wrapper { + padding: 0 0 0 5rem; + } + + .product__info-wrapper--extra-padding { + padding: 0 0 0 8rem; + } + + .product--right .product__info-wrapper { + padding: 0 5rem 0 0; + } + + .product--right .product__info-wrapper--extra-padding { + padding: 0 8rem 0 0; + } + + .product--right .product__media-list { + margin-bottom: 2rem; + } + + .product__media-container .slider-buttons { + display: none; + } + + .product--right .product__media-wrapper { + order: 2; + } +} + +@media screen and (min-width: 990px) { + .product--large:not(.product--no-media) .product__media-wrapper { + max-width: 65%; + width: calc(65% - var(--grid-desktop-horizontal-spacing) / 2); + } + + .product--large:not(.product--no-media) .product__info-wrapper { + padding: 0 0 0 4rem; + max-width: 35%; + width: calc(35% - var(--grid-desktop-horizontal-spacing) / 2); + } + + .product--large:not(.product--no-media).product--right .product__info-wrapper { + padding: 0 4rem 0 0; + } + + .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); + } + + .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); + } +} + +/* Dynamic checkout */ + +.shopify-payment-button__button { + font-family: inherit; + min-height: 4.6rem; +} + +.shopify-payment-button__button [role='button'].focused { + outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important; + outline-offset: 0.3rem; + box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)), + 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3) !important; +} + +.shopify-payment-button__button [role='button']:focus:not(:focus-visible) { + outline: 0; + box-shadow: none !important; +} + +.shopify-payment-button__button [role='button']:focus-visible { + outline: 0.2rem solid rgba(var(--color-foreground), 0.5) !important; + box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)), + 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3) !important; +} + +.shopify-payment-button__button--unbranded { + background-color: rgba(var(--color-button), var(--alpha-button-background)); + color: rgb(var(--color-button-text)); + font-size: 1.4rem; + line-height: calc(1 + 0.2 / var(--font-body-scale)); + letter-spacing: 0.07rem; +} + +.shopify-payment-button__button--unbranded::selection { + background-color: rgba(var(--color-button-text), 0.3); +} + +.shopify-payment-button__button--unbranded:hover, +.shopify-payment-button__button--unbranded:hover:not([disabled]) { + background-color: rgba(var(--color-button), var(--alpha-button-background)); +} + +.shopify-payment-button__more-options { + margin: 1.6rem 0 1rem; + font-size: 1.2rem; + line-height: calc(1 + 0.5 / var(--font-body-scale)); + letter-spacing: 0.05rem; + text-decoration: underline; + text-underline-offset: 0.3rem; +} + +.shopify-payment-button__button + .shopify-payment-button__button--hidden { + display: none; +} + +/* Product form */ + +.product-form { + display: block; +} + +.product-form__error-message-wrapper:not([hidden]) { + display: flex; + align-items: flex-start; + font-size: 1.3rem; + line-height: 1.4; + letter-spacing: 0.04rem; + margin-bottom: 1.5rem; +} + +.product-form__error-message-wrapper .svg-wrapper { + flex-shrink: 0; + width: 1.5rem; + height: 1.5rem; + margin-right: 0.7rem; + margin-top: 0.25rem; +} + +/* Form Elements */ +.product-form__input { + flex: 0 0 100%; + padding: 0; + margin: 0 0 1.2rem 0; + max-width: 44rem; + min-width: fit-content; + border: none; +} + +.product-form__input .form__label { + padding-left: 0; +} + +.product-form__input .select { + max-width: 100%; +} + +.product-form__input .svg-wrapper { + right: 1.5rem; +} + +.product-form__submit { + margin-bottom: 1rem; +} + +.product-form__submit[aria-disabled='true'] + .shopify-payment-button .shopify-payment-button__button[disabled], +.product-form__submit[disabled] + .shopify-payment-button .shopify-payment-button__button[disabled] { + cursor: not-allowed; + opacity: 0.5; +} + +@media screen and (forced-colors: active) { + .product-form__submit[aria-disabled='true'] { + color: Window; + } +} + +/* Overrides */ +.shopify-payment-button__more-options { + color: rgb(var(--color-foreground)); +} + +.shopify-payment-button__button { + font-size: 1.5rem; + letter-spacing: 0.1rem; +} + +/* Product info */ + +.product__info-container > * + * { + margin: 1.5rem 0; +} + +.product__info-container iframe { + max-width: 100%; +} + +.product__info-container .product-form, +.product__info-container .product__description, +.product__info-container .icon-with-text { + margin: 2.5rem 0; +} + +.product__text { + margin-bottom: 0; +} + +a.product__text { + display: block; + text-decoration: none; + color: rgba(var(--color-foreground), 0.75); +} + +.product__text.caption-with-letter-spacing { + text-transform: uppercase; +} + +.product__title { + word-break: break-word; + margin-bottom: 0.5rem; +} + +.product__title h1 { + font-size: 3.2rem; + font-weight: 700; + margin-bottom: 0.5rem; +} + +.product__text.inline-richtext { + color: #8c8c8c; + font-size: 1.4rem; + margin-bottom: 1.5rem; +} + +.price-item--sale { + color: #4a7c44; + font-weight: 700; + font-size: 2.4rem; +} + +.price-item--regular { + text-decoration: line-through; + color: #8c8c8c; + margin-right: 1rem; +} + +.product-form__submit { + background-color: #5d7c5a !important; + border-radius: 10px !important; + color: white !important; + font-weight: 600; + text-transform: none; + letter-spacing: normal; +} + +.product-form__submit::after { + box-shadow: none !important; +} + +.product__title > * { + margin: 0; +} + +.product__title > a { + display: none; +} + +.product__title + .product__text.caption-with-letter-spacing { + margin-top: -1.5rem; +} + +.product__text.caption-with-letter-spacing + .product__title { + margin-top: 0; +} + +.product__accordion .accordion__content { + padding: 0 1rem; +} + +.product .price .badge { + margin-bottom: 0.5rem; +} + +.product .price__container { + margin-bottom: 0.5rem; +} + +.product .price dl { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.product .price--sold-out .price__badge-sale { + display: none; +} + +@media screen and (min-width: 750px) { + .product__info-container { + max-width: 60rem; + } + + .product__info-container .price--on-sale .price-item--regular { + font-size: 1.6rem; + } + + .product__info-container > *:first-child { + margin-top: 0; + } +} + +.product__description-title { + font-weight: 600; +} + +.product--no-media .product__title, +.product--no-media .product__text, +.product--no-media .product__tax, +.product--no-media .product__sku, +.product--no-media shopify-payment-terms { + text-align: center; +} + +.product--no-media .product__media-wrapper, +.product--no-media .product__info-wrapper { + padding: 0; +} + +.product__tax { + margin-top: -1.4rem; +} + +.product--no-media .share-button { + max-width: 100%; +} + +.product--no-media .product-form__quantity, +.product--no-media .share-button, +.product--no-media .product__view-details, +.product--no-media .product__pickup-availabilities, +.product--no-media .product-form { + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.product--no-media .product-form { + flex-direction: column; +} + +.product--no-media .product-form > .form { + max-width: 30rem; + width: 100%; +} + +.product--no-media .product-form__quantity { + flex-direction: column; + max-width: 100%; +} + +.product-form__quantity .form__label { + margin-bottom: 0.6rem; +} + +.price-per-item__label.form__label { + margin-bottom: 0rem; +} + +.product-form__quantity-top .form__label { + margin-bottom: 1.2rem; +} + +.product-form__buttons { + max-width: 44rem; +} + +.product--no-media .product__info-container > modal-opener { + display: block; + text-align: center; +} + +.product--no-media .product-popup-modal__button { + padding-right: 0; +} + +.product--no-media .price { + text-align: center; +} + +/* Product media */ +.product__media-list video { + border-radius: calc(var(--media-radius) - var(--media-border-width)); +} + +@media screen and (max-width: 749px) { + .product__media-list { + margin-left: -2.5rem; + margin-bottom: 3rem; + width: calc(100% + 4rem); + } + + .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) { + margin-left: -1.5rem; + margin-right: -1.5rem; + } + + .slider.product__media-list::-webkit-scrollbar { + height: 0.2rem; + width: 0.2rem; + } + + .product__media-list::-webkit-scrollbar-thumb { + background-color: rgb(var(--color-foreground)); + } + + .product__media-list::-webkit-scrollbar-track { + background-color: rgba(var(--color-foreground), 0.2); + } + + .product__media-list .product__media-item { + width: calc(100% - 3rem - var(--grid-mobile-horizontal-spacing)); + } + + .product--mobile-columns .product__media-item { + width: calc(50% - 1.5rem - var(--grid-mobile-horizontal-spacing)); + } +} + +@media screen and (min-width: 750px) { + .product--thumbnail .product__media-list, + .product--thumbnail_slider .product__media-list { + padding-bottom: calc(var(--media-shadow-vertical-offset) * var(--media-shadow-visible)); + } + + .product__media-list { + padding-right: calc(var(--media-shadow-horizontal-offset) * var(--media-shadow-visible)); + } + + .product--thumbnail .product__media-item:not(.is-active), + .product--thumbnail_slider .product__media-item:not(.is-active) { + display: none; + } + + .product-media-modal__content > .product__media-item--variant.product__media-item--variant { + display: none; + } + + .product-media-modal__content > .product__media-item--variant:first-child { + display: block; + } +} + +@media screen and (min-width: 750px) and (max-width: 989px) { + .product__media-list .product__media-item:first-child { + padding-left: 0; + } + + .product--thumbnail_slider .product__media-list { + margin-left: 0; + } + + .product__media-list .product__media-item { + width: 100%; + } +} + +.product__media-icon .icon { + width: 1.2rem; + height: 1.4rem; +} + +.product__media-icon, +.thumbnail__badge { + background-color: rgb(var(--color-background)); + border-radius: 50%; + border: 0.1rem solid rgba(var(--color-foreground), 0.1); + color: rgb(var(--color-foreground)); + display: flex; + align-items: center; + justify-content: center; + height: 3rem; + width: 3rem; + position: absolute; + left: 1.2rem; + top: 1.2rem; + z-index: 1; + transition: color var(--duration-short) ease, opacity var(--duration-short) ease; +} + +.product__media-video .product__media-icon { + opacity: 1; +} + +.product__modal-opener--image .product__media-toggle:hover { + cursor: zoom-in; +} + +.product__modal-opener:hover .product__media-icon { + border: 0.1rem solid rgba(var(--color-foreground), 0.1); +} + +@media screen and (min-width: 750px) { + .grid__item.product__media-item--full { + width: 100%; + } + + .product--columns .product__media-item:not(.product__media-item--single):not(:only-child) { + max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); + } + + .product--large.product--columns .product__media-item--full .deferred-media__poster-button { + height: 5rem; + width: 5rem; + } + + .product--medium.product--columns .product__media-item--full .deferred-media__poster-button { + height: 4.2rem; + width: 4.2rem; + } + + .product--medium.product--columns .product__media-item--full .deferred-media__poster-button .icon { + width: 1.8rem; + height: 1.8rem; + } + + .product--small.product--columns .product__media-item--full .deferred-media__poster-button { + height: 3.6rem; + width: 3.6rem; + } + + .product--small.product--columns .product__media-item--full .deferred-media__poster-button .icon { + width: 1.6rem; + height: 1.6rem; + } +} + +@media screen and (min-width: 990px) { + .product--stacked .product__media-item { + max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); + } + + .product:not(.product--columns) .product__media-list .product__media-item:first-child, + .product:not(.product--columns) .product__media-list .product__media-item--full { + width: 100%; + max-width: 100%; + } + + .product__modal-opener .product__media-icon { + opacity: 0; + } + + .product__modal-opener:hover .product__media-icon, + .product__modal-opener:focus .product__media-icon { + opacity: 1; + } +} + +.product__media-item > * { + display: block; + position: relative; +} + +.product__media-toggle { + display: flex; + border: none; + background-color: transparent; + color: currentColor; + padding: 0; +} + +.product__media-toggle::after { + content: ''; + cursor: pointer; + display: block; + margin: 0; + padding: 0; + position: absolute; + top: calc(var(--border-width) * -1); + right: calc(var(--border-width) * -1); + bottom: calc(var(--border-width) * -1); + left: calc(var(--border-width) * -1); + z-index: 2; +} + +.product__media-toggle:focus-visible { + outline: 0; + box-shadow: none; +} + +/* outline styling for Windows High Contrast Mode */ +@media (forced-colors: active) { + .product__media-toggle:focus-visible, + .product__media-toggle:focus-visible:after { + outline: transparent solid 1px; + outline-offset: 2px; + } +} +.product__media-toggle.focused { + outline: 0; + box-shadow: none; +} + +.product__media-toggle:focus-visible:after { + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); + border-radius: var(--media-radius); +} + +.product__media-toggle.focused:after { + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); + border-radius: var(--media-radius); +} + +.product-media-modal { + background-color: rgb(var(--color-background)); + height: 100%; + position: fixed; + top: 0; + left: 0; + width: 100%; + visibility: hidden; + opacity: 0; + z-index: -1; +} + +.product-media-modal[open] { + visibility: visible; + opacity: 1; + z-index: 101; +} + +.product-media-modal__dialog { + display: flex; + align-items: center; + height: 100vh; +} + +.product-media-modal__content { + max-height: 100vh; + width: 100%; + overflow: auto; +} + +.product-media-modal__content > *:not(.active), +.product__media-list .deferred-media { + display: none; +} + +@media screen and (min-width: 750px) { + .product-media-modal__content { + padding-bottom: 2rem; + } + + .product-media-modal__content > *:not(.active) { + display: block; + } + + .product__modal-opener:not(.product__modal-opener--image) { + display: none; + } + + .product__media-list .deferred-media { + display: block; + } +} + +@media screen and (max-width: 749px) { + .product--thumbnail .is-active .product__modal-opener:not(.product__modal-opener--image), + .product--thumbnail_slider .is-active .product__modal-opener:not(.product__modal-opener--image) { + display: none; + } + + .product--thumbnail .is-active .deferred-media, + .product--thumbnail_slider .is-active .deferred-media { + display: block; + width: 100%; + } +} + +.product-media-modal__content > * { + display: block; + height: auto; + margin: auto; +} + +.product-media-modal__content .media { + background: none; +} + +.product-media-modal__model { + width: 100%; +} + +.product-media-modal__toggle { + background-color: rgb(var(--color-background)); + border: 0.1rem solid rgba(var(--color-foreground), 0.1); + border-radius: 50%; + color: rgba(var(--color-foreground), 0.55); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + right: 2rem; + padding: 1.2rem; + position: fixed; + z-index: 2; + top: 2rem; + width: 4rem; +} + +.product-media-modal__content .deferred-media { + width: 100%; +} + +@media screen and (min-width: 750px) { + .product-media-modal__content { + padding: 2rem 11rem; + } + + .product-media-modal__content > * { + width: 100%; + } + + .product-media-modal__content > * + * { + margin-top: 2rem; + } + + .product-media-modal__toggle { + right: 5rem; + top: 2.2rem; + } +} + +@media screen and (min-width: 990px) { + .product-media-modal__content { + padding: 2rem 11rem; + } + + .product-media-modal__content > * + * { + margin-top: 1.5rem; + } + + .product-media-modal__content { + padding-bottom: 1.5rem; + } + + .product-media-modal__toggle { + right: 5rem; + } +} + +.product-media-modal__toggle:hover { + color: rgba(var(--color-foreground), 0.75); +} + +.product-media-modal__toggle .icon { + height: auto; + margin: 0; + width: 2.2rem; +} + +/* Product popup */ + +.product-popup-modal { + box-sizing: border-box; + opacity: 0; + position: fixed; + visibility: hidden; + z-index: -1; + margin: 0 auto; + top: 0; + left: 0; + overflow: auto; + width: 100%; + background: rgba(var(--color-foreground), 0.2); + height: 100%; +} + +.product-popup-modal[open] { + opacity: 1; + visibility: visible; + z-index: 101; +} + +.product-popup-modal__content { + border-radius: var(--popup-corner-radius); + background-color: rgb(var(--color-background)); + overflow: auto; + height: 80%; + margin: 0 auto; + left: 50%; + transform: translateX(-50%); + margin-top: 5rem; + width: 92%; + position: absolute; + top: 0; + padding: 0 1.5rem 0 3rem; + border-color: rgba(var(--color-foreground), var(--popup-border-opacity)); + border-style: solid; + border-width: var(--popup-border-width); + box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) + rgba(var(--color-shadow), var(--popup-shadow-opacity)); +} + +.product-popup-modal__content.focused { + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3), + var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) + rgba(var(--color-shadow), var(--popup-shadow-opacity)); +} + +.product-popup-modal__content:focus-visible { + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3), + var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) + rgba(var(--color-shadow), var(--popup-shadow-opacity)); +} + +@media screen and (min-width: 750px) { + .product-popup-modal__content { + padding-right: 1.5rem; + margin-top: 10rem; + width: 70%; + padding: 0 3rem; + } + + .product-media-modal__dialog .global-media-settings--no-shadow { + overflow: visible !important; + } +} + +.product-popup-modal__content img { + max-width: 100%; +} + +@media screen and (max-width: 749px) { + .product-popup-modal__content table { + display: block; + max-width: fit-content; + overflow-x: auto; + white-space: nowrap; + margin: 0; + } + + .product-media-modal__dialog .global-media-settings, + .product-media-modal__dialog .global-media-settings video, + .product-media-modal__dialog .global-media-settings model-viewer, + .product-media-modal__dialog .global-media-settings iframe, + .product-media-modal__dialog .global-media-settings img { + border: none; + border-radius: 0; + } +} + +.product-popup-modal__opener { + display: inline-block; +} + +.product-popup-modal__button { + font-size: 1.6rem; + padding-right: 1.3rem; + padding-left: 0; + min-height: 4.4rem; + text-underline-offset: 0.3rem; + text-decoration-thickness: 0.1rem; + transition: text-decoration-thickness var(--duration-short) ease; +} + +.product-popup-modal__button:hover { + text-decoration-thickness: 0.2rem; +} + +.product-popup-modal__content-info { + padding-right: 4.4rem; +} + +.product-popup-modal__content-info > * { + height: auto; + margin: 0 auto; + max-width: 100%; + width: 100%; +} + +@media screen and (max-width: 749px) { + .product-popup-modal__content-info > * { + max-height: 100%; + } +} + +.product-popup-modal__toggle { + background-color: rgb(var(--color-background)); + border: 0.1rem solid rgba(var(--color-foreground), 0.1); + border-radius: 50%; + color: rgba(var(--color-foreground), 0.55); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + position: sticky; + padding: 1.2rem; + z-index: 2; + top: 1.5rem; + width: 4rem; + margin: 0 0 0 auto; +} + +.product-popup-modal__toggle:hover { + color: rgba(var(--color-foreground), 0.75); +} + +.product-popup-modal__toggle .icon { + height: auto; + margin: 0; + width: 2.2rem; +} + +.product__media-list .media > * { + overflow: hidden; +} + +.thumbnail-list { + flex-wrap: wrap; + grid-gap: 1rem; +} + +/* Fix to show some space at the end of our sliders in all browsers to be applied on thumbnails */ +.slider--mobile.thumbnail-list:after { + content: none; +} + +@media screen and (min-width: 750px) { + .product--stacked .thumbnail-list { + display: none; + } + + .thumbnail-list { + display: grid; + grid-template-columns: repeat(4, 1fr); + } +} + +.thumbnail-list_item--variant:not(:first-child) { + display: none; +} + +@media screen and (min-width: 990px) { + .thumbnail-list { + grid-template-columns: repeat(4, 1fr); + } + + .product--medium .thumbnail-list { + grid-template-columns: repeat(5, 1fr); + } + + .product--large .thumbnail-list { + grid-template-columns: repeat(6, 1fr); + } +} + +@media screen and (max-width: 749px) { + .product__media-item { + display: flex; + align-items: center; + } + + .product__modal-opener { + width: 100%; + } + + .thumbnail-slider { + display: flex; + align-items: center; + } + + .thumbnail-slider .thumbnail-list.slider { + display: flex; + padding: 0.5rem; + flex: 1; + scroll-padding-left: 0.5rem; + } + + .thumbnail-list__item.slider__slide { + width: calc(33% - 0.6rem); + } +} + +@media screen and (min-width: 750px) { + .product--thumbnail_slider .thumbnail-slider { + display: flex; + align-items: center; + } + + .thumbnail-slider .thumbnail-list.slider--tablet-up { + display: flex; + padding: 0.5rem; + flex: 1; + scroll-padding-left: 0.5rem; + } + + .product__media-wrapper .slider-mobile-gutter .slider-button { + display: none; + } + + .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide { + width: calc(25% - 0.8rem); + } + + .product--thumbnail_slider .slider-mobile-gutter .slider-button { + display: flex; + } +} + +@media screen and (min-width: 900px) { + .product--small .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide { + width: calc(25% - 0.8rem); + } + + .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide { + width: calc(20% - 0.8rem); + } +} + +.thumbnail { + position: absolute; + top: 0; + left: 0; + display: block; + height: 100%; + width: 100%; + padding: 0; + color: rgb(var(--color-foreground)); + cursor: pointer; + background-color: transparent; +} + +.thumbnail:hover { + opacity: 0.7; +} + +.thumbnail.global-media-settings img { + border-radius: 0; +} + +.thumbnail[aria-current] { + box-shadow: 0 0 0rem 0.1rem rgb(var(--color-foreground)); + border-color: rgb(var(--color-foreground)); +} + +.image-magnify-full-size { + cursor: zoom-out; + z-index: 1; + margin: 0; + border-radius: calc(var(--media-radius) - var(--media-border-width)); +} + +.image-magnify-hover { + cursor: zoom-in; +} + +.product__modal-opener--image .product__media-zoom-none, +.product__media-icon--none { + display: none; +} + +.product__modal-opener > .loading__spinner { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + position: absolute; + display: flex; + align-items: center; + height: 48px; + width: 48px; +} + +.product__modal-opener .path { + stroke: rgb(var(--color-button)); + opacity: 0.75; +} + +@media (hover: hover) { + .product__media-zoom-hover, + .product__media-icon--hover { + display: none; + } +} + +@media screen and (max-width: 749px) { + .product__media-zoom-hover, + .product__media-icon--hover { + display: flex; + } +} + +.js .product__media { + overflow: hidden !important; +} + +.thumbnail[aria-current]:focus-visible { + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); +} + +.thumbnail[aria-current]:focus, +.thumbnail.focused { + outline: 0; + box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5); +} + +/* outline styling for Windows High Contrast Mode */ +@media (forced-colors: active) { + .thumbnail[aria-current]:focus, + .thumbnail.focused { + outline: transparent solid 1px; + } +} +.thumbnail[aria-current]:focus:not(:focus-visible) { + outline: 0; + box-shadow: 0 0 0 0.1rem rgb(var(--color-foreground)); +} + +.thumbnail img { + object-fit: cover; + width: 100%; + height: 100%; + pointer-events: none; +} + +.thumbnail__badge .icon { + width: 1rem; + height: 1rem; +} + +.thumbnail__badge .icon-3d-model { + width: 1.2rem; + height: 1.2rem; +} + +.thumbnail__badge { + color: rgb(var(--color-foreground), 0.6); + height: 2rem; + width: 2rem; + left: auto; + right: calc(0.4rem + var(--media-border-width)); + top: calc(0.4rem + var(--media-border-width)); +} + +@media screen and (min-width: 750px) { + .product:not(.product--small) .thumbnail__badge { + height: 3rem; + width: 3rem; + } + + .product:not(.product--small) .thumbnail__badge .icon { + width: 1.2rem; + height: 1.2rem; + } + + .product:not(.product--small) .thumbnail__badge .icon-3d-model { + width: 1.4rem; + height: 1.4rem; + } +} + +.thumbnail-list__item { + position: relative; +} + +.thumbnail-list__item::before { + content: ''; + display: block; + padding-bottom: 100%; +} + +.product:not(.featured-product) .product__view-details { + display: none; +} + +.product__view-details { + display: block; + text-decoration: none; +} + +.product__view-details:hover { + text-decoration: underline; + text-underline-offset: 0.3rem; +} + +.product__view-details .icon { + width: 1.2rem; + margin-left: 1.2rem; + flex-shrink: 0; +} + +/* Inventory status */ + +.product__inventory { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.product__inventory .svg-wrapper, +.product__inventory svg { + width: 15px; + height: 15px; +} + +.product--no-media .product__inventory { + justify-content: center; +} + +/* This keeps the container from getting display: none; applied to it and to make sure we're not introducing some layout shift when switching to an unavailable variant */ +.product__inventory.visibility-hidden:empty { + display: block; +} + +.product__inventory.visibility-hidden:empty::after { + content: '#'; +} + +.product__inventory .icon-inventory-status circle:first-of-type { + opacity: .3; +} + +/* Icon with text */ +.icon-with-text { + --icon-size: calc(var(--font-heading-scale) * 3rem); + --icon-spacing: calc(var(--font-heading-scale) * 1rem); +} + +.icon-with-text--horizontal { + display: flex; + justify-content: center; + column-gap: 3rem; + flex-direction: row; +} + +.icon-with-text--vertical { + --icon-size: calc(var(--font-heading-scale) * 2rem); +} + +.icon-with-text .svg-wrapper { + fill: rgb(var(--color-foreground)); + height: var(--icon-size); + width: var(--icon-size); +} + +.icon-with-text--horizontal .svg-wrapper, +.icon-with-text--horizontal img { + margin-bottom: var(--icon-spacing); +} + +.icon-with-text--vertical .svg-wrapper { + min-height: var(--icon-size); + min-width: var(--icon-size); + margin-right: var(--icon-spacing); +} + +.icon-with-text img { + height: var(--icon-size); + width: var(--icon-size); + object-fit: contain; +} + +.icon-with-text--vertical img { + margin-right: var(--icon-spacing); +} + +.icon-with-text--horizontal .h4 { + padding-top: calc(var(--icon-size) + var(--icon-spacing)); + text-align: center; +} + +.icon-with-text--horizontal .svg-wrapper + .h4, +.icon-with-text--horizontal img + .h4, +.icon-with-text--horizontal.icon-with-text--text-only .h4 { + padding-top: 0; +} + +.icon-with-text__item { + display: flex; + align-items: center; +} + +.icon-with-text--horizontal .icon-with-text__item { + flex-direction: column; + width: 33%; +} + +.icon-with-text--vertical .icon-with-text__item { + margin-bottom: var(--icon-size); +} + +/* SKU block */ + +.product__sku.visibility-hidden::after { + content: '#'; +} + +/* Product-thumbnail snippet */ + +.product-media-container { + --aspect-ratio: var(--preview-ratio); + --ratio-percent: calc(1 / var(--aspect-ratio) * 100%); + position: relative; + width: 100%; + max-width: calc(100% - calc(var(--media-border-width) * 2)); +} + +.product-media-container.constrain-height { + /* arbitrary offset value based on average theme spacing and header height */ + --viewport-offset: 400px; + --constrained-min-height: 300px; + --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset))); + margin-right: auto; + margin-left: auto; +} + +.product-media-container.constrain-height.media-fit-contain { + --contained-width: calc(var(--constrained-height) * var(--aspect-ratio)); + width: min(var(--contained-width), 100%); +} + +.product-media-container .media { + padding-top: var(--ratio-percent); +} + +.product-media-container.constrain-height .media { + padding-top: min(var(--constrained-height), var(--ratio-percent)); +} + +@media screen and (max-width: 749px) { + .product-media-container.media-fit-cover { + display: flex; + align-self: stretch; + } + + .product-media-container.media-fit-cover .media { + /* allow media img element to scale relative to modal-opener/product-media-container */ + position: initial; + } +} + +@media screen and (min-width: 750px) { + .product-media-container { + max-width: 100%; + } + + .product-media-container:not(.media-type-image) { + /* override to use actual media ratio (not poster ratio) for video/models on desktop */ + --aspect-ratio: var(--ratio); + } + + .product-media-container.constrain-height { + --viewport-offset: 170px; + --constrained-min-height: 500px; + } + + .product-media-container.media-fit-cover, + .product-media-container.media-fit-cover .product__modal-opener, + .product-media-container.media-fit-cover .media { + height: 100%; + } + + .product-media-container.media-fit-cover .deferred-media__poster img { + object-fit: cover; + width: 100%; + } +} + +.product-media-container .product__modal-opener { + display: block; + position: relative; +} + +@media screen and (min-width: 750px) { + .product-media-container .product__modal-opener:not(.product__modal-opener--image) { + display: none; + } +} + +/* Recipient form */ +.recipient-form { + /* (2.88[line-height] - 1.6rem) / 2 */ + --recipient-checkbox-margin-top: 0.64rem; + + display: block; + position: relative; + max-width: 44rem; + margin-bottom: 2.5rem; +} + +.recipient-form-field-label { + margin: 0.6rem 0; +} + +.recipient-form-field-label--space-between { + display: flex; + justify-content: space-between; +} + +.recipient-checkbox { + flex-grow: 1; + font-size: 1.6rem; + display: flex; + word-break: break-word; + align-items: flex-start; + max-width: inherit; + position: relative; + cursor: pointer; +} + +.recipient-form > input[type='checkbox'] { + position: absolute; + width: 1.6rem; + height: 1.6rem; + margin: var(--recipient-checkbox-margin-top) 0; + top: 0; + left: 0; + z-index: -1; + appearance: none; + -webkit-appearance: none; +} + +.recipient-fields__field { + margin: 0 0 2rem 0; +} + +.recipient-fields .field__label { + white-space: nowrap; + text-overflow: ellipsis; + max-width: calc(100% - 3.5rem); + overflow: hidden; +} + +.recipient-checkbox > svg { + margin-top: var(--recipient-checkbox-margin-top); + margin-right: 1.2rem; + flex-shrink: 0; +} + +.recipient-form .icon-checkmark { + visibility: hidden; + position: absolute; + left: 0.28rem; + z-index: 5; + top: 0.4rem; + width: 10px; + height: 9px; +} + +.recipient-form > input[type='checkbox']:checked + label .icon-checkmark { + visibility: visible; +} + +.js .recipient-fields { + display: none; +} + +.recipient-fields hr { + margin: 1.6rem auto; +} + +.recipient-form > input[type='checkbox']:checked ~ .recipient-fields { + display: block; + animation: animateMenuOpen var(--duration-default) ease; +} +.recipient-form > input[type='checkbox']:not(:checked, :disabled) ~ .recipient-fields, +.recipient-email-label { + display: none; +} + +.js .recipient-email-label.required { + display: inline; +} + +.recipient-form ul { + line-height: calc(1 + 0.6 / var(--font-body-scale)); + padding-left: 4.4rem; + text-align: left; +} + +.recipient-form ul a { + display: inline; +} + +.recipient-form .error-message::first-letter { + text-transform: capitalize; +} + +@media screen and (forced-colors: active) { + .recipient-fields > hr { + border-top: 0.1rem solid rgb(var(--color-background)); + } + + .recipient-checkbox > svg { + background-color: inherit; + border: 0.1rem solid rgb(var(--color-background)); + } + + .recipient-form > input[type='checkbox']:checked + label .icon-checkmark { + border: none; + } +} diff --git a/config/settings_data.json b/config/settings_data.json index 0f7a06db992..6275515c552 100644 --- a/config/settings_data.json +++ b/config/settings_data.json @@ -1,5 +1,199 @@ +/* + * ------------------------------------------------------------ + * IMPORTANT: The contents of this file are auto-generated. + * + * This file may be updated by the Shopify admin theme editor + * or related systems. Please exercise caution as any changes + * made to this file may be overwritten. + * ------------------------------------------------------------ + */ { - "current": "Default", + "current": { + "logo": "shopify://shop_images/logo-neoric_360x_47889885-6f6b-48dc-83cb-e16579cc9ecc.png", + "logo_width": 90, + "type_header_font": "assistant_n4", + "heading_scale": 100, + "type_body_font": "assistant_n4", + "body_scale": 100, + "page_width": 1200, + "spacing_sections": 0, + "spacing_grid_horizontal": 8, + "spacing_grid_vertical": 8, + "buttons_border_thickness": 1, + "buttons_border_opacity": 100, + "buttons_radius": 0, + "buttons_shadow_opacity": 0, + "buttons_shadow_horizontal_offset": 0, + "buttons_shadow_vertical_offset": 4, + "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": 4, + "inputs_shadow_blur": 5, + "card_style": "standard", + "card_image_padding": 0, + "card_text_alignment": "left", + "card_color_scheme": "scheme-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": "scheme-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": "scheme-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": 5, + "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": "scheme-5", + "sold_out_badge_color_scheme": "scheme-3", + "social_facebook_link": "", + "social_instagram_link": "", + "social_youtube_link": "", + "social_tiktok_link": "", + "social_twitter_link": "", + "social_snapchat_link": "", + "social_pinterest_link": "", + "social_tumblr_link": "", + "social_vimeo_link": "", + "predictive_search_enabled": true, + "predictive_search_show_vendor": false, + "predictive_search_show_price": false, + "currency_code_enabled": true, + "cart_type": "notification", + "show_vendor": false, + "show_cart_note": false, + "cart_drawer_collection": "", + "sections": { + "main-password-header": { + "type": "main-password-header", + "settings": { + "color_scheme": "scheme-1" + } + }, + "main-password-footer": { + "type": "main-password-footer", + "settings": { + "color_scheme": "scheme-1" + } + } + }, + "content_for_index": [], + "color_schemes": { + "scheme-1": { + "settings": { + "background": "#ffffff", + "background_gradient": "", + "text": "#121212", + "button": "#121212", + "button_label": "#ffffff", + "secondary_button_label": "#121212", + "shadow": "#121212" + } + }, + "scheme-2": { + "settings": { + "background": "#f3f3f3", + "background_gradient": "", + "text": "#121212", + "button": "#121212", + "button_label": "#f3f3f3", + "secondary_button_label": "#121212", + "shadow": "#121212" + } + }, + "scheme-3": { + "settings": { + "background": "#242833", + "background_gradient": "", + "text": "#ffffff", + "button": "#ffffff", + "button_label": "#000000", + "secondary_button_label": "#ffffff", + "shadow": "#121212" + } + }, + "scheme-4": { + "settings": { + "background": "#121212", + "background_gradient": "", + "text": "#ffffff", + "button": "#ffffff", + "button_label": "#121212", + "secondary_button_label": "#ffffff", + "shadow": "#121212" + } + }, + "scheme-5": { + "settings": { + "background": "#334fb4", + "background_gradient": "", + "text": "#ffffff", + "button": "#ffffff", + "button_label": "#334fb4", + "secondary_button_label": "#ffffff", + "shadow": "#121212" + } + } + } + }, "presets": { "Default": { "logo_width": 90, diff --git a/layout/theme.liquid b/layout/theme.liquid index 70db635823b..d0cdad8094a 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -1,376 +1,379 @@ - - - - - - - - - - {%- 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' %} - - - - - - - - - {%- if settings.animations_reveal_on_scroll -%} - - {%- endif -%} - - {{ 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' }} - - {% for scheme in settings.color_schemes -%} - {% assign scheme_classes = scheme_classes | append: ', .color-' | append: scheme.id %} - {% if forloop.index == 1 -%} - :root, - {%- endif %} - .color-{{ scheme.id }} { - --color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }}; - {% if scheme.settings.background_gradient != empty %} - --gradient-background: {{ scheme.settings.background_gradient }}; - {% else %} - --gradient-background: {{ scheme.settings.background }}; - {% endif %} - - {% liquid - assign background_color = scheme.settings.background - assign background_color_brightness = background_color | color_brightness - if background_color_brightness <= 26 - assign background_color_contrast = background_color | color_lighten: 50 - elsif background_color_brightness <= 65 - assign background_color_contrast = background_color | color_lighten: 5 - else - assign background_color_contrast = background_color | color_darken: 25 - endif - %} - - --color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }}; - --color-background-contrast: {{ background_color_contrast.red }},{{ background_color_contrast.green }},{{ background_color_contrast.blue }}; - --color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }}; - --color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }}; - --color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }}; - --color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }}; - --color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }}; - --color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }}; - --color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }}; - --color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }}; - --color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }}; - --payment-terms-background-color: rgb({{ scheme.settings.background.rgb }}); - } - {% endfor %} - - {{ scheme_classes | prepend: 'body' }} { - color: rgba(var(--color-foreground), 0.75); - background-color: rgb(var(--color-background)); - } - - :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 }}; - - --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 }} - - - {%- if settings.cart_type == 'drawer' -%} - {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }} - {{ 'component-cart.css' | asset_url | stylesheet_tag }} - {{ 'component-totals.css' | asset_url | stylesheet_tag }} - {{ 'component-price.css' | asset_url | stylesheet_tag }} - {{ 'component-discounts.css' | asset_url | stylesheet_tag }} - {%- endif -%} - - {%- unless settings.type_body_font.system? -%} - {% comment %}theme-check-disable AssetPreload{% endcomment %} - - {% comment %}theme-check-enable AssetPreload{% endcomment %} - {%- endunless -%} - {%- unless settings.type_header_font.system? -%} - {% comment %}theme-check-disable AssetPreload{% endcomment %} - - {% comment %}theme-check-enable AssetPreload{% endcomment %} - {%- endunless -%} - - {%- if localization.available_countries.size > 1 or localization.available_languages.size > 1 -%} - {{ 'component-localization-form.css' | asset_url | stylesheet_tag: preload: true }} - - {%- endif -%} - - {%- if settings.predictive_search_enabled -%} - - {%- endif -%} - - - - - - - - {%- if settings.cart_type == 'drawer' -%} - {%- render 'cart-drawer' -%} - {%- endif -%} - - {% sections 'header-group' %} - -
- {{ content_for_layout }} -
- - {% sections 'footer-group' %} - - - - - - {%- if settings.predictive_search_enabled -%} - - {%- endif -%} - - {%- if settings.cart_type == 'drawer' -%} - - {%- endif -%} - - + + + + + + + + + + {%- 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' %} + + {{ 'splide.min.css' | asset_url | stylesheet_tag }} + + + + + + + + + + {%- if settings.animations_reveal_on_scroll -%} + + {%- endif -%} + + {{ 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' }} + + {% for scheme in settings.color_schemes -%} + {% assign scheme_classes = scheme_classes | append: ', .color-' | append: scheme.id %} + {% if forloop.index == 1 -%} + :root, + {%- endif %} + .color-{{ scheme.id }} { + --color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }}; + {% if scheme.settings.background_gradient != empty %} + --gradient-background: {{ scheme.settings.background_gradient }}; + {% else %} + --gradient-background: {{ scheme.settings.background }}; + {% endif %} + + {% liquid + assign background_color = scheme.settings.background + assign background_color_brightness = background_color | color_brightness + if background_color_brightness <= 26 + assign background_color_contrast = background_color | color_lighten: 50 + elsif background_color_brightness <= 65 + assign background_color_contrast = background_color | color_lighten: 5 + else + assign background_color_contrast = background_color | color_darken: 25 + endif + %} + + --color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }}; + --color-background-contrast: {{ background_color_contrast.red }},{{ background_color_contrast.green }},{{ background_color_contrast.blue }}; + --color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }}; + --color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }}; + --color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }}; + --color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }}; + --color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }}; + --color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }}; + --color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }}; + --color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }}; + --color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }}; + --payment-terms-background-color: rgb({{ scheme.settings.background.rgb }}); + } + {% endfor %} + + {{ scheme_classes | prepend: 'body' }} { + color: rgba(var(--color-foreground), 0.75); + background-color: rgb(var(--color-background)); + } + + :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 }}; + + --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 }} + + + {%- if settings.cart_type == 'drawer' -%} + {{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }} + {{ 'component-cart.css' | asset_url | stylesheet_tag }} + {{ 'component-totals.css' | asset_url | stylesheet_tag }} + {{ 'component-price.css' | asset_url | stylesheet_tag }} + {{ 'component-discounts.css' | asset_url | stylesheet_tag }} + {%- endif -%} + + {%- unless settings.type_body_font.system? -%} + {% comment %}theme-check-disable AssetPreload{% endcomment %} + + {% comment %}theme-check-enable AssetPreload{% endcomment %} + {%- endunless -%} + {%- unless settings.type_header_font.system? -%} + {% comment %}theme-check-disable AssetPreload{% endcomment %} + + {% comment %}theme-check-enable AssetPreload{% endcomment %} + {%- endunless -%} + + {%- if localization.available_countries.size > 1 or localization.available_languages.size > 1 -%} + {{ 'component-localization-form.css' | asset_url | stylesheet_tag: preload: true }} + + {%- endif -%} + + {%- if settings.predictive_search_enabled -%} + + {%- endif -%} + + + + + + + + {%- if settings.cart_type == 'drawer' -%} + {%- render 'cart-drawer' -%} + {%- endif -%} + + {% sections 'header-group' %} + +
+ {{ content_for_layout }} +
+ + {% sections 'footer-group' %} + + + + + + {%- if settings.predictive_search_enabled -%} + + {%- endif -%} + + {%- if settings.cart_type == 'drawer' -%} + + {%- endif -%} + + diff --git a/sections/header.liquid b/sections/header.liquid index e3aa5eb5262..9a36eb3e170 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -1,638 +1,660 @@ - - - - - -{%- if settings.predictive_search_enabled -%} - -{%- endif -%} - -{%- if section.settings.menu_type_desktop == 'mega' -%} - -{%- endif -%} - - - - -{%- style -%} - .header { - padding: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px 3rem {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px 3rem; - } - - .section-header { - position: sticky; /* This is for fixing a Safari z-index issue. PR #2147 */ - margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px; - } - - @media screen and (min-width: 750px) { - .section-header { - margin-bottom: {{ section.settings.margin_bottom }}px; - } - } - - @media screen and (min-width: 990px) { - .header { - padding-top: {{ section.settings.padding_top }}px; - padding-bottom: {{ section.settings.padding_bottom }}px; - } - } -{%- endstyle -%} - - - -{%- liquid - for block in section.blocks - if block.type == '@app' - assign has_app_block = true - endif - endfor --%} - -{% liquid - assign header_tag = 'div' - - if section.settings.sticky_header_type != 'none' - assign header_tag = 'sticky-header' - endif -%} - -<{{ header_tag }} {% if header_tag == 'sticky-header' %}data-sticky-type="{{ section.settings.sticky_header_type }}"{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}"> - {%- liquid - assign social_links = false - assign localization_forms = false - - if settings.social_twitter_link != blank or settings.social_facebook_link != blank or settings.social_pinterest_link != blank or settings.social_instagram_link != blank or settings.social_youtube_link != blank or settings.social_vimeo_link != blank or settings.social_tiktok_link != blank or settings.social_tumblr_link != blank or settings.social_snapchat_link != blank - assign social_links = true - endif - - if localization.available_countries.size > 1 and section.settings.enable_country_selector or section.settings.enable_language_selector and localization.available_languages.size > 1 - assign localization_forms = true - endif - -%} -
- {%- liquid - if section.settings.menu != blank - render 'header-drawer' - endif - - if section.settings.logo_position == 'top-center' or section.settings.menu == blank - render 'header-search', input_id: 'Search-In-Modal-1' - endif - -%} - - {%- if section.settings.logo_position != 'middle-center' -%} - {%- if request.page_type == 'index' -%} -

- {%- endif -%} - - {%- if settings.logo != blank -%} -
- {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%} - {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%} - {% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %} - {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %} - {{ settings.logo | image_url: width: 600 | image_tag: - class: 'header__heading-logo motion-reduce', - widths: widths, - height: logo_height, - width: settings.logo_width, - alt: logo_alt, - sizes: sizes, - preload: true - }} -
- {%- else -%} - {{ shop.name }} - {%- endif -%} - - {%- if request.page_type == 'index' -%} -

- {%- endif -%} - {%- endif -%} - - {%- liquid - if section.settings.menu != blank - if section.settings.menu_type_desktop == 'dropdown' - render 'header-dropdown-menu' - elsif section.settings.menu_type_desktop != 'drawer' - render 'header-mega-menu' - endif - endif - %} - - {%- if section.settings.logo_position == 'middle-center' -%} - {%- if request.page_type == 'index' -%} -

- {%- endif -%} - - {%- if settings.logo != blank -%} -
- {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%} - {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%} - {% capture sizes %}(min-width: 750px) {{ settings.logo_width }}px, 50vw{% endcapture %} - {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %} - {{ settings.logo | image_url: width: 600 | image_tag: - class: 'header__heading-logo', - widths: widths, - height: logo_height, - width: settings.logo_width, - alt: logo_alt, - sizes: sizes, - preload: true - }} -
- {%- else -%} - {{ shop.name }} - {%- endif -%} - - {%- if request.page_type == 'index' -%} -

- {%- endif -%} - {%- endif -%} - -
-
- {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%} - - {%- form 'localization', id: 'HeaderCountryForm', class: 'localization-form' -%} -
- - {%- render 'country-localization', localPosition: 'HeaderCountry' -%} -
- {%- endform -%} - - {% endif %} - - {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%} - - {%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%} -
- - {%- render 'language-localization', localPosition: 'HeaderLanguage' -%} -
- {%- endform -%} - - {%- endif -%} -
- {% render 'header-search', input_id: 'Search-In-Modal' %} - - {%- if shop.customer_accounts_enabled -%} - - {%- endif -%} - - {%- for block in section.blocks -%} - {%- case block.type -%} - {%- when '@app' -%} - {% render block %} - {%- endcase -%} - {%- endfor -%} - - - {% if cart == empty %} - {{'icon-cart-empty.svg' | inline_asset_content }} - {% else %} - {{'icon-cart.svg' | inline_asset_content }} - {% endif %} - - {%- if cart != empty -%} -
- {%- if cart.item_count < 100 -%} - - {%- endif -%} - -
- {%- endif -%} - -
-
- - -{%- if settings.cart_type == "notification" -%} - {%- render 'cart-notification', color_scheme: section.settings.color_scheme, desktop_menu_type: section.settings.menu_type_desktop -%} -{%- endif -%} - -{% javascript %} - class StickyHeader extends HTMLElement { - constructor() { - super(); - } - - connectedCallback() { - this.header = document.querySelector('.section-header'); - this.headerIsAlwaysSticky = this.getAttribute('data-sticky-type') === 'always' || this.getAttribute('data-sticky-type') === 'reduce-logo-size'; - this.headerBounds = {}; - - this.setHeaderHeight(); - - window.matchMedia('(max-width: 990px)').addEventListener('change', this.setHeaderHeight.bind(this)); - - if (this.headerIsAlwaysSticky) { - this.header.classList.add('shopify-section-header-sticky'); - }; - - 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(); - } - - setHeaderHeight() { - document.documentElement.style.setProperty('--header-height', `${this.header.offsetHeight}px`); - } - - 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) { - this.header.classList.add('scrolled-past-header'); - if (this.preventHide) return; - requestAnimationFrame(this.hide.bind(this)); - } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) { - this.header.classList.add('scrolled-past-header'); - 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) { - this.header.classList.remove('scrolled-past-header'); - requestAnimationFrame(this.reset.bind(this)); - } - - this.currentScrollTop = scrollTop; - } - - hide() { - if (this.headerIsAlwaysSticky) return; - this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky'); - this.closeMenuDisclosure(); - this.closeSearchModal(); - } - - reveal() { - if (this.headerIsAlwaysSticky) return; - this.header.classList.add('shopify-section-header-sticky', 'animate'); - this.header.classList.remove('shopify-section-header-hidden'); - } - - reset() { - if (this.headerIsAlwaysSticky) return; - 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()); - } - - 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": "t:sections.header.name", - "class": "section-header", - "max_blocks": 3, - "settings": [ - { - "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", - "info": "t:sections.header.settings.logo_help.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": "link_list", - "id": "menu", - "default": "main-menu", - "label": "t:sections.header.settings.menu.label" - }, - { - "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" - }, - { - "value": "drawer", - "label": "t:sections.header.settings.menu_type_desktop.options__3.label" - } - ], - "default": "dropdown", - "label": "t:sections.header.settings.menu_type_desktop.label" - }, - { - "type": "select", - "id": "sticky_header_type", - "options": [ - { - "value": "none", - "label": "t:sections.header.settings.sticky_header_type.options__1.label" - }, - { - "value": "on-scroll-up", - "label": "t:sections.header.settings.sticky_header_type.options__2.label" - }, - { - "value": "always", - "label": "t:sections.header.settings.sticky_header_type.options__3.label" - }, - { - "value": "reduce-logo-size", - "label": "t:sections.header.settings.sticky_header_type.options__4.label" - } - ], - "default": "on-scroll-up", - "label": "t:sections.header.settings.sticky_header_type.label" - }, - { - "type": "checkbox", - "id": "show_line_separator", - "default": true, - "label": "t:sections.header.settings.show_line_separator.label" - }, - { - "type": "header", - "content": "t:sections.header.settings.header__1.content" - }, - { - "type": "color_scheme", - "id": "color_scheme", - "label": "t:sections.all.colors.label", - "default": "scheme-1" - }, - { - "type": "color_scheme", - "id": "menu_color_scheme", - "label": "t:sections.header.settings.menu_color_scheme.label", - "default": "scheme-1" - }, - { - "type": "header", - "content": "t:sections.header.settings.header__utilities.content" - }, - { - "type": "checkbox", - "id": "enable_country_selector", - "default": true, - "label": "t:sections.header.settings.enable_country_selector.label", - "info":"t:sections.header.settings.enable_country_selector.info" - }, - { - "type": "checkbox", - "id": "enable_language_selector", - "default": true, - "label": "t:sections.header.settings.enable_language_selector.label", - "info":"t:sections.header.settings.enable_language_selector.info" - }, - { - "type": "checkbox", - "id": "enable_customer_avatar", - "default": true, - "label": "t:sections.header.settings.enable_customer_avatar.label", - "info": "t:sections.header.settings.enable_customer_avatar.info" - }, - { - "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 - } - ], - "blocks": [ - { - "type": "@app" - } - ] -} -{% endschema %} + + + + + +{%- if settings.predictive_search_enabled -%} + +{%- endif -%} + +{%- if section.settings.menu_type_desktop == 'mega' -%} + +{%- endif -%} + + + + +{%- style -%} + .header { + padding: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px 3rem {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px 3rem; + } + + /* Force layout: Menu Left, Logo Center, Icons Right */ + @media screen and (min-width: 990px) { + .header { + display: grid !important; + grid-template-areas: 'navigation heading icons' !important; + grid-template-columns: 1fr auto 1fr !important; + align-items: center; + } + .header__inline-menu { + grid-area: navigation; + justify-self: start; + } + .header__heading { + grid-area: heading; + justify-self: center; + } + .header__icons { + grid-area: icons; + justify-self: end; + } + } + + .section-header { + position: sticky; /* This is for fixing a Safari z-index issue. PR #2147 */ + margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px; + } + + @media screen and (min-width: 750px) { + .section-header { + margin-bottom: {{ section.settings.margin_bottom }}px; + } + } + + @media screen and (min-width: 990px) { + .header { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + } +{%- endstyle -%} + + + +{%- liquid + for block in section.blocks + if block.type == '@app' + assign has_app_block = true + endif + endfor +-%} + +{% liquid + assign header_tag = 'div' + + if section.settings.sticky_header_type != 'none' + assign header_tag = 'sticky-header' + endif +%} + +<{{ header_tag }} {% if header_tag == 'sticky-header' %}data-sticky-type="{{ section.settings.sticky_header_type }}"{% endif %} class="header-wrapper color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} header-wrapper--border-bottom{% endif %}"> + {%- liquid + assign social_links = false + assign localization_forms = false + + if settings.social_twitter_link != blank or settings.social_facebook_link != blank or settings.social_pinterest_link != blank or settings.social_instagram_link != blank or settings.social_youtube_link != blank or settings.social_vimeo_link != blank or settings.social_tiktok_link != blank or settings.social_tumblr_link != blank or settings.social_snapchat_link != blank + assign social_links = true + endif + + if localization.available_countries.size > 1 and section.settings.enable_country_selector or section.settings.enable_language_selector and localization.available_languages.size > 1 + assign localization_forms = true + endif + -%} +
+ {%- liquid + if section.settings.menu != blank + render 'header-drawer' + endif + + if section.settings.logo_position == 'top-center' or section.settings.menu == blank + render 'header-search', input_id: 'Search-In-Modal-1' + endif + -%} + + {%- if section.settings.logo_position != 'middle-center' -%} + {%- if request.page_type == 'index' -%} +

+ {%- endif -%} + + {%- if settings.logo != blank -%} +
+ {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%} + {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%} + {% capture sizes %}(max-width: {{ settings.logo_width | times: 2 }}px) 50vw, {{ settings.logo_width }}px{% endcapture %} + {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %} + {{ settings.logo | image_url: width: 600 | image_tag: + class: 'header__heading-logo motion-reduce', + widths: widths, + height: logo_height, + width: settings.logo_width, + alt: logo_alt, + sizes: sizes, + preload: true + }} +
+ {%- else -%} + {{ shop.name }} + {%- endif -%} + + {%- if request.page_type == 'index' -%} +

+ {%- endif -%} + {%- endif -%} + + {%- liquid + if section.settings.menu != blank + if section.settings.menu_type_desktop == 'dropdown' + render 'header-dropdown-menu' + elsif section.settings.menu_type_desktop != 'drawer' + render 'header-mega-menu' + endif + endif + %} + + {%- if section.settings.logo_position == 'middle-center' -%} + {%- if request.page_type == 'index' -%} +

+ {%- endif -%} + + {%- if settings.logo != blank -%} +
+ {%- assign logo_alt = settings.logo.alt | default: shop.name | escape -%} + {%- assign logo_height = settings.logo_width | divided_by: settings.logo.aspect_ratio -%} + {% capture sizes %}(min-width: 750px) {{ settings.logo_width }}px, 50vw{% endcapture %} + {% capture widths %}{{ settings.logo_width }}, {{ settings.logo_width | times: 1.5 | round }}, {{ settings.logo_width | times: 2 }}{% endcapture %} + {{ settings.logo | image_url: width: 600 | image_tag: + class: 'header__heading-logo', + widths: widths, + height: logo_height, + width: settings.logo_width, + alt: logo_alt, + sizes: sizes, + preload: true + }} +
+ {%- else -%} + {{ shop.name }} + {%- endif -%} + + {%- if request.page_type == 'index' -%} +

+ {%- endif -%} + {%- endif -%} + +
+
+ {%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%} + + {%- form 'localization', id: 'HeaderCountryForm', class: 'localization-form' -%} +
+ + {%- render 'country-localization', localPosition: 'HeaderCountry' -%} +
+ {%- endform -%} + + {% endif %} + + {%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%} + + {%- form 'localization', id: 'HeaderLanguageForm', class: 'localization-form' -%} +
+ + {%- render 'language-localization', localPosition: 'HeaderLanguage' -%} +
+ {%- endform -%} + + {%- endif -%} +
+ {% render 'header-search', input_id: 'Search-In-Modal' %} + + {%- if shop.customer_accounts_enabled -%} + + {%- endif -%} + + {%- for block in section.blocks -%} + {%- case block.type -%} + {%- when '@app' -%} + {% render block %} + {%- endcase -%} + {%- endfor -%} + + + {% if cart == empty %} + {{'icon-cart-empty.svg' | inline_asset_content }} + {% else %} + {{'icon-cart.svg' | inline_asset_content }} + {% endif %} + + {%- if cart != empty -%} +
+ {%- if cart.item_count < 100 -%} + + {%- endif -%} + +
+ {%- endif -%} + +
+
+ + +{%- if settings.cart_type == "notification" -%} + {%- render 'cart-notification', color_scheme: section.settings.color_scheme, desktop_menu_type: section.settings.menu_type_desktop -%} +{%- endif -%} + +{% javascript %} + class StickyHeader extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + this.header = document.querySelector('.section-header'); + this.headerIsAlwaysSticky = this.getAttribute('data-sticky-type') === 'always' || this.getAttribute('data-sticky-type') === 'reduce-logo-size'; + this.headerBounds = {}; + + this.setHeaderHeight(); + + window.matchMedia('(max-width: 990px)').addEventListener('change', this.setHeaderHeight.bind(this)); + + if (this.headerIsAlwaysSticky) { + this.header.classList.add('shopify-section-header-sticky'); + }; + + 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(); + } + + setHeaderHeight() { + document.documentElement.style.setProperty('--header-height', `${this.header.offsetHeight}px`); + } + + 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) { + this.header.classList.add('scrolled-past-header'); + if (this.preventHide) return; + requestAnimationFrame(this.hide.bind(this)); + } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) { + this.header.classList.add('scrolled-past-header'); + 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) { + this.header.classList.remove('scrolled-past-header'); + requestAnimationFrame(this.reset.bind(this)); + } + + this.currentScrollTop = scrollTop; + } + + hide() { + if (this.headerIsAlwaysSticky) return; + this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky'); + this.closeMenuDisclosure(); + this.closeSearchModal(); + } + + reveal() { + if (this.headerIsAlwaysSticky) return; + this.header.classList.add('shopify-section-header-sticky', 'animate'); + this.header.classList.remove('shopify-section-header-hidden'); + } + + reset() { + if (this.headerIsAlwaysSticky) return; + 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()); + } + + 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": "t:sections.header.name", + "class": "section-header", + "max_blocks": 3, + "settings": [ + { + "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", + "info": "t:sections.header.settings.logo_help.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": "link_list", + "id": "menu", + "default": "main-menu", + "label": "t:sections.header.settings.menu.label" + }, + { + "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" + }, + { + "value": "drawer", + "label": "t:sections.header.settings.menu_type_desktop.options__3.label" + } + ], + "default": "dropdown", + "label": "t:sections.header.settings.menu_type_desktop.label" + }, + { + "type": "select", + "id": "sticky_header_type", + "options": [ + { + "value": "none", + "label": "t:sections.header.settings.sticky_header_type.options__1.label" + }, + { + "value": "on-scroll-up", + "label": "t:sections.header.settings.sticky_header_type.options__2.label" + }, + { + "value": "always", + "label": "t:sections.header.settings.sticky_header_type.options__3.label" + }, + { + "value": "reduce-logo-size", + "label": "t:sections.header.settings.sticky_header_type.options__4.label" + } + ], + "default": "on-scroll-up", + "label": "t:sections.header.settings.sticky_header_type.label" + }, + { + "type": "checkbox", + "id": "show_line_separator", + "default": true, + "label": "t:sections.header.settings.show_line_separator.label" + }, + { + "type": "header", + "content": "t:sections.header.settings.header__1.content" + }, + { + "type": "color_scheme", + "id": "color_scheme", + "label": "t:sections.all.colors.label", + "default": "scheme-1" + }, + { + "type": "color_scheme", + "id": "menu_color_scheme", + "label": "t:sections.header.settings.menu_color_scheme.label", + "default": "scheme-1" + }, + { + "type": "header", + "content": "t:sections.header.settings.header__utilities.content" + }, + { + "type": "checkbox", + "id": "enable_country_selector", + "default": true, + "label": "t:sections.header.settings.enable_country_selector.label", + "info":"t:sections.header.settings.enable_country_selector.info" + }, + { + "type": "checkbox", + "id": "enable_language_selector", + "default": true, + "label": "t:sections.header.settings.enable_language_selector.label", + "info":"t:sections.header.settings.enable_language_selector.info" + }, + { + "type": "checkbox", + "id": "enable_customer_avatar", + "default": true, + "label": "t:sections.header.settings.enable_customer_avatar.label", + "info": "t:sections.header.settings.enable_customer_avatar.info" + }, + { + "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 + } + ], + "blocks": [ + { + "type": "@app" + } + ] +} +{% endschema %} diff --git a/sections/icon-benefits.liquid b/sections/icon-benefits.liquid new file mode 100644 index 00000000000..c60c1b0e2d8 --- /dev/null +++ b/sections/icon-benefits.liquid @@ -0,0 +1,154 @@ +{% schema %} +{ + "name": "Icon Benefits", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "color_scheme", + "id": "color_scheme", + "label": "t:sections.all.colors.label", + "default": "background-1" + }, + { + "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": "benefit", + "name": "Benefit", + "settings": [ + { + "type": "text", + "id": "icon", + "label": "Icon (SVG Name or Emoji)", + "default": "🛡️" + }, + { + "type": "inline_richtext", + "id": "text", + "label": "Text", + "default": "Benefit text" + } + ] + } + ], + "presets": [ + { + "name": "Icon Benefits", + "blocks": [ + { + "type": "benefit", + "settings": { "icon": "🛡️", "text": "Omega-Schutz" } + }, + { + "type": "benefit", + "settings": { "icon": "🔬", "text": "Laborzertifiziert" } + }, + { + "type": "benefit", + "settings": { "icon": "🚫", "text": "Gentechnikfrei" } + }, + { + "type": "benefit", + "settings": { "icon": "🍃", "text": "Vegan" } + }, + { + "type": "benefit", + "settings": { "icon": "💧", "text": "Omega-3-reich" } + }, + { + "type": "benefit", + "settings": { "icon": "🇩🇪", "text": "Herstellung in Deutschland" } + } + ] + } + ] +} +{% endschema %} + +{%- 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; + background-color: #f0f4e9; /* Light green background as in image */ + } + + @media screen and (min-width: 750px) { + .section-{{ section.id }}-padding { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + } + } + + .icon-benefits { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 2rem; + max-width: var(--page-width); + margin: 0 auto; + padding: 0 1.5rem; + } + + .icon-benefit__item { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + flex: 1 1 120px; + max-width: 150px; + } + + .icon-benefit__icon { + width: 40px; + height: 40px; + margin-bottom: 1rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 2.4rem; + background: white; + border-radius: 50%; + padding: 0.5rem; + } + + .icon-benefit__text { + font-size: 1.2rem; + line-height: 1.2; + color: #4a4a4a; + } +{%- endstyle -%} + +
+
+ {%- for block in section.blocks -%} +
+
+ {{ block.settings.icon }} +
+
+ {{ block.settings.text }} +
+
+ {%- endfor -%} +
+
diff --git a/sections/main-product.liquid b/sections/main-product.liquid index ccf7e0522e6..697e9e76fab 100644 --- a/sections/main-product.liquid +++ b/sections/main-product.liquid @@ -87,6 +87,77 @@ {%- for block in section.blocks -%} {%- case block.type -%} + {%- when 'icon-benefits' -%} + {%- style -%} + .icon-benefits-{{ block.id }} { + background-color: #f0f4e9; + padding: 2rem 1.5rem; + margin: 2rem 0; + border-radius: 8px; + } + .icon-benefits-{{ block.id }} .icon-benefits { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; + justify-items: center; + } + .icon-benefits-{{ block.id }} .icon-benefit__item { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + } + .icon-benefits-{{ block.id }} .icon-benefit__icon { + width: 40px; + height: 40px; + margin-bottom: 1rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 2.4rem; + background: white; + border-radius: 50%; + padding: 0.5rem; + } + .icon-benefits-{{ block.id }} .icon-benefit__text { + font-size: 1.1rem; + line-height: 1.2; + color: #4a4a4a; + } + @media screen and (min-width: 750px) { + .icon-benefits-{{ block.id }} .icon-benefits { + grid-template-columns: repeat(6, 1fr); + } + } + {%- endstyle -%} +
+
+
+
🛡️
+
Omega-Schutz
+
+
+
🔬
+
Laborzertifiziert
+
+
+
🚫
+
Gentechnikfrei
+
+
+
🍃
+
Vegan
+
+
+
💧
+
Omega-3-reich
+
+
+
🇩🇪
+
Herstellung in Deutschland
+
+
+
{%- when '@app' -%} {% render block %} {%- when 'text' -%} @@ -1464,6 +1535,11 @@ } ] }, + { + "type": "icon-benefits", + "name": "Icon Benefits", + "limit": 1 + }, { "type": "icon-with-text", "name": "t:sections.main-product.blocks.icon_with_text.name", diff --git a/snippets/product-media-gallery.liquid b/snippets/product-media-gallery.liquid index bc1978e2b4c..246c11448df 100644 --- a/snippets/product-media-gallery.liquid +++ b/snippets/product-media-gallery.liquid @@ -1,332 +1,497 @@ -{% comment %} - Renders a product media gallery. Should be used with 'media-gallery.js' - Also see 'product-media-modal' - - Accepts: - - product: {Object} Product liquid object - - variant_images: {Array} Product images associated with a variant - - limit: {Number} (optional) When passed, limits the number of media items to render - - Usage: - {% render 'product-media-gallery' %} -{% endcomment %} - -{%- liquid - if section.settings.hide_variants and variant_images.size == product.media.size - assign single_media_visible = true - endif - - if limit == 1 - assign single_media_visible = true - endif - - assign media_count = product.media.size - if section.settings.hide_variants and media_count > 1 and variant_images.size > 0 - assign media_count = media_count | minus: variant_images.size | plus: 1 - endif - - if media_count == 1 or single_media_visible - assign single_media_visible_mobile = true - endif - - if media_count == 0 or single_media_visible_mobile or section.settings.mobile_thumbnails == 'show' or section.settings.mobile_thumbnails == 'columns' and media_count < 3 - assign hide_mobile_slider = true - 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 --%} - - - - - - -
- -
- 1 - - - {{ media_count }} -
- -
- - {%- if first_3d_model -%} - - {%- endif -%} - {%- liquid - assign is_not_limited_to_single_item = false - if limit == null or limit > 1 - assign is_not_limited_to_single_item = true - endif - -%} - {%- if is_not_limited_to_single_item - and media_count > 1 - and section.settings.gallery_layout contains 'thumbnail' - or section.settings.mobile_thumbnails == 'show' - -%} - - - - - - {%- endif -%} - +{% comment %} + Renders a product media gallery. Should be used with 'media-gallery.js' + Also see 'product-media-modal' + + Accepts: + - product: {Object} Product liquid object + - variant_images: {Array} Product images associated with a variant + - limit: {Number} (optional) When passed, limits the number of media items to render + + Usage: + {% render 'product-media-gallery' %} +{% endcomment %} + +{%- liquid + if section.settings.hide_variants and variant_images.size == product.media.size + assign single_media_visible = true + endif + + if limit == 1 + assign single_media_visible = true + endif + + assign media_count = product.media.size + if section.settings.hide_variants and media_count > 1 and variant_images.size > 0 + assign media_count = media_count | minus: variant_images.size | plus: 1 + endif + + if media_count == 1 or single_media_visible + assign single_media_visible_mobile = true + endif + + if media_count == 0 or single_media_visible_mobile or section.settings.mobile_thumbnails == 'show' or section.settings.mobile_thumbnails == 'columns' and media_count < 3 + assign hide_mobile_slider = true + 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 +-%} + + + + +
+
+
+
    + {%- for media in product.media -%} +
  • + {{ media.preview_image | image_url: width: 100 | image_tag }} +
    • + {%- endfor -%} +
+
+
+ +
+
+
    + {%- for media in product.media -%} +
  • + {{ media.preview_image | image_url: width: 1000 | image_tag: loading: 'lazy' }} +
    • + {%- endfor -%} +
+
+
+ + +
+
+
+ + + + + + + +
+ +
+ 1 + + + {{ media_count }} +
+ +
+ + {%- if first_3d_model -%} + + {%- endif -%} + {%- liquid + assign is_not_limited_to_single_item = false + if limit == null or limit > 1 + assign is_not_limited_to_single_item = true + endif + -%} + {%- if is_not_limited_to_single_item + and media_count > 1 + and section.settings.gallery_layout contains 'thumbnail' + or section.settings.mobile_thumbnails == 'show' + -%} + + + + + + {%- endif -%} + diff --git a/templates/product.json b/templates/product.json index 62fb0ab6af7..d01bf3dc4f0 100644 --- a/templates/product.json +++ b/templates/product.json @@ -1,17 +1,20 @@ +/* + * ------------------------------------------------------------ + * IMPORTANT: The contents of this file are auto-generated. + * + * This file may be updated by the Shopify admin theme editor + * or related systems. Please exercise caution as any changes + * made to this file may be overwritten. + * ------------------------------------------------------------ + */ { "sections": { "main": { "type": "main-product", "blocks": { - "vendor": { - "type": "text", - "settings": { - "text": "{{ product.vendor }}", - "text_style": "uppercase" - } - }, "title": { - "type": "title" + "type": "title", + "settings": {} }, "caption": { "type": "text", @@ -21,91 +24,55 @@ } }, "price": { - "type": "price" + "type": "price", + "settings": {} }, "variant_picker": { "type": "variant_picker", "settings": { - "picker_type": "button" + "picker_type": "button", + "swatch_shape": "circle" } }, - "quantity_selector": { - "type": "quantity_selector" + "inventory_necQ8j": { + "type": "inventory", + "settings": { + "text_style": "body", + "inventory_threshold": 10, + "show_inventory_quantity": true + } }, "buy_buttons": { "type": "buy_buttons", "settings": { - "show_dynamic_checkout": true, - "show_gift_card_recipient": true + "show_dynamic_checkout": false, + "show_gift_card_recipient": false } }, "description": { - "type": "description" - }, - "collapsible-row-0": { - "type": "collapsible_tab", - "settings": { - "heading": "Materials", - "icon": "leather", - "content": "", - "page": "" - } - }, - "collapsible-row-1": { - "type": "collapsible_tab", - "settings": { - "heading": "Shipping & Returns", - "icon": "truck", - "content": "", - "page": "" - } - }, - "collapsible-row-2": { - "type": "collapsible_tab", - "settings": { - "heading": "Dimensions", - "icon": "ruler", - "content": "", - "page": "" - } - }, - "collapsible-row-3": { - "type": "collapsible_tab", - "settings": { - "heading": "Care Instructions", - "icon": "heart", - "content": "", - "page": "" - } - }, - "share": { - "type": "share", - "settings": { - "share_label": "Share" - } + "type": "description", + "settings": {} } }, "block_order": [ - "vendor", "title", "caption", "price", "variant_picker", - "quantity_selector", + "inventory_necQ8j", "buy_buttons", - "description", - "collapsible-row-0", - "collapsible-row-1", - "collapsible-row-2", - "collapsible-row-3", - "share" + "description" ], "settings": { "enable_sticky_info": true, - "gallery_layout": "stacked", + "color_scheme": "", "media_size": "large", "constrain_to_viewport": true, + "media_fit": "contain", + "gallery_layout": "stacked", "mobile_thumbnails": "hide", + "media_position": "left", + "image_zoom": "lightbox", "hide_variants": true, "enable_video_looping": false, "padding_top": 36, @@ -125,7 +92,7 @@ "image-with-text-1": { "type": "text", "settings": { - "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>", + "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.

", "text_style": "body" } } @@ -138,11 +105,13 @@ "height": "small", "desktop_image_width": "medium", "layout": "text_first", + "image_behavior": "none", + "content_layout": "no-overlap", "desktop_content_position": "top", "desktop_content_alignment": "left", - "content_layout": "no-overlap", - "color_scheme": "scheme-2", "mobile_content_alignment": "left", + "section_color_scheme": "", + "color_scheme": "scheme-2", "padding_top": 36, "padding_bottom": 36 } @@ -154,7 +123,7 @@ "type": "column", "settings": { "title": "Free Shipping", - "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>", + "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.

", "link_label": "", "link": "" } @@ -163,7 +132,7 @@ "type": "column", "settings": { "title": "Hassle-Free Exchanges", - "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>", + "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.

", "link_label": "", "link": "" } @@ -178,14 +147,14 @@ "heading_size": "h1", "image_width": "full", "image_ratio": "adapt", + "button_label": "", + "button_link": "", "columns_desktop": 2, "column_alignment": "left", "background_style": "none", - "button_label": "", - "button_link": "", - "swipe_on_mobile": false, "color_scheme": "scheme-1", "columns_mobile": "1", + "swipe_on_mobile": false, "padding_top": 36, "padding_bottom": 36 } @@ -195,13 +164,15 @@ "settings": { "heading": "You may also like", "heading_size": "h2", + "products_to_show": 4, "columns_desktop": 4, + "columns_mobile": "2", "color_scheme": "scheme-1", "image_ratio": "square", + "image_shape": "default", "show_secondary_image": true, "show_vendor": false, "show_rating": false, - "columns_mobile": "2", "padding_top": 36, "padding_bottom": 28 }