{{- block.settings.text -}}
{%- when 'title' -%} -{{ product.title | escape }}
- -- {{ product.title | escape }} -
- +{{ product.title | escape }}
+ ++ {{ product.title | escape }} +
+ +{{ product.metafields.custom.brand_name.value }}
+diff --git a/assets/alert-box.css b/assets/alert-box.css new file mode 100644 index 00000000000..453d2e9dcf6 --- /dev/null +++ b/assets/alert-box.css @@ -0,0 +1,46 @@ +.alert-box { + display: flex; + flex-wrap: nowrap; + align-items: center; + gap: 1rem; + padding: 1rem; + border-radius: 1rem; + border: 1px solid; +} +.alert-box__icon { + height: 2rem; +} +.alert-box__title { + margin: 0; +} +.alert-box__message { + color: unset; +} + +.alert-box--default { + border-color: blue; +} +.alert-box--default .alert-box__icon { + color: blue; +} + +.alert-box--success { + border-color: green; +} +.alert-box--success .alert-box__icon { + color: green; +} + +.alert-box--warning { + border-color: orange; +} +.alert-box--warning .alert-box__icon { + color: orange; +} + +.alert-box--error { + border-color: red; +} +.alert-box--error .alert-box__icon { + color: red; +} \ No newline at end of file diff --git a/assets/base.css b/assets/base.css index c8c0d4cbde1..d095e906506 100644 --- a/assets/base.css +++ b/assets/base.css @@ -96,13 +96,13 @@ body:has(.section-header .drawer-menu) .announcement-bar-section .page-width { } .utility-bar__grid.page-width { - padding-left: 3rem; - padding-right: 3rem; + padding-left: 2rem; + padding-right: 2rem; } @media screen and (min-width: 750px) { .page-width { - padding: 0 5rem; + padding: 0 3rem; } .header.page-width, @@ -116,11 +116,11 @@ body:has(.section-header .drawer-menu) .announcement-bar-section .page-width { } .page-width-desktop { - padding: 0; + padding: 0 3rem; } .page-width-tablet { - padding: 0 5rem; + padding: 0 3rem; } } @@ -137,7 +137,7 @@ body:has(.section-header .drawer-menu) .announcement-bar-section .page-width { .page-width-desktop { max-width: var(--page-width); - padding: 0 5rem; + padding: 0 3rem; } } @@ -258,7 +258,6 @@ h5, .h3, .h4, .h5 { - font-family: var(--font-heading-family); font-style: var(--font-heading-style); font-weight: var(--font-heading-weight); letter-spacing: calc(var(--font-heading-scale) * 0.06rem); @@ -267,92 +266,284 @@ h5, word-break: break-word; } -.hxxl { - font-size: clamp(calc(var(--font-heading-scale) * 5.6rem), 14vw, calc(var(--font-heading-scale) * 7.2rem)); - line-height: 1.1; -} -.hxl { - font-size: calc(var(--font-heading-scale) * 5rem); - line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale))); -} +/*********************************************** + * DISPLAY & CTA (no family/weight/transform) + ***********************************************/ + .display-0, + .display_0 { + font-size: var(--font-display-0-size) !important; + font-family: 'Michroma', sans-serif !important; + text-transform: uppercase; + } + + .display-1, + .display_1 { + font-size: var(--font-display-1-size) !important; + font-family: 'Michroma', sans-serif !important; + text-transform: uppercase !important; + } + + .display-2, + .display_2 { + font-family: 'Michroma', sans-serif !important; + font-size: var(--font-display-2-size) !important; + text-transform: uppercase !important; + } + + .display-3, + .display_3 { + font-family: 'Michroma', sans-serif !important; + font-size: var(--font-display-3-size) !important; + text-transform: uppercase !important; + } + + .display-4, + .display_4 { + font-family: 'Michroma', sans-serif !important; + font-size: var(--font-display-4-size) !important; + text-transform: uppercase !important; + } + + .cta, button.cta, + .cta-text, button.shopify-payment-button__button, button.button { + font-family: 'Michroma', sans-serif !important; + font-size: var(--font-cta-size) !important; + } + + /*********************************************** + * H0 + ***********************************************/ + h0, + .h0 { + font-size: var(--font-h0-size); + font-family: var(--font-h0-family); + font-weight: var(--font-h0-weight); + text-transform: var(--font-h0-transform); + } + + /*********************************************** + * HXL + ***********************************************/ + hxl, + .hxl { + font-size: var(--font-hxl-size); + font-family: var(--font-hxl-family); + font-weight: var(--font-hxl-weight); + text-transform: var(--font-hxl-transform); + } + + /*********************************************** + * HXXL + ***********************************************/ + hxxl, + .hxxl { + font-size: var(--font-hxxl-size); + font-family: var(--font-hxxl-family); + font-weight: var(--font-hxxl-weight); + text-transform: var(--font-hxxl-transform); + } + + /*********************************************** + * H1 + ***********************************************/ + h1, + .h1 { + font-size: var(--font-h1-size); + font-family: var(--font-h1-family); + font-weight: var(--font-h1-weight); + text-transform: var(--font-h1-transform); + } + + /*********************************************** + * H2 + ***********************************************/ + h2, + .h2 { + font-size: var(--font-h2-size); + font-family: var(--font-h2-family); + font-weight: var(--font-h2-weight); + text-transform: var(--font-h2-transform); + } + + /*********************************************** + * H3 + ***********************************************/ + h3, + .h3 { + font-size: var(--font-h3-size); + font-family: var(--font-h3-family); + font-weight: var(--font-h3-weight); + text-transform: var(--font-h3-transform); + } + + /*********************************************** + * H4 + ***********************************************/ + h4, + .h4 { + font-size: var(--font-h4-size); + font-family: var(--font-h4-family); + font-weight: var(--font-h4-weight); + text-transform: var(--font-h4-transform); + } + + /*********************************************** + * H5 + ***********************************************/ + h5, + .h5 { + font-size: var(--font-h5-size); + font-family: var(--font-h5-family); + font-weight: var(--font-h5-weight); + text-transform: var(--font-h5-transform); + } + + /*********************************************** + * H6 + ***********************************************/ + h6, + .h6 { + font-size: var(--font-h6-size); + font-family: var(--font-h6-family); + font-weight: var(--font-h6-weight); + text-transform: var(--font-h6-transform); + } + + /*********************************************** + * LABEL LARGE + ***********************************************/ + .label-large, + .label_lg { + font-size: var(--font-label-lg-size); + font-family: var(--font-label-lg-family); + font-weight: var(--font-label-lg-weight); + text-transform: var(--font-label-lg-transform); + margin: 0; + } + + /*********************************************** + * LABEL MEDIUM + ***********************************************/ + .label-medium, + .label_md { + font-size: var(--font-label-md-size); + font-family: var(--font-label-md-family); + font-weight: var(--font-label-md-weight); + text-transform: var(--font-label-md-transform); + } + + /*********************************************** + * LABEL SMALL + ***********************************************/ + .label-small, + .label_sm { + font-size: var(--font-label-sm-size); + font-family: var(--font-label-sm-family); + font-weight: var(--font-label-sm-weight); + text-transform: var(--font-label-sm-transform); + } + + /*********************************************** + * PRICE LARGE + ***********************************************/ + .product .price--large, + .price_lg { + font-size: var(--font-price-lg-size); + font-family: var(--font-price-lg-family); + font-weight: var(--font-price-lg-weight); + text-transform: var(--font-price-lg-transform); + } + + /*********************************************** + * PRICE SMALL + ***********************************************/ + .price-small, + .price_sm { + font-size: var(--font-price-sm-size); + font-family: var(--font-price-sm-family); + font-weight: var(--font-price-sm-weight); + text-transform: var(--font-price-sm-transform); + } + + @media (max-width: 768px) { + /* Example: multiply each base size by var(--font-responsive-scale) */ + .display-0, .display_0 { + font-size: calc(var(--font-display-0-size) * var(--font-responsive-scale)); + } + + .display-1, .display_1 { + font-size: calc(var(--font-display-1-size) * var(--font-responsive-scale)); + } + + .display-2, .display_2 { + font-size: calc(var(--font-display-2-size) * var(--font-responsive-scale)); + } + + .display-3, .display_3 { + font-size: calc(var(--font-display-3-size) * var(--font-responsive-scale)) !important; + } + + .cta, button.cta, + .cta-text, button.shopify-payment-button__button, button.button { + font-size: calc(var(--font-cta-size) * var(--font-responsive-scale)); + } -@media only screen and (min-width: 750px) { - .hxl { - font-size: calc(var(--font-heading-scale) * 6.2rem); + h0, .h0 { + font-size: calc(var(--font-h0-size) * var(--font-responsive-scale)); } -} -.h0 { - font-size: calc(var(--font-heading-scale) * 4rem); -} + hxl, .hxl { + font-size: calc(var(--font-hxl-size) * var(--font-responsive-scale)); + } -@media only screen and (min-width: 750px) { - .h0 { - font-size: calc(var(--font-heading-scale) * 5.2rem); + hxxl, .hxxl { + font-size: calc(var(--font-hxxl-size) * var(--font-responsive-scale)); } -} -h1, -.h1 { - font-size: calc(var(--font-heading-scale) * 3rem); -} + h1, .h1 { + font-size: calc(var(--font-h1-size) * var(--font-responsive-scale)); + } -@media only screen and (min-width: 750px) { - h1, - .h1 { - font-size: calc(var(--font-heading-scale) * 4rem); + h2, .h2 { + font-size: calc(var(--font-h2-size) * var(--font-responsive-scale)); } -} -h2, -.h2 { - font-size: calc(var(--font-heading-scale) * 2rem); -} + h3, .h3 { + font-size: calc(var(--font-h3-size) * var(--font-responsive-scale)); + } -@media only screen and (min-width: 750px) { - h2, - .h2 { - font-size: calc(var(--font-heading-scale) * 2.4rem); + h4, .h4 { + font-size: calc(var(--font-h4-size) * var(--font-responsive-scale)); } -} -h3, -.h3 { - font-size: calc(var(--font-heading-scale) * 1.7rem); -} + h5, .h5 { + font-size: calc(var(--font-h5-size) * var(--font-responsive-scale)); + } -@media only screen and (min-width: 750px) { - h3, - .h3 { - font-size: calc(var(--font-heading-scale) * 1.8rem); + h6, .h6 { + font-size: calc(var(--font-h6-size) * var(--font-responsive-scale)); } -} -h4, -.h4 { - font-family: var(--font-heading-family); - font-style: var(--font-heading-style); - font-size: calc(var(--font-heading-scale) * 1.5rem); -} + .label-large, .label_lg { + font-size: calc(var(--font-label-lg-size) * var(--font-responsive-scale)); + } -h5, -.h5 { - font-size: calc(var(--font-heading-scale) * 1.2rem); -} + .label-medium, .label_md { + font-size: calc(var(--font-label-md-size) * var(--font-responsive-scale)); + } -@media only screen and (min-width: 750px) { - h5, - .h5 { - font-size: calc(var(--font-heading-scale) * 1.3rem); + .label-small, .label_sm { + font-size: calc(var(--font-label-sm-size) * var(--font-responsive-scale)); } -} -h6, -.h6 { - color: rgba(var(--color-foreground), 0.75); - margin-block-start: 1.67em; - margin-block-end: 1.67em; + .product .price--large, .price_lg { + font-size: calc(var(--font-price-lg-size) * var(--font-responsive-scale)); + } + + .price-small, .price_sm { + font-size: calc(var(--font-price-sm-size) * var(--font-responsive-scale)); + } } blockquote { @@ -403,7 +594,6 @@ blockquote { .field__input, .form__label, .select__select { - font-size: 1.3rem; line-height: calc(1 + 0.5 / var(--font-body-scale)); letter-spacing: 0.04rem; } @@ -487,11 +677,9 @@ h6:empty { display: inline-block; border: none; box-shadow: none; - text-decoration: underline; - text-underline-offset: 0.3rem; color: rgb(var(--color-link)); background-color: transparent; - font-size: 1.4rem; + font-size: 1.2rem; font-family: inherit; } @@ -1122,7 +1310,7 @@ summary::-webkit-details-marker { position: absolute; top: 0; left: 0; - height: 100%; + height: auto; width: 100%; } @@ -1299,10 +1487,14 @@ button.shopify-payment-button__button--unbranded { .button, .button-label, .shopify-challenge__button, -.customer button { - font-size: 1.5rem; +.customer button, +button.shopify-payment-button__button { + font-size: 1.1rem; letter-spacing: 0.1rem; line-height: calc(1 + 0.2 / var(--font-body-scale)); + text-transform: uppercase; + font-weight: 600; + font-family: 'Montserrat'; } .button--tertiary { @@ -1396,6 +1588,7 @@ shopify-accelerated-checkout-cart { margin-left: 0; padding-left: 0; min-height: 4.4rem; + padding: 0; } details[open] > .share-button__fallback { @@ -1877,10 +2070,10 @@ input[type='checkbox'] { .quantity { color: rgba(var(--color-foreground)); position: relative; - width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width) * 2); + width: calc(9rem / var(--font-body-scale) + var(--inputs-border-width) * 2); display: flex; border-radius: var(--inputs-radius); - min-height: calc((var(--inputs-border-width) * 2) + 4.5rem); + min-height: calc((var(--inputs-border-width) * 2) + 2.5rem); } .quantity:after { @@ -1892,7 +2085,7 @@ input[type='checkbox'] { bottom: var(--inputs-border-width); left: var(--inputs-border-width); border: 0.1rem solid transparent; - border-radius: var(--inputs-radius); + border-radius: 20px; box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity)); transition: box-shadow var(--duration-short) ease; z-index: 1; @@ -1918,7 +2111,7 @@ input[type='checkbox'] { font-family: var(--font-body-family); font-style: var(--font-body-style); font-weight: var(--font-body-weight); - font-size: 1.6rem; + font-size: 1.4rem; font-weight: 500; opacity: 0.85; text-align: center; @@ -1932,7 +2125,7 @@ input[type='checkbox'] { } .quantity__button { - width: calc(4.5rem / var(--font-body-scale)); + width: calc(3.5rem / var(--font-body-scale)); flex-shrink: 0; font-size: 1.8rem; border: 0; @@ -2105,7 +2298,7 @@ input[type='checkbox'] { } .utility-bar__grid { - display: grid; + display: flex; grid-template-columns: 1fr; grid-template-areas: 'announcements'; } @@ -2554,11 +2747,15 @@ input[type='checkbox'] { .header__icon, .header__icon--cart .icon { - height: 4.4rem; + height: 2.4rem; width: 4.4rem; padding: 0; } +header.header { + padding: 6px 1.5rem; +} + .header__icon--cart { position: relative; margin-right: -1.2rem; @@ -2805,18 +3002,6 @@ details[open] > .header__submenu { transition: text-decoration var(--duration-short) ease; } -.header__menu-item:hover span { - text-decoration: underline; - text-underline-offset: 0.3rem; -} - -details[open] > .header__menu-item { - text-decoration: underline; -} - -details[open]:hover > .header__menu-item { - text-decoration-thickness: 0.2rem; -} details[open] > .header__menu-item .icon-caret { transform: rotate(180deg); @@ -2920,7 +3105,6 @@ details-disclosure > details { border: 1px solid transparent; border-radius: var(--badge-corner-radius); display: inline-block; - font-size: 1.2rem; letter-spacing: 0.1rem; line-height: 1; padding: 0.5rem 1.3rem 0.6rem 1.3rem; @@ -2999,7 +3183,7 @@ details-disclosure > details { .global-media-settings { position: relative; - border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity)); + /* border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity)); */ border-radius: var(--media-radius); overflow: visible !important; background-color: rgb(var(--color-background)); @@ -3595,3 +3779,177 @@ details-disclosure > details { transform: translateX(100%) scaleX(0); } } + +@media screen and (max-width: 989px) { + .collection.page-width { + padding: 0; + } +} + +.sizeguide-trigger { + /*padding: 3px 10px 4px 5px;*/ + /*background-color: #efefef;*/ + width: fit-content; + height: fit-content; + border-radius: 50px; + display: flex; + flex-wrap: nowrap; + align-items: center; + margin-top: 10px; + margin-bottom: 10px; + gap: 2px; + /*border: 1px solid grey;*/ +} + +.sizeguide-trigger .svg-wrapper { + height: 15px; + width: 15px; +} + +.sizeguide-trigger:hover { + cursor: pointer; +} + +.sizeguide-text { + margin: 0; +} +.size-label-container { + display: flex; + align-items: center; +} +.product-grid .card-wrapper .card__content { + padding: 0; +} + +.product-grid .card-wrapper .card__content .card__information { + padding: 0 0.6rem; +} + + +.product-grid .card-wrapper .card__content .card__information .product_brand_name { + margin: 0; +} + +.product-grid .card__media .media { + box-shadow: inset 0px 20px 30px 0px #efefef, + inset 0px -20px 30px 0px #efefef, + inset 0px 0px 15px 20px #efefef; +} +.product-grid .card__media .media img { + z-index: -1; + padding: 1.6rem; + box-shadow: inset 1px 20px 20px 20px #efefef; +} +.product-grid .card__inner { + background-color: #efefef; +} +.product-grid .card__content .card__information .card-information .price { + margin-top: 0.4rem !important; +} + +@media screen and (min-width: 750px) { + product-info .page-width { + padding: 0 3rem; + } +} + +.card__inner { + padding: 3rem 0; +} +.product-grid .card__media { + display: flex; + align-items: center; + height: 100%; + width: 100%; + flex: 1 0 100%; +} + +.product-grid .media > *:not(.zoom):not(.deferred-media__poster-button), .media model-viewer { + position: relative; +} + +.product-grid .card__media, .card .media { + bottom: 0; + position: relative; + top: 0; +} +.product-grid .grid__item { + margin-bottom: 2rem; +} + +.product-grid .card .card__inner .card__content { + display: grid; + position: absolute; + top: 0; + left: 0; + width: 100%; + max-width: 100%; +} +@media screen and (max-width: 989px) { + .related-products .grid { + flex-wrap: nowrap; + overflow: scroll; + } + .related-products .grid .grid__item { + max-width: 40vw; + min-width: 250px; + } +} +.collection-list .card__inner { + padding: 0; +} +.collection-list.grid, .testimonial-list.grid { + column-gap: 4px; +} +.testimonial__inner .card__information { + padding: 2rem; + border: 1px solid rgb(224, 224, 224); + border-radius: 8px; +} +.testimonial-list-wrapper .title-wrapper--self-padded-tablet-down { + padding-left: 0; + padding-right: 0; +} +.testimonial-list-wrapper .slider--tablet.grid--peek .grid__item:first-of-type { + margin: 0; +} +.testimonial-list-wrapper .card__description { + margin-top: 0; +} +@media screen and (max-width: 989px) { + .collection-list-wrapper.page-width{ + padding-right: 0; + } +} +@media screen and (max-width: 749px) { + .testimonial-list-wrapper.collection-list-wrapper.page-width { + padding-left: 1.5rem; + } +} +.banner .media > *:not(.zoom):not(.deferred-media__poster-button), .media model-viewer { + height: 100%; +} +.banner--full-height { + height: calc(100vh - 65px); +} +.product_brand_name { + text-transform: uppercase; +} +.product .price_lg { + margin: 1rem 0 2rem; +} +.product_brand_name { + line-height: 1.4rem +} +@media screen and (max-width: 749px) { + .main-product__container { + padding: 0; + } +} +#size-guide .drawer__inner { + width: 60rem; +} +.share-button__button .svg-wrapper { + height: 25px; + width: 25px; +} \ No newline at end of file diff --git a/assets/collection-slider.css b/assets/collection-slider.css new file mode 100644 index 00000000000..f4858885857 --- /dev/null +++ b/assets/collection-slider.css @@ -0,0 +1,15 @@ +.collection-slider { + display: flex; + overflow-x: scroll; + gap: 20px; + } + + .collection-item { + min-width: 200px; + text-align: center; + } + + .collection-item img { + width: 100%; + height: auto; + } \ No newline at end of file diff --git a/assets/component-accordion.css b/assets/component-accordion.css index 188ff803da6..d742ea69f9f 100644 --- a/assets/component-accordion.css +++ b/assets/component-accordion.css @@ -8,6 +8,7 @@ .accordion .summary__title { display: flex; flex: 1; + align-items: center; } .accordion .summary__title + .icon-caret { diff --git a/assets/component-card.css b/assets/component-card.css index c72491d8d59..b355cb504e1 100644 --- a/assets/component-card.css +++ b/assets/component-card.css @@ -301,7 +301,7 @@ } .card__heading { - margin-top: 0; + margin-top: 0.5rem; margin-bottom: 0; } @@ -420,7 +420,7 @@ } .card--standard > .card__content { - padding: 0; + padding: 0 0 0 0.5rem; } .card--standard > .card__content .card__information { diff --git a/assets/component-cart-drawer.css b/assets/component-cart-drawer.css index 888362c144a..21dc269c768 100644 --- a/assets/component-cart-drawer.css +++ b/assets/component-cart-drawer.css @@ -72,7 +72,7 @@ cart-drawer:not(.is-empty) .cart-drawer__collection { position: relative; padding: 1.5rem 0; display: flex; - justify-content: space-between; + justify-content: center; align-items: center; } @@ -100,8 +100,8 @@ cart-drawer:not(.is-empty) .cart-drawer__collection { } .drawer__close .svg-wrapper { - height: 2rem; - width: 2rem; + height: 1.5rem; + width: 1.5rem; } .drawer__contents { @@ -201,7 +201,7 @@ cart-drawer-items { .cart-drawer .cart-item { display: grid; - grid-template: repeat(2, auto) / repeat(4, 1fr); + grid-template: repeat(2, auto) / repeat(2, 1fr); gap: 1rem; margin-bottom: 0; } @@ -212,10 +212,12 @@ cart-drawer-items { .cart-drawer .cart-item__media { grid-row: 1 / 3; + width: 100%; } .cart-drawer .cart-item__image { max-width: 100%; + width: 100%; } .cart-drawer .cart-items thead { @@ -251,8 +253,8 @@ cart-drawer-items { padding-top: 2.5rem; } -.cart-drawer .cart-items td { - padding-top: 1.7rem; +.cart-drawer .cart-item .cart-item__details { + padding-top: 1.9rem; } .cart-drawer .cart-item > td + td { @@ -366,6 +368,7 @@ cart-drawer-items { cart-drawer-items::-webkit-scrollbar { width: 3px; + display: none; } cart-drawer-items::-webkit-scrollbar-thumb { @@ -403,3 +406,28 @@ cart-drawer-items::-webkit-scrollbar-track-piece { margin-left: 0; } } + +@media screen and (max-width: 550px) { + .drawer__inner { + height: 100%; + transform: translateY(100%); + max-width: 100vw; + width: 100vw; + max-height: calc(100% - 5.2rem); + border-radius: 20px 20px 0 0; + } + + .drawer.active .drawer__inner { + transform: translateY(0); + } + + .cart-drawer { + display: flex; + flex-direction: column; + justify-content: flex-end; + } +} + +.cart-drawer .cart-item__totals { + display: none; +} \ No newline at end of file diff --git a/assets/component-cart-items.css b/assets/component-cart-items.css index d673bd9693a..37673a7d915 100644 --- a/assets/component-cart-items.css +++ b/assets/component-cart-items.css @@ -98,7 +98,6 @@ cart-items .title-wrapper-with-link { } .cart-item__discounted-prices .cart-item__old-price { - font-size: 1.4rem; } .cart-item__old-price { @@ -110,7 +109,6 @@ cart-items .title-wrapper-with-link { } .product-option { - font-size: 1.4rem; word-break: break-word; line-height: calc(1 + 0.5 / var(--font-body-scale)); } @@ -287,7 +285,6 @@ cart-remove-button .icon-remove { .cart-items td { vertical-align: top; - padding-top: 4rem; } .cart-item { @@ -349,3 +346,6 @@ cart-remove-button .icon-remove { padding-left: 0; } } +.cart-item__details .product_brand_name { + margin: 0; +} diff --git a/assets/component-collection-hero.css b/assets/component-collection-hero.css index 9ceadf0ca2a..c449effea88 100644 --- a/assets/component-collection-hero.css +++ b/assets/component-collection-hero.css @@ -48,7 +48,7 @@ @media screen and (min-width: 750px) { .collection-hero__title + .collection-hero__description { - font-size: 1.8rem; + font-size: 1.4rem; margin-top: 2rem; margin-bottom: 2rem; } diff --git a/assets/component-facets.css b/assets/component-facets.css index da3d9d951e7..867086582fc 100644 --- a/assets/component-facets.css +++ b/assets/component-facets.css @@ -1255,3 +1255,31 @@ input.mobile-facets__checkbox { padding: 0 1rem 1rem; } } + +@media screen and (max-width: 550px) { + .js .disclosure-has-popup:not(.menu-opening) .mobile-facets__inner { + transform: translateY(100%); + } + .menu-opening .mobile-facets__inner { + transform: translateY(0); + max-width: 100vw; + width: 100vw; + max-height: calc(100% - 5.2rem); + border-radius: 20px 20px 0 0; + margin: 0; + align-self: flex-end; + } + .mobile-facets { + display: flex; + } + .js .disclosure-has-popup:not(.menu-opening) .mobile-facets__close { + transform: translateY(100%); + } + + .menu-opening .mobile-facets__close { + top: 6rem; + transform: translateY(0); + + + +} diff --git a/assets/component-image-with-text.css b/assets/component-image-with-text.css index 5a97c82c009..150bd0af207 100644 --- a/assets/component-image-with-text.css +++ b/assets/component-image-with-text.css @@ -87,7 +87,7 @@ height: 100%; justify-content: center; align-self: center; - padding: 4rem calc(4rem / var(--font-body-scale)) 5rem; + padding: 2rem calc(2rem / var(--font-body-scale)) 2rem 0; position: relative; z-index: 1; } @@ -332,7 +332,7 @@ @media screen and (min-width: 990px) { .image-with-text__content { - padding: 6rem 7rem 7rem; + padding: 4rem 1rem 1rem; } } diff --git a/assets/component-list-social.css b/assets/component-list-social.css index a6c04c14873..51726b21010 100644 --- a/assets/component-list-social.css +++ b/assets/component-list-social.css @@ -18,7 +18,7 @@ .list-social__link { align-items: center; display: flex; - padding: 1.1rem; + padding: 0.5rem; color: rgb(var(--color-foreground)); } diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css index 4c0d1782ba9..f010f08f33b 100644 --- a/assets/component-mega-menu.css +++ b/assets/component-mega-menu.css @@ -53,7 +53,12 @@ } .mega-menu__link--level-2 { - font-weight: bold; + font-weight: 600; + text-transform: uppercase; +} + +.header__menu-item.list-menu__item.link { + font-weight: 500; } .header--top-center .mega-menu__list { diff --git a/assets/component-price.css b/assets/component-price.css index 17d6cf969b7..fa03096b70a 100644 --- a/assets/component-price.css +++ b/assets/component-price.css @@ -1,5 +1,4 @@ .price { - font-size: 1.6rem; letter-spacing: 0.1rem; line-height: calc(1 + 0.5 / var(--font-body-scale)); color: rgb(var(--color-foreground)); @@ -38,14 +37,14 @@ } .price--large { - font-size: 1.6rem; + font-size: 1.4rem; line-height: calc(1 + 0.5 / var(--font-body-scale)); letter-spacing: 0.13rem; } @media screen and (min-width: 750px) { .price--large { - font-size: 1.8rem; + font-size: 1.4rem; } } @@ -87,7 +86,6 @@ .price--on-sale .price-item--regular { text-decoration: line-through; color: rgba(var(--color-foreground), 0.75); - font-size: 1.3rem; } .unit-price { diff --git a/assets/component-product-variant-picker.css b/assets/component-product-variant-picker.css index b698ab80049..2a680016770 100644 --- a/assets/component-product-variant-picker.css +++ b/assets/component-product-variant-picker.css @@ -66,7 +66,6 @@ variant-selects { display: inline-block; margin: 0.7rem 0.5rem 0.2rem 0; padding: 1rem 2rem; - font-size: 1.4rem; letter-spacing: 0.1rem; line-height: 1; text-align: center; diff --git a/assets/component-slider.css b/assets/component-slider.css index c0c197ecb64..5bff0de16f4 100644 --- a/assets/component-slider.css +++ b/assets/component-slider.css @@ -13,13 +13,13 @@ slider-component.slider-component-full-width { @media screen and (max-width: 749px) { slider-component.page-width { - padding: 0 1.5rem; + padding: 0; } } @media screen and (min-width: 749px) and (max-width: 990px) { slider-component.page-width { - padding: 0 5rem; + padding: 0; } } @@ -41,7 +41,7 @@ slider-component.slider-component-full-width { scroll-behavior: smooth; scroll-padding-left: 1.5rem; -webkit-overflow-scrolling: touch; - margin-bottom: 1rem; + margin-bottom: 0; } /* Fix to show some space at the end of our sliders in all browsers */ @@ -341,7 +341,7 @@ slider-component.slider-component-full-width { border: none; cursor: pointer; width: 44px; - height: 44px; + height: 20px; display: flex; align-items: center; justify-content: center; diff --git a/assets/icon-carrot.svg b/assets/icon-carrot.svg index 0d79780759c..6a1942d2832 100644 --- a/assets/icon-carrot.svg +++ b/assets/icon-carrot.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/assets/icon-cart-empty.svg b/assets/icon-cart-empty.svg index fb80f283371..2d07f4a7807 100644 --- a/assets/icon-cart-empty.svg +++ b/assets/icon-cart-empty.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/assets/icon-cart.svg b/assets/icon-cart.svg index c662b14f62d..e572bc56334 100644 --- a/assets/icon-cart.svg +++ b/assets/icon-cart.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/assets/icon-share-new.svg b/assets/icon-share-new.svg new file mode 100644 index 00000000000..82edd5f6ae9 --- /dev/null +++ b/assets/icon-share-new.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/section-collection-list.css b/assets/section-collection-list.css index 518e79a3701..d50f239a1ec 100644 --- a/assets/section-collection-list.css +++ b/assets/section-collection-list.css @@ -1,6 +1,14 @@ .collection-list { margin-top: 0; margin-bottom: 0; + flex-wrap: nowrap; + overflow-x: scroll; +} + +.collection-list .collection-list__item { + max-width: 350px; + min-width: 250px; + flex: 1 1 auto; } .collection-list-title { diff --git a/assets/section-footer.css b/assets/section-footer.css index e9fa17da14e..545e7e9e7f3 100644 --- a/assets/section-footer.css +++ b/assets/section-footer.css @@ -128,7 +128,7 @@ .footer-block--newsletter { display: flex; align-items: flex-end; - margin-top: 3rem; + margin-bottom: 5rem; gap: 1rem; } @@ -368,7 +368,7 @@ @media screen and (min-width: 750px) { .footer-block__details-content .list-menu__item--link { display: inline-block; - font-size: 1.4rem; + font-size: 1.2rem; } .footer-block__details-content > :first-child .list-menu__item--link { diff --git a/assets/section-main-product.css b/assets/section-main-product.css index c9dfc5825a7..14a72d778c0 100644 --- a/assets/section-main-product.css +++ b/assets/section-main-product.css @@ -62,14 +62,14 @@ product-info { @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); + max-width: 60%; + width: calc(60% - 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); + padding: 0 3rem 0 3rem; + max-width: 40%; + width: calc(40% - var(--grid-desktop-horizontal-spacing) / 2); } .product--large:not(.product--no-media).product--right .product__info-wrapper { @@ -171,7 +171,7 @@ product-info { .product-form__input { flex: 0 0 100%; padding: 0; - margin: 0 0 1.2rem 0; + margin: 0 0 1.8rem 0; max-width: 44rem; min-width: fit-content; border: none; @@ -247,7 +247,6 @@ a.product__text { .product__title { word-break: break-word; - margin-bottom: 1.5rem; } .product__title > * { @@ -275,7 +274,7 @@ a.product__text { } .product .price__container { - margin-bottom: 0.5rem; + margin-bottom: 0; } .product .price dl { @@ -289,12 +288,9 @@ a.product__text { @media screen and (min-width: 750px) { .product__info-container { - max-width: 60rem; + max-width: 450px; } - .product__info-container .price--on-sale .price-item--regular { - font-size: 1.6rem; - } .product__info-container > *:first-child { margin-top: 0; @@ -364,7 +360,7 @@ a.product__text { } .product-form__buttons { - max-width: 44rem; + /* max-width: 44rem; */ } .product--no-media .product__info-container > modal-opener { @@ -392,11 +388,6 @@ a.product__text { 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; @@ -1231,8 +1222,8 @@ a.product__text { .icon-with-text .svg-wrapper { fill: rgb(var(--color-foreground)); - height: var(--icon-size); - width: var(--icon-size); + height: var(--custom-icon-size); + width: var(--custom-icon-size); } .icon-with-text--horizontal .svg-wrapper, @@ -1294,7 +1285,7 @@ a.product__text { --ratio-percent: calc(1 / var(--aspect-ratio) * 100%); position: relative; width: 100%; - max-width: calc(100% - calc(var(--media-border-width) * 2)); + max-width: 100%; } .product-media-container.constrain-height { @@ -1492,3 +1483,59 @@ a.product__text { border: none; } } + +.product-title-price { + display: flex; + justify-content: space-between; + margin-bottom: 2rem; + margin-top: 0; + align-items: flex-end; +} + +.product__info-container { + padding-top: 4rem; +} +.product__media-item { + width: 100%; +} +@media screen and (max-width: 749px) { + .grid--peek.slider .grid__item:first-of-type { + margin-left: 0; + } + +.product__info-container { + padding-top: 1.5rem; +} + + .grid--peek.slider .grid__item { + width: 100%; +} +} + +@media(max-width: 749px){ + .grid--peek.slider .grid__item:first-of-type { + margin-left: 0!important; + display: block!important; + + } + .product__media-list .product__media-item { + width: 100%!important; + } + .slider.slider--mobile .slider__slide { + padding: 0!important; + width: 100%!important; + } + .slider.slider--mobile { + scroll-padding-left: 0!important; + gap: 0; + } + .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) { + margin-left: 0!important; + margin-right: 0!important; + } +} +.product__title-container { + display: flex; + align-items: center; + justify-content: space-between; +} \ No newline at end of file diff --git a/assets/section-related-products.css b/assets/section-related-products.css index f9d67e73f88..a2034caa31a 100644 --- a/assets/section-related-products.css +++ b/assets/section-related-products.css @@ -3,5 +3,5 @@ } .related-products__heading { - margin: 0 0 3rem; + margin-bottom: 3rem; } diff --git a/assets/size-guide.js b/assets/size-guide.js new file mode 100644 index 00000000000..b64b7acc684 --- /dev/null +++ b/assets/size-guide.js @@ -0,0 +1,38 @@ +document.addEventListener('DOMContentLoaded', () => { + const sizeGuideElement = document.querySelector('#size-guide'); + const drawerInnerElement = document.querySelector('.drawer__inner'); + + if (!sizeGuideElement || !drawerInnerElement) { + console.error('Required elements not found: #size-guide or .drawer__inner'); + return; + } + + const initializeListeners = () => { + const sizeGuideTrigger = document.querySelector('.sizeguide-trigger'); + + if (sizeGuideTrigger) { + sizeGuideTrigger.addEventListener('click', () => { + sizeGuideElement.classList.add('active', 'animate'); + }); + } + }; + + initializeListeners(); + + // Observe DOM changes and reinitialize listeners if necessary + const observer = new MutationObserver(() => { + initializeListeners(); + }); + + observer.observe(document.body, { + childList: true, + subtree: true, + }); + + // Close the size guide when clicking outside the .drawer__inner element + document.addEventListener('click', (event) => { + if (!drawerInnerElement.contains(event.target) && !event.target.closest('.sizeguide-trigger')) { + sizeGuideElement.classList.remove('active', 'animate'); + } + }); +}); diff --git a/config/settings_data.json b/config/settings_data.json index 0f7a06db992..57406efdadf 100644 --- a/config/settings_data.json +++ b/config/settings_data.json @@ -1,5 +1,275 @@ +/* + * ------------------------------------------------------------ + * 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": { + "custom_display_0_font_size": 2.6, + "custom_display_1_font_size": 2.2, + "custom_display_2_font_size": 1.6, + "custom_display_3_font_size": 1.3, + "custom_display_4_font_size": 1, + "custom_cta_font_size": 0.9, + "custom_h0_font": "montserrat_n8", + "custom_h0_font_size": 3, + "custom_h0_text_transform": "uppercase", + "custom_h1_font": "montserrat_n6", + "custom_h1_font_size": 2.5, + "custom_h1_text_transform": "uppercase", + "custom_h2_font": "montserrat_n5", + "custom_h2_font_size": 1.5, + "custom_h2_text_transform": "uppercase", + "custom_h3_font": "montserrat_n6", + "custom_h3_font_size": 1.2, + "custom_h3_text_transform": "uppercase", + "custom_h4_font": "montserrat_n4", + "custom_h4_font_size": 1.2, + "custom_h5_font": "montserrat_n5", + "custom_h5_font_size": 1.4, + "custom_h6_font": "montserrat_n4", + "custom_label_lg_font": "montserrat_n5", + "custom_label_lg_font_size": 1.2, + "custom_label_lg_text_transform": "uppercase", + "custom_label_md_font": "montserrat_n5", + "custom_label_md_font_size": 1.1, + "custom_label_sm_font": "montserrat_n4", + "custom_label_sm_font_size": 1, + "custom_price_lg_font": "montserrat_n4", + "custom_price_lg_font_size": 1.3, + "custom_price_sm_font": "montserrat_n4", + "selected_option_name": "Color,Szín", + "logo": "shopify://shop_images/Asset-2.svg", + "logo_width": 60, + "type_header_font": "montserrat_n5", + "heading_scale": 100, + "type_body_font": "montserrat_n4", + "body_scale": 100, + "page_width": 1600, + "spacing_sections": 0, + "spacing_grid_horizontal": 4, + "spacing_grid_vertical": 4, + "animations_reveal_on_scroll": true, + "buttons_border_thickness": 1, + "buttons_border_opacity": 100, + "buttons_radius": 4, + "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": 4, + "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": 4, + "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": "top left", + "badge_corner_radius": 4, + "sale_badge_color_scheme": "scheme-1c5d564e-7672-42c4-b141-11cb7f5fe9d0", + "sold_out_badge_color_scheme": "scheme-3", + "brand_image": "shopify://shop_images/Larus-logo-vegleges.png", + "brand_image_width": 135, + "social_facebook_link": "https://facebook.com/larusbracelets", + "social_instagram_link": "https://instagram/larusofficial", + "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": true, + "currency_code_enabled": true, + "cart_type": "drawer", + "show_vendor": false, + "show_cart_note": false, + "cart_drawer_collection": "", + "custom_label_font": "montserrat_n4", + "custom_price_font": "montserrat_n4", + "custom_price_font_size": 1.3, + "custom_h1_font_weight": 900, + "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": [], + "blocks": { + "3576686563519644491": { + "type": "shopify://apps/vwo/blocks/vwo-smartcode/2ce905b2-3842-4d20-b6b0-8c51fc208426", + "disabled": false, + "settings": { + "vwoAccountId": "1027180", + "codeType": "ASYNC", + "settingsTolerance": 2000, + "libraryTolerance": 2500, + "existingJquery": "false" + } + } + }, + "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": "#1f1f1f", + "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" + } + }, + "scheme-1c5d564e-7672-42c4-b141-11cb7f5fe9d0": { + "settings": { + "background": "#ff3535", + "background_gradient": "", + "text": "#ffffff", + "button": "#ff0000", + "button_label": "#ffffff", + "secondary_button_label": "#121212", + "shadow": "#121212" + } + }, + "scheme-2f988727-30cc-440e-8a02-f94ee73795b4": { + "settings": { + "background": "#ffffff", + "background_gradient": "", + "text": "#121212", + "button": "#121212", + "button_label": "#ffffff", + "secondary_button_label": "#121212", + "shadow": "#121212" + } + } + } + }, "presets": { "Default": { "logo_width": 90, diff --git a/config/settings_schema.json b/config/settings_schema.json index cecb89755b5..a9c77748751 100644 --- a/config/settings_schema.json +++ b/config/settings_schema.json @@ -4,8 +4,636 @@ "theme_name": "Dawn", "theme_version": "15.2.0", "theme_author": "Shopify", - "theme_documentation_url": "https://help.shopify.com/manual/online-store/themes", - "theme_support_url": "https://support.shopify.com/" + "theme_documentation_url": "https:\/\/help.shopify.com\/manual\/online-store\/themes", + "theme_support_url": "https:\/\/support.shopify.com\/" + }, + { + "name": "Custom Typography", + "settings": [ + { + "type": "header", + "content": "Display 0" + }, + { + "type": "range", + "id": "custom_display_0_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "Display 0 font size", + "default": 1 + }, + { + "type": "header", + "content": "Display 1" + }, + { + "type": "range", + "id": "custom_display_1_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "Display 1 font size", + "default": 1 + }, + { + "type": "header", + "content": "Display 2" + }, + { + "type": "range", + "id": "custom_display_2_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "Display 2 font size", + "default": 1 + }, + { + "type": "header", + "content": "Display 3" + }, + { + "type": "range", + "id": "custom_display_3_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "Display 3 font size", + "default": 1 + }, + { + "type": "header", + "content": "Display 4" + }, + { + "type": "range", + "id": "custom_display_4_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "Display 4 font size", + "default": 1 + }, + { + "type": "header", + "content": "Call to Action" + }, + { + "type": "range", + "id": "custom_cta_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "CTA font size", + "default": 1 + }, + { + "type": "header", + "content": "H0" + }, + { + "type": "font_picker", + "id": "custom_h0_font", + "default": "assistant_n4", + "label": "H0 font picker" + }, + { + "type": "range", + "id": "custom_h0_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "H0 font size", + "default": 1 + }, + { + "type": "select", + "id": "custom_h0_text_transform", + "label": "H0 text transform", + "options": [ + { + "value": "none", + "label": "None" + }, + { + "value": "uppercase", + "label": "Uppercase" + } + ], + "default": "none" + }, + { + "type": "header", + "content": "HXL" + }, + { + "type": "font_picker", + "id": "custom_hxl_font", + "default": "assistant_n4", + "label": "HXL font picker" + }, + { + "type": "range", + "id": "custom_hxl_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "HXL font size", + "default": 1 + }, + { + "type": "select", + "id": "custom_hxl_text_transform", + "label": "HXL text transform", + "options": [ + { + "value": "none", + "label": "None" + }, + { + "value": "uppercase", + "label": "Uppercase" + } + ], + "default": "none" + }, + { + "type": "header", + "content": "HXXL" + }, + { + "type": "font_picker", + "id": "custom_hxxl_font", + "default": "assistant_n4", + "label": "HXXL font picker" + }, + { + "type": "range", + "id": "custom_hxxl_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "HXXL font size", + "default": 1 + }, + { + "type": "select", + "id": "custom_hxxl_text_transform", + "label": "HXXL text transform", + "options": [ + { + "value": "none", + "label": "None" + }, + { + "value": "uppercase", + "label": "Uppercase" + } + ], + "default": "none" + }, + { + "type": "header", + "content": "H1" + }, + { + "type": "font_picker", + "id": "custom_h1_font", + "default": "assistant_n4", + "label": "H1 font picker" + }, + { + "type": "range", + "id": "custom_h1_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "H1 font size", + "default": 1 + }, + { + "type": "select", + "id": "custom_h1_text_transform", + "label": "H1 text text transform", + "options": [ + { + "value": "none", + "label": "None" + }, + { + "value": "uppercase", + "label": "Uppercase" + } + ], + "default": "none" + }, + { + "type": "header", + "content": "H2" + }, + { + "type": "font_picker", + "id": "custom_h2_font", + "default": "assistant_n4", + "label": "H2 font picker" + }, + { + "type": "range", + "id": "custom_h2_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "H2 font size", + "default": 1 + }, + { + "type": "select", + "id": "custom_h2_text_transform", + "label": "H2 text transform", + "options": [ + { + "value": "none", + "label": "None" + }, + { + "value": "uppercase", + "label": "Uppercase" + } + ], + "default": "none" + }, + { + "type": "header", + "content": "H3" + }, + { + "type": "font_picker", + "id": "custom_h3_font", + "default": "assistant_n4", + "label": "H3 font picker" + }, + { + "type": "range", + "id": "custom_h3_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "H3 font size", + "default": 1 + }, + { + "type": "select", + "id": "custom_h3_text_transform", + "label": "H3 text transform", + "options": [ + { + "value": "none", + "label": "None" + }, + { + "value": "uppercase", + "label": "Uppercase" + } + ], + "default": "none" + }, + { + "type": "header", + "content": "H4" + }, + { + "type": "font_picker", + "id": "custom_h4_font", + "default": "assistant_n4", + "label": "H4 font picker" + }, + { + "type": "range", + "id": "custom_h4_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "H4 font size", + "default": 1 + }, + { + "type": "select", + "id": "custom_h4_text_transform", + "label": "H4 text transform", + "options": [ + { + "value": "none", + "label": "None" + }, + { + "value": "uppercase", + "label": "Uppercase" + } + ], + "default": "none" + }, + { + "type": "header", + "content": "H5" + }, + { + "type": "font_picker", + "id": "custom_h5_font", + "default": "assistant_n4", + "label": "H5 font picker" + }, + { + "type": "range", + "id": "custom_h5_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "H5 font size", + "default": 1 + }, + { + "type": "select", + "id": "custom_h5_text_transform", + "label": "H5 text transform", + "options": [ + { + "value": "none", + "label": "None" + }, + { + "value": "uppercase", + "label": "Uppercase" + } + ], + "default": "none" + }, + { + "type": "header", + "content": "H6" + }, + { + "type": "font_picker", + "id": "custom_h6_font", + "default": "assistant_n4", + "label": "H6 font picker" + }, + { + "type": "range", + "id": "custom_h6_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "H6 font size", + "default": 1 + }, + { + "type": "select", + "id": "custom_h6_text_transform", + "label": "H6 text transform", + "options": [ + { + "value": "none", + "label": "None" + }, + { + "value": "uppercase", + "label": "Uppercase" + } + ], + "default": "none" + }, + { + "type": "header", + "content": "Label Large" + }, + { + "type": "font_picker", + "id": "custom_label_lg_font", + "default": "assistant_n4", + "label": "Label Large font picker" + }, + { + "type": "range", + "id": "custom_label_lg_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "Label Large font size", + "default": 1 + }, + { + "type": "select", + "id": "custom_label_lg_text_transform", + "label": "Label Large text transform", + "options": [ + { + "value": "none", + "label": "None" + }, + { + "value": "uppercase", + "label": "Uppercase" + } + ], + "default": "none" + }, + { + "type": "header", + "content": "Label Medium" + }, + { + "type": "font_picker", + "id": "custom_label_md_font", + "default": "assistant_n4", + "label": "Label Medium font picker" + }, + { + "type": "range", + "id": "custom_label_md_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "Label Medium font size", + "default": 1 + }, + { + "type": "select", + "id": "custom_label_md_text_transform", + "label": "Label Medium text transform", + "options": [ + { + "value": "none", + "label": "None" + }, + { + "value": "uppercase", + "label": "Uppercase" + } + ], + "default": "none" + }, + { + "type": "header", + "content": "Label Small" + }, + { + "type": "font_picker", + "id": "custom_label_sm_font", + "default": "assistant_n4", + "label": "Label Small font picker" + }, + { + "type": "range", + "id": "custom_label_sm_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "Label Small font size", + "default": 1 + }, + { + "type": "select", + "id": "custom_label_sm_text_transform", + "label": "Label Small text transform", + "options": [ + { + "value": "none", + "label": "None" + }, + { + "value": "uppercase", + "label": "Uppercase" + } + ], + "default": "none" + }, + { + "type": "header", + "content": "Price Large" + }, + { + "type": "font_picker", + "id": "custom_price_lg_font", + "default": "assistant_n4", + "label": "Price Large font picker" + }, + { + "type": "range", + "id": "custom_price_lg_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "Price Large font size", + "default": 1 + }, + { + "type": "select", + "id": "custom_price_lg_text_transform", + "label": "Price Large text transform", + "options": [ + { + "value": "none", + "label": "None" + }, + { + "value": "uppercase", + "label": "Uppercase" + } + ], + "default": "none" + }, + { + "type": "header", + "content": "Price Small" + }, + { + "type": "font_picker", + "id": "custom_price_sm_font", + "default": "assistant_n4", + "label": "Price Small font picker" + }, + { + "type": "range", + "id": "custom_price_sm_font_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "Price Small font size", + "default": 1 + }, + { + "type": "select", + "id": "custom_price_sm_text_transform", + "label": "Price Small text transform", + "options": [ + { + "value": "none", + "label": "None" + }, + { + "value": "uppercase", + "label": "Uppercase" + } + ], + "default": "none" + }, + { + "type": "range", + "id": "custom_icon_size", + "min": 0, + "max": 5, + "step": 0.1, + "unit": "rem", + "label": "Icon Size", + "default": 1.5 + }, + { + "type": "header", + "content": "t:settings_schema.custom_typography.settings.header__additional.content" + } + + ] + }, + { + "name": "Selected Variant Images", + "settings": [ + { + "type": "paragraph", + "content": "Subscribe our channel [websensepro](https:\/\/youtube.com\/@websensepro?sub_confirmation=1)" + }, + { + "type": "text", + "id": "selected_option_name", + "label": "Variant option name", + "default": "Color", + "info": "Attach the first image of each group to a variant." + }, + { + "type": "paragraph", + "content": "If you have store in multi-language, you can enter multiple values separated by commas: Color,Colour,Couleur" + } + ] }, { "name": "t:settings_schema.logo.name", diff --git a/layout/theme.liquid b/layout/theme.liquid index 70db635823b..206cb2503ea 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -6,6 +6,13 @@ + + + + {%- if settings.favicon != blank -%} @@ -34,6 +41,7 @@ + {%- if settings.animations_reveal_on_scroll -%} @@ -53,6 +61,11 @@ {{ 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' }} + @font-face { + font-family: "Michroma"; + src: url("{{ 'Michroma-Regular.woff2' | file_url }}") format("woff"); + } + {% for scheme in settings.color_schemes -%} {% assign scheme_classes = scheme_classes | append: ', .color-' | append: scheme.id %} @@ -112,6 +125,132 @@ --font-body-scale: {{ settings.body_scale | divided_by: 100.0 }}; --font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }}; + --font-responsive-scale: 0.95; + /******************************** + * DISPLAY AND CTA STYLES + ********************************/ + --font-display-0-size: {{ settings.custom_display_0_font_size }}rem; + --font-display-1-size: {{ settings.custom_display_1_font_size }}rem; + --font-display-2-size: {{ settings.custom_display_2_font_size }}rem; + --font-display-3-size: {{ settings.custom_display_3_font_size }}rem; + --font-display-4-size: {{ settings.custom_display_4_font_size }}rem; + --font-cta-size: {{ settings.custom_cta_font_size }}rem; + + /******************************** + * H0 + ********************************/ + --font-h0-family: {{ settings.custom_h0_font.family }}; + --font-h0-weight: {{ settings.custom_h0_font.weight }}; + --font-h0-size: {{ settings.custom_h0_font_size }}rem; + --font-h0-transform: {{ settings.custom_h0_text_transform }}; + + /******************************** + * HXL + ********************************/ + --font-hxl-family: {{ settings.custom_hxl_font.family }}; + --font-hxl-weight: {{ settings.custom_hxl_font.weight }}; + --font-hxl-size: {{ settings.custom_hxl_font_size }}rem; + --font-hxl-transform: {{ settings.custom_hxl_text_transform }}; + + /******************************** + * HXXL + ********************************/ + --font-hxxl-family: {{ settings.custom_hxxl_font.family }}; + --font-hxxl-weight: {{ settings.custom_hxxl_font.weight }}; + --font-hxxl-size: {{ settings.custom_hxxl_font_size }}rem; + --font-hxxl-transform: {{ settings.custom_hxxl_text_transform }}; + + /******************************** + * H1 + ********************************/ + --font-h1-family: {{ settings.custom_h1_font.family }}; + --font-h1-weight: {{ settings.custom_h1_font.weight }}; + --font-h1-size: {{ settings.custom_h1_font_size }}rem; + --font-h1-transform: {{ settings.custom_h1_text_transform }}; + + /******************************** + * H2 + ********************************/ + --font-h2-family: {{ settings.custom_h2_font.family }}; + --font-h2-weight: {{ settings.custom_h2_font.weight }}; + --font-h2-size: {{ settings.custom_h2_font_size }}rem; + --font-h2-transform: {{ settings.custom_h2_text_transform }}; + + /******************************** + * H3 + ********************************/ + --font-h3-family: {{ settings.custom_h3_font.family }}; + --font-h3-weight: {{ settings.custom_h3_font.weight }}; + --font-h3-size: {{ settings.custom_h3_font_size }}rem; + --font-h3-transform: {{ settings.custom_h3_text_transform }}; + + /******************************** + * H4 + ********************************/ + --font-h4-family: {{ settings.custom_h4_font.family }}; + --font-h4-weight: {{ settings.custom_h4_font.weight }}; + --font-h4-size: {{ settings.custom_h4_font_size }}rem; + --font-h4-transform: {{ settings.custom_h4_text_transform }}; + + /******************************** + * H5 + ********************************/ + --font-h5-family: {{ settings.custom_h5_font.family }}; + --font-h5-weight: {{ settings.custom_h5_font.weight }}; + --font-h5-size: {{ settings.custom_h5_font_size }}rem; + --font-h5-transform: {{ settings.custom_h5_text_transform }}; + + /******************************** + * H6 + ********************************/ + --font-h6-family: {{ settings.custom_h6_font.family }}; + --font-h6-weight: {{ settings.custom_h6_font.weight }}; + --font-h6-size: {{ settings.custom_h6_font_size }}rem; + --font-h6-transform: {{ settings.custom_h6_text_transform }}; + + /******************************** + * LABEL LARGE + ********************************/ + --font-label-lg-family: {{ settings.custom_label_lg_font.family }}; + --font-label-lg-weight: {{ settings.custom_label_lg_font.weight }}; + --font-label-lg-size: {{ settings.custom_label_lg_font_size }}rem; + --font-label-lg-transform: {{ settings.custom_label_lg_text_transform }}; + + /******************************** + * LABEL MEDIUM + ********************************/ + --font-label-md-family: {{ settings.custom_label_md_font.family }}; + --font-label-md-weight: {{ settings.custom_label_md_font.weight }}; + --font-label-md-size: {{ settings.custom_label_md_font_size }}rem; + --font-label-md-transform: {{ settings.custom_label_md_text_transform }}; + + /******************************** + * LABEL SMALL + ********************************/ + --font-label-sm-family: {{ settings.custom_label_sm_font.family }}; + --font-label-sm-weight: {{ settings.custom_label_sm_font.weight }}; + --font-label-sm-size: {{ settings.custom_label_sm_font_size }}rem; + --font-label-sm-transform: {{ settings.custom_label_sm_text_transform }}; + + /******************************** + * PRICE LARGE + ********************************/ + --font-price-lg-family: {{ settings.custom_price_lg_font.family }}; + --font-price-lg-weight: {{ settings.custom_price_lg_font.weight }}; + --font-price-lg-size: {{ settings.custom_price_lg_font_size }}rem; + --font-price-lg-transform: {{ settings.custom_price_lg_text_transform }}; + + /******************************** + * PRICE SMALL + ********************************/ + --font-price-sm-family: {{ settings.custom_price_sm_font.family }}; + --font-price-sm-weight: {{ settings.custom_price_sm_font.weight }}; + --font-price-sm-size: {{ settings.custom_price_sm_font_size }}rem; + --font-price-sm-transform: {{ settings.custom_price_sm_text_transform }}; + + + --custom-icon-size: {{ settings.custom_icon_size }}rem; + --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; @@ -248,14 +387,13 @@ font-weight: var(--font-body-weight); } - @media screen and (min-width: 750px) { body { - font-size: 1.6rem; + font-size: 1.2rem; } - } {% endstyle %} {{ 'base.css' | asset_url | stylesheet_tag }} + {{ 'collection-slider.css' | asset_url | stylesheet_tag }} {%- if settings.cart_type == 'drawer' -%} diff --git a/locales/en.default.json b/locales/en.default.json index c8a8a976f70..22db2f790b7 100644 --- a/locales/en.default.json +++ b/locales/en.default.json @@ -1,3 +1,12 @@ +/* + * ------------------------------------------------------------ + * IMPORTANT: The contents of this file are auto-generated. + * + * This file may be updated by the Shopify admin language editor + * or related systems. Please exercise caution as any changes + * made to this file may be overwritten. + * ------------------------------------------------------------ + */ { "general": { "password_page": { @@ -104,6 +113,11 @@ "product_title": "Example product title", "collection_title": "Your collection's name" }, +"custom_translations": { + "sizeguide": { + "sizeguide-trigger-text": "What's my size?" + } + }, "products": { "product": { "add_to_cart": "Add to cart", diff --git a/sections/announcement-bar.liquid b/sections/announcement-bar.liquid index ff6397a905c..6f02074082e 100644 --- a/sections/announcement-bar.liquid +++ b/sections/announcement-bar.liquid @@ -39,7 +39,7 @@ class="announcement-bar__link link link--text focus-inset animate-arrow" > {%- endif -%} -
Please select a collection in the settings.
+{% endif %} + + + + + +{% schema %} +{ + "name": "Collection Slider", + "settings": [ + { + "type": "collection", + "id": "collection", + "label": "Collection" + }, + { + "type": "text", + "id": "title", + "label": "Title", + "default": "Featured Collection" + } + ], + "presets": [ + { + "name": "Collection Slider" + } + ] +} +{% endschema %} diff --git a/sections/contact-form.liquid b/sections/contact-form.liquid index 3a5679cf19f..47d5865a6f6 100644 --- a/sections/contact-form.liquid +++ b/sections/contact-form.liquid @@ -154,25 +154,41 @@ "type": "select", "id": "heading_size", "options": [ + { + "value": "display_0", + "label": "display_0" + }, + { + "value": "display_1", + "label": "display_1" + }, + { + "value": "display_2", + "label": "display_2" + }, + { + "value": "display_3", + "label": "display_3" + }, { "value": "h2", - "label": "t:sections.all.heading_size.options__1.label" + "label": "h2" }, { "value": "h1", - "label": "t:sections.all.heading_size.options__2.label" + "label": "h1" }, { "value": "h0", - "label": "t:sections.all.heading_size.options__3.label" + "label": "h0" }, { "value": "hxl", - "label": "t:sections.all.heading_size.options__4.label" + "label": "hxl" }, { "value": "hxxl", - "label": "t:sections.all.heading_size.options__5.label" + "label": "hxxl" } ], "default": "h1", diff --git a/sections/custom-alert.liquid b/sections/custom-alert.liquid new file mode 100644 index 00000000000..1ab07f197b6 --- /dev/null +++ b/sections/custom-alert.liquid @@ -0,0 +1,63 @@ +{%- for block in section.blocks -%} + {%- case block.type -%} + {%- when 'alert' -%} +Share contact information, store details, and brand content with your customers.<\/p>" + "show_social": true } } }, "block_order": [ "footer-0", - "footer-1", - "footer-2" + "link_list_Jy3kP8", + "link_list_Ny366M", + "brand_information_re47Qy" ], "settings": { - "color_scheme": "scheme-1", - "newsletter_enable": true, - "newsletter_heading": "Subscribe to our emails", - "show_social": true, - "enable_country_selector": false, - "enable_language_selector": false, + "color_scheme": "scheme-3", + "newsletter_enable": false, + "newsletter_heading": "Subscribe to our newsletter and get 10% off", + "enable_follow_on_shop": true, + "show_social": false, + "enable_country_selector": true, + "enable_language_selector": true, "payment_enable": true, - "show_policy": false, - "margin_top": 48, - "padding_top": 36, + "show_policy": true, + "margin_top": 0, + "padding_top": 72, "padding_bottom": 36 } } }, "order": [ + "newsletter_pe7niK", + "1738246029064b705c", "footer" ] } diff --git a/sections/footer.liquid b/sections/footer.liquid index 868a66a8f09..861ab616b48 100644 --- a/sections/footer.liquid +++ b/sections/footer.liquid @@ -60,6 +60,93 @@ assign footer_grid_class = 'grid--3-col-tablet' endif -%} +
{%- endif -%} - - {%- endunless -%} {%- endif -%} diff --git a/sections/header-group.json b/sections/header-group.json index a9ac3a08a0d..604d8b9367d 100644 --- a/sections/header-group.json +++ b/sections/header-group.json @@ -1,35 +1,87 @@ +/* + * ------------------------------------------------------------ + * 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. + * ------------------------------------------------------------ + */ { "name": "t:sections.header.name", "type": "header", "sections": { - "announcement-bar": { + "announcement_bar_hUedLy": { "type": "announcement-bar", "blocks": { - "announcement-bar-0": { + "announcement_eEX47x": { "type": "announcement", "settings": { - "text": "Welcome to our store", - "text_alignment": "center", - "color_scheme": "scheme-1", + "text": "Ingyenes szállítás 17 500 Ft felett", + "link": "" + } + }, + "announcement_Bq9BVj": { + "type": "announcement", + "settings": { + "text": "Kézzel készült", + "link": "" + } + }, + "announcement_V7hJhN": { + "type": "announcement", + "settings": { + "text": "2 év garancia", + "link": "" + } + }, + "announcement_6zmkYn": { + "type": "announcement", + "settings": { + "text": "Egyszerű visszaküldés", + "link": "" + } + }, + "announcement_3xKpMp": { + "type": "announcement", + "settings": { + "text": "Segítőkész ügyfélszolgálat", "link": "" } } }, "block_order": [ - "announcement-bar-0" - ] + "announcement_eEX47x", + "announcement_Bq9BVj", + "announcement_V7hJhN", + "announcement_6zmkYn", + "announcement_3xKpMp" + ], + "custom_css": [], + "settings": { + "color_scheme": "scheme-3", + "show_line_separator": true, + "show_social": false, + "auto_rotate": true, + "change_slides_speed": 5, + "enable_country_selector": false, + "enable_language_selector": false, + "heading_size": "label_sm" + } }, "header": { "type": "header", "settings": { - "color_scheme": "scheme-1", - "logo_position": "middle-left", + "logo_position": "middle-center", "menu": "main-menu", - "menu_type_desktop": "dropdown", + "menu_type_desktop": "mega", "sticky_header_type": "on-scroll-up", "show_line_separator": true, - "enable_country_selector": true, + "color_scheme": "scheme-1", + "menu_color_scheme": "", + "enable_country_selector": false, "enable_language_selector": true, + "enable_customer_avatar": false, "mobile_logo_position": "center", "margin_bottom": 0, "padding_top": 20, @@ -38,7 +90,7 @@ } }, "order": [ - "announcement-bar", + "announcement_bar_hUedLy", "header" ] } diff --git a/sections/image-banner.liquid b/sections/image-banner.liquid index 465f292e854..a5bb94983f9 100644 --- a/sections/image-banner.liquid +++ b/sections/image-banner.liquid @@ -116,7 +116,10 @@ {%- endif -%}