diff --git a/assets/base.css b/assets/base.css index 91012cce3..8ea462c2c 100644 --- a/assets/base.css +++ b/assets/base.css @@ -1,3 +1,43 @@ +@font-face { + font-family: 'Metroflex'; + src: url('MetroflexWide-Lt.woff2') format('woff2'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Metroflex'; + src: url('MetroflexWide-Reg.woff2') format('woff2'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Metroflex'; + src: url('MetroflexWide-Med.woff2') format('woff2'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Metroflex'; + src: url('MetroflexWide-Bd.woff2') format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Metroflex'; + src: url('MetroflexWide-Hvy.woff2') format('woff2'); + font-weight: 900; + font-style: normal; + font-display: swap; +} + * { box-sizing: border-box; } @@ -13,6 +53,12 @@ body { } :root { + --font-body--family: 'Metroflex', sans-serif !important; + --font-heading--family: 'Metroflex', sans-serif !important; + --font-subheading--family: 'Metroflex', sans-serif !important; + --font-accent--family: 'Metroflex', sans-serif !important; + --font-paragraph--family: 'Metroflex', sans-serif !important; + --hover-lift-amount: 4px; --hover-scale-amount: 1.03; --hover-subtle-zoom-amount: 1.015; @@ -78,6 +124,7 @@ select { /* Editorial layout */ .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio, .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio { + .collection-card__image, .featured-blog-posts-card__image, .blog-placeholder-svg { @@ -168,6 +215,7 @@ select { } @media (any-pointer: fine) and (prefers-reduced-motion: no-preference) { + .card-hover-effect-lift .product-card:hover, .card-hover-effect-lift .collection-card:hover, .card-hover-effect-lift .resource-card:hover, @@ -277,7 +325,7 @@ p:empty { } :first-child:is(p, h1, h2, h3, h4, h5, h6), -:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) { +:first-child:empty+ :where(p, h1, h2, h3, h4, h5, h6) { margin-block-start: 0; } @@ -389,6 +437,7 @@ p:empty { } @media screen and (min-width: 750px) { + .page-width-wide, .page-width-normal, .page-width-narrow, @@ -425,19 +474,14 @@ p:empty { full-width background image even if the section content is constrained by the page width. Do not try to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */ .section { - --full-page-grid-central-column-width: min( - var(--page-width) - var(--page-margin) * 2, - calc(100% - var(--page-margin) * 2) - ); + --full-page-grid-central-column-width: min(var(--page-width) - var(--page-margin) * 2, + calc(100% - var(--page-margin) * 2)); --full-page-grid-margin: minmax(var(--page-margin), 1fr); - --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width) - var(--full-page-grid-margin); + --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width) var(--full-page-grid-margin); /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */ - --util-page-margin-offset: max( - var(--page-margin), - calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2) - ); + --util-page-margin-offset: max(var(--page-margin), + calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2)); /* Offset for full-width sections to account for the page margin, used for Marquee — note that --util-page-margin-offset doesn't work here */ @@ -455,7 +499,7 @@ p:empty { } /* Place all direct children in the center column by default */ -.section > * { +.section>* { grid-column: 2; } @@ -476,28 +520,28 @@ p:empty { } /* For page-width sections, all content goes in the center column */ -.section--page-width > * { +.section--page-width>* { grid-column: 2; } /* For full-width sections, content spans all columns */ -.section--full-width > * { +.section--full-width>* { grid-column: 1 / -1; } @media screen and (max-width: 749px) { - .section--mobile-full-width > * { + .section--mobile-full-width>* { grid-column: 1 / -1; } } /* Some page-width sections should still extend all the way to the right edge of the page, e.g. collection carousel */ -.section--page-width.section--full-width-right > * { +.section--page-width.section--full-width-right>* { grid-column: 2 / 4; } /* For full-width sections with margin, content still spans full width but with space on the sides */ -.section--full-width.section--full-width-margin > * { +.section--full-width.section--full-width-margin>* { grid-column: 1 / -1; @media screen and (min-width: 750px) { @@ -507,7 +551,7 @@ p:empty { } /* Some section content break out to full width of the page */ -.section > .force-full-width { +.section>.force-full-width { grid-column: 1 / -1; } @@ -542,6 +586,7 @@ p:empty { } @media screen and (max-width: 749px) { + .hidden--mobile, .mobile\:hidden { /* stylelint-disable-next-line declaration-no-important */ @@ -550,6 +595,7 @@ p:empty { } @media screen and (min-width: 750px) { + .hidden--desktop, .desktop\:hidden { /* stylelint-disable-next-line declaration-no-important */ @@ -623,11 +669,8 @@ p:empty { @media screen and (min-width: 1400px) { .grid { grid-template-columns: - 1fr repeat( - var(--centered-column-number), - minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number))) - ) - 1fr; + 1fr repeat(var(--centered-column-number), + minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))) 1fr; } } @@ -733,7 +776,7 @@ p:empty { height: var(--icon-size-xs); } -.svg-wrapper > svg { +.svg-wrapper>svg { width: var(--icon-size-sm); height: var(--icon-size-sm); } @@ -773,7 +816,7 @@ slideshow-component [data-placeholder='true'] * { /* Base text and heading styles */ body, .paragraph:not(.button), -.paragraph > *, +.paragraph>*, .text-block.paragraph :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-paragraph--family); font-style: var(--font-paragraph--style); @@ -787,6 +830,7 @@ body, /* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */ @media screen and (max-width: 1200px) { + input.paragraph.paragraph, input.paragraph.paragraph:not([type]), textarea.paragraph.paragraph, @@ -795,7 +839,7 @@ body, } } -.paragraph > small { +.paragraph>small { font-size: smaller; } @@ -803,7 +847,7 @@ body, h1, .h1.h1, -.text-block.h1 > *, +.text-block.h1>*, .text-block.h1 :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-h1--family); font-style: var(--font-h1--style); @@ -816,6 +860,7 @@ h1, } @media screen and (max-width: 1200px) { + input.h1.h1, textarea.h1.h1, select.h1.h1 { @@ -825,7 +870,7 @@ h1, h2, .h2.h2, -.text-block.h2 > *, +.text-block.h2>*, .text-block.h2 :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-h2--family); font-style: var(--font-h2--style); @@ -838,6 +883,7 @@ h2, } @media screen and (max-width: 1200px) { + input.h2.h2, textarea.h2.h2, select.h2.h2 { @@ -848,7 +894,7 @@ h2, h3, .h3, .h3.h3, -.text-block.h3 > *, +.text-block.h3>*, .text-block.h3 :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-h3--family); font-style: var(--font-h3--style); @@ -861,6 +907,7 @@ h3, } @media screen and (max-width: 1200px) { + input.h3, textarea.h3, select.h3 { @@ -870,7 +917,7 @@ h3, h4, .h4.h4, -.text-block.h4 > *, +.text-block.h4>*, .text-block.h4 :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-h4--family); font-style: var(--font-h4--style); @@ -883,6 +930,7 @@ h4, } @media screen and (max-width: 1200px) { + input.h4.h4, textarea.h4.h4, select.h4.h4 { @@ -892,7 +940,7 @@ h4, h5, .h5.h5, -.text-block.h5 > *, +.text-block.h5>*, .text-block.h5 :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-h5--family); font-style: var(--font-h5--style); @@ -905,6 +953,7 @@ h5, } @media screen and (max-width: 1200px) { + input.h5.h5, textarea.h5.h5, select.h5.h5 { @@ -914,7 +963,7 @@ h5, h6, .h6.h6, -.text-block.h6 > *, +.text-block.h6>*, .text-block.h6 :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-h6--family); font-style: var(--font-h6--style); @@ -927,6 +976,7 @@ h6, } @media screen and (max-width: 1200px) { + input.h6.h6, textarea.h6.h6, select.h6.h6 { @@ -954,7 +1004,7 @@ a { color var(--animation-speed) var(--animation-easing); } -:is(h1, h2, h3, h4, h5, h6, p) > a:hover { +:is(h1, h2, h3, h4, h5, h6, p)>a:hover { --button-color: var(--color, var(--color-primary-hover)); } @@ -983,7 +1033,7 @@ details:not([open]) .summary-open { display: none; } -details[open] > summary .icon-animated > svg { +details[open]>summary .icon-animated>svg { transform: rotate(180deg); } @@ -993,17 +1043,17 @@ summary::-webkit-details-marker { } /* When header is transparent, pull the first main content section up to sit under the floating header */ -body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child { +body:has(.header[transparent]) .content-for-layout>.shopify-section:first-child { margin-top: calc(var(--header-group-height) * -1); } -body:has(.header[transparent]) #header-group > .header-section { +body:has(.header[transparent]) #header-group>.header-section { z-index: var(--layer-sticky); } /* All other header group content should be beneath the floating header, but above the rest of the page content */ -body:has(.header[transparent]) #header-group > *:not(.header-section) { +body:has(.header[transparent]) #header-group>*:not(.header-section) { z-index: calc(var(--layer-sticky) - 1); } @@ -1085,13 +1135,13 @@ body:has(.header[transparent]) #header-group > *:not(.header-section) { } } -.product-grid__card .group-block > * { +.product-grid__card .group-block>* { @media screen and (max-width: 749px) { flex-direction: column; } } -ul[product-grid-view='zoom-out'] .product-grid__card > * { +ul[product-grid-view='zoom-out'] .product-grid__card>* { display: none; } @@ -1099,21 +1149,17 @@ ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery { display: block; } -[product-grid-view='zoom-out'] - .card-gallery - > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) { +[product-grid-view='zoom-out'] .card-gallery> :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) { display: none; } -ul[product-grid-view='zoom-out'] .card-gallery > img { +ul[product-grid-view='zoom-out'] .card-gallery>img { display: block; } [product-grid-view='zoom-out'] { - --product-grid-columns-desktop: repeat( - 10, - minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr) - ); + --product-grid-columns-desktop: repeat(10, + minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)); } .product-grid-view-zoom-out--details { @@ -1136,15 +1182,15 @@ ul[product-grid-view='zoom-out'] .card-gallery > img { font-weight: 400; } -.product-grid-view-zoom-out--details > span.h6, -.product-grid-view-zoom-out--details > div.h6 > product-price { +.product-grid-view-zoom-out--details>span.h6, +.product-grid-view-zoom-out--details>div.h6>product-price { display: inline-block; line-height: 0; margin-top: var(--margin-2xs); } -.product-grid-view-zoom-out--details > span.h6 > *, -.product-grid-view-zoom-out--details > div.h6 > * > * { +.product-grid-view-zoom-out--details>span.h6>*, +.product-grid-view-zoom-out--details>div.h6>*>* { line-height: 1.2; } @@ -1242,18 +1288,18 @@ results-list[initialized] { width: 100%; } -.text-block > *:first-child, -.text-block > *:first-child:empty + * { +.text-block>*:first-child, +.text-block>*:first-child:empty+* { margin-block-start: 0; } -.text-block > *:last-child, -.text-block > *:has(+ *:last-child:empty) { +.text-block>*:last-child, +.text-block>*:has(+ *:last-child:empty) { margin-block-end: 0; } /* This is to deal with the margin applied to the p when custom styles are enabled. The p isn't the first child anymore due to the style tag */ -.text-block > style + * { +.text-block>style+* { margin-block-start: 0; } @@ -1309,6 +1355,7 @@ results-list[initialized] { --dialog-drawer-opening-animation: move-and-fade; --dialog-drawer-closing-animation: move-and-fade; } + /* stylelint-enable value-keyword-case */ .dialog-drawer[open] { @@ -1524,8 +1571,7 @@ shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons); } -.product-form-buttons:has(.add-to-cart-button.button-secondary) - :is(shopify-accelerated-checkout, shopify-accelerated-checkout-cart) { +.product-form-buttons:has(.add-to-cart-button.button-secondary) :is(shopify-accelerated-checkout, shopify-accelerated-checkout-cart) { --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary); --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons); } @@ -1572,14 +1618,14 @@ summary .icon-plus :is(.horizontal, .vertical), opacity: 1; } -details[open] > summary .icon-plus .horizontal, -.details-open > summary .icon-plus .horizontal, +details[open]>summary .icon-plus .horizontal, +.details-open>summary .icon-plus .horizontal, .show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal { transform: rotate(90deg); } -details[open] > summary .icon-plus .vertical, -.details-open > summary .icon-plus .vertical, +details[open]>summary .icon-plus .vertical, +.details-open>summary .icon-plus .vertical, .show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical { transform: rotate(90deg); opacity: 0; @@ -1604,7 +1650,7 @@ media-gallery { } } -:not(.dialog-zoomed-gallery) > .product-media-container { +:not(.dialog-zoomed-gallery)>.product-media-container { --slide-width: 100%; display: flex; @@ -1905,7 +1951,7 @@ zoom-dialog dialog { } /* If the product media is already providing an image cover, hide images provided by sibling deferred-media */ -.product-media__image ~ * .deferred-media__poster-image { +.product-media__image~* .deferred-media__poster-image { display: none; } @@ -1926,7 +1972,7 @@ zoom-dialog dialog { product-model model-viewer, /* Media that have a poster button sibling providing the size should be absolute-positioned. Otherwise, it should be a block to rely on its own size */ -:is(deferred-media, product-model) > .deferred-media__poster-button ~ *:not(template) { +:is(deferred-media, product-model)>.deferred-media__poster-button~*:not(template) { display: block; position: absolute; top: 0; @@ -1951,16 +1997,14 @@ slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui_ } @media screen and (max-width: 749px) { - slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter)) - .shopify-model-viewer-ui__controls-area { + slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter)) .shopify-model-viewer-ui__controls-area { /* Position the controls just above the counter */ bottom: calc(var(--minimum-touch-target) + var(--padding-sm)); } } @media screen and (min-width: 750px) { - slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter)) - .shopify-model-viewer-ui__controls-area { + slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter)) .shopify-model-viewer-ui__controls-area { /* Position the controls just above the counter */ bottom: calc(var(--minimum-touch-target) + var(--padding-sm)); } @@ -1980,6 +2024,7 @@ slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui_ } deferred-media { + /* The overflow hidden in the deferred-media won't let the button show the focus ring */ &:has(:focus-visible) { outline: var(--focus-outline-width) solid currentcolor; @@ -2067,7 +2112,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p padding: var(--padding-md); } -.button-shopify-xr > svg { +.button-shopify-xr>svg { width: var(--icon-size-sm); height: var(--icon-size-sm); margin-inline-end: var(--margin-md); @@ -2080,8 +2125,10 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p /* Swatches */ .swatch { --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity)); - --min-width-unitless: 15.9999; /* want to avoid division by 0 */ - --min-height-unitless: 15.9999; /* want to avoid division by 0 */ + --min-width-unitless: 15.9999; + /* want to avoid division by 0 */ + --min-height-unitless: 15.9999; + /* want to avoid division by 0 */ --min-height: 16px; --min-width: 16px; @@ -2110,27 +2157,19 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p We also want the result to always be smaller than the input (pdp > everywhere else) by some scaling factor. */ - --offset-scaled-width: calc( - var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size) - ); - --offset-scaled-height: calc( - var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size) - ); + --offset-scaled-width: calc(var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)); + --offset-scaled-height: calc(var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)); --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width)); /* width = min(m + sU, (m + s * W'/H' * M'), M) */ - --swatch-width: min( - calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px), - calc(var(--min-width) + var(--offset-scaled-width)), - var(--max-swatch-size) - ); + --swatch-width: min(calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px), + calc(var(--min-width) + var(--offset-scaled-width)), + var(--max-swatch-size)); /* height = min(m + sV, (m + s * H'/W' * M'), M) */ - --swatch-height: min( - calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px), - calc(var(--min-height) + var(--offset-scaled-height)), - var(--max-swatch-size) - ); + --swatch-height: min(calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px), + calc(var(--min-height) + var(--offset-scaled-height)), + var(--max-swatch-size)); display: block; background: var(--swatch-background); @@ -2201,7 +2240,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p --variant-option-padding-inline: var(--padding-md); } -.variant-option + .variant-option { +.variant-option+.variant-option { margin-top: var(--padding-lg); } @@ -2216,7 +2255,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p } } -.variant-option--swatches > overflow-list { +.variant-option--swatches>overflow-list { justify-content: var(--product-swatches-alignment); @media screen and (max-width: 749px) { @@ -2244,12 +2283,12 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p } @media (prefers-reduced-motion: no-preference) { + .variant-option__button-label, .variant-option__select-wrapper, .variant-option__button-label::before, .variant-option__button-label::after, - .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true']) - .variant-option__button-label__pill, + .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill, .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type { transition-duration: var(--animation-speed); transition-timing-function: var(--animation-easing); @@ -2263,8 +2302,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p transition-property: clip-path; } - .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true']) - .variant-option__button-label__pill { + .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill { transition-property: transform; } @@ -2357,8 +2395,8 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p } } - &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']), - &:has(:checked) ~ label { + &:has([data-previous-checked='true'])~label:has([data-current-checked='true']), + &:has(:checked)~label { .variant-option__button-label__pill { left: 0; right: unset; @@ -2369,20 +2407,17 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p --pill-offset: calc(100% + 1px); } - &:has(:checked) ~ label { + &:has(:checked)~label { --pill-offset: calc(-100% - 1px); } - &:has([data-current-checked='true']):first-of-type - ~ label:last-of-type:not(.variant-option__button-label--has-swatch), + &:has([data-current-checked='true']):first-of-type~label:last-of-type:not(.variant-option__button-label--has-swatch), &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) { --clip: 0 0 0 100%; } - &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not( - .variant-option__button-label--has-swatch - ), - &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) { + &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(.variant-option__button-label--has-swatch), + &:has(:checked)~label:not(.variant-option__button-label--has-swatch) { --clip: 0 100% 0 0; } @@ -2399,13 +2434,11 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p /* the more complex selector rules here produce the wrap around effect for first/last variants */ .variant-option--buttons:has(:nth-of-type(3)) { - .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type { + .variant-option__button-label:has([data-current-checked='true']):first-of-type~label:last-of-type { --pill-offset: calc(100% + 1px); } - .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has( - ~ label:last-of-type > :checked - ) { + .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked) { --pill-offset: calc(-100% - 1px); } } @@ -2498,6 +2531,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */ @supports not (background-color: rgb(from red 150 g b / alpha)) { + /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/ .variant-option__button-label--has-swatch:has(:checked), .variant-option__button-label:has(:focus-visible) .swatch { @@ -2578,8 +2612,9 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p } @media screen and (min-width: 750px) { + .sticky-content--desktop, - .sticky-content--desktop.full-height--desktop > .group-block { + .sticky-content--desktop.full-height--desktop>.group-block { position: sticky; top: var(--sticky-header-offset, 0); z-index: var(--layer-flat); @@ -2604,7 +2639,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)); } -product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) { +product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6)>*:not(.tax-note) { margin-block: 0; } @@ -2741,7 +2776,7 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) { /* Custom Typography style */ .custom-typography, -.custom-typography > * { +.custom-typography>* { font-family: var(--font-family); font-weight: var(--font-weight); text-transform: var(--text-transform); @@ -2767,12 +2802,12 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) { } .custom-font-size, -.custom-font-size > * { +.custom-font-size>* { font-size: var(--font-size); } .custom-font-weight, -.custom-font-weight > * { +.custom-font-weight>* { font-weight: var(--font-weight); } @@ -2822,19 +2857,19 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) { .layout-panel-flex--row:not(.mobile-column) { flex-wrap: var(--flex-wrap-mobile); - > .menu { + >.menu { flex: 1 1 min-content; } - > .text-block { + >.text-block { flex: 1 1 var(--max-width--display-tight); } - > .image-block { + >.image-block { flex: 1 1 var(--size-style-width-mobile-min); } - > .button { + >.button { flex: 0 0 fit-content; } } @@ -2906,7 +2941,7 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) { } :first-child:is(p, h1, h2, h3, h4, h5, h6), - :first-child:empty + :is(p, h1, h2, h3, h4, h5, h6) { + :first-child:empty+ :is(p, h1, h2, h3, h4, h5, h6) { margin-block-start: 0; } @@ -3003,17 +3038,17 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) { outline: none; } - &:focus-visible + .checkbox__label .icon-checkmark { + &:focus-visible+.checkbox__label .icon-checkmark { outline: var(--focus-outline-width) solid currentcolor; outline-offset: var(--focus-outline-offset); } - &:checked + .checkbox__label .icon-checkmark { + &:checked+.checkbox__label .icon-checkmark { background-color: var(--color-foreground); border-color: var(--color-foreground); } - &:disabled + .checkbox__label .icon-checkmark { + &:disabled+.checkbox__label .icon-checkmark { background-color: var(--input-disabled-background-color); border-color: var(--input-disabled-border-color); } @@ -3049,7 +3084,7 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) { transition: opacity var(--animation-speed) var(--animation-easing); } -.checkbox__input:disabled + .checkbox__label { +.checkbox__input:disabled+.checkbox__label { color: var(--input-disabled-text-color); } @@ -3167,15 +3202,15 @@ input[type='radio'] { } /* Shared styles for radio buttons and checkboxes */ -:where(input[type='radio']) + label, -:where(input[type='checkbox']) + label { +:where(input[type='radio'])+label, +:where(input[type='checkbox'])+label { display: inline; vertical-align: middle; cursor: pointer; } -:where(input[type='radio']):disabled + label, -:where(input[type='checkbox']):disabled + label { +:where(input[type='radio']):disabled+label, +:where(input[type='checkbox']):disabled+label { color: var(--input-disabled-text-color); cursor: not-allowed; } @@ -3394,7 +3429,7 @@ label:has(input[type='checkbox']:disabled) { } } -.pills__pill > .svg-wrapper { +.pills__pill>.svg-wrapper { --close-icon-opacity: 0.4; --icon-stroke-width: 1px; @@ -3510,11 +3545,8 @@ fly-to-cart.fly-to-cart--sticky { --facets-vertical-col-width: 6; grid-template-columns: - 1fr repeat( - var(--centered-column-number), - minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number))) - ) - 1fr; + 1fr repeat(var(--centered-column-number), + minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))) 1fr; } @media screen and (min-width: 990px) { @@ -3527,15 +3559,12 @@ fly-to-cart.fly-to-cart--sticky { @media screen and (min-width: 750px) { grid-column: 1 / -1; grid-template-columns: - minmax(var(--page-margin), 1fr) repeat( - var(--centered-column-number), - minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number))) - ) - minmax(var(--page-margin), 1fr); + minmax(var(--page-margin), 1fr) repeat(var(--centered-column-number), + minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))) minmax(var(--page-margin), 1fr); } } -.collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid { +.collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden)~.main-collection-grid { @media screen and (min-width: 750px) { grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number); } @@ -3548,18 +3577,14 @@ fly-to-cart.fly-to-cart--sticky { } } -:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) - [product-grid-view='default'] - .product-grid__card { +:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) [product-grid-view='default'] .product-grid__card { @media screen and (max-width: 749px) { padding-inline-start: max(var(--padding-xs), var(--padding-inline-start)); padding-inline-end: max(var(--padding-xs), var(--padding-inline-end)); } } -:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) - [product-grid-view='mobile-single'] - .product-grid__card { +:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) [product-grid-view='mobile-single'] .product-grid__card { @media screen and (max-width: 749px) { padding-inline-start: max(var(--padding-xs), var(--padding-inline-start)); padding-inline-end: max(var(--padding-xs), var(--padding-inline-end)); @@ -3748,6 +3773,29 @@ fly-to-cart.fly-to-cart--sticky { } } +/* ============================================================================ + Mobile Performance - Disabled Animations Override + ============================================================================ */ +@media screen and (max-width: 749px) { + body.animations-disabled-mobile * { + /* Disable all CSS Scroll-Driven reveals (native feature used heavily in this theme) */ + animation-timeline: none !important; + } + + body.animations-disabled-mobile .slide__content { + /* Specifically prevent the slide reveal animation to load instantly */ + animation: none !important; + opacity: 1 !important; + translate: 0 0 !important; + } + + /* Disable costly View Transition animations on mobile */ + body.animations-disabled-mobile::view-transition-old(*), + body.animations-disabled-mobile::view-transition-new(*) { + animation: none !important; + } +} + @keyframes search-element-slide-out-bottom { 0% { transform: translateY(0); @@ -3773,6 +3821,7 @@ fly-to-cart.fly-to-cart--sticky { } @keyframes thumbnail-selected { + 0%, 100% { box-shadow: 0 0 0 2px transparent; @@ -3863,7 +3912,8 @@ fly-to-cart.fly-to-cart--sticky { position: absolute; z-index: var(--layer-lowest); inset: 0; - clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */ + clip-path: inset(-50px 0 0 0); + /* stylelint-disable-line */ } @media screen and (min-width: 750px) { @@ -3878,7 +3928,8 @@ fly-to-cart.fly-to-cart--sticky { position: absolute; z-index: var(--layer-lowest); inset: 0; - clip-path: inset(0 0 -50px 0); /* stylelint-disable-line */ + clip-path: inset(0 0 -50px 0); + /* stylelint-disable-line */ } @media screen and (min-width: 750px) { @@ -3894,11 +3945,11 @@ fly-to-cart.fly-to-cart--sticky { aspect-ratio: var(--size-style-aspect-ratio, auto); } -:not(deferred-media) > .video-placeholder-wrapper { +:not(deferred-media)>.video-placeholder-wrapper { width: var(--video-placeholder-width); } -.video-placeholder-wrapper > * { +.video-placeholder-wrapper>* { width: 100%; height: 100%; object-fit: cover; @@ -3941,7 +3992,8 @@ slideshow-component.slideshow--content-below-media slideshow-slide { animation-timeline: var(--slideshow-timeline); } - @media (prefers-reduced-motion) { + @media screen and (max-width: 749px), + (prefers-reduced-motion) { opacity: 1; animation: none; } @@ -4059,12 +4111,10 @@ slideshow-slide.product-media-container--tallest { } @media screen and (max-width: 749px) { + /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */ - .media-gallery--hint - :is( - slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type), - slideshow-slide[aria-hidden='false'] + slideshow-slide - ) { + .media-gallery--hint :is(slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type), + slideshow-slide[aria-hidden='false'] + slideshow-slide) { content-visibility: auto; slideshow-component[actioned] & { @@ -4078,11 +4128,8 @@ slideshow-slide.product-media-container--tallest { * Card galleries preview the next or previous images on 'pointerenter', so we * try to kick load them beforehand (they are lazy loaded otherwise). */ -:is(.resource-list__carousel, .card-gallery) - :is( - slideshow-slide:has(+ slideshow-slide[aria-hidden='false']), - slideshow-slide[aria-hidden='false'] + slideshow-slide - ) { +:is(.resource-list__carousel, .card-gallery) :is(slideshow-slide:has(+ slideshow-slide[aria-hidden='false']), + slideshow-slide[aria-hidden='false'] + slideshow-slide) { content-visibility: auto; slideshow-component[actioned] & { @@ -4094,7 +4141,7 @@ slideshow-slide.product-media-container--tallest { * Be specific about HTML children structure to avoid targeting nested slideshows. * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari. */ -slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide { +slideshow-component:is([dragging], [transitioning], :hover)>slideshow-container>slideshow-slides>slideshow-slide { content-visibility: visible; } @@ -4167,13 +4214,13 @@ slideshow-container { slideshow-component:is([autoplay]) { &:is([paused]) { - .icon-play > svg { + .icon-play>svg { display: block; } } &:not([paused]) { - .icon-pause > svg { + .icon-pause>svg { display: block; } } @@ -4244,11 +4291,7 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none { } } -:not(.media-gallery--carousel) - > :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover)) - > slideshow-container - > slideshow-arrows - .slideshow-control { +:not(.media-gallery--carousel)> :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))>slideshow-container>slideshow-arrows .slideshow-control { animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards; } @@ -4301,11 +4344,10 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none { display: none; } -:where(.section-resource-list.section--full-width) product-card[data-product-transition] > .group-block, -:where(.section-carousel.section--full-width) product-card[data-product-transition] > .group-block { +:where(.section-resource-list.section--full-width) product-card[data-product-transition]>.group-block, +:where(.section-carousel.section--full-width) product-card[data-product-transition]>.group-block { @media screen and (max-width: 749px) { - padding-inline: max(var(--padding-xs), var(--padding-inline-start)) - max(var(--padding-xs), var(--padding-inline-end)); + padding-inline: max(var(--padding-xs), var(--padding-inline-start)) max(var(--padding-xs), var(--padding-inline-end)); } } @@ -4421,10 +4463,7 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none { @container resource-list-carousel (min-width: 750px) { .resource-list__carousel .resource-list__slide { - --section-slide-width: calc( - (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) / - var(--column-count) - ); + --section-slide-width: calc((100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) / var(--column-count)); --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max)); --slide-width: var(--section-slide-width, var(--fallback-slide-width)); } @@ -4477,15 +4516,15 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none { } /* Flex behavior for width variants */ -.layout-panel-flex--row > .group-block--width-fit { +.layout-panel-flex--row>.group-block--width-fit { flex: 0; } -.layout-panel-flex--row > .group-block--width-fill { +.layout-panel-flex--row>.group-block--width-fill { flex: 1; } -.layout-panel-flex--row > .group-block--width-custom { +.layout-panel-flex--row>.group-block--width-custom { flex-basis: var(--size-style-width); } @@ -4500,20 +4539,21 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none { } /* Flex behavior for height variants */ -.layout-panel-flex--column > .group-block--height-fit { +.layout-panel-flex--column>.group-block--height-fit { flex: 0 1 auto; } -.layout-panel-flex--column > .group-block--height-fill { +.layout-panel-flex--column>.group-block--height-fill { flex: 1; } -.layout-panel-flex--column > .group-block--height-custom { +.layout-panel-flex--column>.group-block--height-custom { flex-basis: var(--size-style-height); } accordion-custom { details { + &::details-content, .details-content { block-size: 0; @@ -4533,6 +4573,7 @@ accordion-custom { } &:not([open]) { + &::details-content, .details-content { padding-block: 0; @@ -4540,6 +4581,7 @@ accordion-custom { } &[open] { + &::details-content, .details-content { opacity: 1; @@ -4589,12 +4631,10 @@ text-component { opacity: 0; transition: opacity var(--animation-speed-slow) var(--animation-easing); pointer-events: none; - background-image: linear-gradient( - -85deg, - var(--shimmer-text-color) 10%, - var(--shimmer-color-light) 50%, - var(--shimmer-text-color) 90% - ); + background-image: linear-gradient(-85deg, + var(--shimmer-text-color) 10%, + var(--shimmer-color-light) 50%, + var(--shimmer-text-color) 90%); background-clip: text; background-size: 200% 100%; background-position: 100% 0; @@ -4715,6 +4755,7 @@ text-component { /* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */ @media screen and (max-width: 1200px) { + input, textarea, select, @@ -4943,4 +4984,4 @@ product-recommendations:has([data-has-recommendations='false']) { opacity: var(--atc-opacity, 1); translate: 0px var(--atc-destination, 0px); } -} +} \ No newline at end of file diff --git a/assets/deferred-hydration.js b/assets/deferred-hydration.js new file mode 100644 index 000000000..fc45fdcb6 --- /dev/null +++ b/assets/deferred-hydration.js @@ -0,0 +1,68 @@ +/** + * Deferred Hydration Utility + * Hydrates content when it enters the viewport on mobile. + */ + +import { onDocumentReady } from '@theme/utilities'; + +class DeferredHydration extends HTMLElement { + constructor() { + super(); + this.observer = null; + } + + connectedCallback() { + onDocumentReady(() => { + const mobileOnly = this.hasAttribute('mobile-only'); + const isMobile = window.innerWidth < 750; + + if (mobileOnly && !isMobile) { + this.hydrate(); + return; + } + + // If it's already in viewport or we want to be safe, use IntersectionObserver + this.observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + this.hydrate(); + this.observer.disconnect(); + } + }); + }, { rootMargin: '200px' }); + + this.observer.observe(this); + }); + } + + hydrate() { + const template = this.querySelector('template'); + if (template) { + const content = template.content.cloneNode(true); + this.appendChild(content); + // Remove template to avoid re-hydration + template.remove(); + this.setAttribute('hydrated', ''); + + // Look for any scripts that might need a nudge + this.querySelectorAll('script').forEach(script => { + const newScript = document.createElement('script'); + Array.from(script.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value)); + newScript.innerHTML = script.innerHTML; + if (script.parentNode) { + script.parentNode.replaceChild(newScript, script); + } + }); + } + } + + disconnectedCallback() { + if (this.observer) { + this.observer.disconnect(); + } + } +} + +if (!customElements.get('deferred-hydration')) { + customElements.define('deferred-hydration', DeferredHydration); +} diff --git a/assets/header.js b/assets/header.js index a67565c26..90cab5a2b 100644 --- a/assets/header.js +++ b/assets/header.js @@ -192,7 +192,7 @@ class HeaderComponent extends Component { this.#observeStickyPosition(stickyMode === 'always'); if (stickyMode === 'scroll-up' || stickyMode === 'always') { - document.addEventListener('scroll', this.#handleWindowScroll); + document.addEventListener('scroll', this.#handleWindowScroll, { passive: true }); } } } diff --git a/assets/localization.js b/assets/localization.js index 6d47cbb96..e21cd5495 100644 --- a/assets/localization.js +++ b/assets/localization.js @@ -24,7 +24,7 @@ class LocalizationFormComponent extends Component { this.refs.search && this.refs.search.addEventListener('keydown', this.#onSearchKeyDown); this.refs.countryList && this.refs.countryList.addEventListener('keydown', this.#onContainerKeyDown); - this.refs.countryList && this.refs.countryList.addEventListener('scroll', this.#onCountryListScroll); + this.refs.countryList && this.refs.countryList.addEventListener('scroll', this.#onCountryListScroll, { passive: true }); // Resizing the language input can be expensive for browsers that don't support field-sizing: content. // Spliting it into separate tasks at least helps when there are multiple localization forms on the page. @@ -515,7 +515,7 @@ class DrawerLocalizationComponent extends Component { const countryList = localizationForm.querySelector('.country-selector-form__wrapper'); if (target.open) { - if (countryList) countryList.addEventListener('scroll', this.#onCountryListScroll); + if (countryList) countryList.addEventListener('scroll', this.#onCountryListScroll, { passive: true }); onAnimationEnd(target, localizationForm.focusSearchInput); } else { countryList?.removeEventListener('scroll', this.#onCountryListScroll); diff --git a/assets/scrolling.js b/assets/scrolling.js index 57739db13..db39e6e1a 100644 --- a/assets/scrolling.js +++ b/assets/scrolling.js @@ -89,7 +89,7 @@ export class Scroller { this.#onScrollEnd = options.onScrollEnd; this.element = element; - this.element.addEventListener('scroll', this.#handleScroll); + this.element.addEventListener('scroll', this.#handleScroll, { passive: true }); } /** @@ -342,25 +342,25 @@ export function scrollIntoView(element, { ancestor, behavior = 'smooth', block = const scrollTop = ancestor.scrollHeight > ancestor.clientHeight ? calculateScrollOffset( - block, - ancestorRect.top, - ancestor.clientHeight, - elemRect.top, - elemRect.height, - ancestor.scrollTop - ) + block, + ancestorRect.top, + ancestor.clientHeight, + elemRect.top, + elemRect.height, + ancestor.scrollTop + ) : ancestor.scrollTop; const scrollLeft = ancestor.scrollWidth > ancestor.clientWidth ? calculateScrollOffset( - inline, - ancestorRect.left, - ancestor.clientWidth, - elemRect.left, - elemRect.width, - ancestor.scrollLeft - ) + inline, + ancestorRect.left, + ancestor.clientWidth, + elemRect.left, + elemRect.width, + ancestor.scrollLeft + ) : ancestor.scrollLeft; ancestor.scrollTo({ top: scrollTop, left: scrollLeft, behavior }); @@ -372,7 +372,7 @@ class ScrollHint extends HTMLElement { #rafId = null; connectedCallback() { - this.addEventListener('scroll', this.#handleScroll); + this.addEventListener('scroll', this.#handleScroll, { passive: true }); this.#resizeObserver.observe(this); } diff --git a/assets/zoom-dialog.js b/assets/zoom-dialog.js index acdff63ed..8fa54e27f 100644 --- a/assets/zoom-dialog.js +++ b/assets/zoom-dialog.js @@ -28,7 +28,7 @@ export class ZoomDialog extends Component { connectedCallback() { super.connectedCallback(); - this.refs.dialog.addEventListener('scroll', this.handleScroll); + this.refs.dialog.addEventListener('scroll', this.handleScroll, { passive: true }); } disconnectedCallback() { @@ -275,7 +275,7 @@ function getMostVisibleElement(elements) { current.intersectionRatio > prev.intersectionRatio ? current : prev ); observer.disconnect(); - resolve(/** @type {HTMLElement} */ (mostVisible.target)); + resolve(/** @type {HTMLElement} */(mostVisible.target)); }, { threshold: Array.from({ length: 100 }, (_, i) => i / 100), diff --git a/blocks/_blog-post-card.liquid b/blocks/_blog-post-card.liquid index 72baf19d3..b9d7f0494 100644 --- a/blocks/_blog-post-card.liquid +++ b/blocks/_blog-post-card.liquid @@ -4,17 +4,36 @@ class="blog-post-card" style="--text-align: {{ block_settings.alignment }}" > - {% if article.image %} - {% content_for 'block', id: 'image', type: '_blog-post-image', article: article %} - {% endif %} +
+ {% if article.image %} + {% content_for 'block', id: 'image', type: '_blog-post-image', article: article %} + {% endif %} + +
+ {%- content_for 'block', id: 'badge', type: 'badge' -%} +
+ + {% if block_settings.title_overlay %} +
+ + {%- content_for 'block', id: 'heading', type: '_heading', text: article.title -%} + +
+ {% endif %} +
- - {%- content_for 'block', id: 'heading', type: '_heading', text: article.title -%} - + {% if block_settings.title_overlay == false %} + + {%- content_for 'block', id: 'heading', type: '_heading', text: article.title -%} + + {% endif %} {% content_for 'block', id: 'blog-post-details', @@ -45,6 +64,42 @@ } } + .blog-post-card__image-wrapper { + position: relative; + width: 100%; + } + + .blog-post-card__badge-wrapper { + z-index: 3; + pointer-events: none; + } + + .blog-post-card__badge-wrapper > * { + pointer-events: auto; + } + + .blog-post-card__title-overlay { + position: absolute; + z-index: 2; + padding: 1.5rem; + pointer-events: none; + width: 100%; + } + + .blog-post-card__title-overlay a { + pointer-events: auto; + } + + .blog-post-card__title-overlay--top-left { top: 0; left: 0; text-align: left; } + .blog-post-card__title-overlay--top-center { top: 0; left: 50%; transform: translateX(-50%); text-align: center; } + .blog-post-card__title-overlay--top-right { top: 0; right: 0; text-align: right; } + .blog-post-card__title-overlay--center-left { top: 50%; left: 0; transform: translateY(-50%); text-align: left; } + .blog-post-card__title-overlay--center { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } + .blog-post-card__title-overlay--center-right { top: 50%; right: 0; transform: translateY(-50%); text-align: right; } + .blog-post-card__title-overlay--bottom-left { bottom: 0; left: 0; text-align: left; } + .blog-post-card__title-overlay--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; } + .blog-post-card__title-overlay--bottom-right { bottom: 0; right: 0; text-align: right; } + .blog-post-card__content { padding-block-start: 0.4rem; display: flex; @@ -99,6 +154,34 @@ "id": "alignment", "label": "t:settings.alignment", "default": "left" + }, + { + "type": "header", + "content": "Title Overlay Settings" + }, + { + "type": "checkbox", + "id": "title_overlay", + "label": "Overlay title on image", + "default": false + }, + { + "type": "select", + "id": "title_position", + "label": "Title overlay position", + "options": [ + { "value": "top-left", "label": "Top left" }, + { "value": "top-center", "label": "Top center" }, + { "value": "top-right", "label": "Top right" }, + { "value": "center-left", "label": "Center left" }, + { "value": "center", "label": "Center" }, + { "value": "center-right", "label": "Center right" }, + { "value": "bottom-left", "label": "Bottom left" }, + { "value": "bottom-center", "label": "Bottom center" }, + { "value": "bottom-right", "label": "Bottom right" } + ], + "default": "bottom-left", + "visible_if": "{{ block.settings.title_overlay }}" } ] } diff --git a/blocks/_collection-card.liquid b/blocks/_collection-card.liquid index 021409363..be118d448 100644 --- a/blocks/_collection-card.liquid +++ b/blocks/_collection-card.liquid @@ -38,6 +38,9 @@ }, { "type": "collection-title" + }, + { + "type": "badge" } ], "tag": null, diff --git a/blocks/_featured-blog-posts-card.liquid b/blocks/_featured-blog-posts-card.liquid index 9806e876f..76672d1da 100644 --- a/blocks/_featured-blog-posts-card.liquid +++ b/blocks/_featured-blog-posts-card.liquid @@ -87,12 +87,26 @@ {% stylesheet %} diff --git a/blocks/badge.liquid b/blocks/badge.liquid new file mode 100644 index 000000000..3dc209bec --- /dev/null +++ b/blocks/badge.liquid @@ -0,0 +1,162 @@ +{% render 'badge', link: block.settings.link %} + +{% schema %} +{ + "name": "Badge", + "tag": null, + "settings": [ + { + "type": "text", + "id": "label", + "label": "t:settings.label", + "default": "Badge Category" + }, + { + "type": "url", + "id": "link", + "label": "t:settings.link" + }, + { + "type": "checkbox", + "id": "open_in_new_tab", + "label": "t:settings.open_new_tab", + "default": false + }, + { + "type": "header", + "content": "t:content.appearance" + }, + { + "type": "checkbox", + "id": "inherit_color_scheme", + "label": "t:settings.inherit_color_scheme", + "default": true + }, + { + "type": "color_scheme", + "id": "color_scheme", + "label": "t:settings.color_scheme", + "default": "scheme-1", + "visible_if": "{{ block.settings.inherit_color_scheme == false }}" + }, + { + "type": "image_picker", + "id": "background_image", + "label": "Background Image" + }, + { + "type": "color", + "id": "border_color", + "label": "Border Color", + "default": "rgba(0,0,0,0)" + }, + { + "type": "range", + "id": "corner_radius", + "label": "Corner Radius", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 4 + }, + { + "type": "header", + "content": "t:content.typography" + }, + { + "type": "number", + "id": "font_size", + "label": "t:settings.size" + }, + { + "type": "number", + "id": "font_size_mobile", + "label": "Mobile size (px)" + }, + { + "type": "header", + "content": "Positioning" + }, + { + "type": "checkbox", + "id": "position_absolute", + "label": "Use absolute positioning", + "default": false + }, + { + "type": "select", + "id": "vertical_alignment", + "label": "Vertical position", + "options": [ + { "value": "top", "label": "Top" }, + { "value": "center", "label": "Center" }, + { "value": "bottom", "label": "Bottom" } + ], + "default": "top", + "visible_if": "{{ block.settings.position_absolute }}" + }, + { + "type": "select", + "id": "horizontal_alignment", + "label": "Horizontal position", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "center", "label": "Center" }, + { "value": "right", "label": "Right" } + ], + "default": "right", + "visible_if": "{{ block.settings.position_absolute }}" + }, + { + "type": "header", + "content": "t:content.padding" + }, + { + "type": "range", + "id": "padding-block-start", + "label": "t:settings.top", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 4 + }, + { + "type": "range", + "id": "padding-block-end", + "label": "t:settings.bottom", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 4 + }, + { + "type": "range", + "id": "padding-inline-start", + "label": "t:settings.left", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 8 + }, + { + "type": "range", + "id": "padding-inline-end", + "label": "t:settings.right", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 8 + } + ], + "presets": [ + { + "name": "Badge" + } + ] +} +{% endschema %} diff --git a/blocks/button.liquid b/blocks/button.liquid index 8901c33d1..338dd992b 100644 --- a/blocks/button.liquid +++ b/blocks/button.liquid @@ -42,6 +42,44 @@ ], "default": "button" }, + { + "type": "header", + "content": "t:content.typography" + }, + { + "type": "number", + "id": "font_size", + "label": "t:settings.size" + }, + { + "type": "number", + "id": "font_size_mobile", + "label": "Mobile size (px)" + }, + { + "type": "header", + "content": "t:content.padding" + }, + { + "type": "number", + "id": "padding-block-start", + "label": "t:settings.top" + }, + { + "type": "number", + "id": "padding-block-end", + "label": "t:settings.bottom" + }, + { + "type": "number", + "id": "padding-inline-start", + "label": "t:settings.left" + }, + { + "type": "number", + "id": "padding-inline-end", + "label": "t:settings.right" + }, { "type": "header", "content": "t:content.size" @@ -99,6 +137,50 @@ "unit": "%", "default": 100, "visible_if": "{{ block.settings.width_mobile == \"custom\" }}" + }, + { + "type": "header", + "content": "t:content.padding" + }, + { + "type": "range", + "id": "padding-block-start", + "label": "t:settings.top", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 0 + }, + { + "type": "range", + "id": "padding-block-end", + "label": "t:settings.bottom", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 0 + }, + { + "type": "range", + "id": "padding-inline-start", + "label": "t:settings.left", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 0 + }, + { + "type": "range", + "id": "padding-inline-end", + "label": "t:settings.right", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 0 } ], "presets": [ diff --git a/blocks/collection-card.liquid b/blocks/collection-card.liquid index 50d79c9a5..659d6b9a1 100644 --- a/blocks/collection-card.liquid +++ b/blocks/collection-card.liquid @@ -38,6 +38,9 @@ }, { "type": "collection-title" + }, + { + "type": "badge" } ], "tag": null, diff --git a/blocks/group.liquid b/blocks/group.liquid index 09dc87c8a..b7f2f3bd3 100644 --- a/blocks/group.liquid +++ b/blocks/group.liquid @@ -2,7 +2,7 @@ {% content_for 'blocks' %} {% endcapture %} -{% render 'group', children: children, settings: block.settings, shopify_attributes: block.shopify_attributes %} +{% render 'group', children: children, settings: block.settings, shopify_attributes: block.shopify_attributes, id: block.id %} {% schema %} { @@ -24,6 +24,12 @@ "type": "header", "content": "t:content.layout" }, + { + "type": "text", + "id": "footer_id", + "label": "ID", + "default": "ID" + }, { "type": "select", "id": "content_direction", diff --git a/blocks/menu.liquid b/blocks/menu.liquid index 8e20d9308..0294b6383 100644 --- a/blocks/menu.liquid +++ b/blocks/menu.liquid @@ -11,6 +11,7 @@ {% if menu != blank or heading != blank %} -
-
- {% content_for 'blocks' %} -
- - {%- if recommendations.performed or closest.product == blank -%} - {% liquid - assign products = recommendations.products - - if closest.product == blank - # Onboarding mode: Show placeholder products - for i in (1..block_settings.max_products) - assign products = products | append: ', ' - assign products = products | split: ',' - endfor - elsif recommendations.performed and recommendations.products_count == 0 - # No recommendations found, pull from catalog - if block_settings.recommendation_type == 'related' - assign products = collections.all.products | reject: 'id', closest.product.id - elsif block_settings.recommendation_type == 'complementary' - # Do not recommend the All collection as complementary products - assign products = null - endif - else - assign products = recommendations.products - endif - %} - {% capture list_items %} - {% for product in products limit: block_settings.max_products %} -
- {% content_for 'block', - type: '_product-card', - id: 'static-product-card', - closest.product: product - %} -
- {% if block_settings.layout_type == 'carousel' or block_settings.carousel_on_mobile %} - {% unless forloop.last %} - - {% endunless %} - {% endif %} - {% endfor %} - {% endcapture %} - - {% liquid - # Create an array from the list items to be used in the carousel - assign slide_content = list_items | strip - assign slides = slide_content | split: '' - - if products != blank and products.size > 0 - assign has_recommendations = 'true' - else - assign has_recommendations = 'false' - endif - %} - + + + {% stylesheet %} .block-resource-list { diff --git a/blocks/review.liquid b/blocks/review.liquid index 90c9f17c0..bbd503806 100644 --- a/blocks/review.liquid +++ b/blocks/review.liquid @@ -13,93 +13,79 @@ endif -%} -{%- if rating != blank -%} - {% liquid - assign star_count_rating = scale_max - assign decimal_rating = 0 - assign decimal = rating | modulo: 1 - - if decimal >= 0.3 and decimal <= 0.7 - assign decimal_rating = 0.5 - elsif decimal > 0.7 - assign decimal_rating = 1 - endif - - # this is used so I can tell how many stars I need to fill. When the decimal rating above is 0.5 or 1 I count it as one as the half star is dealt with with a SVG linear gradient. - assign decimal_rounded = decimal_rating | ceil - - assign svg_filled_stars = rating | floor | plus: decimal_rounded - %} - -
- - - - - - - - - - - - -
- {% if block_settings.stars_style == 'single' %} + + + {%- endif -%} {% stylesheet %} diff --git a/blocks/text.liquid b/blocks/text.liquid index 9fae949dc..6976b0acd 100644 --- a/blocks/text.liquid +++ b/blocks/text.liquid @@ -57,6 +57,13 @@ "default": "left", "visible_if": "{{ block.settings.width == '100%' }}" }, + { + "type": "text_alignment", + "id": "alignment_mobile", + "label": "Mobile alignment", + "default": "left", + "visible_if": "{{ block.settings.width == '100%' }}" + }, { "type": "header", "content": "t:content.typography" @@ -190,7 +197,7 @@ }, { "value": "5.5rem", - "label": "88px" + "label": "90px" }, { "value": "7.5rem", @@ -208,13 +215,19 @@ "default": "1rem", "visible_if": "{{ block.settings.type_preset == 'custom' }}" }, + { + "type": "number", + "id": "font_size_mobile", + "label": "Mobile size (px)", + "visible_if": "{{ block.settings.type_preset == 'custom' }}" + }, { "type": "select", "id": "line_height", "label": "t:settings.line_height", "options": [ { - "value": "tight", + "value": "0.76", "label": "t:options.tight" }, { @@ -379,6 +392,11 @@ "step": 1, "unit": "px", "default": 0 + }, + { + "type": "html", + "id": "video_embed", + "label": "Video embed" } ], "presets": [ diff --git a/commits.txt b/commits.txt new file mode 100644 index 000000000..ba1570510 Binary files /dev/null and b/commits.txt differ diff --git a/config/settings_data.json b/config/settings_data.json index 41beca196..9e4c0fbb9 100644 --- a/config/settings_data.json +++ b/config/settings_data.json @@ -7,10 +7,11 @@ * made to this file may be overwritten. * ------------------------------------------------------------ */ - { +{ "current": { - "logo_height": 36, - "logo_height_mobile": 28, + "logo": "shopify://shop_images/Dovetail-Logo-600x-opt_476086cb-50d3-4384-b0ec-9a1edd328591.png", + "logo_height": 50, + "logo_height_mobile": 29, "type_body_font": "inter_n4", "type_subheading_font": "inter_n5", "type_heading_font": "inter_n7", @@ -18,12 +19,12 @@ "type_size_paragraph": "14", "type_line_height_paragraph": "body-loose", "type_font_h1": "heading", - "type_size_h1": "56", + "type_size_h1": "88", "type_line_height_h1": "display-tight", "type_letter_spacing_h1": "heading-normal", "type_case_h1": "none", "type_font_h2": "heading", - "type_size_h2": "48", + "type_size_h2": "40", "type_line_height_h2": "display-tight", "type_letter_spacing_h2": "heading-normal", "type_case_h2": "none", @@ -32,9 +33,9 @@ "type_line_height_h3": "display-normal", "type_letter_spacing_h3": "heading-normal", "type_case_h3": "none", - "type_font_h4": "heading", - "type_size_h4": "24", - "type_line_height_h4": "display-tight", + "type_font_h4": "body", + "type_size_h4": "20", + "type_line_height_h4": "display-normal", "type_font_h5": "subheading", "type_size_h5": "14", "type_line_height_h5": "display-loose", @@ -51,10 +52,9 @@ "badge_sold_out_color_scheme": "scheme-3", "badge_text_transform": "none", "primary_button_border_width": 0, - "button_border_radius_primary": 14, + "button_border_radius_primary": 0, "secondary_button_border_width": 1, - "button_border_radius_secondary": 14, - "button_font_weight_secondary": "default", + "button_border_radius_secondary": 0, "cart_type": "drawer", "cart_price_font": "subheading", "show_cart_note": false, @@ -62,7 +62,7 @@ "drawer_drop_shadow": true, "icon_stroke": "default", "input_border_width": 1, - "inputs_border_radius": 4, + "inputs_border_radius": 12, "popover_border_radius": 14, "popover_border": "none", "currency_code_enabled_product_pages": false, @@ -77,18 +77,19 @@ "variant_button_border_width": 1, "variant_button_radius": 14, "variant_button_width": "equal-width-buttons", + "button_font_weight_secondary": "default", "content_for_index": [], "color_schemes": { "scheme-1": { "settings": { "background": "#ffffff", - "foreground_heading": "#000000", - "foreground": "#000000cf", + "foreground_heading": "#f9f6f4", + "foreground": "#42515e", "primary": "#000000cf", "primary_hover": "#000000", "border": "#0000000f", "shadow": "#000000", - "primary_button_background": "#000000", + "primary_button_background": "#c74a1b", "primary_button_text": "#ffffff", "primary_button_border": "#000000", "primary_button_hover_background": "#333333", @@ -120,14 +121,14 @@ }, "scheme-2": { "settings": { - "background": "#f5f5f5", + "background": "#e4e6e7", "foreground_heading": "#000000", - "foreground": "#000000cf", + "foreground": "#42515e", "primary": "#000000cf", "primary_hover": "#ffffff", "border": "#dfdfdf", "shadow": "#000000", - "primary_button_background": "#000000", + "primary_button_background": "#c74a1b", "primary_button_text": "#ffffff", "primary_button_border": "#000000", "primary_button_hover_background": "#333333", @@ -159,15 +160,15 @@ }, "scheme-3": { "settings": { - "background": "#eef1ea", - "foreground_heading": "#000000", - "foreground": "#000000cf", + "background": "#ffffff", + "foreground_heading": "#42515e", + "foreground": "#c74a1b", "primary": "#000000cf", "primary_hover": "#000000", "border": "#000000cf", "shadow": "#000000", - "primary_button_background": "#000000", - "primary_button_text": "#ffffff", + "primary_button_background": "rgba(0,0,0,0)", + "primary_button_text": "#42515e", "primary_button_border": "#000000", "primary_button_hover_background": "#333333", "primary_button_hover_text": "#ffffff", @@ -237,7 +238,7 @@ }, "scheme-5": { "settings": { - "background": "#333333", + "background": "#42515e", "foreground_heading": "#ffffff", "foreground": "#ffffff", "primary": "#ffffff", @@ -276,7 +277,7 @@ }, "scheme-6": { "settings": { - "background": "rgba(0,0,0,0)", + "background": "#c74a1b", "foreground_heading": "#ffffff", "foreground": "#f2f2f2", "primary": "#eaeaea", @@ -316,8 +317,8 @@ "scheme-58084d4c-a86e-4d0a-855e-a0966e5043f7": { "settings": { "background": "rgba(0,0,0,0)", - "foreground_heading": "#000000", - "foreground": "#000000", + "foreground_heading": "#42515e", + "foreground": "#42515e", "primary": "#000000", "primary_hover": "#00000087", "border": "#e6e6e6", @@ -351,6 +352,123 @@ "selected_variant_hover_text_color": "#ffffff", "selected_variant_hover_border_color": "#1a1a1a" } + }, + "scheme-cef83bbf-2633-4cee-9b3a-9d8125a1172a": { + "settings": { + "background": "#525152", + "foreground_heading": "#eeeff0", + "foreground": "#eeeff0", + "primary": "#000000cf", + "primary_hover": "#000000", + "border": "#0000000f", + "shadow": "#000000", + "primary_button_background": "#c74a1b", + "primary_button_text": "#eeeff0", + "primary_button_border": "#000000", + "primary_button_hover_background": "#c74a1bd1", + "primary_button_hover_text": "#ffffffd6", + "primary_button_hover_border": "#000000", + "secondary_button_background": "rgba(0,0,0,0)", + "secondary_button_text": "#000000", + "secondary_button_border": "#000000", + "secondary_button_hover_background": "#fafafa", + "secondary_button_hover_text": "#333333", + "secondary_button_hover_border": "#333333", + "input_background": "#ffffffc7", + "input_text_color": "#333333", + "input_border_color": "#dfdfdf", + "input_hover_background": "#00000003", + "variant_background_color": "#ffffff", + "variant_text_color": "#000000", + "variant_border_color": "#00000021", + "variant_hover_background_color": "#f5f5f5", + "variant_hover_text_color": "#000000", + "variant_hover_border_color": "#e6e6e6", + "selected_variant_background_color": "#000000", + "selected_variant_text_color": "#ffffff", + "selected_variant_border_color": "#000000", + "selected_variant_hover_background_color": "#1a1a1a", + "selected_variant_hover_text_color": "#ffffff", + "selected_variant_hover_border_color": "#1a1a1a" + } + }, + "scheme-fa2df66f-d094-4d01-ad02-3c74a35b36f1": { + "settings": { + "background": "#ffffff", + "foreground_heading": "#ffffff", + "foreground": "#42515e", + "primary": "#42515e", + "primary_hover": "#000000", + "border": "#0000000f", + "shadow": "#000000", + "primary_button_background": "#c74a1b", + "primary_button_text": "#ffffff", + "primary_button_border": "#000000", + "primary_button_hover_background": "#333333", + "primary_button_hover_text": "#ffffff", + "primary_button_hover_border": "#000000", + "secondary_button_background": "rgba(0,0,0,0)", + "secondary_button_text": "#000000", + "secondary_button_border": "#000000", + "secondary_button_hover_background": "#fafafa", + "secondary_button_hover_text": "#333333", + "secondary_button_hover_border": "#333333", + "input_background": "#ffffffc7", + "input_text_color": "#333333", + "input_border_color": "#dfdfdf", + "input_hover_background": "#00000003", + "variant_background_color": "#ffffff", + "variant_text_color": "#000000", + "variant_border_color": "#00000021", + "variant_hover_background_color": "#f5f5f5", + "variant_hover_text_color": "#000000", + "variant_hover_border_color": "#e6e6e6", + "selected_variant_background_color": "#000000", + "selected_variant_text_color": "#ffffff", + "selected_variant_border_color": "#000000", + "selected_variant_hover_background_color": "#1a1a1a", + "selected_variant_hover_text_color": "#ffffff", + "selected_variant_hover_border_color": "#1a1a1a" + } + }, + "scheme-f0150d46-c29e-406a-acfa-cdc1f91a0991": { + "settings": { + "background": "#42515e", + "foreground_heading": "#f9f6f4", + "foreground": "#ffffff", + "primary": "#000000cf", + "primary_hover": "#000000", + "border": "#0000000f", + "shadow": "#000000", + "primary_button_background": "#d43ce9", + "primary_button_text": "#ffffff", + "primary_button_border": "#000000", + "primary_button_hover_background": "#333333", + "primary_button_hover_text": "#ffffff", + "primary_button_hover_border": "#000000", + "secondary_button_background": "rgba(0,0,0,0)", + "secondary_button_text": "#000000", + "secondary_button_border": "#000000", + "secondary_button_hover_background": "#fafafa", + "secondary_button_hover_text": "#333333", + "secondary_button_hover_border": "#333333", + "input_background": "#ffffffc7", + "input_text_color": "#333333", + "input_border_color": "#dfdfdf", + "input_hover_background": "#00000003", + "variant_background_color": "#ffffff", + "variant_text_color": "#000000", + "variant_border_color": "#00000021", + "variant_hover_background_color": "#f5f5f5", + "variant_hover_text_color": "#000000", + "variant_hover_border_color": "#e6e6e6", + "selected_variant_background_color": "#000000", + "selected_variant_text_color": "#ffffff", + "selected_variant_border_color": "#000000", + "selected_variant_hover_background_color": "#1a1a1a", + "selected_variant_hover_text_color": "#ffffff", + "selected_variant_hover_border_color": "#1a1a1a" + } } } }, diff --git a/config/settings_schema.json b/config/settings_schema.json index 9a27dce58..d299bd625 100644 --- a/config/settings_schema.json +++ b/config/settings_schema.json @@ -1403,6 +1403,13 @@ "label": "t:settings.add_to_cart_animation", "default": true }, + { + "type": "checkbox", + "id": "disable_animations_mobile", + "label": "Disable animations on mobile", + "info": "Improves performance by disabling scroll reveals and page transitions on small screens.", + "default": true + }, { "type": "select", "id": "card_hover_effect", diff --git a/layout/theme.liquid b/layout/theme.liquid index 2b6b6a151..ead244064 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -25,6 +25,12 @@ {% endif %} {%- render 'meta-tags' -%} + + {% comment %} Preload LCP image if applicable {% endcomment %} + {% if template == 'index' %} + + {% endif %} + {%- render 'stylesheets' -%} {%- render 'fonts' -%} {%- render 'scripts' -%} @@ -38,7 +44,7 @@ {{ content_for_header }} - + {% render 'skip-to-content-link', href: '#MainContent', text: 'accessibility.skip_to_text' %}
{% sections 'header-group' %} diff --git a/sections/footer-group.json b/sections/footer-group.json index 280ae488d..676f215e3 100644 --- a/sections/footer-group.json +++ b/sections/footer-group.json @@ -7,28 +7,27 @@ * made to this file may be overwritten. * ------------------------------------------------------------ */ - { +{ "type": "footer", "name": "t:names.footer", "sections": { "footer": { "type": "footer", "blocks": { - "group_wErUQf": { + "group_KiKpmM": { "type": "group", - "name": "Join our email list", + "name": "t:names.group", "settings": { - "link": "", - "open_in_new_tab": false, + "footer_id": "ID", "content_direction": "column", "vertical_on_mobile": true, "horizontal_alignment": "flex-start", "vertical_alignment": "center", "align_baseline": false, - "horizontal_alignment_flex_direction_column": "flex-start", + "horizontal_alignment_flex_direction_column": "center", "vertical_alignment_flex_direction_column": "center", - "gap": 6, - "width": "fill", + "gap": 0, + "width": "custom", "custom_width": 100, "width_mobile": "fill", "custom_width_mobile": 100, @@ -43,106 +42,657 @@ "border_width": 1, "border_opacity": 100, "border_radius": 0, - "placeholder": "", "toggle_overlay": false, - "overlay_color": "#00000026", + "overlay_color": "#000000", "overlay_style": "solid", "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", "padding-block-start": 0, "padding-block-end": 0, "padding-inline-start": 0, "padding-inline-end": 0 }, "blocks": { - "text_pF6rVi": { - "type": "text", - "name": "Heading", + "divider_GQKezT": { + "type": "_divider", + "name": "t:names.divider", "settings": { - "text": "

Join our email list

", - "width": "100%", - "max_width": "normal", - "alignment": "left", - "type_preset": "h3", - "font": "var(--font-body--family)", - "font_size": "", - "line_height": "normal", - "letter_spacing": "normal", - "case": "none", - "wrap": "pretty", - "color": "var(--color-foreground)", - "background": false, - "background_color": "#00000026", - "corner_radius": 0, + "thickness": 0.5, + "corner_radius": "square", + "width_percent": 5, + "padding-block-start": 100, + "padding-block-end": 0 + }, + "blocks": {} + }, + "group_xx8tJb": { + "type": "group", + "name": "t:names.group", + "settings": { + "footer_id": "ID", + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "center", + "vertical_alignment_flex_direction_column": "center", + "gap": 12, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": true, + "overlay_color": "#dedfe0", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", "padding-block-start": 0, "padding-block-end": 0, "padding-inline-start": 0, "padding-inline-end": 0 }, - "blocks": {} + "blocks": { + "group_8kytbg": { + "type": "group", + "name": "Contact", + "settings": { + "footer_id": "email_pop", + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "center", + "vertical_alignment_flex_direction_column": "center", + "gap": 12, + "width": "custom", + "custom_width": 70, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": true, + "overlay_color": "#42515e", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "group_yFxPmw": { + "type": "group", + "name": "t:names.group", + "settings": { + "footer_id": "footer_1", + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "center", + "vertical_alignment_flex_direction_column": "center", + "gap": 16, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "image", + "video_position": "cover", + "background_image": "shopify://shop_images/Schmutz_Horiz-W-100-Repeatable-Pattern_copy.png", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 21, + "padding-block-end": 21, + "padding-inline-start": 21, + "padding-inline-end": 21 + }, + "blocks": { + "text_znTxrd": { + "type": "text", + "name": "t:names.heading", + "settings": { + "text": "

GET $10 OFF

", + "width": "fit-content", + "max_width": "normal", + "alignment": "center", + "alignment_mobile": "center", + "type_preset": "custom", + "font": "var(--font-body--family)", + "font_size": "3rem", + "line_height": "0.76", + "letter_spacing": "normal", + "case": "uppercase", + "wrap": "pretty", + "color": "var(--color-foreground-heading)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "text_iFTcmK": { + "type": "text", + "name": "t:names.text", + "settings": { + "text": "

You're number 1, so find out about new products and exciting stuff before everyone else.

", + "width": "fit-content", + "max_width": "none", + "alignment": "center", + "alignment_mobile": "center", + "type_preset": "custom", + "font": "var(--font-subheading--family)", + "font_size": "1rem", + "line_height": "0.76", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-foreground-heading)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 10, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "email_signup_6EwKfc": { + "type": "email-signup", + "name": "t:names.email_signup", + "settings": { + "width": "custom", + "custom_width": 65, + "inherit_color_scheme": true, + "color_scheme": "", + "heading": "", + "heading_preset": "h3", + "border_style": "all", + "border_width": 0, + "border_radius": 0, + "input_type_preset": "paragraph", + "style_class": "button", + "display_type": "text", + "label": "SING ME UP", + "integrated_button": false, + "button_type_preset": "paragraph", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + } + }, + "block_order": [ + "text_znTxrd", + "text_iFTcmK", + "email_signup_6EwKfc" + ] + } + }, + "block_order": [ + "group_yFxPmw" + ] + }, + "group_TBaHVQ": { + "type": "group", + "name": "Menu", + "settings": { + "footer_id": "footer_menu", + "content_direction": "row", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "flex-start", + "vertical_alignment_flex_direction_column": "center", + "gap": 12, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "group_HXx3ec": { + "type": "group", + "name": "t:names.group", + "settings": { + "footer_id": "footer_social", + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "center", + "vertical_alignment_flex_direction_column": "center", + "gap": 12, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "image_Aidb37": { + "type": "image", + "name": "t:names.image", + "settings": { + "image": "shopify://shop_images/Dovetail_Logo_Dovetail-Blue_733x_6fec2b4b-9ba6-4886-85ea-93afcc60c5d0.avif", + "link": "", + "image_ratio": "adapt", + "width": "fit-content", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "padding-block-start": 0, + "padding-block-end": 32, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "text_KtXg4H": { + "type": "text", + "name": "t:names.text", + "settings": { + "text": "

Need help? Chat with us

", + "width": "fit-content", + "max_width": "normal", + "alignment": "left", + "alignment_mobile": "left", + "type_preset": "custom", + "font": "var(--font-subheading--family)", + "font_size": "1rem", + "line_height": "0.76", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-primary)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "text_bFMYPQ": { + "type": "text", + "name": "t:names.text", + "settings": { + "text": "

Email: cs@dovetailworkwear.com

", + "width": "fit-content", + "max_width": "normal", + "alignment": "left", + "alignment_mobile": "left", + "type_preset": "custom", + "font": "var(--font-subheading--family)", + "font_size": "1rem", + "line_height": "0.76", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-primary)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 16, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "social_links_bNha3c": { + "type": "social-links", + "name": "t:names.social_media_links", + "settings": { + "facebook_url": "shopify://collections/gardening-essentials", + "instagram_url": "shopify://collections", + "youtube_url": "shopify://collections/gardening-essentials", + "tiktok_url": "shopify://collections", + "twitter_url": "", + "threads_url": "", + "linkedin_url": "", + "bluesky_url": "", + "snapchat_url": "", + "pinterest_url": "shopify://collections", + "tumblr_url": "", + "vimeo_url": "", + "custom_url": "" + }, + "blocks": {} + } + }, + "block_order": [ + "image_Aidb37", + "text_KtXg4H", + "text_bFMYPQ", + "social_links_bNha3c" + ] + }, + "menu_3T7hEg": { + "type": "menu", + "name": "t:names.menu", + "settings": { + "menu": "shop", + "heading": "SHOP", + "menu_spacing": 0, + "show_as_accordion": false, + "accordion_icon": "caret", + "accordion_dividers": false, + "inherit_color_scheme": true, + "color_scheme": "", + "heading_preset": "h4", + "link_preset": "paragraph", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "menu_bxGCE6": { + "type": "menu", + "name": "t:names.menu", + "settings": { + "menu": "main-menu", + "heading": "CUSTOMER SERVICE", + "menu_spacing": 0, + "show_as_accordion": false, + "accordion_icon": "caret", + "accordion_dividers": false, + "inherit_color_scheme": true, + "color_scheme": "", + "heading_preset": "h4", + "link_preset": "paragraph", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "menu_NHHWwW": { + "type": "menu", + "name": "t:names.menu", + "settings": { + "menu": "main-menu", + "heading": "ABOUT OUR BRAND", + "menu_spacing": 0, + "show_as_accordion": false, + "accordion_icon": "caret", + "accordion_dividers": false, + "inherit_color_scheme": true, + "color_scheme": "", + "heading_preset": "h4", + "link_preset": "paragraph", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "menu_6faHmy": { + "type": "menu", + "name": "t:names.menu", + "settings": { + "menu": "main-menu", + "heading": "CONTACT", + "menu_spacing": 0, + "show_as_accordion": false, + "accordion_icon": "caret", + "accordion_dividers": false, + "inherit_color_scheme": true, + "color_scheme": "", + "heading_preset": "h4", + "link_preset": "paragraph", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + } + }, + "block_order": [ + "group_HXx3ec", + "menu_3T7hEg", + "menu_bxGCE6", + "menu_NHHWwW", + "menu_6faHmy" + ] + } + }, + "block_order": [ + "group_8kytbg", + "group_TBaHVQ" + ] }, - "text_HafH7P": { - "type": "text", - "name": "Text", + "group_QRFQcr": { + "type": "group", + "name": "t:names.group", "settings": { - "text": "

Get exclusive deals and early access to new products.

", - "width": "100%", - "max_width": "normal", - "alignment": "left", - "type_preset": "rte", - "font": "var(--font-body--family)", - "font_size": "", - "line_height": "normal", - "letter_spacing": "normal", - "case": "none", - "wrap": "pretty", - "color": "var(--color-foreground)", - "background": false, - "background_color": "#00000026", - "corner_radius": 0, - "padding-block-start": 0, - "padding-block-end": 0, + "footer_id": "ID", + "content_direction": "row", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "flex-start", + "vertical_alignment_flex_direction_column": "center", + "gap": 12, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": true, + "overlay_color": "#dedfe0", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 50, + "padding-block-end": 50, "padding-inline-start": 0, "padding-inline-end": 0 }, - "blocks": {} + "blocks": { + "text_LaDVqf": { + "type": "text", + "name": "t:names.text", + "settings": { + "text": "

© 2026 Dovetail Workwear | Privacy Policy | Terms and Conditions

", + "width": "100%", + "max_width": "normal", + "alignment": "center", + "alignment_mobile": "center", + "type_preset": "rte", + "font": "var(--font-body--family)", + "font_size": "1rem", + "line_height": "normal", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-foreground)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "payment_icons_rnk9ww": { + "type": "payment-icons", + "name": "t:names.payment_icons", + "disabled": true, + "settings": { + "horizontal_alignment": "flex-end", + "gap": 10, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + } + }, + "block_order": [ + "text_LaDVqf", + "payment_icons_rnk9ww" + ] } }, "block_order": [ - "text_pF6rVi", - "text_HafH7P" + "divider_GQKezT", + "group_xx8tJb", + "group_QRFQcr" ] - }, - "email-signup_HafH7P": { - "type": "email-signup", - "name": "Email Signup", - "settings": { - "width": "fill" - } } }, "block_order": [ - "group_wErUQf", - "email-signup_HafH7P" + "group_KiKpmM" + ], + "custom_css": [ + ".email-signup__input-group {gap: 65px;}", + ".group-email_pop {transform: translateY(-50px);}", + ".group-footer_menu {padding: 0 83px;}", + ".group-footer_menu .layout-panel-flex {justify-content: space-between;}", + ".group-footer_menu .footer_social,.group-footer_menu accordion-custom {max-width: fit-content;}", + ".group-footer_social {max-width: fit-content; width: fit-content;}", + ".group-footer_social .image-block__image {width: 200px;}" ], "name": "t:names.footer", "settings": { - "section_width": "page-width", + "section_width": "full-width", "gap": 20, - "color_scheme": "scheme-5", - "padding-block-start": 36, - "padding-block-end": 36 + "color_scheme": "scheme-fa2df66f-d094-4d01-ad02-3c74a35b36f1", + "padding-block-start": 0, + "padding-block-end": 0 } }, "utilities": { "type": "footer-utilities", - "settings": { - "section_width": "page-width", - "gap": 24, - "divider_thickness": 1, - "color_scheme": "scheme-5", - "padding-block-start": 12, - "padding-block-end": 16 - }, "blocks": { "copyright": { "type": "footer-copyright", @@ -150,31 +700,52 @@ "show_powered_by": true, "font_size": "0.75rem", "case": "none" - } + }, + "blocks": {} }, "policy_list": { "type": "footer-policy-list", "settings": { "font_size": "0.75rem", "case": "none" - } + }, + "blocks": {} }, "social_icons": { "type": "social-links", + "disabled": true, "settings": { "facebook_url": "https://www.facebook.com", "instagram_url": "https://www.instagram.com", + "youtube_url": "https://www.youtube.com", "tiktok_url": "https://www.tiktok.com", "twitter_url": "https://www.twitter.com", - "youtube_url": "https://www.youtube.com" - } + "threads_url": "", + "linkedin_url": "", + "bluesky_url": "", + "snapchat_url": "", + "pinterest_url": "", + "tumblr_url": "", + "vimeo_url": "", + "custom_url": "" + }, + "blocks": {} } }, "block_order": [ "copyright", "policy_list", "social_icons" - ] + ], + "disabled": true, + "settings": { + "section_width": "page-width", + "gap": 24, + "divider_thickness": 1, + "color_scheme": "scheme-5", + "padding-block-start": 12, + "padding-block-end": 16 + } } }, "order": [ diff --git a/sections/header-announcements.liquid b/sections/header-announcements.liquid index 586c58e7a..3c1fac42d 100644 --- a/sections/header-announcements.liquid +++ b/sections/header-announcements.liquid @@ -115,10 +115,24 @@ margin: 0; } + /* Override italic to behave as border underline since Shopify inline_richtext lacks a native underline button */ + .announcement-bar__text em, + .announcement-bar__text i { + font-style: normal; + text-decoration: none; + border-bottom: 1px solid currentColor; + padding-bottom: 1px; + } + .announcement-bar__link { position: absolute; inset: 0; } + + .announcement-bar__text em strong{ + font-weight: 600; + text-decoration: underline; + } {% endstylesheet %} {% schema %} diff --git a/sections/header-group.json b/sections/header-group.json index 99314087e..a81586d13 100644 --- a/sections/header-group.json +++ b/sections/header-group.json @@ -17,13 +17,13 @@ "announcement_BxgCk9": { "type": "_announcement", "settings": { - "text": "Welcome to our store", + "text": "BEST-SELLING WOMEN’S WORKWEAR SHOP NOW", "link": "", "font": "var(--font-subheading--family)", - "font_size": "0.75rem", - "weight": "", + "font_size": "1.125rem", + "weight": "300", "letter_spacing": "normal", - "case": "none" + "case": "uppercase" }, "blocks": {} } @@ -35,9 +35,9 @@ "settings": { "speed": 5, "section_width": "page-width", - "color_scheme": "scheme-1", - "divider_width": 1, - "padding-block-start": 15, + "color_scheme": "scheme-5", + "divider_width": 0, + "padding-block-start": 16, "padding-block-end": 15 } }, @@ -62,16 +62,16 @@ "settings": { "menu": "main-menu", "color_scheme": "", - "type_font_primary_size": "0.875rem", - "menu_font_style": "inverse", - "type_font_primary_link": "body", - "type_case_primary_link": "none", - "menu_style": "featured_products", + "type_font_primary_size": "1rem", + "menu_font_style": "regular", + "type_font_primary_link": "heading", + "type_case_primary_link": "uppercase", + "menu_style": "text", "featured_products_aspect_ratio": "4 / 5", "featured_collections_aspect_ratio": "16 / 9", "image_border_radius": 0, "navigation_bar": false, - "color_scheme_navigation_bar": "", + "color_scheme_navigation_bar": "scheme-cef83bbf-2633-4cee-9b3a-9d8125a1172a", "drawer_accordion": false, "drawer_accordion_expand_first": false, "drawer_dividers": false @@ -79,10 +79,14 @@ "blocks": {} } }, + "custom_css": [ + ".menu-list__link-title {color: white;}" + ], "settings": { - "logo_position": "left", + "logo_position": "center", "menu_position": "left", "menu_row": "top", + "customer_account_menu": "customer-account-main-menu", "show_search": true, "search_position": "right", "search_row": "top", @@ -93,13 +97,17 @@ "localization_font_size": "0.875rem", "localization_position": "right", "localization_row": "top", - "section_width": "page-width", + "section_width": "full-width", "section_height": "standard", "enable_sticky_header": "always", "divider_width": 0, "divider_size": "page-width", "border_width": 0, - "color_scheme_top": "scheme-1", + "actions_display_style": "icon", + "actions_font_size": "0.875rem", + "actions_font": "body", + "actions_text_case": "uppercase", + "color_scheme_top": "scheme-6", "color_scheme_bottom": "", "color_scheme_transparent": "scheme-6", "enable_transparent_header_home": false, @@ -109,10 +117,22 @@ "enable_transparent_header_collection": false, "collection_color_scheme": "default" } + }, + "custom_liquid_rydHG4": { + "type": "custom-liquid", + "name": "t:names.custom_liquid", + "settings": { + "custom_liquid": "", + "color_scheme": "", + "section_width": "page-width", + "padding-block-start": 0, + "padding-block-end": 0 + } } }, "order": [ "header_announcements_9jGBFp", - "header_section" + "header_section", + "custom_liquid_rydHG4" ] } diff --git a/sections/hero.liquid b/sections/hero.liquid index 4abcf4726..dd5f298af 100644 --- a/sections/hero.liquid +++ b/sections/hero.liquid @@ -100,17 +100,19 @@ endif assign sizes = '(min-width: 750px) ' | append: media_width_desktop | append: ', ' | append: media_width_mobile - assign widths = '832, 1200, 1600, 1920, 2560, 3840' + assign widths = '375, 450, 660, 900, 1320, 1800, 2136, 2400, 3000, 3600, 3840' assign sizes_mobile = media_width_mobile - assign mobile_widths = '416, 600, 800, 1200, 1600' + assign mobile_widths = '375, 450, 660, 900, 1320, 1800' assign mobile_widths_array = mobile_widths | split: ', ' assign fetch_priority = 'auto' + assign loading_strategy = 'lazy' if section.index == 1 assign fetch_priority = 'high' + assign loading_strategy = 'eager' endif -%} +-%} {% capture media_slot_1 %} {%- if media_1 == 'image' and media_1_mobile == 'image' -%} @@ -141,6 +143,7 @@ class: 'hero__media', sizes: sizes, fetchpriority: fetch_priority, + loading: loading_strategy, data-testid: 'hero-desktop-image-1' }} @@ -157,6 +160,7 @@ class: 'hero__media', sizes: sizes, fetchpriority: fetch_priority, + loading: loading_strategy, data-testid: 'hero-desktop-image-1' }}
@@ -184,7 +188,7 @@
{{ section.settings.image_1_mobile - | image_url: width: 1600 + | image_url: width: 1800 | image_tag: width: section.settings.image_1_mobile.width, widths: mobile_widths, @@ -193,6 +197,7 @@ class: 'hero__media', sizes: sizes_mobile, fetchpriority: fetch_priority, + loading: loading_strategy, data-testid: 'hero-mobile-image-1' }}
@@ -245,6 +250,7 @@ class: 'hero__media', sizes: sizes, fetchpriority: fetch_priority, + loading: loading_strategy, data-testid: 'hero-desktop-image-2' }} @@ -261,6 +267,7 @@ class: 'hero__media', sizes: sizes, fetchpriority: fetch_priority, + loading: loading_strategy, data-testid: 'hero-desktop-image-2' }}
@@ -288,7 +295,7 @@
{{ section.settings.image_2_mobile - | image_url: width: 1600 + | image_url: width: 1800 | image_tag: width: section.settings.image_2_mobile.width, widths: mobile_widths, @@ -297,6 +304,7 @@ class: 'hero__media', sizes: sizes_mobile, fetchpriority: fetch_priority, + loading: loading_strategy, data-testid: 'hero-mobile-image-2' }}
@@ -340,7 +348,8 @@ height: section.settings.image_1.height, alt: '', class: 'hero__media', - sizes: sizes + sizes: sizes, + loading: 'lazy' }} {% endif %} {% if media_2 == 'image' %} @@ -353,7 +362,8 @@ height: section.settings.image_2.height, alt: '', class: 'hero__media', - sizes: sizes + sizes: sizes, + loading: 'lazy' }} {% endif %} {% if media_count == 0 %} diff --git a/snippets/badge.liquid b/snippets/badge.liquid new file mode 100644 index 000000000..69cc6804b --- /dev/null +++ b/snippets/badge.liquid @@ -0,0 +1,105 @@ +{%- doc -%} + Intended for use in a block similar to the button block, but acting as a badge with a background image. + + @param {string} link - link to render + @param {object} [block] - The block +{%- enddoc -%} + +{% assign block_settings = block.settings %} + +{%- if block_settings.label == blank -%} + {%- assign hide_badge = true -%} +{%- endif -%} + +{%- assign pos_styles = "" -%} +{%- if block_settings.position_absolute -%} + {%- assign pos_styles = pos_styles | append: "position: absolute; z-index: 3;" -%} + {%- if block_settings.vertical_alignment == 'top' -%} + {%- assign pos_styles = pos_styles | append: "top: 1rem;" -%} + {%- elsif block_settings.vertical_alignment == 'center' -%} + {%- assign pos_styles = pos_styles | append: "top: 50%;" -%} + {%- elsif block_settings.vertical_alignment == 'bottom' -%} + {%- assign pos_styles = pos_styles | append: "bottom: 1rem;" -%} + {%- endif -%} + + {%- if block_settings.horizontal_alignment == 'left' -%} + {%- assign pos_styles = pos_styles | append: "left: 1rem;" -%} + {%- elsif block_settings.horizontal_alignment == 'center' -%} + {%- assign pos_styles = pos_styles | append: "left: 50%;" -%} + {%- elsif block_settings.horizontal_alignment == 'right' -%} + {%- assign pos_styles = pos_styles | append: "right: 1rem;" -%} + {%- endif -%} + + {%- if block_settings.vertical_alignment == 'center' and block_settings.horizontal_alignment == 'center' -%} + {%- assign pos_styles = pos_styles | append: "transform: translate(-50%, -50%);" -%} + {%- elsif block_settings.vertical_alignment == 'center' -%} + {%- assign pos_styles = pos_styles | append: "transform: translateY(-50%);" -%} + {%- elsif block_settings.horizontal_alignment == 'center' -%} + {%- assign pos_styles = pos_styles | append: "transform: translateX(-50%);" -%} + {%- endif -%} +{%- endif -%} + +{%- unless hide_badge -%} + <{% if link != blank %}a href="{{ link }}"{% else %}div{% endif %} + class=" + badge-block + size-style + {% if block_settings.inherit_color_scheme == false %} color-{{ block_settings.color_scheme }}{% endif %} + badge-block--{{ block.id }} + " + style=" + {{ pos_styles }} + {% render 'size-style', settings: block_settings %} + {%- if block_settings.padding-block-start != blank -%}padding-top: {{ block_settings.padding-block-start }}px;{%- endif -%} + {%- if block_settings.padding-block-end != blank -%}padding-bottom: {{ block_settings.padding-block-end }}px;{%- endif -%} + {%- if block_settings.padding-inline-start != blank -%}padding-left: {{ block_settings.padding-inline-start }}px;{%- endif -%} + {%- if block_settings.padding-inline-end != blank -%}padding-right: {{ block_settings.padding-inline-end }}px;{%- endif -%} + {%- if block_settings.font_size != blank -%}--font-size: {{ block_settings.font_size }}px;{%- endif -%} + {%- if block_settings.font_size_mobile != blank -%}--font-size-mobile: {{ block_settings.font_size_mobile }}px;{%- endif -%} + {%- if block_settings.corner_radius != blank -%}border-radius: {{ block_settings.corner_radius }}px;{%- endif -%} + {%- if block_settings.border_color != blank and block_settings.border_color != 'rgba(0,0,0,0)' -%}border: 1px solid {{ block_settings.border_color }};{%- endif -%} + " + {%- if link != blank and block_settings.open_in_new_tab -%} + target="_blank" + rel="noopener noreferrer" + {%- endif -%} + {{ block.shopify_attributes }} + > + {% if block_settings.background_image %} + + {% endif %} + {{ block_settings.label | escape }} + +{%- endunless -%} + +{% stylesheet %} + .badge-block { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + text-decoration: none; + font-size: var(--font-size, inherit); + } + + @media screen and (max-width: 749px) { + .badge-block { + font-size: var(--font-size-mobile, var(--font-size, inherit)); + } + } + + .badge-block__bg-image { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: 0; + } + + .badge-block__text { + position: relative; + z-index: 1; + } +{% endstylesheet %} diff --git a/snippets/button.liquid b/snippets/button.liquid index d174bce4a..5c41742c8 100644 --- a/snippets/button.liquid +++ b/snippets/button.liquid @@ -22,7 +22,14 @@ {{ block_settings.style_class }} {{ block_settings.style_class }}--{{ block.id }} " - style="{% render 'size-style', settings: block_settings %}" + style="{% render 'size-style', settings: block_settings %} + {%- if block_settings.padding-block-start != blank -%}padding-top: {{ block_settings.padding-block-start }}px;{%- endif -%} + {%- if block_settings.padding-block-end != blank -%}padding-bottom: {{ block_settings.padding-block-end }}px;{%- endif -%} + {%- if block_settings.padding-inline-start != blank -%}padding-left: {{ block_settings.padding-inline-start }}px;{%- endif -%} + {%- if block_settings.padding-inline-end != blank -%}padding-right: {{ block_settings.padding-inline-end }}px;{%- endif -%} + {%- if block_settings.font_size != blank -%}--font-size: {{ block_settings.font_size }}px;{%- endif -%} + {%- if block_settings.font_size_mobile != blank -%}--font-size-mobile: {{ block_settings.font_size_mobile }}px;{%- endif -%} + " {%- if block_settings.open_in_new_tab -%} target="_blank" rel="noopener noreferrer" @@ -42,4 +49,18 @@ text-decoration-color: transparent; } } + + .button, + .button-secondary, + .link { + font-size: var(--font-size, inherit); + } + + @media screen and (max-width: 749px) { + .button, + .button-secondary, + .link { + font-size: var(--font-size-mobile, var(--font-size, inherit)); + } + } {% endstylesheet %} diff --git a/snippets/card-gallery.liquid b/snippets/card-gallery.liquid index 31de0c1e5..c3865a3ca 100644 --- a/snippets/card-gallery.liquid +++ b/snippets/card-gallery.liquid @@ -11,7 +11,7 @@ {% liquid assign product = closest.product assign block_settings = block.settings - assign image_sizes = '(min-width: 750px) 50vw, 100vw' + assign image_sizes = '(min-width: 750px) 50vw, 50vw' # Check if product has badges and determine position assign has_badges = false @@ -39,7 +39,7 @@ assign image_sizes = sizes_attribute | strip elsif section.settings.columns and section.settings.layout_type != 'editorial' assign viewport_width = 100.0 | divided_by: section.settings.columns - assign sizes_attribute = '(min-width: 750px) [viewport_width]vw, 100vw' | replace: '[viewport_width]', viewport_width + assign sizes_attribute = '(min-width: 750px) [viewport_width]vw, 50vw' | replace: '[viewport_width]', viewport_width assign image_sizes = sizes_attribute | strip endif diff --git a/snippets/group.liquid b/snippets/group.liquid index 716a43aa6..3453b0508 100644 --- a/snippets/group.liquid +++ b/snippets/group.liquid @@ -8,11 +8,12 @@ @param {string} [style] - Custom inline styles for the group block. @example - {% render 'group', children: children, settings: block.settings, shopify_attributes: block.shopify_attributes %} + {% render 'group', children: children, settings: block.settings, shopify_attributes: block.shopify_attributes, block_id: block.id %} {%- enddoc -%}
+ - -
- - + + {% stylesheet %} /* Search modal style */ .search-modal { diff --git a/snippets/text.liquid b/snippets/text.liquid index ea9f11f8a..f496694c6 100644 --- a/snippets/text.liquid +++ b/snippets/text.liquid @@ -61,6 +61,12 @@ --max-width: var(--max-width--{{ type }}-{{ block_settings.max_width }}); {% if text_width == "100%" %} --text-align: {{ block_settings.alignment }}; + {% if block_settings.alignment_mobile != blank %} + --text-align-mobile: {{ block_settings.alignment_mobile }}; + {% endif %} + {% endif %} + {% if block_settings.font_size_mobile != blank %} + --font-size-mobile: {{ block_settings.font_size_mobile }}px; {% endif %} {% if block_settings.background %} --text-background-color: {{ block_settings.background_color | default: 'rgb(255 255 255 / 1.0)' }}; @@ -217,4 +223,14 @@ .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) { color: var(--color); } + + @media screen and (max-width: 749px) { + .text-block.custom-font-size { + --font-size: var(--font-size-mobile, var(--font-size)); + } + + .text-block > * { + text-align: var(--text-align-mobile, var(--text-align, var(--text-align-default))); + } + } {% endstylesheet %} diff --git a/snippets/theme-styles-variables.liquid b/snippets/theme-styles-variables.liquid index 382cae7e3..e7f65084a 100644 --- a/snippets/theme-styles-variables.liquid +++ b/snippets/theme-styles-variables.liquid @@ -227,15 +227,15 @@ /* Line height / Leading */ --line-height: 1; - --line-height--display-tight: 1; + --line-height--display-tight: 0.76; --line-height--display-normal: 1.1; --line-height--display-loose: 1.2; - --line-height--heading-tight: 1.15; + --line-height--heading-tight: 0.76; --line-height--heading-normal: 1.25; --line-height--heading-loose: 1.35; - --line-height--body-tight: 1.2; + --line-height--body-tight: 0.76; --line-height--body-normal: 1.4; --line-height--body-loose: 1.6; diff --git a/snippets/util-autofill-img-size-attr.liquid b/snippets/util-autofill-img-size-attr.liquid index 08d0b8b0d..1a0e5af44 100644 --- a/snippets/util-autofill-img-size-attr.liquid +++ b/snippets/util-autofill-img-size-attr.liquid @@ -66,7 +66,7 @@ endif assign sizes_attr = sizes_attr | append: '(min-width: ' | append: min_breakpoint | append: 'px) 50vw' - assign sizes_attr = sizes_attr | append: ', 100vw' + assign sizes_attr = sizes_attr | append: ', 50vw' # Echo the sizes attribute echo sizes_attr diff --git a/snippets/util-product-media-sizes-attr.liquid b/snippets/util-product-media-sizes-attr.liquid index 8458af158..5b4f1b820 100644 --- a/snippets/util-product-media-sizes-attr.liquid +++ b/snippets/util-product-media-sizes-attr.liquid @@ -50,16 +50,16 @@ if calculate_single_column # Default for carousel or single column grid (or first image in large_first_image mode) if section.settings.equal_columns == false - assign default_sizes = '(min-width: 750px) calc(100vw - 25rem - [gap_half]), 100vw' | replace: '[gap_half]', gap_half + assign default_sizes = '(min-width: 750px) calc(100vw - 25rem - [gap_half]), calc(100vw - 3rem)' | replace: '[gap_half]', gap_half else - assign default_sizes = '(min-width: 750px) calc(50vw - [gap_half]), 100vw' | replace: '[gap_half]', gap_half + assign default_sizes = '(min-width: 750px) calc(50vw - [gap_half]), calc(100vw - 3rem)' | replace: '[gap_half]', gap_half endif else # Default for two column grid - includes image gap and quarter section gap if section.settings.equal_columns == false - assign default_sizes = '(min-width: 750px) calc((100vw - 25rem) / 2 - [gap_quarter] - [image_gap_half]), 100vw' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half + assign default_sizes = '(min-width: 750px) calc((100vw - 25rem) / 2 - [gap_quarter] - [image_gap_half]), calc(100vw - 3rem)' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half else - assign default_sizes = '(min-width: 750px) calc(50vw / 2 - [gap_quarter] - [image_gap_half]), 100vw' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half + assign default_sizes = '(min-width: 750px) calc(50vw / 2 - [gap_quarter] - [image_gap_half]), calc(100vw - 3rem)' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half endif endif @@ -116,7 +116,7 @@ else assign medium_size = 'calc([medium_base] - [page_margin] - [gap_quarter] - [image_gap_half])' | replace: '[medium_base]', medium_base | replace: '[page_margin]', page_margin | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half endif - assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], 100vw' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size + assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], calc(100vw - 3rem)' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size else # Single column calculation if block_settings.extend_media @@ -130,7 +130,7 @@ else assign medium_size = 'calc([medium_base] - [page_margin] - [gap_half] - [page_margin])' | replace: '[medium_base]', medium_base | replace: '[page_margin]', page_margin | replace: '[gap_half]', gap_half endif - assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], 100vw' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size + assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], calc(100vw - 3rem)' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size endif else # Use default sizes diff --git a/templates/index.json b/templates/index.json index c110afca1..4a6cf07ac 100644 --- a/templates/index.json +++ b/templates/index.json @@ -7,91 +7,222 @@ * made to this file may be overwritten. * ------------------------------------------------------------ */ - { +{ "sections": { - "hero_jVaWmY": { - "type": "hero", + "section_bcBrdF": { + "type": "section", "blocks": { - "text_YLPk4p": { - "type": "text", - "name": "t:names.heading", + "group_ALPfRR": { + "type": "group", "settings": { - "text": "

Browse our latest products

", - "width": "fit-content", - "max_width": "normal", - "alignment": "left", - "type_preset": "h2", - "font": "var(--font-body--family)", - "font_size": "1rem", - "line_height": "normal", - "letter_spacing": "normal", - "case": "none", - "wrap": "pretty", - "color": "var(--color-foreground-heading)", - "background": false, - "background_color": "#00000026", - "corner_radius": 0, - "padding-block-start": 0, - "padding-block-end": 0, - "padding-inline-start": 0, - "padding-inline-end": 0 + "footer_id": "ID", + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "flex-start", + "vertical_alignment_flex_direction_column": "center", + "gap": 5, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fill", + "custom_height": 100, + "inherit_color_scheme": false, + "color_scheme": "scheme-f0150d46-c29e-406a-acfa-cdc1f91a0991", + "background_media": "none", + "video_position": "cover", + "background_image": "shopify://shop_images/DTW-Homepage-Slider-ProvisionsCargo-Desktop1.jpg", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "hero-apparel-2", + "padding-block-start": 40, + "padding-block-end": 40, + "padding-inline-start": 55, + "padding-inline-end": 40 }, - "blocks": {} + "blocks": { + "text_KccT9h": { + "type": "text", + "name": "banner text", + "settings": { + "text": "

LIGHTWEIGHT
CARGO PANTS

", + "width": "fit-content", + "max_width": "normal", + "alignment": "center", + "alignment_mobile": "left", + "type_preset": "custom", + "font": "var(--font-heading--family)", + "font_size": "5.5rem", + "font_size_mobile": 54, + "line_height": "0.76", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-foreground)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 14, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "text_q7ifpX": { + "type": "text", + "name": "t:names.text", + "settings": { + "text": "
UPF 50+ SUN PROTECTION + 14 POCKETS
", + "width": "fit-content", + "max_width": "normal", + "alignment": "left", + "alignment_mobile": "left", + "type_preset": "h4", + "font": "var(--font-body--family)", + "font_size": "1rem", + "line_height": "normal", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-foreground)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 14, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "button_BznYrL": { + "type": "button", + "name": "t:names.button", + "settings": { + "label": "SHOP NOW", + "link": "shopify://collections/all", + "open_in_new_tab": false, + "style_class": "button", + "font_size": 25, + "width": "fit-content", + "custom_width": 100, + "width_mobile": "fit-content", + "custom_width_mobile": 100, + "padding-block-start": 10, + "padding-block-end": 10, + "padding-inline-start": 20, + "padding-inline-end": 20 + }, + "blocks": {} + } + }, + "block_order": [ + "text_KccT9h", + "text_q7ifpX", + "button_BznYrL" + ] }, - "button_H9gpTf": { - "type": "button", - "name": "t:names.button", + "group_DXJ6dy": { + "type": "group", "settings": { - "label": "Shop all", - "link": "shopify://collections/all", - "open_in_new_tab": false, - "style_class": "button-secondary", - "width": "fit-content", + "footer_id": "ID", + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "center", + "vertical_alignment_flex_direction_column": "space-between", + "gap": 32, + "width": "fill", "custom_width": 100, - "width_mobile": "fit-content", - "custom_width_mobile": 100 + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fill", + "custom_height": 100, + "inherit_color_scheme": false, + "color_scheme": "scheme-5", + "background_media": "image", + "video_position": "cover", + "background_image": "shopify://shop_images/DTW-Homepage-Slider-ProvisionsCargo-Desktop1.jpg", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "hero-apparel-1", + "padding-block-start": 40, + "padding-block-end": 40, + "padding-inline-start": 40, + "padding-inline-end": 40 }, "blocks": {} } }, "block_order": [ - "text_YLPk4p", - "button_H9gpTf" + "group_ALPfRR", + "group_DXJ6dy" + ], + "custom_css": [ + ".text-block--ATTc2Q2kwdU9mMjM0Z__text_KccT9h p:first-child {line-height: 64px !important;}" ], - "name": "t:names.hero", + "name": "t:names.split_showcase", "settings": { - "media_type_1": "image", - "media_type_2": "image", - "link": "", - "open_in_new_tab": false, - "content_direction": "column", + "content_direction": "row", "vertical_on_mobile": true, - "horizontal_alignment": "space-between", - "vertical_alignment": "flex-end", - "align_baseline": true, - "horizontal_alignment_flex_direction_column": "center", - "vertical_alignment_flex_direction_column": "flex-end", - "gap": 24, - "section_width": "page-width", + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "flex-start", + "vertical_alignment_flex_direction_column": "center", + "gap": 0, + "section_width": "full-width", "section_height": "medium", "section_height_custom": 50, - "color_scheme": "scheme-6", - "toggle_overlay": true, - "overlay_color": "#12121266", + "color_scheme": "scheme-f0150d46-c29e-406a-acfa-cdc1f91a0991", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", "overlay_style": "solid", - "gradient_direction": "to bottom", - "blurred_reflection": false, - "reflection_opacity": 75, - "padding-block-start": 100, - "padding-block-end": 72 + "gradient_direction": "to top", + "padding-block-start": 0, + "padding-block-end": 0 } }, - "product_list_fa6P9H": { + "product_list_xqBWFN": { "type": "product-list", "blocks": { "static-header": { "type": "_product-list-content", "name": "t:names.header", + "disabled": true, "static": true, "settings": { "content_direction": "row", @@ -123,7 +254,7 @@ "padding-inline-end": 0 }, "blocks": { - "product_list_text_YFtzcL": { + "product_list_text_TdLh8h": { "type": "_product-list-text", "name": "t:names.collection_title", "settings": { @@ -131,9 +262,9 @@ "width": "fit-content", "max_width": "normal", "alignment": "left", - "type_preset": "h4", + "type_preset": "rte", "font": "var(--font-body--family)", - "font_size": "", + "font_size": "1rem", "line_height": "normal", "letter_spacing": "normal", "case": "none", @@ -149,7 +280,7 @@ }, "blocks": {} }, - "product_list_button_MWeP9V": { + "product_list_button_LnGqyt": { "type": "_product-list-button", "name": "t:names.product_list_button", "settings": { @@ -165,8 +296,8 @@ } }, "block_order": [ - "product_list_text_YFtzcL", - "product_list_button_MWeP9V" + "product_list_text_TdLh8h", + "product_list_button_LnGqyt" ] }, "static-product-card": { @@ -187,7 +318,7 @@ "padding-inline-end": 0 }, "blocks": { - "product_card_gallery_677WP3": { + "product_card_gallery_9jRGpD": { "type": "_product-card-gallery", "name": "t:names.product_card_media", "settings": { @@ -203,13 +334,205 @@ }, "blocks": {} }, - "product_title_YXxMTj": { - "type": "product-title", - "name": "t:names.product_title", + "product_card_group_aYdjrm": { + "type": "_product-card-group", + "name": "t:names.group", "settings": { - "width": "100%", + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "center", + "vertical_alignment_flex_direction_column": "center", + "gap": 12, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "badge_DfX9aA": { + "type": "badge", + "name": "Badge", + "settings": { + "label": "{{ closest.product.metafields.custom.product_badget.value }}", + "link": "", + "open_in_new_tab": false, + "inherit_color_scheme": true, + "color_scheme": "", + "border_color": "rgba(0,0,0,0)", + "corner_radius": 4, + "position_absolute": false, + "vertical_alignment": "top", + "horizontal_alignment": "right", + "padding-block-start": 4, + "padding-block-end": 4, + "padding-inline-start": 8, + "padding-inline-end": 8 + }, + "blocks": {} + }, + "text_eUXG9B": { + "type": "text", + "name": "t:names.heading", + "settings": { + "text": "

{{ closest.product.title }}

", + "width": "fit-content", + "max_width": "normal", + "alignment": "left", + "alignment_mobile": "left", + "type_preset": "custom", + "font": "var(--font-body--family)", + "font_size": "1.25rem", + "line_height": "normal", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-foreground-heading)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "price_Nk6F7Q": { + "type": "price", + "name": "t:names.product_price", + "settings": { + "show_sale_price_first": true, + "show_installments": false, + "show_tax_info": false, + "type_preset": "custom", + "width": "100%", + "alignment": "center", + "font": "var(--font-heading--family)", + "font_size": "1.25rem", + "line_height": "tight", + "letter_spacing": "normal", + "case": "none", + "color": "var(--color-foreground)", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + } + }, + "block_order": [ + "badge_DfX9aA", + "text_eUXG9B", + "price_Nk6F7Q" + ] + } + }, + "block_order": [ + "product_card_gallery_9jRGpD", + "product_card_group_aYdjrm" + ] + } + }, + "name": "t:names.products_carousel", + "settings": { + "collection": "gardening-essentials", + "layout_type": "grid", + "carousel_on_mobile": false, + "max_products": 4, + "columns": 4, + "mobile_columns": "2", + "mobile_card_size": "60cqw", + "columns_gap": 8, + "rows_gap": 24, + "icons_style": "none", + "icons_shape": "none", + "section_width": "page-width", + "horizontal_alignment": "center", + "gap": 28, + "color_scheme": "scheme-58084d4c-a86e-4d0a-855e-a0966e5043f7", + "padding-block-start": 48, + "padding-block-end": 48 + } + }, + "collection_list_DC4gk3": { + "type": "collection-list", + "blocks": { + "group_GrXPLL": { + "type": "group", + "name": "t:names.header", + "settings": { + "footer_id": "ID", + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "center", + "vertical_alignment_flex_direction_column": "center", + "gap": 12, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "text_zTaymr": { + "type": "text", + "name": "t:names.heading", + "settings": { + "text": "

SHOP BY COLLECTION

", + "width": "fit-content", "max_width": "normal", "alignment": "left", + "alignment_mobile": "left", "type_preset": "rte", "font": "var(--font-body--family)", "font_size": "1rem", @@ -221,68 +544,1160 @@ "background": false, "background_color": "#00000026", "corner_radius": 0, - "padding-block-start": 4, + "padding-block-start": 0, "padding-block-end": 0, "padding-inline-start": 0, - "padding-inline-end": 0 + "padding-inline-end": 0, + "video_embed": "" }, "blocks": {} - }, - "price_JQzVV4": { - "type": "price", - "name": "t:names.product_price", + } + }, + "block_order": [ + "text_zTaymr" + ] + }, + "static-collection-card": { + "type": "_collection-card", + "name": "t:names.collection_card", + "static": true, + "settings": { + "placement": "on_image", + "horizontal_alignment": "center", + "vertical_alignment": "center", + "collection_card_gap": 0, + "inherit_color_scheme": true, + "color_scheme": "", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0 + }, + "blocks": { + "collection_title_HtG4t6": { + "type": "collection-title", + "name": "t:names.collection_title", "settings": { - "show_sale_price_first": true, - "show_installments": false, - "show_tax_info": false, - "type_preset": "h6", - "width": "100%", - "alignment": "left", + "width": "fit-content", + "max_width": "narrow", + "alignment": "center", + "type_preset": "h2", "font": "var(--font-body--family)", "font_size": "1rem", "line_height": "normal", "letter_spacing": "normal", "case": "none", - "color": "var(--color-foreground)", - "padding-block-start": 0, - "padding-block-end": 0, - "padding-inline-start": 0, - "padding-inline-end": 0 + "wrap": "pretty", + "color": "var(--color-foreground-heading)", + "background": false, + "background_color": "#ffffff", + "corner_radius": 0, + "padding-block-start": 4, + "padding-block-end": 4, + "padding-inline-start": 8, + "padding-inline-end": 8 + }, + "blocks": {} + }, + "collection-card-image": { + "type": "_collection-card-image", + "name": "t:names.collection_card_image", + "static": true, + "settings": { + "image_ratio": "square", + "toggle_overlay": true, + "overlay_color": "#0000004f", + "overlay_style": "solid", + "gradient_direction": "to top", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0 }, "blocks": {} } }, "block_order": [ - "product_card_gallery_677WP3", - "product_title_YXxMTj", - "price_JQzVV4" + "collection_title_HtG4t6" ] } }, - "name": "t:names.featured_collection", + "block_order": [ + "group_GrXPLL" + ], + "name": "t:names.collections_grid", "settings": { - "collection": "all", + "collection_list": [ + "lightweight-workwear", + "gardening-essentials", + "vintage-inspired" + ], "layout_type": "grid", "carousel_on_mobile": false, - "max_products": 8, - "columns": 4, + "columns": 3, "mobile_columns": "2", "mobile_card_size": "60cqw", - "columns_gap": 8, - "rows_gap": 24, + "columns_gap": 20, + "bento_gap": 8, + "rows_gap": 0, + "max_collections": 4, "icons_style": "arrow", "icons_shape": "none", "section_width": "page-width", - "horizontal_alignment": "flex-start", - "gap": 28, + "gap": 30, "color_scheme": "scheme-1", "padding-block-start": 48, "padding-block-end": 48 } + }, + "product_list_fa6P9H": { + "type": "product-list", + "blocks": { + "button_e3MW3B": { + "type": "button", + "name": "t:names.button", + "settings": { + "label": "VIEW ALL", + "link": "shopify://collections/all", + "open_in_new_tab": false, + "style_class": "button", + "font_size": 16, + "font_size_mobile": 12, + "width": "fit-content", + "custom_width": 100, + "width_mobile": "fit-content", + "custom_width_mobile": 100, + "padding-block-start": 12, + "padding-block-end": 12, + "padding-inline-start": 30, + "padding-inline-end": 30 + }, + "blocks": {} + }, + "static-header": { + "type": "_product-list-content", + "name": "t:names.header", + "static": true, + "settings": { + "content_direction": "column", + "vertical_on_mobile": false, + "horizontal_alignment": "space-between", + "vertical_alignment": "center", + "align_baseline": true, + "horizontal_alignment_flex_direction_column": "center", + "vertical_alignment_flex_direction_column": "center", + "gap": 12, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "product_list_button_xJGR6E": { + "type": "_product-list-button", + "name": "t:names.product_list_button", + "settings": { + "label": "View all", + "open_in_new_tab": false, + "style_class": "button-secondary", + "width": "fit-content", + "custom_width": 100, + "width_mobile": "fit-content", + "custom_width_mobile": 100 + }, + "blocks": {} + }, + "product_list_text_YFtzcL": { + "type": "_product-list-text", + "name": "t:names.collection_title", + "settings": { + "text": "

BEST SELLERS

", + "width": "fit-content", + "max_width": "normal", + "alignment": "left", + "type_preset": "h3", + "font": "var(--font-body--family)", + "font_size": "", + "line_height": "normal", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-foreground)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + } + }, + "block_order": [ + "product_list_button_xJGR6E", + "product_list_text_YFtzcL" + ] + }, + "static-product-card": { + "type": "_product-card", + "name": "t:names.product_card", + "static": true, + "settings": { + "product_card_gap": 10, + "inherit_color_scheme": true, + "color_scheme": "", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "product_card_gallery_677WP3": { + "type": "_product-card-gallery", + "name": "t:names.product_card_media", + "settings": { + "image_ratio": "adapt", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "product_title_YXxMTj": { + "type": "product-title", + "name": "t:names.product_title", + "settings": { + "width": "100%", + "max_width": "narrow", + "alignment": "center", + "type_preset": "h4", + "font": "var(--font-body--family)", + "font_size": "1rem", + "line_height": "normal", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-foreground)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 4, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "price_JQzVV4": { + "type": "price", + "name": "t:names.product_price", + "settings": { + "show_sale_price_first": true, + "show_installments": false, + "show_tax_info": false, + "type_preset": "h4", + "width": "100%", + "alignment": "center", + "font": "var(--font-body--family)", + "font_size": "1rem", + "line_height": "normal", + "letter_spacing": "normal", + "case": "none", + "color": "var(--color-foreground)", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + } + }, + "block_order": [ + "product_card_gallery_677WP3", + "product_title_YXxMTj", + "price_JQzVV4" + ] + } + }, + "block_order": [ + "button_e3MW3B" + ], + "name": "t:names.featured_collection", + "settings": { + "collection": "all", + "layout_type": "grid", + "carousel_on_mobile": false, + "max_products": 4, + "columns": 4, + "mobile_columns": "2", + "mobile_card_size": "60cqw", + "columns_gap": 20, + "rows_gap": 8, + "icons_style": "arrow", + "icons_shape": "none", + "section_width": "page-width", + "horizontal_alignment": "center", + "gap": 28, + "color_scheme": "scheme-1", + "padding-block-start": 48, + "padding-block-end": 48 + } + }, + "slideshow_K73pfE": { + "type": "slideshow", + "blocks": { + "slide_HC9rkM": { + "type": "_slide", + "settings": { + "media_type_1": "image", + "content_direction": "row", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "center", + "vertical_alignment_flex_direction_column": "center", + "gap": 42, + "inherit_color_scheme": false, + "color_scheme": "scheme-2", + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 29, + "padding-inline-end": 29 + }, + "blocks": { + "image_N6U4A6": { + "type": "image", + "name": "t:names.image", + "settings": { + "image": "shopify://shop_images/DP3A2957.jpg", + "link": "", + "image_ratio": "portrait", + "width": "custom", + "custom_width": 40, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "group_6fhiCT": { + "type": "group", + "name": "t:names.group", + "settings": { + "footer_id": "ID", + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "flex-start", + "vertical_alignment_flex_direction_column": "center", + "gap": 32, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "image_rBpmVF": { + "type": "image", + "name": "t:names.image", + "settings": { + "image": "shopify://shop_images/DTW-ByForWith-_5x_600x600_5f92fe08-9a59-4f77-8d62-1813513ba529.webp", + "link": "", + "image_ratio": "adapt", + "width": "fit-content", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "text_GmxcGz": { + "type": "text", + "name": "t:names.text", + "settings": { + "text": "

By women, for women, and with women, Dovetail Workwear is both a young company and the largest exclusively women’s workwear company in the northern hemisphere. Based in Portland, OR, Dovetail Workwear makes all-season, all-reason utility apparel that stands up to the job.

", + "width": "100%", + "max_width": "none", + "alignment": "left", + "alignment_mobile": "left", + "type_preset": "custom", + "font": "var(--font-body--family)", + "font_size": "1.25rem", + "line_height": "normal", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-foreground)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "button_QqaHxB": { + "type": "button", + "name": "t:names.button", + "settings": { + "label": "ABOUT US", + "link": "shopify://collections/all", + "open_in_new_tab": false, + "style_class": "button", + "font_size": 20, + "font_size_mobile": 16, + "width": "fit-content", + "custom_width": 100, + "width_mobile": "fit-content", + "custom_width_mobile": 100, + "padding-block-start": 16, + "padding-block-end": 16, + "padding-inline-start": 32, + "padding-inline-end": 32 + }, + "blocks": {} + } + }, + "block_order": [ + "image_rBpmVF", + "text_GmxcGz", + "button_QqaHxB" + ] + } + }, + "block_order": [ + "image_N6U4A6", + "group_6fhiCT" + ] + } + }, + "block_order": [ + "slide_HC9rkM" + ], + "name": "t:names.slideshow_full_frame", + "settings": { + "display_mode": "full_frame", + "section_width": "full-width", + "full_frame_on_mobile": false, + "slideshow_gap": 12, + "corner_radius": 0, + "slide_height": "auto", + "content_position": "on-media", + "color_scheme": "", + "icons_style": "arrows_large", + "icons_shape": "none", + "slideshow_controls_style": "dots", + "autoplay": false, + "autoplay_speed": 4, + "padding-block-start": 0, + "padding-block-end": 24 + } + }, + "section_9ErdMf": { + "type": "section", + "blocks": { + "group_4cFxRd": { + "type": "group", + "name": "t:names.column", + "settings": { + "footer_id": "ID", + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "flex-start", + "vertical_alignment_flex_direction_column": "flex-start", + "gap": 8, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image": "shopify://shop_images/h1-schmutz-opt.png", + "background_image_position": "fit", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "text_GzyFBB": { + "type": "text", + "name": "t:names.heading", + "settings": { + "text": "

DURABLE WORK WEAR FOR WOMEN

", + "width": "100%", + "max_width": "normal", + "alignment": "center", + "alignment_mobile": "left", + "type_preset": "custom", + "font": "var(--font-heading--family)", + "font_size": "3.5rem", + "line_height": "0.76", + "letter_spacing": "normal", + "case": "uppercase", + "wrap": "pretty", + "color": "var(--color-foreground)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "group_3zTTja": { + "type": "group", + "name": "t:names.group", + "settings": { + "footer_id": "ID", + "content_direction": "row", + "vertical_on_mobile": true, + "horizontal_alignment": "center", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "flex-start", + "vertical_alignment_flex_direction_column": "center", + "gap": 64, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 0, + "padding-block-end": 11, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "button_FjHG9P": { + "type": "button", + "name": "t:names.button", + "settings": { + "label": "Shop Pants", + "link": "shopify://collections/all", + "open_in_new_tab": false, + "style_class": "button", + "font_size": 17, + "width": "fit-content", + "custom_width": 100, + "width_mobile": "fit-content", + "custom_width_mobile": 100, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "button_qPazTy": { + "type": "button", + "name": "t:names.button", + "settings": { + "label": "Shop tops", + "link": "shopify://collections/all", + "open_in_new_tab": false, + "style_class": "button", + "font_size": 17, + "font_size_mobile": 16, + "width": "fit-content", + "custom_width": 100, + "width_mobile": "fit-content", + "custom_width_mobile": 100, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + } + }, + "block_order": [ + "button_FjHG9P", + "button_qPazTy" + ] + } + }, + "block_order": [ + "text_GzyFBB", + "group_3zTTja" + ] + } + }, + "block_order": [ + "group_4cFxRd" + ], + "name": "t:names.multicolumn", + "settings": { + "content_direction": "row", + "vertical_on_mobile": true, + "horizontal_alignment": "center", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "flex-start", + "vertical_alignment_flex_direction_column": "center", + "gap": 0, + "section_width": "page-width", + "section_height": "", + "section_height_custom": 50, + "color_scheme": "scheme-3", + "background_media": "image", + "video_position": "cover", + "background_image": "shopify://shop_images/h1-schmutz-opt.png", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "padding-block-start": 60, + "padding-block-end": 27 + } + }, + "section_weYrmL": { + "type": "section", + "blocks": { + "group_KQDKWm": { + "type": "group", + "name": "t:names.column", + "settings": { + "footer_id": "ID", + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "center", + "vertical_alignment_flex_direction_column": "center", + "gap": 8, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 10, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "text_aCkCP7": { + "type": "text", + "name": "t:names.heading", + "settings": { + "text": "

AS SEEN IN

", + "width": "fit-content", + "max_width": "normal", + "alignment": "left", + "alignment_mobile": "left", + "type_preset": "custom", + "font": "var(--font-heading--family)", + "font_size": "2.5rem", + "line_height": "normal", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-foreground)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0, + "video_embed": "" + }, + "blocks": {} + }, + "group_wVJhbX": { + "type": "group", + "name": "t:names.group", + "settings": { + "footer_id": "ID", + "content_direction": "row", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "flex-start", + "vertical_alignment_flex_direction_column": "center", + "gap": 62, + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "custom_height": 100, + "inherit_color_scheme": true, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "link": "", + "open_in_new_tab": false, + "placeholder": "", + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 100, + "padding-inline-end": 100 + }, + "blocks": { + "image_qtRNbw": { + "type": "image", + "name": "t:names.image", + "settings": { + "image": "shopify://shop_images/Forbes_688a3349-7394-4ce9-b40a-e9df6ca890d7.png", + "link": "", + "image_ratio": "adapt", + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "image_B7gV8q": { + "type": "image", + "name": "t:names.image", + "settings": { + "image": "shopify://shop_images/RealSimple.png", + "link": "", + "image_ratio": "adapt", + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "image_pwRbxR": { + "type": "image", + "name": "t:names.image", + "settings": { + "image": "shopify://shop_images/HGTV_2010.png", + "link": "", + "image_ratio": "adapt", + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "image_mD4hrG": { + "type": "image", + "name": "t:names.image", + "settings": { + "image": "shopify://shop_images/outside.webp", + "link": "", + "image_ratio": "adapt", + "width": "fill", + "custom_width": 100, + "width_mobile": "fill", + "custom_width_mobile": 100, + "height": "fit", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + } + }, + "block_order": [ + "image_qtRNbw", + "image_B7gV8q", + "image_pwRbxR", + "image_mD4hrG" + ] + } + }, + "block_order": [ + "text_aCkCP7", + "group_wVJhbX" + ] + } + }, + "block_order": [ + "group_KQDKWm" + ], + "name": "t:names.multicolumn", + "settings": { + "content_direction": "row", + "vertical_on_mobile": true, + "horizontal_alignment": "center", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "flex-start", + "vertical_alignment_flex_direction_column": "center", + "gap": 16, + "section_width": "full-width", + "section_height": "", + "section_height_custom": 50, + "color_scheme": "scheme-1", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "padding-block-start": 76, + "padding-block-end": 48 + } + }, + "featured_blog_posts_wRJ3BD": { + "type": "featured-blog-posts", + "blocks": { + "static-blog-title": { + "type": "_featured-blog-posts-title", + "name": "t:names.title", + "static": true, + "settings": { + "text": "

THE DIRT BLOG

", + "width": "fit-content", + "max_width": "normal", + "alignment": "left", + "type_preset": "custom", + "font": "var(--font-heading--family)", + "font_size": "2rem", + "line_height": "normal", + "letter_spacing": "normal", + "case": "uppercase", + "wrap": "pretty", + "color": "var(--color-foreground)", + "background": false, + "background_color": "#00000026", + "corner_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "static-blog-post-card": { + "type": "_featured-blog-posts-card", + "name": "t:names.blog_card", + "static": true, + "settings": { + "alignment": "center", + "title_overlay": false, + "title_position": "bottom-left", + "gap": 0, + "inherit_color_scheme": false, + "color_scheme": "scheme-1", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": { + "image": { + "type": "_featured-blog-posts-image", + "static": true, + "settings": { + "image_ratio": "portrait", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0 + }, + "blocks": {} + }, + "title": { + "type": "_heading", + "name": "t:names.title", + "static": true, + "settings": { + "type_preset": "rte", + "font": "var(--font-body--family)", + "font_size": "1rem", + "line_height": "normal", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-foreground)", + "text": "

{{ closest.article.title }}

", + "read_only": false, + "alignment": "left", + "show_alignment": false, + "padding-block-start": 0, + "padding-block-end": 0, + "padding-inline-start": 0, + "padding-inline-end": 0 + }, + "blocks": {} + }, + "blog-post-info-text": { + "type": "_blog-post-info-text", + "name": "t:names.details", + "disabled": true, + "static": true, + "settings": { + "show_date": true, + "show_author": true, + "type_preset": "", + "alignment": "left", + "show_alignment": false, + "padding-block-start": 0, + "padding-block-end": 0 + }, + "blocks": {} + }, + "blog-post-description": { + "type": "_blog-post-description", + "name": "t:names.excerpt", + "disabled": true, + "static": true, + "settings": { + "type_preset": "rte", + "font": "var(--font-body--family)", + "font_size": "1rem", + "line_height": "normal", + "letter_spacing": "normal", + "case": "none", + "wrap": "pretty", + "color": "var(--color-foreground)", + "padding-block-start": 8, + "padding-block-end": 0 + }, + "blocks": {} + }, + "badge": { + "type": "badge", + "static": true, + "settings": { + "label": "{{ closest.article.metafields.custom.badget.value }}", + "link": "", + "open_in_new_tab": false, + "inherit_color_scheme": false, + "color_scheme": "scheme-5", + "background_image": "{{ closest.article.metafields.custom.badget_background.value }}", + "border_color": "rgba(0,0,0,0)", + "corner_radius": 0, + "font_size": 13, + "position_absolute": false, + "vertical_alignment": "top", + "horizontal_alignment": "right", + "padding-block-start": 3, + "padding-block-end": 2, + "padding-inline-start": 13, + "padding-inline-end": 13 + }, + "blocks": {} + } + }, + "block_order": [] + } + }, + "name": "t:names.blog_posts_grid", + "settings": { + "blog": "news", + "layout_type": "grid", + "carousel_on_mobile": false, + "post_limit": 4, + "columns": 4, + "mobile_columns": "2", + "mobile_card_size": "60cqw", + "columns_gap": 8, + "rows_gap": 8, + "icons_style": "arrow", + "icons_shape": "none", + "section_width": "page-width", + "gap": 44, + "color_scheme": "", + "padding-block-start": 48, + "padding-block-end": 78 + } } }, "order": [ - "hero_jVaWmY", - "product_list_fa6P9H" + "section_bcBrdF", + "product_list_xqBWFN", + "collection_list_DC4gk3", + "product_list_fa6P9H", + "slideshow_K73pfE", + "section_9ErdMf", + "section_weYrmL", + "featured_blog_posts_wRJ3BD" ] } diff --git a/themes.txt b/themes.txt new file mode 100644 index 000000000..46b134b19 --- /dev/null +++ b/themes.txt @@ -0,0 +1 @@ +ÿþ \ No newline at end of file diff --git a/themes_utf8.txt b/themes_utf8.txt new file mode 100644 index 000000000..5f282702b --- /dev/null +++ b/themes_utf8.txt @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tmp_diff.txt b/tmp_diff.txt new file mode 100644 index 000000000..e69de29bb diff --git a/tmp_log.txt b/tmp_log.txt new file mode 100644 index 000000000..46b134b19 --- /dev/null +++ b/tmp_log.txt @@ -0,0 +1 @@ +ÿþ \ No newline at end of file diff --git a/tmp_log_utf8.txt b/tmp_log_utf8.txt new file mode 100644 index 000000000..5f282702b --- /dev/null +++ b/tmp_log_utf8.txt @@ -0,0 +1 @@ + \ No newline at end of file