- {{ children }}
-
- - {{ 'content.no_products_found' | t }} -
-- {{ 'content.use_fewer_filters_html' | t: link: collection.url, class: 'main-collection-grid__empty-link' }} -
-
-
- - - - {{- 'icon-caret.svg' | inline_asset_content -}} - -
- - -
- {% render 'localization-form',
- show_country: show_country,
- show_language: show_language,
- localization_style: 'dropdown',
- form_style: form_style,
- block_id: block.id
- %}
-
-{% elsif show_country %}
-
- {% render 'localization-form',
- show_country: show_country,
- show_language: show_language,
- localization_style: 'dropdown',
- form_style: form_style,
- block_id: block.id
- %}
-
-
-
-
- {% for item in items %}
- {% liquid
- assign current_grid_index = forloop.index0 | divided_by: 8
- assign current_item_index = forloop.index0 | modulo: 8
-
- # Horizontally mirrored from editorial-collection-grid
- case current_item_index
- when 0
- assign grid_column = '8 / span 4'
- assign grid_row = 1
- assign grid_row_span = 5
- when 1
- assign grid_column = '2 / span 5'
- assign grid_row = 3
- assign grid_row_span = 5
- when 2
- assign grid_column = '5 / span 8'
- assign grid_row = 9
- assign grid_row_span = 6
- when 3
- assign grid_column = '2 / span 8'
- assign grid_row = 16
- assign grid_row_span = 6
- when 4
- assign grid_column = '2 / span 5'
- assign grid_row = 23
- assign grid_row_span = 5
- when 5
- assign grid_column = '8 / span 4'
- assign grid_row = 25
- assign grid_row_span = 5
- when 6
- assign grid_column = '1 / span 8'
- assign grid_row = 31
- assign grid_row_span = 6
- when 7
- assign grid_column = '3 / span 8'
- assign grid_row = 38
- assign grid_row_span = 6
- endcase
-
- assign full_grid_rows = current_grid_index | times: 44
- assign grid_row = grid_row | plus: full_grid_rows
- %}
-
-
-{% stylesheet %}
- .editorial-blog__grid {
- display: grid;
- grid-template-columns: repeat(12, 1fr);
- grid-auto-rows: 1fr;
- gap: var(--gap-xl);
-
- .shopify-block {
- height: 100%;
- }
- }
-
- .editorial-blog__spacer {
- aspect-ratio: 1;
- }
-
- @media (max-width: 768px) {
- .editorial-blog__grid {
- display: flex;
- flex-direction: column;
- gap: var(--gap-2xl);
- }
-
- .editorial-blog__spacer {
- display: none;
- }
-
- .featured-blog-posts-card__image {
- min-height: 200px;
- }
-
- /* Mobile layout - also horizontally mirrored from collection grid */
- .editorial-blog__item-0 {
- width: 66%;
- align-self: flex-end; /* Originally flex-start, now flex-end */
- }
-
- .editorial-blog__item-1 {
- width: 83%;
- align-self: flex-start; /* Originally flex-end, now flex-start */
- }
-
- .editorial-blog__item-2 {
- width: 83%;
- align-self: flex-end; /* Originally flex-start, now flex-end */
- }
-
- .editorial-blog__item-3 {
- width: 100%;
- align-self: center; /* Stays centered */
- }
- }
-{% endstylesheet %}
diff --git a/snippets/editorial-collection-grid.liquid b/snippets/editorial-collection-grid.liquid
deleted file mode 100644
index 65e8f215e..000000000
--- a/snippets/editorial-collection-grid.liquid
+++ /dev/null
@@ -1,117 +0,0 @@
-{%- doc -%}
- Renders a grid and places items inside of it using an editorial layout.
-
- @param {object} items - An array of HTML strings for the collection list items
-
- @example
- {% render 'editorial-collection-grid', items: items %}
-{%- enddoc -%}
-
-
- {{ item }}
-
- {% endfor %}
-
-
-
- {% for item in items %}
- {% liquid
- assign current_grid_index = forloop.index0 | divided_by: 8
- assign current_item_index = forloop.index0 | modulo: 8
-
- case current_item_index
- when 0
- assign grid_column = '2 / span 4'
- assign grid_row = 1
- assign grid_row_span = 5
- when 1
- assign grid_column = '7 / span 5'
- assign grid_row = 3
- assign grid_row_span = 5
- when 2
- assign grid_column = '1 / span 8'
- assign grid_row = 9
- assign grid_row_span = 6
- when 3
- assign grid_column = '3 / span 8'
- assign grid_row = 16
- assign grid_row_span = 6
- when 4
- assign grid_column = '7 / span 5'
- assign grid_row = 23
- assign grid_row_span = 5
- when 5
- assign grid_column = '2 / span 4'
- assign grid_row = 25
- assign grid_row_span = 5
- when 6
- assign grid_column = '5 / span 8'
- assign grid_row = 31
- assign grid_row_span = 6
- when 7
- assign grid_column = '2 / span 8'
- assign grid_row = 38
- assign grid_row_span = 6
- endcase
-
- assign full_grid_rows = current_grid_index | times: 44
- assign grid_row = grid_row | plus: full_grid_rows
- %}
-
-
-{% stylesheet %}
- .editorial-collection__grid {
- display: grid;
- grid-template-columns: repeat(12, 1fr);
- grid-auto-rows: 1fr;
- gap: var(--gap-xl);
-
- .resource-list__item,
- .collection-card {
- height: 100%;
- }
- }
-
- .editorial-collection__spacer {
- aspect-ratio: 1;
- }
-
- @media (max-width: 768px) {
- .editorial-collection__grid {
- display: flex;
- flex-direction: column;
- gap: var(--gap-2xl);
- }
-
- .editorial-collection__spacer {
- display: none;
- }
-
- .editorial-collection__item-0 {
- width: 66%;
- align-self: flex-start;
- aspect-ratio: 4 / 5;
- }
-
- .editorial-collection__item-1 {
- width: 83%;
- align-self: flex-end;
- aspect-ratio: 5 / 5;
- }
-
- .editorial-collection__item-2 {
- width: 83%;
- align-self: flex-start;
- aspect-ratio: 8 / 6;
- }
-
- .editorial-collection__item-3 {
- width: 100%;
- align-self: center;
- aspect-ratio: 8 / 6;
- }
- }
-{% endstylesheet %}
diff --git a/snippets/editorial-product-grid.liquid b/snippets/editorial-product-grid.liquid
deleted file mode 100644
index 50b1b01d4..000000000
--- a/snippets/editorial-product-grid.liquid
+++ /dev/null
@@ -1,125 +0,0 @@
-{%- doc -%}
- Renders a grid and places items inside of it using an editorial layout.
-
- @param {object} items - An array of HTML strings for the product list items
-
- @example
- {% render 'editorial-product-grid', items: items %}
-{%- enddoc -%}
-
-
- {{ item }}
-
- {% endfor %}
-
-
-
- {% for item in items %}
- {% liquid
- assign current_grid_index = forloop.index0 | divided_by: 8
- assign current_item_index = forloop.index0 | modulo: 8
-
- case current_item_index
- when 0
- assign grid_column = '1 / span 7'
- assign grid_row = 1
- assign grid_row_span = 6
- when 1
- assign grid_column = '9 / span 4'
- assign grid_row = 5
- assign grid_row_span = 5
- when 2
- assign grid_column = '2 / span 5'
- assign grid_row = 8
- assign grid_row_span = 5
- when 3
- assign grid_column = '5 / span 8'
- assign grid_row = 14
- assign grid_row_span = 6
- when 4
- assign grid_column = '1 / span 7'
- assign grid_row = 21
- assign grid_row_span = 6
- when 5
- assign grid_column = '9 / span 4'
- assign grid_row = 25
- assign grid_row_span = 5
- when 6
- assign grid_column = '2 / span 5'
- assign grid_row = 28
- assign grid_row_span = 5
- when 7
- assign grid_column = '3 / span 8'
- assign grid_row = 34
- assign grid_row_span = 6
- endcase
-
- assign full_grid_rows = current_grid_index | times: 40
- assign grid_row = grid_row | plus: full_grid_rows
- %}
-
-
-{% stylesheet %}
- .editorial-product__grid {
- display: grid;
- grid-template-columns: repeat(12, 1fr);
- grid-auto-rows: 1fr;
- gap: var(--gap-xl);
-
- /* Make the aspect ratio super high on width, then increase the height of
- * slideshow containers until they fill all the available space */
- .card-gallery {
- /* stylelint-disable-next-line declaration-no-important */
- --gallery-aspect-ratio: 99 !important;
- }
-
- .card-gallery,
- slideshow-component,
- slideshow-container,
- slideshow-slides {
- height: 100%;
- }
- }
-
- .editorial-product__spacer {
- aspect-ratio: 1;
- }
-
- @media (max-width: 768px) {
- .editorial-product__grid {
- display: flex;
- flex-direction: column;
- gap: var(--gap-2xl);
- }
-
- .editorial-product__spacer {
- display: none;
- }
-
- .editorial-product__item-0 {
- width: 83%;
- align-self: flex-start;
- aspect-ratio: 7 / 6;
- }
-
- .editorial-product__item-1 {
- width: 83%;
- align-self: flex-end;
- aspect-ratio: 4 / 5;
- }
-
- .editorial-product__item-2 {
- width: 66%;
- align-self: flex-start;
- aspect-ratio: 5 / 5;
- }
-
- .editorial-product__item-3 {
- width: 100%;
- aspect-ratio: 8 / 6;
- }
- }
-{% endstylesheet %}
diff --git a/snippets/facets-actions.liquid b/snippets/facets-actions.liquid
deleted file mode 100644
index 702064ad4..000000000
--- a/snippets/facets-actions.liquid
+++ /dev/null
@@ -1,220 +0,0 @@
-{%- doc -%}
- Renders the facets actions
-
- @param {string} results_url - the url to remove the filters
- @param {boolean} is_active - whether the clear all button is active
- @param {number} products_count - the number of products in the results
- @param {string} [form_component] - the form component to use for the clear all button
- @param {boolean} [should_show_clear_all] - whether to show the clear all button
- @param {number} [shadow_opacity] - the opacity of the shadow for the sticky action bar
-{%- enddoc -%}
-
-
- {{ item }}
-
- {% endfor %}
-
- {% if should_show_clear_all %}
-
-
-
- {% endif %}
-
- {% if products_count > 0 %}
-
- {% endif %}
-
-
-{% stylesheet %}
- /* Facets - Actions */
- .facets__actions {
- --to-top-gradient-background: linear-gradient(
- to top,
- rgb(var(--color-background-rgb) / var(--opacity-90)),
- rgb(var(--color-background-rgb) / var(--opacity-80)),
- rgb(var(--color-background-rgb) / var(--opacity-40)),
- transparent
- );
-
- order: 1;
- position: sticky;
- bottom: 0;
- display: flex;
- justify-content: space-between;
- align-items: stretch;
- gap: var(--gap-sm);
- background-image: var(--to-top-gradient-background);
- z-index: var(--facets-sticky-z-index);
- padding-block-start: var(--padding-xs);
- padding-block-end: var(--padding-md);
- padding-inline: var(--padding-lg);
- margin-top: auto;
- }
-
- .facets:not(.facets--drawer) .facets__actions {
- @media screen and (min-width: 750px) {
- position: static;
- }
- }
-
- .facets--vertical .facets__actions {
- padding-inline: 0;
- justify-content: center;
- }
-
- .facets--horizontal .facets__actions {
- @media screen and (min-width: 750px) {
- order: 0;
- bottom: auto;
- position: static;
- padding: 0;
- z-index: var(--layer-flat);
- flex-shrink: 0;
- align-items: center;
- margin-top: initial;
- background-image: none;
- }
- }
-
- .facets--horizontal .facets__actions--active::before {
- @media screen and (min-width: 750px) {
- content: '';
- border-inline-start: var(--style-border-width) solid var(--color-border);
- height: var(--font-paragraph--size);
- position: absolute;
- }
- }
-
- /* Clear button */
- .facets__clear {
- display: none;
- }
-
- .facets--horizontal .facets__clear {
- @media screen and (min-width: 750px) {
- width: 100%;
- justify-content: flex-end;
- padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
- cursor: pointer;
- }
- }
-
- .facets__clear--active {
- @media screen and (min-width: 750px) {
- display: flex;
- }
- }
-
- .clear-filter:hover {
- text-decoration: underline;
- background-color: transparent;
- }
-
- /* Clear all button */
- .facets__clear-all {
- display: none;
- cursor: pointer;
- min-width: var(--facets-clear-all-min-width);
- transition: transform var(--animation-values), opacity var(--animation-values);
- opacity: 0;
- transform: translateY(100%);
- flex-grow: 1;
- padding-block: var(--padding-lg);
- }
-
- .facets:not(.facets--drawer) .facets__clear-all {
- box-shadow: none;
- }
-
- .facets--horizontal .facets__clear-all {
- @media screen and (min-width: 750px) {
- --facets-clear-all-min-width: var(--minimum-touch-target);
- --button-color: var(--color-primary);
-
- text-decoration: underline transparent 0.075em;
- text-underline-offset: 0.125em;
- width: auto;
- transform: none;
- opacity: 1;
- height: var(--minimum-touch-target);
- align-items: center;
- flex-grow: 0;
- transition: text-decoration-color var(--animation-speed) var(--animation-easing);
- }
- }
-
- .facets--horizontal .facets__clear-all:hover {
- @media screen and (min-width: 750px) {
- --button-color: var(--color-primary-hover);
- }
- }
-
- @starting-style {
- .facets__clear-all {
- opacity: 1;
- transform: translateY(0);
- }
- }
-
- .facets__clear-all.active {
- transform: translateY(0);
- opacity: 1;
- display: grid;
- }
-
- .facets--horizontal .facets__clear-all.active {
- @media screen and (min-width: 750px) {
- padding-block: 0;
- padding-inline: var(--facets-form-horizontal-gap);
- background-color: transparent;
- position: static;
- transform: none;
- }
- }
-
- @starting-style {
- .facets__clear-all.active {
- opacity: 0;
- transform: translateY(100%);
- }
-
- .facets--horizontal .facets__clear-all.active {
- @media screen and (min-width: 750px) {
- opacity: 1;
- transform: none;
- }
- }
- }
-
- .facets__see-results {
- min-width: var(--facets-see-results-min-width);
- flex-grow: 1;
- padding-block: var(--padding-lg);
- }
-
- .facets:not(.facets--drawer) .facets__see-results {
- @media screen and (min-width: 750px) {
- display: none;
- }
- }
-{% endstylesheet %}
diff --git a/snippets/filter-remove-buttons.liquid b/snippets/filter-remove-buttons.liquid
deleted file mode 100644
index 9b3ca7745..000000000
--- a/snippets/filter-remove-buttons.liquid
+++ /dev/null
@@ -1,178 +0,0 @@
-{%- doc -%}
- Renders filter remove buttons.
-
- Accepts:
-
- @param {object} filters - The filters to render
- @param {boolean} show_filter_label - Whether to show the filter label
- @param {string} results_url - The results URL
- @param {boolean} should_show_clear_all - Whether to show the clear all button
-{%- enddoc -%}
-
-
- {%- for filter in filters -%}
- {%- liquid
- assign is_first_filter = forloop.first
- -%}
- {% if filter.type == 'price_range' and filter.min_value.value != null or filter.max_value.value != null %}
- {%- liquid
- assign is_active = true
- -%}
-
- {%- if filter.min_value.value != null and filter.max_value.value != null %}
- {{- filter.min_value.value | money -}}
- –
- {{- filter.max_value.value | money -}}
- {%- elsif filter.min_value.value != null -%}
- {{ filter.min_value.value | money }}–{{ filter.range_max | money }}
- {%- elsif filter.max_value.value != null -%}
- {{- 0 | money -}}
- –
- {{- filter.max_value.value | money -}}
- {%- endif -%}
-
- {{- 'icon-filters-close.svg' | inline_asset_content -}}
-
- {{ 'actions.remove' | t }}
-
- {% else %}
- {%- for value in filter.active_values -%}
- {%- liquid
- assign is_active = true
- -%}
-
- {% if value.swatch %}
- {% render 'swatch', swatch: value.swatch, mode: 'pill' %}
- {% endif %}
-
- {% if filter.type == 'boolean' or show_filter_label %}
- {{ filter.label | escape }}: {{ value.label | escape }}
- {% else %}
- {{ value.label | escape }}
- {% endif %}
-
-
- {{- 'icon-filters-close.svg' | inline_asset_content -}}
-
- {{ 'actions.remove' | t }}
-
- {%- endfor -%}
- {% endif %}
- {%- endfor -%}
- {% if should_show_clear_all and is_active %}
-
-
-
- {% endif %}
-
-
-{% stylesheet %}
- /* Facets - Remove buttons */
- .facets-remove {
- --variant-picker-swatch-width: 20px;
- --variant-picker-swatch-height: 20px;
-
- display: none;
- align-items: center;
- flex-wrap: wrap;
- gap: var(--gap-xs);
- padding: 0 var(--drawer-padding);
- margin: 0;
-
- @media screen and (min-width: 750px) {
- --variant-picker-swatch-width: 16px;
- --variant-picker-swatch-height: 16px;
-
- gap: var(--gap-2xs);
- }
- }
-
- .facets-remove:has(facet-remove-component) {
- display: flex;
- margin-block-start: var(--margin-2xs);
- margin-block-end: var(--margin-md);
- }
-
- .facets__clear-all-link {
- --button-color: var(--color-primary);
-
- border: none;
- background-color: transparent;
- padding: var(--padding-xs);
- min-width: fit-content;
- color: var(--button-color);
- transition: text-decoration-color var(--animation-speed) var(--animation-easing),
- color var(--animation-speed) var(--animation-easing);
- }
-
- .facets__clear-all-link:hover {
- --button-color: var(--color-primary-hover);
-
- color: var(--button-color);
- text-decoration-color: var(--button-color);
- }
-
- .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
- @media screen and (min-width: 750px) {
- padding: 0;
- }
- }
-
- .facets--horizontal .facets-remove--mobile-and-vertical {
- @media screen and (min-width: 750px) {
- display: none;
- }
- }
-
- .facets-remove__pill {
- .svg-wrapper,
- .swatch {
- flex-shrink: 0;
- }
- }
-
- .facets--horizontal .facets-remove {
- @media screen and (min-width: 750px) {
- display: none;
- }
- }
-{% endstylesheet %}
diff --git a/snippets/filters-toggle.liquid b/snippets/filters-toggle.liquid
deleted file mode 100644
index 81b8d3834..000000000
--- a/snippets/filters-toggle.liquid
+++ /dev/null
@@ -1,151 +0,0 @@
-{%- doc -%}
- Renders the sorting component.
-
- @param {boolean} enable_filtering - Whether to enable filtering
- @param {number} padding-block-start - The padding-block-start value
- @param {number} padding-block-end - The padding-block-end value
- @param {number} total_active_values - The total number of active values
- @param {string} section_id - The section ID
- @param {object} results - The results of the search
- @param {string} sort_by - The current sort by
-{%- enddoc -%}
-
-{%- assign block_settings = block.settings -%}
-
- {% if block_settings.enable_filtering %}
-
-
-{% stylesheet %}
- /* Facets - Toggle */
- .facets-toggle {
- --icon-offset: -3px;
-
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: var(--minimum-touch-target);
- margin: var(--facets-margin);
- padding-block: var(--facets-inner-padding-block);
- padding-inline: var(--facets-inner-padding-inline);
-
- @media screen and (min-width: 750px) {
- display: none;
- }
- }
-
- .facets-toggle__wrapper {
- margin-left: var(--icon-offset);
- }
-
- .facets-toggle__button {
- box-shadow: none;
-
- @media screen and (min-width: 750px) {
- display: none;
- }
- }
-
- /* Filter count */
- .filter-count-bubble {
- position: relative;
- width: 20px;
- aspect-ratio: 1;
- border-radius: 50%;
- display: grid;
- line-height: normal;
- place-content: center;
- color: var(--color-foreground);
- border: var(--icon-stroke-width) solid var(--color-background);
- }
-
- .facets-mobile__title-wrapper .h3 {
- margin-block-end: 0;
- display: inline-flex;
- align-items: center;
- gap: var(--gap-xs);
- }
-
- .facets-mobile__title-wrapper .filter-count-bubble {
- width: 22px;
- height: 22px;
- }
-
- .facets-mobile__title-wrapper .filter-count-bubble__text {
- font-size: var(--font-size--xs);
- }
-
- .filter-count-bubble__background {
- position: absolute;
- inset: 0;
- background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
- border-radius: var(--style-border-radius-50);
- }
-
- .filter-count-bubble__text {
- font-size: 11px;
- font-weight: var(--font-paragraph--weight);
- aspect-ratio: 1 / 1;
- }
-
- .facets-toggle--no-filters {
- @media screen and (max-width: 749px) {
- /* stylelint-disable-next-line declaration-no-important */
- justify-content: unset !important;
-
- & > .facets-mobile-wrapper {
- width: 100%;
- }
- }
- }
-{% endstylesheet %}
diff --git a/snippets/fonts.liquid b/snippets/fonts.liquid
deleted file mode 100644
index 9e80dabe7..000000000
--- a/snippets/fonts.liquid
+++ /dev/null
@@ -1,42 +0,0 @@
-{% # theme-check-disable %}
-{%- unless settings.type_body_font.system? -%}
-
-{%- endunless -%}
-{%- unless settings.type_subheading_font.system? -%}
-
-{%- endunless -%}
-{%- unless settings.type_heading_font.system? -%}
-
-{%- endunless -%}
-{%- unless settings.type_accent_font.system? -%}
-
-{%- endunless -%}
-{% # theme-check-enable %}
diff --git a/snippets/gap-style.liquid b/snippets/gap-style.liquid
deleted file mode 100644
index 99b91ea4f..000000000
--- a/snippets/gap-style.liquid
+++ /dev/null
@@ -1,25 +0,0 @@
-{%- doc -%}
- Renders the CSS variables for the `gap` styles needed for responsive scaling.
- Intended for use with the `gap-style` class.
-
- @param {number} value - The base or desktop gap value to use, in pixels.
- @param {string} [name] - The name of the CSS variable to set. Default: 'gap'
- @param {number} [scale_min] - Value above which gap scaling will be applied. Default: 20
- @param {boolean} [disable_scaling] - If true, disables scaling and outputs the original value.
-
- @example
-
-
-
- {% endif %}
-
-
- {% if block_settings.enable_filtering == false and block_settings.enable_sorting %}
- {% render 'sorting',
- results: results,
- sort_by: sort_by,
- filter_style: block_settings.filter_style,
- suffix: 'mobile',
- section_id: section_id,
- should_use_select_on_mobile: false
- %}
- {% endif %}
- {% if block_settings.enable_grid_density %}
- {% render 'grid-density-controls', viewport: 'mobile' %}
- {% endif %}
-
-
-{%- enddoc -%}
-
-{%- liquid
- assign min = scale_min | default: 24
- assign name = name | default: 'gap'
--%}
-
-{%- if value != blank -%}
- {%- if disable_scaling != true and value > min -%}
- --{{ name }}: max({{ min }}px, calc(var(--gap-scale, 1.0) * {{ value }}px));
- {%- else -%}
- --{{ name }}: {{ value }}px;
- {%- endif -%}
-{%- endif -%}
diff --git a/snippets/gift-card-recipient-form.liquid b/snippets/gift-card-recipient-form.liquid
deleted file mode 100644
index 9c7e936ad..000000000
--- a/snippets/gift-card-recipient-form.liquid
+++ /dev/null
@@ -1,403 +0,0 @@
-{% comment %}
- Renders gift card recipient form.
- Accepts:
- - product: {Object} product object.
- - form: {Object} the product form object.
- - section: {Object} section to which this snippet belongs.
-
- Usage:
- {% render 'gift-card-recipient-form', product: product, form: form, section: section, block: block %}
-{% endcomment %}
-
-
-
-
-
-{% stylesheet %}
- .recipient-form {
- --options-border-radius: var(--variant-picker-button-radius);
- --options-border-width: var(--variant-picker-button-border-width);
-
- display: flex;
- flex-direction: column;
- padding-bottom: var(--padding-2xl);
- }
-
- .recipient-form__send-to {
- padding: 0;
- margin-block-end: var(--margin-xs);
- }
-
- .gift-card-form-option {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: var(--gap-sm);
- padding: 0;
- border: none;
- }
-
- .gift-card-form-option__button-label {
- display: flex;
- align-items: center;
- position: relative;
- padding-block: var(--padding-sm);
- padding-inline: var(--padding-lg);
- border: var(--style-border-width) solid var(--color-variant-border);
- border-radius: var(--options-border-radius);
- border-width: var(--options-border-width);
- overflow: clip;
- justify-content: center;
- min-width: auto;
- background-color: var(--color-variant-background);
- color: var(--color-variant-text);
- transition: background-color var(--animation-speed) var(--animation-easing),
- border-color var(--animation-speed) var(--animation-easing);
-
- &:hover {
- background-color: var(--color-variant-hover-background);
- border-color: var(--color-variant-hover-border);
- color: var(--color-variant-hover-text);
- }
- }
-
- .gift-card-form-option__button-label:has(:focus-visible) {
- --variant-picker-stroke-color: var(--color-foreground);
-
- border-color: var(--color-foreground);
- outline: var(--focus-outline-width) solid var(--color-foreground);
- outline-offset: var(--focus-outline-offset);
- }
-
- .gift-card-form-option__button-label:has(:checked) {
- color: var(--color-selected-variant-text);
- background-color: var(--color-selected-variant-background);
- border-color: var(--color-selected-variant-border);
- transition: background-color var(--animation-speed) var(--animation-easing),
- border-color var(--animation-speed) var(--animation-easing);
-
- &:hover {
- background-color: var(--color-selected-variant-hover-background);
- border-color: var(--color-selected-variant-hover-border);
- color: var(--color-selected-variant-hover-text);
- }
- }
-
- .gift-card-form-option__button-label input {
- /* remove the checkbox from the page flow */
- position: absolute;
-
- /* set the dimensions to match those of the label */
- inset: 0;
-
- /* hide it */
- opacity: 0;
- margin: 0;
- cursor: pointer;
- width: 100%;
- height: 100%;
- }
-
- .recipient-fields {
- display: flex;
- flex-direction: column;
- gap: var(--gap-sm);
- transition: opacity 0.3s var(--animation-easing);
- padding-block-start: var(--padding-xl);
- }
-
- .recipient-fields[hidden] {
- display: none;
- }
-
- .field--send-on {
- display: flex;
- flex-direction: column;
- }
-
- .recipient-form__message {
- display: flex;
- flex-direction: row;
- align-items: center;
- gap: var(--gap-sm);
- margin-top: var(--margin-sm);
- }
-
- .recipient-form-field-label {
- position: absolute;
- left: var(--padding-sm);
- bottom: var(--padding-sm);
- font-style: italic;
- }
-
- .recipient-fields__textarea {
- min-height: 5.5rem;
- overflow-y: auto;
-
- /* Space for the character count */
- padding-bottom: calc(var(--padding-sm) * 3);
- scroll-padding-bottom: calc(var(--padding-sm) * 3);
- }
-
- .recipient-fields__input {
- flex-grow: 1;
- transition: background-color var(--animation-speed) ease;
- padding: var(--input-padding);
- background-color: var(--color-input-background);
- color: var(--color-input-text);
- text-align: left;
- font-size: var(--font-paragraph--size);
- border: var(--style-border-width-inputs) solid var(--color-input-border);
- border-radius: var(--style-border-radius-inputs);
-
- &:autofill {
- background-color: var(--color-input-background);
- color: var(--color-input-text);
- }
-
- &:is(:focus) {
- outline-color: var(--color-input-background);
- }
- }
-
- /* Date picker calendar icon
- * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
- * Webkit browsers need the mask-image trick to use the correct icon color.
- */
- .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
- cursor: pointer;
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
- background-repeat: no-repeat;
- background-image: none;
- background-color: currentColor;
- mask-type: match-source;
- }
-
- /* For Webkit browsers - text cursor for input area */
- .field--send-on .recipient-fields__input::-webkit-datetime-edit {
- cursor: text;
- }
-
- .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
- .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
- .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
- /* Override the disabled color */
- color: var(--color-input-text);
- }
-
- /* Fallback for other browsers */
- .field--send-on .recipient-fields__input {
- cursor: text;
- }
-
- /* For Firefox - entire field is clickable, so show pointer */
- @supports (-moz-appearance: none) {
- .field--send-on .recipient-fields__input {
- cursor: pointer;
- }
- }
-{% endstylesheet %}
diff --git a/snippets/grid-density-controls.liquid b/snippets/grid-density-controls.liquid
deleted file mode 100644
index 2dbc5f169..000000000
--- a/snippets/grid-density-controls.liquid
+++ /dev/null
@@ -1,179 +0,0 @@
-{%- doc -%}
- Renders the grid density controls.
-
- @param {string} viewport - The viewport to render the controls for, either 'mobile' or 'desktop'.
-
- @example
- {% render 'grid-density-controls', viewport: 'desktop' %}
-{%- enddoc -%}
-
-
-
-{% stylesheet %}
- .column-options-wrapper {
- --icon-offset: -3px;
-
- display: flex;
- gap: var(--gap-sm);
- min-width: fit-content;
- justify-content: flex-end;
- height: var(--minimum-touch-target);
- align-items: center;
- margin-right: var(--icon-offset);
- }
-
- .column-options-wrapper:only-child {
- margin-left: auto;
- }
-
- .facets__form-wrapper > .column-options-wrapper:first-child {
- margin-left: auto;
- }
-
- .facets .column-options-wrapper {
- display: none;
-
- @media screen and (min-width: 750px) {
- display: flex;
- }
- }
-
- .column-options {
- display: flex;
- flex-wrap: wrap;
- gap: var(--gap-xs);
- margin: 0;
- padding: 0;
- border: none;
-
- @media screen and (min-width: 750px) {
- gap: var(--gap-2xs);
- }
- }
-
- .column-options__option {
- display: none;
- position: relative;
- }
-
- .column-options__option:has(.column-picker-mobile--single),
- .column-options__option:has(.column-picker-mobile--double) {
- @media screen and (max-width: 749px) {
- display: flex;
- }
- }
-
- .column-options__option:has(.column-picker--default),
- .column-options__option:has(.column-picker--zoom-out) {
- @media screen and (min-width: 750px) {
- display: flex;
- }
- }
-
- .column-options__legend {
- padding: 0;
- margin: 0;
- }
-
- .column-options__option-input {
- /* this is a repeating pattern a bit with the variant picker buttons */
-
- /* remove the checkbox from the page flow */
- position: absolute;
-
- /* set the dimensions to match those of the label */
- inset: 0;
-
- /* hide it */
- opacity: 0;
- margin: 0;
- cursor: pointer;
- }
-
- .column-picker {
- color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
- padding: var(--padding-2xs);
- border-radius: var(--style-border-radius-xs);
- transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
- }
-
- .column-options__option:hover .column-picker {
- background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
- }
-
- .column-options__option-input:checked ~ .column-picker {
- color: rgb(var(--color-foreground-rgb));
- background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
- }
-{% endstylesheet %}
diff --git a/snippets/group.liquid b/snippets/group.liquid
deleted file mode 100644
index 716a43aa6..000000000
--- a/snippets/group.liquid
+++ /dev/null
@@ -1,90 +0,0 @@
-{%- doc -%}
- Renders block content for all blocks that extend the group block.
-
- @param {string} children - The DOM content of the group block.
- @param {object} settings - The settings of the group block.
- @param {string} shopify_attributes - String with Shopify attributes for the editor.
- @param {string} [class] - Custom classes for the group block.
- @param {string} [style] - Custom inline styles for the group block.
-
- @example
- {% render 'group', children: children, settings: block.settings, shopify_attributes: block.shopify_attributes %}
-{%- enddoc -%}
-
-
- {% if shop.customer_accounts_enabled %}
- {% render 'account-popover' %}
- {% render 'account-drawer' %}
- {% endif %}
-
- {% if settings.cart_type == 'drawer' and template.name != 'cart' %}
- {% render 'cart-drawer' %}
- {% else %}
-
- {% render 'cart-icon-component' %}
-
- {% endif %}
-
-
-{% stylesheet %}
- .cart-drawer {
- --cart-drawer-padding: var(--padding-lg) var(--padding-xl);
- --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);
- --cart-font-size--2xs: var(--font-size--2xs);
- --cart-font-size--xs: var(--font-size--xs);
- --cart-font-size--sm: var(--font-size--sm);
- --cart-font-size--md: var(--font-size--md);
- --cart-font-size--2xl: var(--font-size--2xl);
- }
-
- .cart-drawer__dialog {
- position: fixed;
- border-radius: 0;
- width: var(--sidebar-width);
- max-width: 95vw;
- height: 100%;
- margin: 0 0 0 auto;
- padding: 0;
- border-left: var(--style-border-drawer);
- box-shadow: var(--shadow-drawer);
- background-color: var(--color-background);
- }
-
- /* Needed to ensure the drawer is full height */
- .cart-drawer__dialog:modal {
- max-height: 100dvh;
- overflow-y: hidden;
- }
-
- .cart-drawer__inner {
- height: 100%;
- }
-
- .cart-drawer__content {
- padding: 0;
- background-color: var(--color-background);
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- overflow-y: auto;
- }
-
- .cart-drawer__heading {
- display: flex;
- align-items: center;
- gap: var(--gap-xs);
- }
-
- .cart-drawer__close-button {
- margin-right: calc(var(--padding-sm) * -1);
- }
-
- .cart-drawer--empty .cart-drawer__content {
- text-align: center;
- min-height: auto;
- }
-
- .cart-drawer--empty .cart-drawer__heading {
- margin-bottom: var(--margin-md);
- }
-
- .cart-drawer__items .cart-items__table-row {
- padding-bottom: var(--gap-xl);
- border-bottom: var(--style-border-width) solid var(--color-border);
- margin-bottom: var(--gap-xl);
- }
-
- .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
- border-bottom: none;
- margin-bottom: 0;
- }
-
- .cart-drawer__items .cart-items__table-row:last-child {
- border-bottom: none;
- }
-
- .cart-drawer__summary {
- --cart-drawer-summary-padding: var(--padding-lg);
-
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--gap-2xl);
- padding: var(--cart-drawer-summary-padding);
- margin-top: auto;
- background-color: var(--color-background);
- /* stylelint-disable-next-line color-named */
- mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));
-
- @media screen and (min-width: 750px) {
- --cart-drawer-summary-padding: var(--padding-2xl);
- }
- }
-
- .cart-drawer__summary .cart__summary-totals:not(:has(.cart__original-total-container:empty)) {
- border-block-start: var(--style-border-width) solid var(--color-border);
- padding-block-start: var(--padding-2xl);
- }
-
- .cart-drawer__summary .cart-note {
- @media screen and (min-width: 750px) {
- margin-block-start: var(--margin-3xs);
- }
- }
-
- .cart-drawer__heading--empty {
- display: flex;
- justify-content: center;
- }
-
- .cart-drawer__items {
- display: flex;
- flex-direction: column;
- padding-inline: var(--cart-drawer-padding);
- overflow-y: auto;
-
- @media screen and (min-width: 750px) {
- padding-inline: var(--cart-drawer-padding-desktop);
- }
- }
-
- .cart-drawer__items .cart-items__table-row {
- padding-bottom: var(--gap-xl);
- border-bottom: var(--style-border-width) solid var(--color-border);
- margin-bottom: var(--gap-xl);
- }
-
- .cart-drawer__items .cart-items__table-row:last-child {
- border-bottom: none;
- padding-block-end: 0;
- margin-block-end: 0;
- }
-
- .cart-drawer--empty .cart-drawer__inner {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 100dvh;
- margin-top: 0;
- }
-
- .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
- justify-content: center;
- }
-
- .cart-drawer--empty .cart-drawer__header {
- justify-content: right;
- border-bottom: none;
- padding-bottom: 0;
- }
-
- .cart-drawer--empty .cart-drawer__heading {
- text-align: center;
- }
-
- .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- text-align: center;
- }
-
- header-actions {
- display: flex;
-
- @media screen and (max-width: 749px) {
- justify-self: flex-end;
- }
- }
-
- .header__column--right header-actions {
- margin-inline-start: calc(var(--gap-md) * -1);
- }
-
- .header-actions__action {
- --button-color: var(--color-foreground);
-
- cursor: pointer;
- display: flex;
- justify-content: center;
- }
-
- .header-actions__action .svg-wrapper {
- height: var(--button-size);
- width: var(--button-size);
- }
-
- .header-actions__action svg {
- width: var(--icon-size-md);
- height: var(--icon-size-md);
- }
-
- .header-actions__cart-icon {
- --cart-bubble-size: 20px;
- --cart-bubble-top: 4.5px;
- --cart-bubble-right: 2.5px;
-
- position: relative;
- }
-
- .header-actions__cart-icon .cart-bubble {
- position: absolute;
- width: var(--cart-bubble-size, 20px);
- top: var(--cart-bubble-top);
- right: var(--cart-bubble-right);
- }
-
- .header-actions__cart-icon .cart-bubble__text,
- .cart-drawer__heading .cart-bubble__text {
- font-family: var(--font-paragraph--family);
- font-weight: var(--font-paragraph--weight);
- }
-
- .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
- /* Create donut mask where the cart bubble sits */
- mask: radial-gradient(
- calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
- transparent 45.45%,
- #fff 45.45%,
- #fff 100%
- );
- }
-
- .cart-drawer__heading .cart-bubble__background {
- background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
- }
-
- .cart-drawer__heading .cart-bubble__text {
- color: var(--color-foreground);
- font-size: var(--font-size--xs);
- }
-
- .cart-bubble--animating .cart-bubble__background {
- animation: grow var(--animation-speed) var(--animation-easing);
- }
-
- .cart-bubble--animating .cart-bubble__text {
- animation: cartBubbleSlideIn var(--animation-speed) var(--animation-easing);
- }
-{% endstylesheet %}
diff --git a/snippets/header-drawer.liquid b/snippets/header-drawer.liquid
deleted file mode 100644
index f04217bf0..000000000
--- a/snippets/header-drawer.liquid
+++ /dev/null
@@ -1,1162 +0,0 @@
-{%- doc -%}
- Renders a header drawer menu triggered by the top details element.
-
- @param {object} linklist - The linklist to render
- @param {string} [class] - Additional classes to add to the drawer
- @param {string} [data_header_drawer_type] - The type of header drawer to render
- @param {object} [block] - The block that can be used to provide settings
- @param {object} [section] - The section that can be used to provide settings
-
- @example
- {% render 'header-drawer', linklist: section.settings.menu, class: 'header-drawer--mobile' %}
-{%- enddoc -%}
-
-{% liquid
- assign block_settings = block.settings
- assign max_featured_items = 4
- assign image_border_radius = block_settings.image_border_radius
-
- if block_settings.menu_style == 'featured_collections'
- assign ratio = block_settings.featured_collections_aspect_ratio
- elsif block_settings.menu_style == 'featured_products'
- assign ratio = block_settings.featured_products_aspect_ratio
- endif
-
- ##
- # We only eager load heavy elements of the page when rendering this template
- # through the Section Rendering API.
- #
- # This keeps the initial render lightweight, minimizing the impact on TTFB.
- # The second render then refreshes the page with additional content.
- #
- # At the moment, we check if the Section Rendering API is being used by
- # checking if section.index is blank.
- assign eager_loading = false
- if section.index == blank
- assign eager_loading = true
- endif
-%}
-
-
-
-
-
-
-
-{% stylesheet %}
- .header__icon--menu {
- position: initial;
- }
-
- @media screen and (min-width: 750px) {
- .header--desktop header-menu + .header__drawer header-drawer {
- display: none;
- }
- }
-
- .menu-drawer-container .header__icon--summary {
- color: var(--color-foreground);
- display: flex;
- justify-content: center;
- align-items: center;
- padding: var(--padding-lg);
- }
-
- .header__icon--summary .header-drawer-icon {
- margin: auto;
- width: var(--icon-size-xs);
- height: var(--icon-size-xs);
- }
-
- .header__drawer {
- display: flex;
- min-height: 60px;
- align-items: center;
-
- @media screen and (min-width: 750px) {
- min-height: 0;
- }
- }
-
- .header--compact .header__drawer {
- min-height: var(--minimum-touch-target);
- }
-
- .menu-drawer__navigation {
- padding: 0;
-
- @media screen and (min-width: 750px) {
- margin-top: var(--drawer-header-desktop-top);
- }
- }
-
- details:not([open]) .header__icon--menu .header-drawer-icon--close {
- display: none;
- }
-
- details[open] .header__icon--menu .header-drawer-icon--close {
- @media screen and (min-width: 750px) {
- display: none;
- }
- }
-
- details[open] .header__icon--menu .header-drawer-icon--open {
- display: none;
-
- @media screen and (min-width: 750px) {
- display: flex;
- }
- }
-
- .menu-drawer {
- position: fixed;
- transform: translateX(-100%);
- visibility: hidden;
- height: var(--drawer-height);
- width: var(--drawer-width);
- max-width: var(--drawer-max-width);
- z-index: var(--layer-menu-drawer);
- left: 0;
- top: 0;
- padding: 0;
- background-color: var(--color-background);
- overflow: auto;
- display: flex;
- border-right: var(--style-border-drawer);
- box-shadow: var(--shadow-drawer);
- flex-direction: column;
-
- @media screen and (min-width: 750px) {
- width: 25rem;
- }
-
- .header__drawer--desktop & {
- height: 100vh;
- }
- }
-
- .menu-drawer:has(details[open]) {
- overflow: initial;
- }
-
- .menu-drawer__backdrop {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100dvh;
- backdrop-filter: brightness(0.75);
- z-index: var(--layer-heightened);
- opacity: 0;
- transition: opacity var(--drawer-animation-speed) ease;
-
- .menu-open & {
- opacity: 1;
- }
- }
-
- .menu-drawer,
- details[open] > .menu-drawer__submenu {
- transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
- opacity var(--drawer-animation-speed) ease;
- }
-
- .menu-open > .menu-drawer,
- .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
- transform: translateX(0);
- visibility: visible;
- opacity: 1;
- display: flex;
- flex-direction: column;
- will-change: transform;
- }
-
- .menu-drawer__inner-container {
- position: relative;
- height: 100%;
- }
-
- .menu-drawer__navigation-container {
- display: grid;
- grid-template-rows: 1fr auto;
- align-content: space-between;
- overflow-y: auto;
- height: 100%;
- }
-
- .menu-drawer__inner-submenu {
- display: flex;
- flex-direction: column;
- height: 100%;
- overflow-y: auto;
-
- @media screen and (min-width: 750px) {
- margin-top: var(--drawer-header-desktop-top);
- }
- }
-
- .menu-drawer__nav-buttons {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
-
- .menu-drawer__menu {
- --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);
-
- list-style: none;
- padding-inline: var(--drawer-padding);
- margin-inline: 0;
- margin-block-start: 0;
- }
-
- .menu-drawer__menu--grid {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: var(--padding-sm);
- padding-inline-end: var(--menu-drawer-inline-padding);
- padding-block-start: var(--padding-xs);
- }
-
- .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
- flex-grow: 1;
- }
-
- .menu-drawer__menu.has-submenu,
- .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
- margin-block-end: var(--margin-xs);
-
- @media screen and (min-width: 750px) {
- margin-block-end: 2.5rem;
- }
- }
-
- .menu-drawer__list-item--divider {
- border-block-end: 1px solid var(--color-border);
- }
-
- .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
- margin-block-start: -0.3rem;
- }
-
- .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
- margin-block-start: -0.4rem;
- }
-
- .menu-drawer__menu-container--divider {
- border-block-end: 1px solid var(--color-border);
- }
-
- .menu-drawer__menu > .menu-drawer__list-item {
- display: flex;
- min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
- }
-
- .menu-drawer__list-item--deep .menu-drawer__list-item,
- .menu-drawer__list-item--flat .menu-drawer__list-item {
- min-height: auto;
- }
-
- .menu-drawer__menu .menu-drawer__list-item--flat {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- margin-block-end: var(--margin-md);
- }
-
- .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
- margin-block-end: var(--margin-sm);
-
- @media screen and (min-width: 750px) {
- margin-block-end: var(--margin-lg);
- }
- }
-
- .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
- margin-block-end: 0;
- }
-
- .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
- width: 100%;
- padding-inline-start: 0;
- }
-
- .menu-drawer-container[open] .menu-drawer__animated-element {
- animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
- animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
- animation-fill-mode: backwards;
- }
-
- .menu-drawer__menu details,
- .menu-drawer__menu-item,
- .menu-drawer__menu accordion-custom {
- width: 100%;
- }
-
- .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
- min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
- }
-
- .menu-drawer__menu-item--mainlist {
- min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
- font-family: var(--menu-top-level-font-family);
- font-style: var(--menu-top-level-font-style);
- font-weight: var(--menu-top-level-font-weight);
- font-size: var(--menu-top-level-font-size);
- line-height: var(--menu-top-level-font-line-height);
- text-transform: var(--menu-top-level-font-case);
- color: var(--menu-top-level-font-color);
- justify-content: space-between;
-
- &:hover {
- color: var(--menu-top-level-font-color);
- }
- }
-
- .menu-drawer__menu-item--parent {
- font-family: var(--menu-parent-font-family);
- font-style: var(--menu-parent-font-style);
- font-weight: var(--menu-parent-font-weight);
- font-size: var(--menu-parent-font-size);
- line-height: var(--menu-parent-font-line-height);
- text-transform: var(--menu-parent-font-case);
- color: var(--menu-parent-font-color);
-
- &:hover {
- color: var(--menu-parent-font-color);
- }
- }
-
- .menu-drawer__menu-item--child {
- font-family: var(--menu-child-font-family);
- font-style: var(--menu-child-font-style);
- font-weight: var(--menu-child-font-weight);
- font-size: var(--menu-child-font-size);
- line-height: var(--menu-child-font-line-height);
- text-transform: var(--menu-child-font-case);
- color: var(--menu-child-font-color);
-
- &:hover {
- color: var(--menu-child-font-color);
- }
- }
-
- .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
- display: flex;
- width: 100%;
- padding-inline-end: 0;
- }
-
- .menu-drawer__list-item--deep .menu-drawer__menu,
- .menu-drawer__menu--grandchildlist {
- padding-inline-start: 0;
- }
-
- .menu-drawer__list-item--deep .menu-drawer__menu {
- padding-block-end: 0.5rem;
- }
-
- .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
- padding-block-end: 0.3rem;
- }
-
- .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
- padding-block-end: 0.5rem;
- }
-
- .menu-drawer__menu-item {
- display: flex;
- padding: var(--padding-2xs) 0;
- position: relative;
- text-decoration: none;
- justify-content: space-between;
- align-items: center;
- }
-
- .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: flex-start;
- row-gap: var(--padding-3xs);
- padding: 0;
- }
-
- .menu-drawer__link-image {
- width: 100%;
- position: relative;
- aspect-ratio: 16 / 9;
- object-fit: cover;
- }
-
- /* Fix alignment for collection image mode links without images in drawer */
-
- /* Target menu items in grids that have images */
- .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: flex-start;
- row-gap: var(--padding-3xs);
- padding: 0;
- }
-
- .menu-drawer__menu--grid:has(.menu-drawer__link-image)
- .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
- content: '';
- display: block;
- width: 100%;
- aspect-ratio: 16 / 9;
- background-color: var(--color-foreground-muted);
- opacity: 0.1;
- border-radius: var(--menu-image-border-radius);
- }
-
- .menu-drawer__close-button {
- position: relative;
- right: auto;
- top: auto;
- width: fit-content;
- height: fit-content;
- padding: var(--padding-lg);
- will-change: transform;
- }
-
- .menu-drawer__back-button {
- display: flex;
- width: 100%;
- padding: var(--padding-md) var(--padding-xl);
- border: none;
- align-items: center;
- color: var(--color-foreground);
- background-color: transparent;
- text-align: left;
- text-decoration: none;
- white-space: nowrap;
- overflow-x: hidden;
- line-height: 1.2;
- box-shadow: none;
- }
-
- .menu-drawer__menu-item-text {
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- /** Styles when the country selector is hidden */
- .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
- width: fit-content;
- padding-inline-start: 0;
-
- .localization-form__select {
- text-align: left;
- }
- }
-
- .menu-drawer__menu-item > .svg-wrapper {
- width: fit-content;
- height: fit-content;
- margin: 0;
- padding-block: var(--padding-lg);
- padding-inline-start: var(--padding-xl);
- flex-shrink: 0;
- }
-
- .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
- padding-block: var(--padding-md);
- }
-
- .menu-drawer svg {
- width: var(--icon-size-xs);
- height: var(--icon-size-xs);
- }
-
- .menu-drawer__submenu {
- position: absolute;
- width: 100%;
- top: 0;
- height: 100dvh;
- left: 0;
- background-color: var(--color-background);
- z-index: var(--layer-flat);
- transform: translateX(-5%);
- visibility: hidden;
- overflow-y: auto;
- opacity: 0;
- }
-
- .menu-drawer__back-button > .svg-wrapper {
- margin-right: var(--padding-md);
- width: var(--icon-size-xs);
- height: var(--icon-size-xs);
- }
-
- .menu-drawer__utility-links {
- display: flex;
- flex-direction: column;
- padding: 0;
- margin-block: auto var(--padding-sm);
- margin-inline-start: var(--padding-xl);
- background-color: rgb(var(--color-foreground) 0.03);
- }
-
- .menu-drawer__account {
- display: inline-flex;
- align-items: center;
- gap: var(--gap-xs);
- text-decoration: none;
- height: 44px;
- font-size: 1.4rem;
- color: rgb(var(--color-foreground));
- }
-
- .menu-drawer__account svg {
- height: var(--icon-size-sm);
- width: var(--icon-size-sm);
- }
-
- .menu-drawer__account shop-user-avatar {
- --shop-avatar-size: 2.4rem;
-
- margin-right: 0.55rem;
- margin-left: -0.45rem;
- }
-
- .menu-drawer__link-image,
- .menu-drawer__featured-product-image,
- .menu-drawer__featured-collection-image,
- .menu-drawer__featured-collection-link::before {
- border-radius: var(--menu-image-border-radius);
- }
-
- @keyframes menu-drawer-nav-open {
- 0% {
- visibility: hidden;
- opacity: 0;
- transform: translateX(-0.5rem);
- }
-
- 100% {
- visibility: visible;
- opacity: 1;
- transform: translateX(0);
- }
- }
-
- @keyframes menu-drawer-subnav-open {
- 0% {
- visibility: visible;
- opacity: 1;
- transform: translateX(0);
- }
-
- 100% {
- visibility: hidden;
- opacity: 0;
- transform: translateX(-1rem);
- }
- }
-{% endstylesheet %}
diff --git a/snippets/header-menu.liquid b/snippets/header-menu.liquid
deleted file mode 100644
index ca5499760..000000000
--- a/snippets/header-menu.liquid
+++ /dev/null
@@ -1,93 +0,0 @@
-{% liquid
- assign block_settings = block.settings
- assign menu_content_type = block_settings.menu_style | default: 'text'
- assign image_border_radius = block_settings.image_border_radius
- assign color_scheme_classes = ''
- assign color_scheme_setting_id = 'color_scheme_' | append: section.settings.menu_row
- assign current_color_scheme = block_settings.color_scheme
- assign parent_color_scheme = section.settings[color_scheme_setting_id]
-
- if parent_color_scheme.id != current_color_scheme.id
- assign color_scheme_classes = ' color-' | append: current_color_scheme
- endif
-
- # Check if header and menu colors match. This is used to apply different padding styles in css
- if parent_color_scheme.settings.background.rgb == current_color_scheme.settings.background.rgb
- assign color_scheme_classes = color_scheme_classes | append: ' color-scheme-matches-parent'
- endif
-
- if block_settings.menu_style == 'featured_collections'
- assign ratio = block_settings.featured_collections_aspect_ratio
- elsif block_settings.menu_style == 'featured_products'
- assign ratio = block_settings.featured_products_aspect_ratio
- endif
-%}
-
-{% capture children %}
- {% for link in block_settings.menu.links %}
-
-
-
-
- {%- if link.links != blank -%}
-
- {%- endif -%}
-
- {% endfor %}
-
-
-
-{% endcapture %}
-
-
diff --git a/snippets/header-row.liquid b/snippets/header-row.liquid
deleted file mode 100644
index 134390046..000000000
--- a/snippets/header-row.liquid
+++ /dev/null
@@ -1,78 +0,0 @@
-{%- liquid
- assign order = order | split: ','
- assign left = ''
- assign center = ''
- assign right = ''
-
- if first != blank
- assign left = 'first '
- endif
-
- for item in order
- assign column_key = item | append: '_position'
- assign row_key = item | append: '_row'
- assign item_row = settings[row_key] | default: 'top'
- assign item_column = settings[column_key] | default: 'left'
-
- case item
- when 'actions':
- assign item_column = 'right'
- endcase
-
- if item_row == row
- case item_column
- when 'left'
- assign left = left | append: item | append: ' '
- when 'center'
- assign center = center | append: item | append: ' '
- else
- assign right = right | append: item | append: ' '
- endcase
- endif
- endfor
-
- assign columns = 'left,center,right' | split: ','
--%}
-
-{%- for column in columns -%}
- {%- capture items_for_column -%}
- {% case column %}
- {% when 'left' %}
- {{ left }}
- {% when 'center' %}
- {{ center }}
- {% else %}
- {{ right }}
- {% endcase %}
- {%- endcapture -%}
-
- {%- assign items_array = items_for_column | strip | split: ' ' | compact -%}
-
- {%- if items_array.size > 0 -%}
-
-
-
- {%- when 'carrot' -%}
- ![]()
element using provided image object
-
- @param {object} image - image object
- @param {number} [height] - custom image height
- @param {string} [class] - additional classes
- @param {string} [text_fallback] - text to display if image is blank
- @param {boolean} [unset_image_tag] - if true, ignores the image focal point
- @param {string} [style] - additional styles
-
- @example
- {% render 'image', image: product.featured_image, height: 300, class: 'product-image' %}
-{%- enddoc -%}
-{% if image != blank %}
- {% assign image_height = height | default: image.height %}
- {% assign image_height_2x = height | default: image_height | times: 2 %}
- {% assign image_height_3x = height | default: image_height | times: 3 %}
-
- {% capture image_srcset -%}
- {{ image | image_url: height: image_height }} 1x, {{ image | image_url: height: image_height_2x }} 2x, {{ image | image_url: height: image_height_3x }} 3x
- {%- endcapture %}
-
- {% assign style_value = style | default: '' %}
-
- {% if unset_image_tag %}
- {% assign style_value = style_value | append: 'object-position: inherit;' %}
- {% endif %}
-
- {{ image | image_url: height: image_height | image_tag: class: class, srcset: image_srcset, style: style_value }}
-{% elsif text_fallback %}
- {{ text_fallback }}
-{% endif %}
diff --git a/snippets/jumbo-text.liquid b/snippets/jumbo-text.liquid
deleted file mode 100644
index bbfa7f9bd..000000000
--- a/snippets/jumbo-text.liquid
+++ /dev/null
@@ -1,193 +0,0 @@
-{%- doc -%}
- Renders text that stretches to fit the full width of its container.
-
- @param {string} [text] - The text to be rendered.
- @param {object} [block_settings] - The block settings object, defaults to block.settings
-
- @example
- {% render 'jumbo-text', text: block.settings.text %}
-{%- enddoc -%}
-
-{% liquid
- assign block_settings = block_settings | default: block.settings
- assign shown_text = text | default: block_settings.text
- assign descenders = 'alphabetic'
- assign trim = 'trim-both'
-
- unless block_settings.case == 'uppercase'
- if shown_text contains 'g' or shown_text contains 'j' or shown_text contains 'p' or shown_text contains 'q' or shown_text contains 'y'
- assign descenders = 'text'
- endif
- endunless
-
- assign text_trim = trim | append: ' cap ' | append: descenders
- assign shown_text_with_line_breaks = shown_text | newline_to_br
- assign text_with_lines = shown_text_with_line_breaks | split: '
' - assign nudge = '-0.04em' -%} - -{% capture attributes %} - style=" - --font-family: var(--font-{{ block_settings.font | default: 'accent'}}--family); - --font-weight: var(--font-{{ block_settings.font | default: 'accent'}}--weight); - {% if block_settings.font == 'body' %} - --color: var(--color-foreground); - {% else %} - --color: var(--color-foreground-heading); - {% endif %} - --text-align: {{ block_settings.alignment | default: 'left' }}; - {% if block_settings.alignment == "left" %} - --margin-left-nudge: {{nudge}}; - {% elsif block_settings.alignment == "right" %} - --margin-right-nudge: {{nudge}}; - {% endif %} - --line-height: {{ block_settings.line_height | default: '1' }}; - --letter-spacing: {{ block_settings.letter_spacing | default: '-0.03em' }}; - --text-transform: {{ block_settings.case | default: 'none' }}; - --text-trim: {{text_trim}}; - " - {{ block.shopify_attributes }} -{% endcapture %} - -{% comment %} - If the jumbo text is not wrapped inside its own container, the overflow calculation does not always work correctly - (looks like some weird off-by-one error when comparing sizes). -{% endcomment %} -
-
-
-{% stylesheet %}
- .facets input:checked + label {
- font-weight: 500;
- }
-
- .facets .checkbox .icon-checkmark {
- transition: border-color 0.2s ease, background-color 0.2s ease;
- }
-
- .facets .checkbox:not(:has(.checkbox__input:disabled)):hover .icon-checkmark {
- border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
- background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
- }
-
- .facets .checkbox:has(.checkbox__input:checked):not(:has(.checkbox__input:disabled)):hover .icon-checkmark {
- background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
- }
-
- .facets .checkbox:not(:has(.checkbox__input:disabled)):hover .checkbox__label-text {
- color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
- }
-
- .facets .checkbox .checkbox__label-text {
- transition: color 0.2s ease, font-weight 0.2s ease;
- }
-
- /* Pill style */
- .facets__pill-label {
- --pill-label-padding-inline: var(--padding-xs);
- --pill-label-border-radius: var(--style-border-radius-md);
- --pill-label-border-width: var(--variant-picker-button-border-width);
- --pill-label-height: var(--button-size-md);
- --pill-label-focus-outline-color: var(--color-foreground);
- --pill-label-color: var(--color-foreground);
- --pill-label-color-rgb: var(--color-foreground-rgb);
- --pill-label-background-color: var(--color-background);
- --pill-label-background-color-rgb: var(--color-background-rgb);
- --pill-label-border-opacity: var(--facets-low-opacity);
-
- display: inline-flex;
- position: relative;
- align-items: center;
- justify-content: center;
- box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
- border-radius: var(--pill-label-border-radius);
- height: var(--pill-label-height);
- width: 100%;
- padding-inline: var(--pill-label-padding-inline);
- color: rgb(var(--pill-label-color-rgb));
- background-color: rgb(var(--pill-label-background-color-rgb));
- cursor: pointer;
- transition: color var(--animation-speed) var(--animation-easing),
- background-color var(--animation-speed) var(--animation-easing);
- outline-color: var(--pill-label-focus-outline-color);
-
- &:hover {
- --pill-label-border-opacity: 100%;
- }
- }
-
- .facets__pill-input {
- &:checked + .facets__pill-label {
- --pill-label-color-rgb: var(--color-background-rgb);
- --pill-label-background-color-rgb: var(--color-foreground-rgb);
- --pill-label-border-opacity: 0;
-
- font-weight: 500;
- }
-
- &:disabled + .facets__pill-label {
- opacity: var(--disabled-opacity);
- cursor: not-allowed;
-
- &:hover {
- --pill-label-border-opacity: var(--facets-low-opacity);
- }
- }
- }
-
- .facets__status-wrapper {
- display: flex;
- align-items: center;
- }
-
- .facets--drawer .facets__status-wrapper {
- @media screen and (max-width: 749px) {
- gap: var(--gap-3xs);
- }
- }
-
- .facets--vertical .facets__status-wrapper {
- gap: var(--gap-xs);
- }
-
- .facets--horizontal .facets__status-wrapper {
- gap: 0;
- }
-
- .facets__pill-input:disabled + .facets__pill-label svg {
- position: absolute;
- top: 0;
- left: 0;
- border-radius: var(--style-border-radius-md);
- }
-
- .facets__pill-label svg line {
- stroke-width: 1.5px;
- stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
- }
-
- .facets__pill-wrapper {
- position: relative;
- }
-
- .facets__pill-input {
- position: absolute;
- inset: 0;
- margin: 0;
- opacity: 0;
- cursor: pointer;
- }
-
- /* Swatches */
- .facets__status--swatches {
- display: none;
- }
-
- .facets__swatch-wrapper {
- display: flex;
- }
-
- .facets__inputs-list--swatches .variant-option__button-label {
- --color-variant-text: var(--color-foreground);
- }
-
- .facets__inputs-list--swatches {
- --variant-picker-swatch-width: 32px;
- --variant-picker-swatch-height: 32px;
-
- @media screen and (min-width: 750px) {
- --variant-picker-swatch-width: 26px;
- --variant-picker-swatch-height: 26px;
- }
- }
-
- .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
- gap: var(--gap-sm);
- }
-
- .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
- display: flex;
- }
-
- .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
- --columns: 2;
-
- display: grid;
- grid-template-columns: repeat(var(--columns), 1fr);
- }
-
- .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
- cursor: pointer;
- overflow: visible;
-
- &.variant-option--swatches-disabled,
- &:has(input:disabled) {
- cursor: not-allowed;
- }
- }
-
- .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
- cursor: pointer;
- word-break: break-word;
- white-space: normal;
-
- .variant-option--swatches-disabled &,
- .variant-option--swatches:has(input:disabled) & {
- cursor: not-allowed;
- }
- }
-
- .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch {
- align-items: center;
- overflow: visible;
- justify-content: flex-start;
- display: flex;
- width: 100%;
- flex-basis: unset;
- gap: var(--gap-sm);
- }
-
- .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
- color: rgb(var(--color-foreground-rgb));
- background-color: rgb(var(--color-background-rgb));
- font-weight: 500;
- transition: font-weight 0.2s ease;
- }
-
- .facets .variant-option--swatches {
- --options-border-radius: var(--variant-picker-swatch-radius);
-
- width: auto;
- }
-
- .facets--horizontal .facets__status--swatches {
- @media screen and (min-width: 750px) {
- display: flex;
- }
- }
-
- .facets--horizontal .sorting-filter .facets__status {
- @media screen and (min-width: 750px) {
- display: none;
- }
- }
-
- .facets__status--swatches .swatch {
- width: calc(var(--variant-picker-swatch-width) / 1.5);
- height: calc(var(--variant-picker-swatch-height) / 1.5);
- }
-
- .facets__status--swatches .swatch + .swatch {
- margin-left: calc(var(--variant-picker-swatch-width) / -3);
- outline: 1px solid rgb(var(--color-background-rgb));
- }
-
- .variant-option--images {
- position: relative;
- }
-
- .variant-option--images {
- --image-facet-border-width: var(--variant-picker-button-border-width);
- --image-facet-border-opacity: var(--facets-low-opacity);
- --image-facet-border-radius: var(--style-border-radius-xs);
-
- border-radius: var(--image-facet-border-radius);
- box-shadow: inset 0 0 0 var(--image-facet-border-width)
- rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));
-
- &:hover:not(:has(input:disabled)),
- &:has(input:checked) {
- --image-facet-border-opacity: 100%;
- }
-
- &:has(input:checked) {
- font-weight: 500;
- transition: font-weight 0.2s ease;
- }
-
- &:has(input:checked):hover {
- --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
- }
-
- &:has(input:focus-visible) {
- outline: var(--focus-outline-width) solid currentcolor;
- outline-offset: var(--focus-outline-offset);
- }
-
- &:has(input:disabled),
- &:has(input:disabled):hover {
- --image-facet-border-opacity: 0;
-
- opacity: var(--disabled-opacity);
- cursor: not-allowed;
-
- img {
- opacity: var(--disabled-opacity);
- }
-
- input,
- label,
- .facets__image-label {
- cursor: not-allowed;
- }
-
- .facets__image-wrapper {
- border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
- border-radius: var(--image-facet-border-radius);
- }
- }
- }
-
- .facets__inputs-wrapper .facets__inputs-list--images {
- display: grid;
- grid-template-columns: repeat(var(--image-columns), 125px);
- gap: var(--gap-sm);
- }
-
- .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
- grid-template-columns: repeat(3, 1fr);
-
- @media screen and (min-width: 750px) {
- grid-template-columns: repeat(4, 1fr);
- }
- }
-
- .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
- grid-template-columns: repeat(2, 1fr);
- }
-
- .facets--drawer .facets__inputs-list--images {
- padding-top: var(--padding-xs);
- }
-
- .facets__image-wrapper {
- aspect-ratio: 1/1;
- width: 100%;
- padding: var(--padding-xs);
- position: relative;
- overflow: hidden;
- }
-
- .facets__image-wrapper img {
- height: 100%;
- width: 100%;
- object-fit: contain;
- border-radius: calc(var(--border-radius) / 2);
- }
-
- /* Position disabled-svg */
- .variant-option--images svg {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- width: 100%;
- height: 100%;
- stroke-width: var(--border-width);
- stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
- }
-
- /* Position label text and handle overflow */
- .facets__inputs-list-item,
- .variant-option--images {
- min-width: 0;
- }
-
- .facets__image-label {
- width: 100%;
- text-align: center;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- padding-block-end: var(--padding-xs);
- cursor: pointer;
-
- .variant-option--images:has(input:disabled) & {
- cursor: not-allowed;
- }
- }
-
- .facets__inputs-list--swatches .variant-option__button-label:hover:not(:has(input:disabled)) {
- font-weight: 500;
- }
-
- .variant-option--images:not(:has(input:disabled)) .facets__image-label:hover {
- font-weight: 500;
- }
-{% endstylesheet %}
diff --git a/snippets/localization-form.liquid b/snippets/localization-form.liquid
deleted file mode 100644
index 8e95af233..000000000
--- a/snippets/localization-form.liquid
+++ /dev/null
@@ -1,819 +0,0 @@
-{%- doc -%}
- Renders either a country selector, language selector, or both.
-
- @param {boolean} show_country - Whether to show the country selector
- @param {boolean} show_language - Whether to show the language selector
- @param {string} block_id - The block ID
- @param {string} [form_style] - The style tag string to be applied to the form
- @param {string} [localization_style] - The style of the localization form
-
- @example
- {% render 'localization-form', show_country: true, show_language: true, block_id: block.id %}
-{%- enddoc -%}
-
-{%- liquid
- comment
- From Tyler in July: Noting here that it might make sense for us to just be able to get localization.available_currencies and localization.popular_countries instead of needing this esoteric logic.
- endcomment
- assign currencies = localization.available_countries | map: 'currency' | map: 'iso_code' | uniq
- assign popular_countries = localization.available_countries | where: 'popular?' | sort: 'name'
-
- assign show_country_filter = false
- if localization.available_countries.size > 9
- assign show_country_filter = true
- endif
-
- assign show_popular_countries = false
- if localization.available_countries.size > 9 and popular_countries.size > 1
- assign show_popular_countries = true
- endif
-
- assign show_currencies = false
- if currencies.size > 1
- assign show_currencies = true
- endif
-
- assign aliases_us = 'us,usa,america,united states of america'
- assign aliases_uk = 'uk,gb,great britain'
-%}
-
- {% assign localization_label = 'content.localization_region_and_language' | t %}
-
- {%- form 'localization',
- id: 'LocalizationForm',
- class: 'localization-form',
- ref: 'form',
- return_to: back,
- aria-label: localization_label
- -%}
- {% if show_country %}
- {% if show_country_filter %}
-
-
-{% stylesheet %}
- /* Localization */
- localization-form-component {
- display: flex;
- width: var(--width, auto);
-
- @media screen and (min-width: 750px) {
- position: relative;
- }
- }
-
- localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
- padding-block-start: var(--padding-xs);
- }
-
- .localization-form {
- width: 100%;
- }
-
- localization-form-component .button:is(:not(.country-filter__reset-button)) {
- --button-color: var(--color-primary);
- --button-background-color: var(--language-button-background-color, var(--color-background));
- --button-border-color: var(--language-button-border-color, var(--color-border));
-
- text-decoration-color: transparent;
- text-decoration-thickness: 0.075em;
- text-underline-offset: 0.125em;
- transition: text-decoration-color var(--animation-speed) var(--animation-easing);
- }
-
- localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
- .localization-form__list-item:hover,
- .localization-form__list-item:focus {
- --button-color: var(--color-primary-hover);
-
- background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
- }
-
- .localization-form__list-item[aria-current='true'] {
- --button-color: var(--color-primary-active);
-
- background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
- }
-
- .localization-form__list-item-disabled {
- pointer-events: none;
- }
-
- .localization-form__list-item:focus-visible {
- outline: none;
- }
-
- localization-form-component .localization-selector {
- display: flex;
- align-items: center;
- gap: var(--margin-2xs);
- }
-
- localization-form-component .country-filter__search-icon {
- left: 8px;
- right: auto;
- color: var(--color-foreground-muted);
- pointer-events: none;
- }
-
- .country-filter__search-icon .svg-wrapper svg {
- width: var(--icon-size-sm);
- height: var(--icon-size-sm);
- }
-
- .disclosure {
- width: 100%;
- }
-
- .dropdown-localization__button {
- display: flex;
- position: relative;
- align-items: center;
- gap: 4px;
- font-family: var(--menu-localization-font);
- font-size: var(--menu-localization-font-size);
- font-weight: var(--menu-top-level-font-weight);
- padding-inline: var(--padding-2xs);
- margin-inline: calc(-1 * var(--padding-2xs));
- }
-
- .dropdown-localization__button .icon-caret {
- height: var(--icon-size-xs);
- width: var(--icon-size-xs);
- right: var(--margin-xs);
- top: calc(50% - var(--padding-2xs));
- flex-shrink: 0;
- transition: transform var(--animation-speed) var(--animation-easing);
- }
-
- .drawer-localization__button .icon-flag,
- .dropdown-localization__button .icon-flag {
- width: var(--menu-localization-font-size, var(--icon-size-sm));
- height: var(--menu-localization-font-size, var(--icon-size-sm));
- clip-path: circle(50%); /* stylelint-disable-line */
- background-position: center;
- background-size: cover;
- margin-inline-end: 4px;
- position: relative;
- }
-
- .icon-flag::after {
- content: '';
- position: absolute;
- inset: 0;
- box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
- border-radius: 50%;
- }
-
- .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
- transform: rotate(180deg);
- }
-
- .dropdown-localization__button,
- .dropdown-localization__button:hover {
- box-shadow: none;
- background-color: transparent;
- border-color: transparent;
- color: var(--color-foreground);
- }
-
- .localization-form__list {
- position: relative;
- width: 100%;
- padding-block: 0 var(--padding-xs);
- font-size: var(--font-size-lg);
- scroll-padding: var(--padding-xs) 0;
- overflow-y: auto;
- white-space: nowrap;
-
- /* Hide scrollbar which would cause extra right padding in Safari */
- scrollbar-width: none;
-
- &::-webkit-scrollbar {
- display: none;
- }
- }
-
- dropdown-localization-component .localization-form__list {
- max-height: 20.5rem;
- }
-
- .localization-wrapper {
- position: fixed;
- z-index: var(--layer-raised);
- border-radius: var(--style-border-radius-popover);
- transition-property: display, opacity, translate;
- transition-duration: 0.3s;
- transition-timing-function: var(--ease-out-quad);
- transition-behavior: allow-discrete;
- translate: 0 20px;
- opacity: 0;
- }
-
- .localization-wrapper:not([hidden]) {
- translate: 0 0;
- opacity: 1;
- }
-
- @starting-style {
- .localization-wrapper:not([hidden]) {
- translate: 0 20px;
- opacity: 0;
- }
- }
-
- .localization-form__list-item:not([hidden]) {
- margin-block-end: var(--margin-3xs);
- display: flex;
- gap: var(--margin-sm);
- padding: 8px;
- border-radius: 8px;
- line-height: var(--font-line-height-md);
- align-items: center;
- text-align: start;
- cursor: pointer;
- transition: background-color var(--animation-speed) var(--animation-easing);
-
- .country {
- flex: 1;
- color: var(--color-foreground);
- }
-
- &:hover {
- background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
- }
-
- &[aria-current='true'] {
- .country {
- font-weight: 500;
- }
- }
- }
-
- .localization-form__list-item#no-results-message {
- grid-template-columns: 1fr;
- text-align: center;
- color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
- }
-
- .is-searching .localization-form__list-item .country {
- color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
- }
-
- .localization-form__list-item .country mark {
- font-weight: 500;
- background: none;
- color: var(--color-foreground);
- }
-
- .country-filter {
- position: relative;
- padding: var(--padding-xs);
- border-bottom: var(--style-border-width) solid transparent;
- transition: border-color var(--animation-values);
- }
-
- .country-filter.is-scrolled {
- border-color: var(--color-border);
- }
-
- .drawer-localization .country-filter {
- padding-block: 8px;
- }
-
- dropdown-localization-component .country-filter {
- position: relative;
- padding: 8px;
- }
-
- .country-selector-form__wrapper {
- overflow-y: auto;
- max-height: 100%;
- flex-grow: 1;
- }
-
- .language-selector {
- display: flex;
- gap: var(--gap-xs);
- padding: var(--padding-md) var(--padding-lg);
- position: relative;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- }
-
- .language-selector__label {
- flex-shrink: 0;
- color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
- }
-
- .localization-form__select {
- border: none;
- color: var(--color-foreground);
- appearance: none;
- background-color: var(--color-input-background);
- padding-block: var(--padding-3xs);
- padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
- text-align: right;
- cursor: pointer;
- max-width: 40vw;
- text-overflow: ellipsis;
-
- &:focus-visible {
- outline: var(--focus-outline-width) solid currentcolor;
- }
-
- &:focus {
- outline: none;
- }
- }
-
- #header-component[transparent] localization-form-component .localization-form .localization-form__select {
- background-color: transparent;
- }
-
- .localization-form__select option {
- background-color: var(--color-input-background);
- color: var(--color-input-text);
- }
-
- dropdown-localization-component .localization-form__select:hover {
- background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
- }
-
- .language-selector .svg-wrapper.icon-caret {
- width: var(--icon-size-xs);
- height: var(--icon-size-xs);
- position: absolute;
- right: 12px;
- top: 50%;
- transform: translateY(-50%);
- display: flex;
- align-items: center;
- }
-
- .language-selector--collapse-space {
- padding-inline-end: var(--padding-2xs);
- }
-
- .language-selector--collapse-space .localization-form__select {
- padding-inline-end: var(--icon-size-xs);
- }
-
- .language-selector--collapse-space .svg-wrapper.icon-caret {
- right: 0;
- }
-
- .localization-form .icon-checkmark {
- width: var(--icon-size-xs);
- height: var(--icon-size-xs);
- }
-
- .localization-form .svg-wrapper.icon-checkmark {
- visibility: hidden;
- }
-
- .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
- visibility: visible;
- }
-
- .country-filter__input {
- width: 100%;
- height: 44px;
- font-size: var(--font-size-lg);
- padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
- border: 1px solid var(--color-foreground);
- color: var(--color-input-text);
- background-color: var(--color-input-background);
- outline-offset: -1px;
-
- @media screen and (min-width: 750px) {
- height: 36px;
- }
- }
-
- .country-filter__input::placeholder {
- color: inherit;
- }
-
- .country-filter .field {
- position: relative;
- }
-
- .country-filter .field__label {
- font-size: var(--font-size-lg);
- left: var(--margin-2xl);
- top: var(--margin-xl);
- pointer-events: none;
- position: absolute;
- }
-
- .country-filter__input:focus ~ .field__label,
- .country-filter__input:not(:placeholder-shown) ~ .field__label,
- .country-filter__input:-webkit-autofill ~ .field__label {
- font-size: var(--font-size-xs);
- top: var(--margin-xs);
- }
-
- .country-filter .field__button:not([hidden]) {
- display: flex;
- height: fit-content;
- position: absolute;
- padding: 0;
- right: 8px;
- top: 50%;
- transform: translateY(-50%);
- align-items: center;
- background-color: transparent;
- color: var(--color-input-text);
- border: 0;
- }
-
- input[type='search']::-webkit-search-cancel-button {
- appearance: none;
- }
-
- .country-selector__close-button {
- display: none;
- }
-
- .drawer-localization .drawer-localization__button {
- display: flex;
- padding: 0;
- position: relative;
- text-decoration: none;
- height: 44px;
-
- &:hover {
- color: var(--color-foreground);
- }
- }
-
- .drawer-localization .drawer-localization__button .icon-caret {
- width: fit-content;
- height: fit-content;
- margin: 0;
- padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
- }
-
- dropdown-localization-component {
- position: relative;
- background-color: transparent;
- }
-
- dropdown-localization-component .country-filter__input {
- border: none;
- }
-
- dropdown-localization-component .localization-form__list-item {
- margin-inline: 8px;
- }
-
- dropdown-localization-component .localization-wrapper {
- box-shadow: var(--shadow-popover);
- border: var(--style-border-popover);
- background-color: var(--color-background);
- max-height: 27.5rem;
- position: absolute;
- top: calc(100% + 10px);
- z-index: calc(var(--layer-header-menu) + 1);
- }
-
- dropdown-localization-component .localization-wrapper.right-bound {
- right: 0;
- left: unset;
- }
-
- dropdown-localization-component .localization-wrapper.left-bound {
- left: -8px;
- right: unset;
- }
-
- /* Additional specificity due to dropdown-localization-component getting a low score */
- dropdown-localization-component .language-selector.language-selector {
- padding: 10px 8px 10px 16px;
- }
-
- dropdown-localization-component .localization-form__currency {
- width: max-content;
- opacity: 0;
- visibility: hidden;
- transition: none;
- }
-
- dropdown-localization-component
- :is(
- .localization-form__list-item:hover,
- .localization-form__list-item[aria-selected='true'],
- .localization-form__list-item[aria-current='true']
- )
- .localization-form__currency {
- opacity: 1;
- color: var(--color-foreground-muted);
- transition: opacity var(--animation-speed-slow) var(--animation-easing);
- visibility: visible;
- }
-
- .dropdown-localization .language-selector:where(:not(.top-shadow)) {
- font-weight: var(--menu-top-level-font-weight);
- }
-
- .dropdown-localization:not(dropdown-localization-component) .language-selector,
- .menu-drawer__localization:not(drawer-localization-component) .language-selector {
- font-family: var(--menu-localization-font);
- font-size: var(--menu-localization-font-size);
- }
-
- .menu-drawer__localization .language-selector.h5 {
- padding-inline-start: 0;
- }
-
- .header__column .localization-form__select {
- background-color: var(--header-bg-color);
- }
-
- .drawer-localization {
- display: contents;
- color: var(--color-foreground);
- }
-
- .drawer-localization localization-form-component {
- position: relative;
- height: 100%;
- }
-
- .drawer-localization .mobile-localization,
- .drawer-localization .drawer-localization__button--label {
- display: flex;
- gap: var(--gap-xs);
- margin-block: 0;
- align-items: center;
- }
-
- .drawer-localization__button--label.h6 {
- font-family: var(--menu-localization-font);
- }
-
- .drawer-localization img {
- width: var(--icon-size-sm);
- }
-
- .drawer-localization .localization-button__icon,
- .drawer-localization .localization-button__icon svg {
- width: var(--icon-size-xs);
- height: var(--icon-size-xs);
- }
-
- .drawer-localization summary.is-disabled {
- pointer-events: none;
- }
-
- .drawer-localization .localization-wrapper {
- width: 100%;
- }
-
- .drawer-localization .localization-form {
- display: flex;
- flex-direction: column;
- position: absolute;
- inset: 0;
- width: 100%;
- height: 100%;
- }
-
- .drawer-localization .localization-form > * {
- padding-inline: var(--padding-xl);
- }
-
- .drawer-localization .language-selector .svg-wrapper.icon-caret {
- transform: translateY(-50%) rotate(0deg);
- }
-
- .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
- transform: none;
- }
-{% endstylesheet %}
diff --git a/snippets/media.liquid b/snippets/media.liquid
deleted file mode 100644
index 76036c8d6..000000000
--- a/snippets/media.liquid
+++ /dev/null
@@ -1,117 +0,0 @@
-{%- doc -%}
- Renders media block contents (used in _media and _media-without-appearance blocks)
-
- @param {string} section_id - The section ID
- @param {object} [block] - The block object
- @param {boolean} [unset_image_tag] - if true, ignores the image focal point in the image
-{%- enddoc -%}
-
-{% liquid
- assign block_settings = block.settings
- assign show_image = false
- assign show_video = false
-
- if block_settings.media_type == 'image'
- assign show_image = true
- endif
-
- if block_settings.media_type == 'video'
- assign show_video = true
- endif
-%}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {%- assign max_chars_message = 200 -%}
- {%- assign current_chars = form.message | size -%}
- {%- assign max_chars_message_rendered = 'content.recipient_form_characters_used'
- | t: used_chars: current_chars, max_chars: max_chars_message
- -%}
- {%- assign message_label_rendered = 'content.recipient_form_message' | t -%}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ 'content.recipient_form_send_on_label' | t }}
-
-
-
- {%- if settings.link != blank -%}
-
- {%- endif -%}
-
-
-
-{% stylesheet %}
- .group-block__link {
- position: absolute;
- inset: 0;
- }
-
- .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
- pointer-events: none;
-
- :is(a, button, input, textarea, select) {
- pointer-events: auto;
- }
- }
-
- /* Needs the .group-block__link ~ to be specific enough to take effect. */
- .group-block__link ~ .group-block-content--design-mode {
- pointer-events: auto;
- }
-{% endstylesheet %}
diff --git a/snippets/header-actions.liquid b/snippets/header-actions.liquid
deleted file mode 100644
index da77237d3..000000000
--- a/snippets/header-actions.liquid
+++ /dev/null
@@ -1,270 +0,0 @@
-
-
-
- {% render 'background-media',
- background_media: settings.background_media,
- background_video: settings.video,
- background_video_position: settings.video_position,
- background_image: settings.background_image,
- background_image_position: settings.background_image_position,
- placeholder: settings.placeholder
- %}
- {% if settings.toggle_overlay %}
- {% render 'overlay', settings: settings, layer: '0' %}
- {% endif %}
-
-
-
- {{- children -}}
-
-
- {% for key in items_array %}
- {% unless key == blank %}
- {% case key %}
- {% when 'first' %}
- {{ first }}
- {% when 'logo' %}
- {{ logo }}
- {% when 'menu' %}
- {{ menu }}
- {% when 'localization' %}
- {{ localization }}
- {% when 'search' %}
- {{ search }}
- {% when 'mobile_search' %}
- {{ mobile_search }}
- {% when 'actions' %}
- {{ actions }}
- {% endcase %}
- {% endunless %}
- {% endfor %}
-
- {%- endif -%}
-{%- endfor -%}
diff --git a/snippets/icon-or-image.liquid b/snippets/icon-or-image.liquid
deleted file mode 100644
index ca2e468c0..000000000
--- a/snippets/icon-or-image.liquid
+++ /dev/null
@@ -1,40 +0,0 @@
-{%- doc -%}
- Renders either an SVG icon or an uploaded image based on block settings.
-
- @param {string} icon - The icon name from block.settings.icon
- @param {object} image_upload - The uploaded image from block.settings.image_upload
- @param {number} width - The width setting from block.settings.width
- @param {string} class_name - CSS class name for the rendered element
- @param {object} [attributes] - Additional HTML attributes to add to the element
-{%- enddoc -%}
-
-{%- if icon != 'none' and image_upload == blank -%}
-
-{%- elsif image_upload != blank -%}
- {% liquid
- assign media_width_desktop = '100vw'
- assign media_width_mobile = '100vw'
- assign sizes = '(min-width: 1024px) 1024px, ' | append: media_width_desktop | append: ', ' | append: media_width_mobile
- assign widths = '240, 352, 832, 1200'
- %}
-
- {% assign image_style = 'width: ' | append: width | append: 'px;' %}
- {{
- image_upload
- | image_url: width: 1200
- | image_tag: widths: widths, class: class_name, style: image_style, sizes: sizes
- }}
-{%- endif -%}
diff --git a/snippets/icon.liquid b/snippets/icon.liquid
deleted file mode 100644
index 3ebf7200f..000000000
--- a/snippets/icon.liquid
+++ /dev/null
@@ -1,399 +0,0 @@
-{% # To be removed when we can use the icon static block instead %}
-
-{%- case icon -%}
- {%- when 'apple' -%}
- ' - assign nudge = '-0.04em' -%} - -{% capture attributes %} - style=" - --font-family: var(--font-{{ block_settings.font | default: 'accent'}}--family); - --font-weight: var(--font-{{ block_settings.font | default: 'accent'}}--weight); - {% if block_settings.font == 'body' %} - --color: var(--color-foreground); - {% else %} - --color: var(--color-foreground-heading); - {% endif %} - --text-align: {{ block_settings.alignment | default: 'left' }}; - {% if block_settings.alignment == "left" %} - --margin-left-nudge: {{nudge}}; - {% elsif block_settings.alignment == "right" %} - --margin-right-nudge: {{nudge}}; - {% endif %} - --line-height: {{ block_settings.line_height | default: '1' }}; - --letter-spacing: {{ block_settings.letter_spacing | default: '-0.03em' }}; - --text-transform: {{ block_settings.case | default: 'none' }}; - --text-trim: {{text_trim}}; - " - {{ block.shopify_attributes }} -{% endcapture %} - -{% comment %} - If the jumbo text is not wrapped inside its own container, the overflow calculation does not always work correctly - (looks like some weird off-by-one error when comparing sizes). -{% endcomment %} -
- {% if text != blank %}
- {{ text }}
- {% else %}
- {{ shown_text }}
-
- {%- assign char_index = 0 -%}
- {%- for line in text_with_lines -%}
- {%- if forloop.index > 1 -%}
-
- {%- endif -%} - - {%- endfor -%} -
- {% endif %}
-
-
-
-
-{% stylesheet %}
- .jumbo-text__container {
- width: 100%;
- }
-
- footer .jumbo-text__container {
- pointer-events: none;
- }
-
- jumbo-text {
- display: block;
- font-family: var(--font-family, inherit);
- font-style: var(--font-style, normal);
- color: var(--color, inherit);
- font-weight: var(--font-weight, inherit);
- letter-spacing: var(--letter-spacing, -0.02em);
- line-height: var(--line-height, 1);
- opacity: 0;
- text-align: var(--text-align);
- text-box: var(--text-trim, trim-end cap text);
- text-transform: var(--text-transform, none);
- transition: opacity 0.3s ease;
- white-space: pre;
- width: 100%;
- will-change: font-size;
- margin-left: var(--margin-left-nudge, 0);
- margin-right: var(--margin-right-nudge, 0);
- overflow: visible;
- }
-
- jumbo-text.ready {
- opacity: 1;
- }
-
- jumbo-text[data-cap-text='true'] {
- /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
- text-box-edge: cap text;
- }
-
- .jumbo-text-space {
- display: inline-flex;
- width: 0.5ch;
- }
-
- :is(.jumbo-text-char, .jumbo-text-line) {
- display: inline-flex;
- }
-
- @media (prefers-reduced-motion: no-preference) {
- /* Blur effect */
- [data-text-effect='blur'] {
- filter: blur(20px);
- opacity: 0.5;
- scale: 1.05;
- transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
- scale 1.6s var(--animation-timing-fade-in);
- }
-
- .jumbo-text-visible[data-text-effect='blur'] {
- filter: blur(0);
- opacity: 1;
- scale: 1;
- }
-
- /* Reveal effect */
- .ready[data-text-effect='reveal'],
- .ready[data-text-effect='reveal'] .jumbo-text-line {
- overflow: hidden;
- }
-
- .ready[data-text-effect='reveal'] .jumbo-text-char {
- transform: translateY(100%);
- }
-
- .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-char {
- transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
- transform: translateY(0);
- }
-
- .jumbo-text-visible[data-text-effect='reveal'],
- .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
- overflow: visible;
- transition: overflow 0s linear 0.75s;
- }
- }
-{% endstylesheet %}
diff --git a/snippets/layout-panel-style.liquid b/snippets/layout-panel-style.liquid
deleted file mode 100644
index c11f2a7ab..000000000
--- a/snippets/layout-panel-style.liquid
+++ /dev/null
@@ -1,33 +0,0 @@
-{%- liquid
- comment
- Intended for blocks and sections that provide values for all the referenced settings.
-
- Accepts:
- settings: {block.settings || section.settings}
- endcomment
-
- assign horizontal_alignment = settings.horizontal_alignment
-
- assign vertical_alignment = settings.vertical_alignment
- if settings.align_baseline and vertical_alignment == 'flex-end'
- assign vertical_alignment = 'last baseline'
- endif
-
- unless settings.content_direction == 'row'
- assign horizontal_alignment = settings.horizontal_alignment_flex_direction_column
- assign vertical_alignment = settings.vertical_alignment_flex_direction_column
- endunless
-
- assign vertical_alignment_mobile = vertical_alignment
-
- if settings.vertical_on_mobile and vertical_alignment == 'last baseline'
- assign vertical_alignment_mobile = 'flex-end'
- endif
--%}
-
---flex-direction: {{ settings.content_direction | default: 'column' }}; --flex-wrap: nowrap; --flex-wrap-mobile: wrap;
-
-{% render 'gap-style', value: settings.gap %}
-
---horizontal-alignment: {{ horizontal_alignment }}; --vertical-alignment: {{ vertical_alignment }};
---vertical-alignment-mobile: {{ vertical_alignment_mobile }};
diff --git a/snippets/link-featured-image.liquid b/snippets/link-featured-image.liquid
deleted file mode 100644
index 22b44d70f..000000000
--- a/snippets/link-featured-image.liquid
+++ /dev/null
@@ -1,47 +0,0 @@
-{%- doc -%}
- Renders the featured image for a menu item.
-
- @param {object} link - The link to render
- @param {string} [class] - The class to apply to the image
- @param {string} [sizes] - The sizes to apply to the image
-
- @example
- {% render 'menu-featured-image', link: link %}
-{%- enddoc -%}
-
-{% assign image_sizes = sizes | default: 'auto' %}
-
-{% if link.type == 'collection_link' %}
- {% if link.object.featured_image %}
- {{
- link.object.featured_image
- | image_url: width: 800
- | image_tag: loading: 'lazy', class: class, sizes: image_sizes
- }}
- {% elsif link.object.products.size > 0 %}
- {% assign product_object = link.object.products | where: 'featured_image' | first %}
- {% if product_object.featured_image %}
- {{
- product_object.featured_image
- | image_url: width: 800
- | image_tag: loading: 'lazy', class: class, sizes: image_sizes
- }}
- {% endif %}
- {% endif %}
-{% elsif link.type == 'collections_link' %}
- {% assign collection_object = collections | where: 'featured_image' | first %}
- {% if collection_object.featured_image %}
- {{
- collection_object.featured_image
- | image_url: width: 800
- | image_tag: loading: 'lazy', class: class, sizes: image_sizes
- }}
- {% endif %}
-{% elsif link.type == 'catalog_link' %}
- {% assign product_object = collections.all.products | where: 'featured_image' | first %}
- {{
- product_object.featured_image
- | image_url: width: 800
- | image_tag: loading: 'lazy', class: class, sizes: image_sizes
- }}
-{% endif %}
diff --git a/snippets/list-filter.liquid b/snippets/list-filter.liquid
deleted file mode 100644
index fa65612f7..000000000
--- a/snippets/list-filter.liquid
+++ /dev/null
@@ -1,783 +0,0 @@
-{%- doc -%}
- Renders a list or swatch filter.
-
- @param {object} filter - The filter to render
- @param {string} filter_style - The filter style ('horizontal' | 'vertical')
- @param {number} active_value_count - The number of active values
- @param {number} sectionId - The section ID
- @param {boolean} [autofocus] - Whether to autofocus the filter
- @param {boolean} [should_render_clear] - Whether to render the clear button
- @param {boolean} [show_swatch_label] - Whether to show the swatch label
- @param {boolean} [in_drawer] - Whether the filter is in a drawer
-{%- enddoc -%}
-
-{% liquid
- assign is_swatch = false
- assign swatch_index = filter.values | find_index: 'swatch'
-
- if swatch_index != null
- assign is_swatch = true
- endif
-
- assign is_image = false
- if filter.presentation == 'image'
- assign is_image = true
- endif
-%}
-
-- {%- endif -%} - - {%- endfor -%} -
-
- {{ filter.label }}
-
-
-
-
- {% liquid
- assign has_active_values = false
- assign inital_visible_values = 10
- if is_swatch
- assign inital_visible_values = 22
- endif
- if is_image
- assign inital_visible_values = 6
- endif
- assign max_visible_values = inital_visible_values | plus: 1
- assign render_show_more = false
- assign should_render_for_swatch = is_swatch
- if is_swatch and show_swatch_label
- assign should_render_for_swatch = false
- endif
- if filter.values.size > max_visible_values and should_render_for_swatch == false
- assign render_show_more = true
- endif
- %}
- {% liquid
- if render_show_more
- if filter_style == 'horizontal'
- echo ''
- else
- echo ''
- endif
- endif
- assign should_use_pills = true
-
- for value in filter.values
- if value.label.size > 3
- assign should_use_pills = false
- break
- endif
- endfor
-
- if filter.type == 'boolean'
- assign should_use_pills = false
- endif
- %}
-
- ' %}
- {% endif %}
-
- {% if should_render_clear %}
-
-
- {% endif %}
-
-
-
-
- {{ filter.label }}
-
-
- {% if is_swatch %}
-
-
- {%- liquid
- if active_value_count > 3
- echo active_value_count
- elsif active_value_count > 0 and active_value_count <= 3
- for value in filter.active_values
- render 'swatch', swatch: value.swatch, mode: 'filter'
- endfor
- endif
- -%}
-
-
- {% else %}
-
- 1 %}
- class="bubble facets__bubble"
- {% endif %}
- hide-when-empty
- ref="facetStatus"
- >
- {%- liquid
- if active_value_count == 1
- echo filter.active_values[0].label
- elsif active_value_count > 1
- echo active_value_count
- endif
- -%}
-
-
- {% endif %}
-
- {{- 'icon-caret.svg' | inline_asset_content -}}
-
-
-
-
- {% liquid
- if is_swatch
- assign swatch_columns = filter.values.size
-
- if swatch_columns > 4
- assign swatch_columns = 4
-
- # Balance the number of columns based on the number of values, i.e. try to avoid one or two items in
- # the last row if the number of values is (almost) divisible by 3.
- assign mod4 = filter.values.size | modulo: 4
- assign mod3 = filter.values.size | modulo: 3
- if mod4 != 0 and mod4 != 3
- if mod3 == 0 or mod3 == 2
- assign swatch_columns = 3
- endif
- endif
- endif
- endif
-
- if is_image
- assign image_columns = 3
- if filter.values.size < 3
- assign image_columns = filter.values.size
- endif
- endif
- %}
-
- {% if render_show_more %}
-
- {% echo '-
- {%- for value in filter.values -%}
- {% liquid
- assign input_id = 'Filter-' | append: filter.param_name | escape | append: '-' | append: forloop.index | replace: '.', '-' | append: '-' | append: filter_style | append: '-' | append: in_drawer
- assign is_disabled = false
- if value.count == 0 and value.active == false
- assign is_disabled = true
- endif
- assign hidden_class = null
- if forloop.index > inital_visible_values and render_show_more
- assign hidden_class = 'hidden'
- if filter_style == 'horizontal'
- assign hidden_class = 'mobile:hidden'
- endif
- endif
- %}
-
- {%- endfor -%}
-
-
-
-
-
- {% endif %}
-
-
-
-
-
-
-
-
- {% endif %}
-
- {% if show_language %}
- - Country/Region -
- {% if show_country_filter %} - - {% endif %} -
- {% if show_popular_countries %}
-
-
-
- -
- {%- for country in popular_countries -%}
- {% liquid
- assign aliases = ''
- case country.iso_code
- when 'US'
- assign aliases = aliases_us
- when 'GB'
- assign aliases = aliases_uk
- endcase
- %}
-
- - - {{- 'icon-checkmark.svg' | inline_asset_content -}} - - {{- country.name }} - - {{ country.currency.iso_code }} - {{ country.currency.symbol -}} - - - {%- endfor -%} -
-
-
- {{- 'content.no_results_found' | t -}}
-
- {%- for country in localization.available_countries -%}
- {% liquid
- assign aliases = ''
- case country.iso_code
- when 'US'
- assign aliases = aliases_us
- when 'GB'
- assign aliases = aliases_uk
- endcase
- %}
-
- - - {{- 'icon-checkmark.svg' | inline_asset_content -}} - - {{- country.name }} - - {{ country.currency.iso_code }} - {{ country.currency.symbol -}} - - - {%- endfor -%} -
-
- {% endif %}
- {%- endform -%}
-- {{ 'content.language' | t }} -
- {% if show_country == true %} - {{ 'content.language' | t }} - {% endif %} - - - {{- 'icon-caret.svg' | inline_asset_content -}} - -
- {%- if show_image -%}
- {% capture image_tag %}
- {% if block_settings.image != blank %}
- {% render 'image',
- image: block_settings.image,
- class: 'media-block__media border-style',
- unset_image_tag: unset_image_tag
- %}
- {% else %}
-
-
-{% stylesheet %}
- .media-block {
- overflow: hidden;
- position: relative;
-
- @media screen and (min-width: 750px) {
- min-height: var(--media-height);
- }
- }
-
- .media-block__media {
- height: var(--media-height-mobile, auto);
- object-fit: var(--image-position, 'cover');
- object-position: center center;
- width: 100%;
-
- @media screen and (min-width: 750px) {
- height: 100%;
- position: absolute;
- }
- }
-
- deferred-media[class].media-block__media
- :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
- object-fit: var(--video-position, 'cover');
- }
-
- /* This is to support corner radius on video and align the video to the center of the block */
- .media-block__media--video {
- display: flex;
- align-items: center;
- justify-content: center;
-
- @media screen and (max-width: 749px) {
- --media-height-mobile: auto;
- }
- }
-{% endstylesheet %}
diff --git a/snippets/mega-menu-list.liquid b/snippets/mega-menu-list.liquid
deleted file mode 100644
index 78984f49e..000000000
--- a/snippets/mega-menu-list.liquid
+++ /dev/null
@@ -1,348 +0,0 @@
-{%- doc -%}
- Renders mega menu list markup and optional featured content.
-
- @param {object} parent_link - The linklist to render.
- @param {string} id - Unique ID to assign to the `
- {{ 'detailed-apparel-1' | placeholder_svg_tag: 'hero__image' }}
-
- {% endif %}
- {% endcapture %}
-
- {% if block_settings.link != blank %}
-
- {{ image_tag }}
-
- {% else %}
- {{ image_tag }}
- {% endif %}
- {%- elsif show_video -%}
- {% render 'video',
- video: block_settings.video,
- video_autoplay: block_settings.video_autoplay,
- video_loop: block_settings.video_loop,
- video_class: 'media-block__media media-block__media--video border-style',
- section_id: section_id
- %}
- {%- else -%}
-
- {{ 'hero-apparel-3' | placeholder_svg_tag }}
-
- {%- endif -%}
-- ` element.
- @param {number} [grid_columns_count] - Number of grid columns for the mega menu.
- @param {number} [grid_columns_count_tablet] - Number of grid columns for the mega menu on tablets.
- @param {number} [grid_columns_count_collection_images] - Number of grid columns when `menu_content_type` is 'collection_images'.
- @param {string} [menu_content_type] - Type of content: 'featured_products', 'featured_collections', 'collection_images', or 'text'.
- @param {number} [content_aspect_ratio] - Aspect ratio for content images.
- @param {number} [image_border_radius] - Border radius for content images.
- @param {object} [section] - The section object.
-
- @example
- {% render 'mega-menu-list', parent_link: link, id: 'MegaMenuList-1', grid_columns_count: 6, menu_content_type: 'featured_products' %}
-{%- enddoc -%}
-
-{% liquid
- comment
- open_column_span tracks when a vertical column in the mega menu is open. Links will be stacked
- in the column until the code closes the column span.
- endcomment
- assign open_column_span = false
- assign column_count = 0
- assign links_before_wrap = 10
- assign max_menu_columns = grid_columns_count | default: 6
- assign max_menu_columns_tablet = grid_columns_count_tablet | default: 4
-
- ##
- # We only eager load heavy elements of the page when rendering this template
- # through the Section Rendering API.
- #
- # This keeps the initial render lightweight, minimizing the impact on TTFB.
- # The second render then refreshes the page with additional content.
- #
- # At the moment, we check if the Section Rendering API is being used by
- # checking if section.index is blank.
- assign eager_loading = false
- if section.index == blank
- assign eager_loading = true
- endif
-
- if menu_content_type == 'collection_images'
- assign collection_links = parent_link.links | where: 'type', 'collection_link'
- assign catalog_links = parent_link.links | where: 'type', 'catalog_link'
- assign collection_list_links = parent_link.links | where: 'type', 'collections_link'
- if collection_links.size == 0 and catalog_links.size == 0 and collection_list_links.size == 0
- assign menu_content_type = 'text'
- endif
- endif
-
- if menu_content_type == 'featured_collections'
- if parent_link.type == 'collection_link'
- assign collection_handles = parent_link.object.handle | append: ','
- elsif parent_link.type == 'catalog_link' or parent_link.type == 'collections_link'
- assign collection_handles = 'all' | append: ','
- endif
- assign collection_links = parent_link.links | where: 'type', 'collection_link'
- for collection_link in collection_links
- assign collection_handles = collection_handles | append: collection_link.object.handle | append: ','
- endfor
- endif
-
- if menu_content_type == 'featured_products'
- if parent_link.type == 'collection_link'
- assign collection_object = parent_link.object
- elsif parent_link.type == 'catalog_link' or parent_link.type == 'collections_link'
- assign collection_object = collections.all
- else
- assign menu_content_type = 'text'
- endif
- endif
-%}
-
-
-{% liquid
- # decide how many grid columns are needed for the menu list, and how many columns are needed for the featured content
- # prioritize a minimum of 1 featured_collection (2 columns), and minimum 2 featured_products (2 columns)
- assign min_products = 2
- assign max_products = 3
- assign min_products_tablet = 1
- assign max_products_tablet = 3
- assign min_collections = 1
-
- if menu_content_type == 'featured_products'
- # desktop breakpoint
- assign temp_column_count = column_count | plus: min_products
-
- if temp_column_count > max_menu_columns
- assign max_product_columns = 2
- else
- assign max_product_columns = max_menu_columns | minus: column_count | at_most: max_products
- endif
-
- if eager_loading
- assign max_product_columns = max_product_columns | at_most: collection_object.products_count
- else
- assign max_product_columns = 0
- endif
-
- assign max_featured_products = max_product_columns
- assign max_menu_columns = max_menu_columns | minus: max_product_columns
-
- # tablet breakpoint
- assign temp_column_count = column_count | plus: min_products_tablet
-
- if temp_column_count > max_menu_columns_tablet
- assign max_product_columns_tablet = 1
- else
- assign max_product_columns_tablet = max_menu_columns_tablet | minus: column_count | at_most: max_products_tablet
- endif
-
- assign max_product_columns_tablet = max_product_columns_tablet | at_most: max_product_columns
-
- assign max_featured_products_tablet = max_product_columns_tablet
- assign max_menu_columns_tablet = max_menu_columns_tablet | minus: max_product_columns_tablet
- endif
-
- if menu_content_type == 'featured_collections'
- # desktop breakpoint
- assign min_featured_collection_columns = min_collections | times: 2
- assign temp_column_count = column_count | plus: min_featured_collection_columns
-
- if temp_column_count > max_menu_columns
- assign max_collection_columns = 2
- else
- assign max_collection_columns = max_menu_columns | minus: column_count
- endif
-
- assign max_featured_collections = max_collection_columns | divided_by: 2 | floor
- assign max_menu_columns = max_menu_columns | minus: max_collection_columns
-
- # tablet breakpoint
- assign max_collection_columns_tablet = 2
- assign max_featured_collections_tablet = 1
- assign max_menu_columns_tablet = max_menu_columns_tablet | minus: max_collection_columns_tablet
- endif
-%}
-
-{% style %}
- [data-menu-grid-id="{{ id }}"] {
- {% if menu_content_type == 'collection_images' and parent_link.links.size < 5 %}
- --menu-columns-desktop: {{ grid_columns_count_collection_images }};
- --menu-columns-tablet: {{ grid_columns_count_tablet }};
- {% else %}
- --menu-columns-desktop: {{ grid_columns_count }};
- --menu-columns-tablet: {{ grid_columns_count_tablet }};
- {% endif %}
- }
-
- [data-menu-list-id="{{ id }}"] {
- {% if menu_content_type == 'collection_images' and parent_link.links.size < 5 %}
- --menu-columns-desktop: {{ grid_columns_count_collection_images }};
- --menu-columns-tablet: {{ max_menu_columns_tablet }};
- {% else %}
- --menu-columns-desktop: {{ max_menu_columns }};
- --menu-columns-tablet: {{ max_menu_columns_tablet }};
- {% endif %}
- }
-{% endstyle %}
-
-{% case menu_content_type %}
- {% when 'featured_products' %}
- {%- capture image_sizes -%}
- {%- render 'util-mega-menu-img-sizes-attr',
- menu_content_type: 'featured_products',
- settings: settings,
- grid_columns: grid_columns_count,
- grid_columns_tablet: grid_columns_count_tablet
- -%}
- {%- endcapture -%}
-
-
- {% when 'featured_collections' %}
- {% assign collection_handles = collection_handles | split: ',' | uniq %}
- {%- capture image_sizes -%}
- {%- render 'util-mega-menu-img-sizes-attr',
- menu_content_type: 'featured_collections',
- settings: settings
- -%}
- {%- endcapture -%}
-
- {% if collection_handles.size == 1 %}
- {% assign max_featured_collections = 1 %}
- {% endif %}
-
-
-{% endcase %}
diff --git a/snippets/mega-menu.liquid b/snippets/mega-menu.liquid
deleted file mode 100644
index 30c0f7baf..000000000
--- a/snippets/mega-menu.liquid
+++ /dev/null
@@ -1,30 +0,0 @@
-{%- doc -%}
- Renders a mega menu list and optional "more" menu links.
- When more menu links are present a duplicate instance of each submenu is also rendered.
-
- @param {object} [section] - The section object.
- @param {linklist} [parent_link] - The linklist to render
- @param {string} [id] - Unique ID to assign ul in markup
- @param {string} [menu_content_type] - The type of content to render, options: ['featured_products', 'featured_collections', 'collection_images', 'text'] (default: 'text')
- @param {number} [content_aspect_ratio] - The aspect ratio to display the content if applicable
- @param {number} [image_border_radius] - The border radius used for the content images
-{%- enddoc -%}
-
-
diff --git a/snippets/menu-font-styles.liquid b/snippets/menu-font-styles.liquid
deleted file mode 100644
index 21015a907..000000000
--- a/snippets/menu-font-styles.liquid
+++ /dev/null
@@ -1,23 +0,0 @@
-{%- comment -%}
- Derives CSS variables from the menu typography settings for 1st level/main menu items.
- Accepts:
- settings {block.settings}
- menu_type {string}: 'drawer' or 'mega_menu'
-{%- endcomment -%}
-
---menu-top-level-font-family: var(--font-{{ settings.type_font_primary_link }}--family);
---menu-top-level-font-size-desktop: {{ settings.type_font_primary_size }}; --menu-top-level-font-style: var(--font-
-{{- settings.type_font_primary_link -}}
---style); --menu-top-level-font-weight: var(--font-
-{{- settings.type_font_primary_link -}}
---weight); --menu-top-level-font-case:
-{%- if settings.type_case_primary_link == 'uppercase' %}uppercase{% else %}none{% endif -%}
-;
-{% if menu_type == 'drawer' %}
- --menu-top-level-font-size: var(--menu-font-2xl--size); --menu-top-level-font-line-height:
- var(--menu-font-2xl--line-height);
-{% else %}
- --menu-top-level-font-size: var(--menu-font-sm--size); --menu-top-level-font-line-height:
- var(--menu-font-sm--line-height);
-{% endif %}
---menu-top-level-font-color: var(--color-foreground); --menu-top-level-font-color-rgb: var(--color-foreground-rgb);
diff --git a/snippets/meta-tags.liquid b/snippets/meta-tags.liquid
deleted file mode 100644
index e4bd0f0a2..000000000
--- a/snippets/meta-tags.liquid
+++ /dev/null
@@ -1,121 +0,0 @@
-
-
-
-
-
-
-{%- liquid
- assign og_title = page_title | default: shop.name
- assign og_url = canonical_url | default: request.origin
- assign og_type = 'website'
- assign og_description = page_description | default: shop.description | default: shop.name
-
- if request.page_type == 'product'
- assign og_type = 'product'
- elsif request.page_type == 'article'
- assign og_type = 'article'
- elsif request.page_type == 'password'
- assign og_url = request.origin
- endif
-%}
-
-
-
-
-
-
-
-{%- if page_image -%}
-
-
-
-
-{%- endif -%}
-
-{%- if request.page_type == 'product' -%}
-
-
-{%- endif -%}
-
-{%- if settings.social_twitter_link != blank -%}
-
-{%- endif -%}
-
-
-
-
-
- - - -
- - {% render 'resource-card', - resource_type: 'product', - resource: product, - image_width: 500, - image_hover: true, - image_aspect_ratio: '4 / 5' - %} - - {% endfor %} - {% else %} - {% for product in products limit: limit %} -
- - {% render 'resource-card', - resource_type: 'product', - resource: product, - image_width: 500, - image_hover: true, - image_aspect_ratio: '4 / 5' - %} - - {% endfor %} - {% endif %} -
- - {% render 'resource-card', - resource_type: 'product', - resource: product, - image_width: 500, - image_hover: true, - image_aspect_ratio: '4 / 5' - %} - - {% endfor %} -
-
-
-
-
-
- {{ children }}
--
-
- {% if load_empty_state %}
-
diff --git a/snippets/predictive-search-products-list.liquid b/snippets/predictive-search-products-list.liquid
deleted file mode 100644
index f3602aa90..000000000
--- a/snippets/predictive-search-products-list.liquid
+++ /dev/null
@@ -1,185 +0,0 @@
-{%- doc -%}
- Renders the predictive search products list for empty state and recently viewed products
-
- @param {string} title - title of the result list
- @param {object[]} products - array of products
- @param {string[]} [order_ids] - array of product ids
- @param {number} [limit] - limit of products to display
- @param {string} [products_test_id] - a playwright test id, used to differentiate empty state from 'real' search results
-{%- enddoc -%}
-{%- liquid
- assign recently_viewed_title_text = 'content.recently_viewed_products' | t
--%}
-
- {% liquid
- assign collection = settings.empty_state_collection | default: collections.all
- assign default_title = 'content.search_results_resource_products' | t
- assign title = settings.empty_state_collection.title | default: default_title
- %}
- {% paginate collection.products by 4 %}
- {% assign products = collection.products %}
- {% comment %} Only show products section if there are products to display {% endcomment %}
- {% if products.size > 0 %}
- {% render 'predictive-search-products-list',
- products_test_id: products_test_id,
- title: title,
- products: products,
- limit: 4
- %}
- {% else %}
-
- {% endif %}
-
-
- {% endif %}
- {% endpaginate %}
- {{ 'content.no_products_found' | t }}
-
- {% if title == recently_viewed_title_text %}
-
-
-{% stylesheet %}
- .predictive-search-results__products {
- padding-inline: var(--padding-xl);
- }
-
- .recently-viewed-wrapper {
- display: grid;
- grid-template-rows: auto auto;
- max-height: 1000px;
- opacity: 1;
- overflow: visible;
- transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
- transform-origin: top center;
- transform: translateY(0);
- }
-
- .recently-viewed-wrapper.removing {
- max-height: 0;
- opacity: 0;
- transform: translateY(-10px);
- transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
- transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
- pointer-events: none;
- }
-
- .predictive-search-results__clear.button-unstyled {
- color: var(--color-foreground);
- opacity: 0.5;
- transition: opacity var(--animation-speed-medium) var(--animation-easing);
- padding: 0;
- margin-left: var(--margin-sm);
-
- &:hover {
- opacity: 1;
- }
- }
-
- .recently-viewed-wrapper.removing .predictive-search-results__card {
- transition: none;
- transform: none;
- opacity: 1;
- }
-
- .recently-viewed-wrapper > * {
- transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
- }
-
- .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
- animation-delay: 30ms;
- }
-
- .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
- animation-delay: 60ms;
- }
-
- .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
- animation-delay: 90ms;
- }
-
- .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
- animation-delay: 120ms;
- }
-
- .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
- animation-delay: 150ms;
- }
-
- .predictive-search-results__wrapper-products {
- animation-delay: 50ms;
- }
-{% endstylesheet %}
diff --git a/snippets/predictive-search-resource-carousel.liquid b/snippets/predictive-search-resource-carousel.liquid
deleted file mode 100644
index 91201c365..000000000
--- a/snippets/predictive-search-resource-carousel.liquid
+++ /dev/null
@@ -1,130 +0,0 @@
-{%- doc -%}
- Renders a carousel of predictive search results cards.
-
- @param {string} title - The title of the carousel.
- @param {object} resources - The resources to display.
- @param {string} resource_type - The type of resource to display.
-{%- enddoc -%}
-
-{% liquid
- capture slides
- for resource in resources
- capture children
- render 'resource-card', resource_type: resource_type, resource: resource, image_aspect_ratio: '4 / 5', collection_thumbnails: 'multiple'
- endcapture
- render 'slideshow-slide', index: forloop.index0, children: children, class: 'predictive-search-results__card'
- endfor
- endcapture
-%}
-
-{% capture header %}
-
-
- {% else %}
- - {{ title }} - -
--
- {% liquid
- assign limit = limit | default: 8
- %}
- {% comment %}
- If we're searching for recently viewed products by id, we need to reorder the products.
- The order here comes from the search terms, and we display the products in the order of the ids.
- {% endcomment %}
- {% if order_ids != blank %}
- {% for _id in order_ids %}
- {% assign int_id = _id | times: 1 %}
- {% assign product = products | find: 'id', int_id %}
-
- {{ title }} -
--
- {% liquid
- assign limit = limit | default: 8
- %}
- {% for product in products limit: limit %}
-
-
-{% endcapture %}
-
-{% assign slideshow_class = 'predictive-search-results__list predictive-search-results__wrapper list-unstyled slideshow--single-media' %}
-{% if resources.size >= 4 %}
- {% assign slideshow_class = 'predictive-search-results__list predictive-search-results__wrapper list-unstyled' %}
-{% endif %}
-
-{% render 'slideshow',
- class: slideshow_class,
- header: header,
- infinite: false,
- slides: slides,
- slide_count: resources.size,
- icon_style: 'chevron',
- slideshow_gutters: 'start end'
-%}
-
-{% stylesheet %}
- .predictive-search-results__wrapper {
- display: flex;
- overflow-x: auto;
- overflow-y: hidden;
- padding-block-end: var(--padding-sm);
- padding-inline: 0;
- scroll-snap-type: x mandatory;
- scroll-padding: 0 var(--padding-xl);
- scrollbar-width: none;
- -ms-overflow-style: none;
-
- &::-webkit-scrollbar {
- display: none;
- }
- }
-
- .predictive-search-results__wrapper slideshow-slides {
- --gutter-slide-width: var(--padding-xl);
-
- /* Add padding to prevent hover animations from being clipped in slideshow
- 15px accommodates:
- - Scale effect (9px on each side from 1.03 scale)
- - Lift effect (4px upward movement)
- - Shadow (15px spread with -5px offset)
- Using 16px for better alignment with our spacing scale */
- padding-block: var(--padding-xl);
- margin-block: calc(-1 * var(--padding-xl));
- gap: var(--gap-md);
- }
-
- .predictive-search-results__resource-header {
- display: flex;
- padding-inline: var(--padding-xl);
- justify-content: space-between;
- align-items: center;
- height: 32px;
- }
-
- .predictive-search-results__resource-header .svg-wrapper {
- width: var(--icon-size-xs);
- }
-
- .predictive-search-results__wrapper-products {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- padding-block-end: var(--padding-sm);
- gap: var(--gap-md);
- transition: height var(--animation-speed-medium) var(--animation-easing);
-
- @container (min-width: 550px) {
- grid-template-columns: repeat(4, 1fr);
- }
- }
-
- .predictive-search-results__wrapper-products:last-child {
- padding-block-end: var(--padding-lg);
-
- @media screen and (min-width: 750px) {
- padding-block-end: var(--padding-sm);
- }
- }
-
- .predictive-search-results__resource-header .predictive-search-results__title {
- margin-block-end: 0;
- }
-
- .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
- margin-block-end: 0;
- }
-
- .predictive-search-results__resource-header slideshow-controls {
- @media screen and (max-width: 749px) {
- display: none;
- }
- }
-{% endstylesheet %}
diff --git a/snippets/predictive-search.liquid b/snippets/predictive-search.liquid
deleted file mode 100644
index 689da29e0..000000000
--- a/snippets/predictive-search.liquid
+++ /dev/null
@@ -1,435 +0,0 @@
-{%- doc -%}
- Renders the predictive search input and results.
-
- @param {string} [class] - Additional classes to add to the component.
- @param {string} [search_test_id] - A Playwright test ID for differentiating search components.
- @param {string} [input_id] - The ID for the search input element.
- @param {string} [products_test_id] - A Playwright test ID for differentiating products.
-
- @example
- {% render 'predictive-search', search_test_id: 'header-search' %}
-{%- enddoc -%}
-
-
-
-- {{ title }} -
- - {% if resources.size >= 4 %} - {%- render 'slideshow-controls', - show_arrows: true, - icon_style: 'chevron', - shape: 'none' - -%} - {% endif %} -
-
- {{ filter.label }}
-
-
- {% assign min_input_max_value = filter.max_value.value | default: filter.range_max %}
- {% assign max_input_min_value = filter.min_value.value | default: 0 %}
-
-
-
-
- {% endif %}
-
-
-
-
- {{ filter.label }}
-
- {{ shop.money_format }}
-
-
-
-
- {{- 'icon-caret.svg' | inline_asset_content -}}
-
-
-
-
-
-
-
-
-
-
- {{ 'fields.separator' | t }}
-
-
-
-
-
-
- {%- assign formatted_highest_price = filter.range_max | money -%}
- {{ 'content.price_filter_html' | t: price: formatted_highest_price }}
-
-
- {% if filter.min_value.value != null or filter.max_value.value != null %}
- {% assign has_active_values = true %}
- {% endif %}
-
- {% if should_render_clear %}
-
- {{- 'actions.clear' | t -}}
-
-
- {% if show_sale_price_first == false and show_compare_price %}
-
- {{ 'content.price_regular' | t }}
- {{- compare_at_price -}}
-
- {% endif %}
-
- {% if show_compare_price %}
-
- {{ 'content.price_sale' | t }}
- {{ price | default: ' ' }}
-
- {% else %}
- {{ price | default: ' ' }}
- {% endif %}
-
- {% if show_sale_price_first == true and show_compare_price %}
-
- {{ 'content.price_regular' | t }}
- {{- compare_at_price -}}
-
- {% endif %}
- {%- if selected_variant.unit_price and show_unit_price %}
- {%- liquid
- if product.handle == closest.product.handle and settings.currency_code_enabled_product_pages
- assign unit_price = selected_variant.unit_price | money_with_currency
- elsif product.handle != closest.product.handle and settings.currency_code_enabled_product_cards
- assign unit_price = selected_variant.unit_price | money_with_currency
- else
- assign unit_price = selected_variant.unit_price | money
- endif
- -%}
- {% render 'unit-price', price: unit_price, measurement: selected_variant.unit_price_measurement %}
- {%- endif -%}
-
diff --git a/snippets/product-card-badges.liquid b/snippets/product-card-badges.liquid
deleted file mode 100644
index 62b7b1856..000000000
--- a/snippets/product-card-badges.liquid
+++ /dev/null
@@ -1,77 +0,0 @@
-{%- doc -%}
- Renders product badges for the product card.
-
- @param {object} product - The product object.
- @param {object} settings - The theme settings object.
-
- @example
- {% render 'product-card-badges', product: product, settings: settings %}
-{%- enddoc -%}
-
-
- {%- if product.available == false or product.compare_at_price > product.price and product.available -%}
-
-
-{% stylesheet %}
- .product-badges {
- --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));
-
- position: absolute;
- z-index: var(--layer-flat);
- }
-
- .product-badges--bottom-left {
- bottom: calc(var(--badge-inset) + var(--padding-block-start));
- left: calc(var(--badge-inset) + var(--padding-inline-start));
- }
-
- .product-badges--top-left {
- top: calc(var(--badge-inset) + var(--padding-block-start));
- left: calc(var(--badge-inset) + var(--padding-inline-start));
- }
-
- .product-badges--top-right {
- top: calc(var(--badge-inset) + var(--padding-block-start));
- right: calc(var(--badge-inset) + var(--padding-inline-start));
- }
-
- .product-badges__badge {
- --badge-font-size: var(--font-size--xs);
-
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
- color: var(--color-foreground);
- background: var(--color-background);
- font-size: var(--badge-font-size);
- font-family: var(--badge-font-family);
- font-weight: var(--badge-font-weight);
- text-transform: var(--badge-text-transform);
- border-radius: var(--badge-border-radius);
- }
-
- .product-badges__badge--rectangle {
- padding-block: var(--badge-rectangle-padding-block);
- padding-inline: var(--badge-rectangle-padding-inline);
- }
-{% endstylesheet %}
diff --git a/snippets/product-card-variant-url.liquid b/snippets/product-card-variant-url.liquid
deleted file mode 100644
index 9609fc439..000000000
--- a/snippets/product-card-variant-url.liquid
+++ /dev/null
@@ -1,27 +0,0 @@
-{%- doc -%}
- Logic to determine which variant URL to use (matching swatch selection logic)
-
- @param {object} product - The product object
-
- @example
- {% render 'product-card-variant-url', product: product %}
-{%- enddoc -%}
-
-{% liquid
- assign variant_to_link = product.selected_or_first_available_variant
- assign combined_listing_count = product.options_with_values | map: 'values' | map: 'product_url' | compact | size
-
- # For now if it's combined listing, we don't need to do anything.
- unless combined_listing_count > 0
- # Simple direct check: which variant owns the featured image?
- if product.featured_media
- for variant in product.variants
- if variant.featured_media.id == product.featured_media.id
- assign variant_to_link = variant
- break
- endif
- endfor
- endif
- endunless
-%}
-{{- variant_to_link.url -}}
diff --git a/snippets/product-card.liquid b/snippets/product-card.liquid
deleted file mode 100644
index cd65fb150..000000000
--- a/snippets/product-card.liquid
+++ /dev/null
@@ -1,228 +0,0 @@
-{%- doc -%}
- This snippet is used to render a product card.
- It is used in the product block, featured product block, and the product card block.
- The product object is null or when placeholders are rendered.
-
- @param {object} product - The product object
- @param {object} children - The children of the product card
- @param {object} [block] - The block object
- @param {number} [product_card_gap] - The gap between the product card children (overrides block settings)
-{%- enddoc -%}
-
-{% assign block_settings = block.settings %}
-
-{% style %}
- {% if request.visual_preview_mode %}
- product-card-link {
- width: 100%;
- min-width: 250px;
- }
- {% endif %}
-{% endstyle %}
-
-{% liquid
- assign has_quick_add = false
- if settings.quick_add and product.available
- assign has_quick_add = true
- endif
-
- assign has_mobile_quick_add = false
- if has_quick_add and settings.mobile_quick_add
- assign has_mobile_quick_add = true
- endif
-
- assign product_card_id = 'product-card-link-' | append: block.id | append: '-' | append: product.id
- assign product_card_gap_value = product_card_gap | default: block_settings.product_card_gap
-
- # Logic to determine which variant URL to use (matching swatch selection logic)
- assign variant_to_link = product.selected_or_first_available_variant
- assign combined_listing_count = product.options_with_values | map: 'values' | map: 'product_url' | compact | size
- assign no_swatch_selected = null
-
- unless combined_listing_count > 0
- # Simple direct check: which variant owns the featured image?
- if product.featured_media
- assign found_variant = false
-
- for variant in product.variants
- if variant.featured_media.id == product.featured_media.id
- assign variant_to_link = variant
- assign found_variant = true
- break
- endif
- endfor
-
- # Check if we need to set no_swatch_selected
- unless found_variant
- # Featured image is not a variant image
- # Check if product has swatches
- for option in product.options_with_values
- assign swatch_count = option.values | map: 'swatch' | compact | size
- if swatch_count > 1
- # Multiple swatches exist but featured image doesn't match any
- assign no_swatch_selected = true
- break
- endif
- endfor
- endunless
- endif
- endunless
-
- if settings.transition_to_main_product
- assign featured_image = variant_to_link.featured_image
- if featured_image == blank
- assign featured_image = product.featured_media.preview_image
- endif
-
- if featured_image != blank
- assign featured_media_url = featured_image | image_url: width: 500
- endif
- endif
-
- assign onboarding = false
- if product.id == empty or product == blank
- assign onboarding = true
- endif
-%}
-
-{%- if settings.transition_to_main_product -%}
-
- {%- if product.available == false -%}
- {{ 'content.product_badge_sold_out' | t }}
- {%- elsif product.compare_at_price > product.price -%}
- {{ 'content.product_badge_sale' | t }}
- {%- endif -%}
-
- {%- endif -%}
-
- {{ children }}
-
-
-
-
-{% comment %}
- This script is used to set the grid view on the product grid stored in sessionStorage. Keeping it here helps us prevent seeing the default state.
-{% endcomment %}
-{% unless request.design_mode %}
-
-{% endunless %}
-
-{% stylesheet %}
- .product-grid {
- --product-grid-gap: var(--product-grid-gap-mobile);
-
- isolation: isolate;
-
- @media screen and (min-width: 750px) {
- --product-grid-gap: var(--product-grid-gap-desktop);
- }
- }
-
- .product-grid slideshow-arrows .slideshow-control {
- display: none;
-
- @media screen and (min-width: 750px) {
- display: grid;
- }
- }
-
- /* This triggers iOS < 16.4 */
- @supports not (background-color: rgb(from red 150 g b / alpha)) {
- /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
- .product-grid .product-media,
- .product-grid .product-media-container {
- aspect-ratio: auto;
- }
- }
-
- .main-collection-grid {
- padding: var(--grid--margin--mobile);
-
- @media screen and (min-width: 750px) {
- padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
- }
- }
-
- .main-collection-grid__empty {
- padding-block: var(--padding-6xl);
- padding-inline: var(--page-margin);
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- gap: var(--padding-sm);
- }
-
- .main-collection-grid__empty-title {
- margin: 0;
- }
-
- .collection-wrapper--full-width .main-collection-grid__title {
- margin-left: var(--page-margin);
- }
-
- .collection-wrapper--full-width-on-mobile .main-collection-grid__title {
- @media screen and (max-width: 749px) {
- margin-left: var(--page-margin);
- }
- }
-{% endstylesheet %}
diff --git a/snippets/product-media.liquid b/snippets/product-media.liquid
deleted file mode 100644
index 980d9214c..000000000
--- a/snippets/product-media.liquid
+++ /dev/null
@@ -1,214 +0,0 @@
-{%- doc -%}
- Renders a product media component.
-
- @param {object} media - The product media object.
- @param {boolean} [preview_image_only] - Renders only the preview image without controls.
- @param {string} [widths] - Image widths for responsive images.
- @param {string} [sizes] - Image sizes for responsive images.
- @param {string} [loading] - The loading attribute for the image.
- @param {object} [block] - The block object.
- @param {object} [section] - The section object.
- @param {object} [selected_product] - The currently selected product.
- @param {boolean} [first_3d_model] - Indicates if this is the first 3D model.
- @param {boolean} [is_main_product_media] - Indicates if this is the main product image.
-
- @example
- {% render 'product-media', media: media, preview_image_only: false, loading: 'lazy' %}
-{%- enddoc -%}
-
-{% liquid
- assign widths = widths | default: '240, 352, 832, 1200, 1600, 1920, 2560, 3840'
-%}
-
-
- {% if products.size == 0 %}
-
-
-
- {% else %}
-
-
- {% if title %}
- {{ title }}
- {% endif %} --
- {{ children }}
-
- {% liquid
- assign high_res_url = media.preview_image | image_url: width: 3840
- assign fetch_priority = 'auto'
- if is_main_product_media
- assign fetch_priority = 'high'
- endif
- assign focal_point_style = '--focal-point: ' | append: media.presentation.focal_point | append: ';'
- %}
- {{
- media.preview_image
- | image_url: width: 3840
- | image_tag:
- widths: widths,
- alt: media.alt,
- sizes: sizes,
- loading: loading,
- class: 'product-media__image',
- transitionToProduct: settings.transition_to_main_product,
- data_max_resolution: high_res_url,
- fetchpriority: fetch_priority,
- style: focal_point_style
- }}
-
- {% unless preview_image_only %}
- {%- case media.media_type -%}
- {% when 'model' %}
-
-
-
-
- {% # Should I be using media_tag here instead like on Dawn? 🤔 %}
- {{ media | model_viewer_tag }}
-
-
-
-
- {%- if first_3d_model -%}
-
- {%- endif -%}
- {% when 'video', 'external_video' %}
- {%- render 'video',
- video: media,
- video_loop: block.settings.video_loop,
- widths: widths,
- sizes: sizes,
- loading: loading,
- disable_controls: true,
- section_id: section.id
- -%}
- {% endcase %}
- {% endunless %}
-
-
-{% stylesheet %}
- .product-media {
- aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
- min-height: 0;
- min-width: 0;
- }
-
- .product-media__image {
- object-position: var(--focal-point, center center);
- }
-
- /*** Media border-radius feature ****/
- @media screen and (min-width: 750px) {
- .media-gallery--carousel slideshow-container,
- .media-gallery--grid .product-media > * {
- border-radius: var(--media-radius, 0);
- overflow: hidden;
- }
-
- /* When the CAROUSEL is on the LEFT side */
- .product-information:not(.product-information--media-right)
- .media-gallery--carousel.media-gallery--extend
- slideshow-container {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
-
- /* When the CAROUSEL is on the RIGHT side */
- .product-information.product-information--media-right
- .media-gallery--carousel.media-gallery--extend
- slideshow-container {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
-
- /* When the GRID is on the LEFT side */
- .product-information:not(.product-information--media-right) {
- /* One column */
- .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
- /* Two column, small first image */
- .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
- .product-media-container:nth-of-type(odd)
- .product-media
- > *,
- /* Two column, large first image */
- .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
- .product-media-container:is(:first-of-type, :nth-of-type(even))
- .product-media
- > * {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
- }
- }
-
- /* When the GRID is on the RIGHT side */
- .product-information.product-information--media-right {
- /* One column */
- .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
- /* Two column, small first image */
- .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
- .product-media-container:nth-of-type(even)
- .product-media
- > *,
- /* Two column, large first image */
- .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
- .product-media-container:is(:first-of-type, :nth-of-type(odd))
- .product-media
- > * {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
- }
- }
-
- ::view-transition-old(gallery-item),
- ::view-transition-new(gallery-item) {
- animation-duration: 0ms;
- }
-{% endstylesheet %}
diff --git a/snippets/quantity-selector.liquid b/snippets/quantity-selector.liquid
deleted file mode 100644
index b42c87a9d..000000000
--- a/snippets/quantity-selector.liquid
+++ /dev/null
@@ -1,74 +0,0 @@
-{%- doc -%}
- This snippet is used to render the quantity selector for a product.
- It is used in the product page and the cart page.
-
- @param {object} product - the product to render the quantity selector for
- @param {number} [in_cart_quantity] - the quantity in the cart to set the input value
- @param {number} [line_index] - the index of the forloop representing the line on which the quantity selector is rendered
- @param {number} [min] - the minimum quantity the input supports
- @param {string} [class] - custom class for the quantity selector, optional
- @param {boolean} [can_update_quantity] - whether the quantity can be updated, defaults to true
-{%- enddoc -%}
-
-{% liquid
- assign variant = product.selected_or_first_available_variant
-%}
-
-
- {%- if block_settings.toggle_overlay -%}
- {% render 'overlay', settings: block_settings %}
- {%- endif -%}
-
- {{
- image_resource
- | image_url: width: 3840
- | image_tag: widths: widths, class: 'image-block__image', sizes: sizes, loading: loading
- }}
-
-{% else %}
-
- {%- if block_settings.toggle_overlay -%}
- {% render 'overlay', settings: block_settings %}
- {%- endif -%}
-
-
-{% endif %}
-
-{% stylesheet %}
- .resource-image {
- position: relative;
- display: flex;
- width: 100%;
- height: 100%;
- z-index: var(--layer-base);
- overflow: hidden;
- max-width: 100%;
- max-height: 100%;
- aspect-ratio: var(--ratio);
- }
-
- .resource-image .image-block__image {
- object-fit: cover;
- width: 100%;
- height: 100%;
- }
-
- .resource-image--placeholder {
- width: 100%;
- height: 100%;
- }
-{% endstylesheet %}
diff --git a/snippets/resource-list-carousel.liquid b/snippets/resource-list-carousel.liquid
deleted file mode 100644
index 2dc0bc1ca..000000000
--- a/snippets/resource-list-carousel.liquid
+++ /dev/null
@@ -1,61 +0,0 @@
-{%- doc -%}
- Renders a carousel of predictive search results cards
-
- @param {string} ref - The ref of the slideshow
- @param {object} slides - An array of HTML for the slides to display in the carousel
- @param {number} slide_count - The number of slides to display in the carousel
- @param {object} settings - The block or sections settings from the parent block/section.
- @param {string} [slide_width_max] - The maximum width of the slides in the carousel.
-
- @example
- {% render 'resource-list-carousel', slides: slides, slide_count: slide_count, settings: block.settings %}
-{%- enddoc -%}
-
-{% liquid
- assign slideshow_ref = ref | default: 'resourceListCarousel'
- if settings.section_width == 'page-width'
- assign slideshow_gutters = 'start end'
- else
- assign slideshow_gutters = null
- endif
-%}
-
-{% capture slides %}
- {% for item in slides limit: slides.size %}
- {% render 'slideshow-slide'
- index : forloop.index0,
- children : item,
- class : 'resource-list__slide'
- %}
- {% endfor %}
-{% endcapture %}
-
-{% if settings.icons_style != 'none' %}
- {% capture slideshow_arrows %}
- {% render 'slideshow-arrows', icon_style: settings.icons_style, icon_shape: settings.icons_shape %}
- {% endcapture %}
-{% endif %}
-
-
- {% if content_type == 'articles' %}
- {{ placeholder_name | placeholder_svg_tag: 'blog-placeholder-svg' }}
- {% else %}
- {{ placeholder_name | placeholder_svg_tag }}
- {% endif %}
-
-
- {% render 'slideshow',
- ref: slideshow_ref,
- class: 'resource-list__carousel',
- slides: slides,
- slideshow_arrows: slideshow_arrows,
- auto_hide_controls: false,
- infinite: false,
- initial_slide: 0,
- slide_count: slide_count,
- slideshow_gutters: slideshow_gutters
- %}
-
diff --git a/snippets/resource-list.liquid b/snippets/resource-list.liquid
deleted file mode 100644
index 975597b56..000000000
--- a/snippets/resource-list.liquid
+++ /dev/null
@@ -1,176 +0,0 @@
-{%- doc -%}
- Resource List Component
-
- Renders a complete resource list with automatic layout switching.
- Supports grid, bento, carousel, and editorial layouts with mobile fallbacks.
-
- @param {string} list_items - Raw HTML string of list items for grid layout
- @param {object} list_items_array - Array of list item HTML strings for complex layouts
- @param {object} settings - Section settings object containing layout configuration
- @param {string} [carousel_ref] - Base reference name for carousel components (default: 'resourceListCarousel')
- @param {number} slide_count - Number of slides for carousel layouts
- @param {string} content_type - Type of content: 'products' | 'collections' | 'articles'
- @param {string} [test_id] - Data test ID for the main resource list
-
- @example
- {% render 'resource-list',
- list_items: list_items,
- list_items_array: list_items_array,
- settings: section.settings,
- carousel_ref: 'featuredBlog',
- slide_count: max_items,
- content_type: 'articles',
- test_id: 'collections-list-grid'
- %}
-
- Expected `settings` object properties:
- - layout_type: 'grid' | 'bento' | 'carousel' | 'editorial'
- - columns: Number of columns for grid/carousel
- - mobile_columns: Number of columns on mobile
- - columns_gap: Gap between columns in pixels
- - rows_gap: Gap between rows in pixels (grid only)
- - bento_gap: Gap for bento layout in pixels
- - mobile_card_size: Mobile card size for carousel
- - carousel_on_mobile: Boolean for mobile carousel fallback
-{%- enddoc -%}
-
-{% liquid
- assign list_items = list_items | default: ''
- assign list_items_array = list_items_array | default: empty
- assign settings = settings | default: empty
- assign carousel_ref = carousel_ref | default: 'resourceListCarousel'
- assign slide_count = slide_count | default: 0
- assign content_type = content_type | default: 'collections'
- assign test_id = test_id | default: ''
-
- unless settings != empty
- echo ''
- break
- endunless
-
- assign layout_type = settings.layout_type | default: 'grid'
- assign columns = settings.columns | default: 3
- assign mobile_columns = settings.mobile_columns | default: 2
- assign columns_gap = settings.columns_gap | default: 16
- assign rows_gap = settings.rows_gap | default: 16
- assign bento_gap = settings.bento_gap | default: 16
- assign mobile_card_size = settings.mobile_card_size | default: '60cqw'
- assign slide_width_max = '450px'
-
- case layout_type
- when 'grid'
- assign resource_list_classes = 'resource-list--grid'
- capture resource_list_styles
- echo '--resource-list-column-gap-desktop: ' | append: columns_gap | append: 'px;'
- echo '--resource-list-row-gap-desktop: ' | append: rows_gap | append: 'px;'
- echo '--resource-list-columns: repeat(' | append: columns | append: ', 1fr);'
- echo '--resource-list-columns-mobile: repeat(' | append: mobile_columns | append: ', 1fr);'
- echo '--column-count-mobile: ' | append: mobile_columns | append: ';'
- endcapture
-
- when 'bento'
- assign resource_list_classes = 'resource-list--bento'
- capture resource_list_styles
- echo '--resource-list-column-gap-desktop: ' | append: bento_gap | append: 'px;'
- echo '--bento-gap: var(--resource-list-column-gap);'
- endcapture
-
- when 'carousel'
- assign resource_list_classes = 'resource-list__carousel'
- capture resource_list_styles
- echo '--resource-list-column-gap-desktop: ' | append: columns_gap | append: 'px;'
- echo '--column-count: ' | append: columns | append: ';'
- echo '--column-count-mobile: 1;'
- echo '--mobile-card-size: ' | append: mobile_card_size | append: ';'
- endcapture
-
- when 'editorial'
- assign resource_list_classes = 'resource-list--editorial'
- capture resource_list_styles
- echo '--resource-list-column-gap-desktop: ' | append: columns_gap | append: 'px;'
- endcapture
- endcase
-
- # Trim whitespace from styles
- assign resource_list_styles = resource_list_styles | strip
-%}
-
-
-
-{% comment %} Mobile carousel for non-carousel layouts {% endcomment %}
-{% if settings.layout_type != 'carousel' and settings.carousel_on_mobile %}
- {% liquid
- assign mobile_carousel_gap = settings.columns_gap | default: 16
- if settings.layout_type == 'bento'
- assign mobile_carousel_gap = settings.bento_gap | default: 16
- endif
- %}
-
-
-{% endif %}
diff --git a/snippets/scripts.liquid b/snippets/scripts.liquid
deleted file mode 100644
index 79ea774b9..000000000
--- a/snippets/scripts.liquid
+++ /dev/null
@@ -1,283 +0,0 @@
-
-
-{% if settings.transition_to_main_product %}
- {% # theme-check-disable ParserBlockingScript %}
-
- {% # theme-check-enable %}
-{% endif %}
-
-
-
-
-
-
-
-
-
-{% if template.name == 'collection' or template.name == 'search' %}
-
-
-
-
-{% endif %}
-
-
-
-
-
-
-
-{% if settings.show_add_discount_code %}
-
-{% endif %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% if localization.available_countries.size > 1 or localization.available_languages.size > 1 %}
-
-{% endif %}
-
-{% if template == 'product' %}
-
-{% endif %}
-
-{% if settings.transition_to_main_product %}
-
-{% endif %}
-
-
-
-
diff --git a/snippets/search-modal.liquid b/snippets/search-modal.liquid
deleted file mode 100644
index 3bde8a24f..000000000
--- a/snippets/search-modal.liquid
+++ /dev/null
@@ -1,109 +0,0 @@
-
-
-
-
-
-{% stylesheet %}
- .section-wrapper {
- --section-height-offset: 0px;
- }
-
- .section[data-shopify-visual-preview] {
- min-height: var(--section-preview-height);
- padding-top: 0;
- }
-
- .section[data-shopify-visual-preview] .custom-section-background {
- display: none;
- }
-
- body:has(> #header-group > .header-section > #header-component[transparent]):not(
- :has(> #header-group > .header-section + .shopify-section)
- )
- > main
- > .section-wrapper:first-child {
- --section-height-offset: var(--header-group-height, 0);
- }
-
- .custom-section-background {
- grid-column: 1 / -1;
- }
-
- .custom-section-content {
- z-index: var(--layer-flat);
- }
-{% endstylesheet %}
diff --git a/snippets/size-style.liquid b/snippets/size-style.liquid
deleted file mode 100644
index 1b863451a..000000000
--- a/snippets/size-style.liquid
+++ /dev/null
@@ -1,33 +0,0 @@
-{%- comment -%}
- Intended for blocks and sections that provide values for all the referenced settings.
- Accepts:
- settings: {block.settings || section.settings}
-{%- endcomment -%}
-
-{%- if settings.width == 'custom' -%}
- --size-style-width:
- {{- settings.custom_width }}%;
-{%- elsif settings.width == 'fill' -%}
- --size-style-width: 100%;
-{%- else -%}
- --size-style-width: {{ settings.width }};
-{%- endif -%}
-
-{%- if settings.height == 'custom' -%}
- --size-style-height:
- {{- settings.custom_height }}%;
-{%- elsif settings.height == 'fill' -%}
- --size-style-height: 100%;
-{%- else -%}
- --size-style-height: {{ settings.height }};
-{%- endif -%}
-
-{% if settings.width_mobile == 'custom' %}
- --size-style-width-mobile:
- {{- settings.custom_width_mobile }}%; --size-style-width-mobile-min:
- {{- settings.custom_width_mobile }}%;
-{%- elsif settings.width_mobile == 'fill' -%}
- --size-style-width-mobile: 100%; --size-style-width-mobile-min: 5rem;
-{%- elsif settings.width_mobile == 'fit-content' -%}
- --size-style-width-mobile: {{ settings.width_mobile }}; --size-style-width-mobile-min: {{ settings.width_mobile }};
-{%- endif -%}
diff --git a/snippets/skip-to-content-link.liquid b/snippets/skip-to-content-link.liquid
deleted file mode 100644
index 15d8e34e5..000000000
--- a/snippets/skip-to-content-link.liquid
+++ /dev/null
@@ -1,16 +0,0 @@
-{%- doc -%}
- Renders a skip to content link, visible on focus only.
- Parent element must have position: relative to ensure proper positioning.
-
- @param {string} href - The URL to skip to, usually an id like "#MainContent".
- @param {string} text - The text to display, in the form of a translation key for a locale file.
-
- @example
- {% render 'skip-to-content-link', href: '#MainContent', text: 'Skip to main content' %}
-{%- enddoc -%}
-
- {{ text | t }}
-
diff --git a/snippets/slideshow-arrow.liquid b/snippets/slideshow-arrow.liquid
deleted file mode 100644
index 70c511a9e..000000000
--- a/snippets/slideshow-arrow.liquid
+++ /dev/null
@@ -1,49 +0,0 @@
-{%- doc -%}
- Renders a slideshow arrow control
-
- @param {string} action - { 'previous' | 'next' } The action to perform when the arrow is clicked.
- @param {string} [icon_style] - { 'arrow' | 'chevron' } The style of the icon, defaults to 'arrow'.
- @param {string} [icon_shape] - { 'none' | 'circle' | 'square' } The shape of the icon background, defaults to 'none'.
- @param {string} [icon_size] - { 'small' | 'medium' | 'large' } The size of the icon, defaults to 'medium'.
-
- @example
- {%- render 'slideshow-arrow', action: 'previous' -%}
-{%- enddoc -%}
-
-{%- liquid
- assign icon_name = 'arrow'
- assign style = icon_style | default: 'arrow'
- assign shape = icon_shape | default: 'none'
-
- if icon_style contains 'chevron'
- assign icon_name = 'caret'
- endif
-
- if icon_style contains 'large'
- assign icon_size = 'large'
- endif
--%}
-
-
diff --git a/snippets/slideshow-arrows.liquid b/snippets/slideshow-arrows.liquid
deleted file mode 100644
index 5f32be972..000000000
--- a/snippets/slideshow-arrows.liquid
+++ /dev/null
@@ -1,29 +0,0 @@
-{%- doc -%}
- Renders arrow controls for a slideshow component.
- Assumes arrows are placed on top of media.
- When icon shape is 'none', component uses mixed-blend-mode to ensure visibility.
-
- @param {string} [class] - The class name to apply to the slideshow-arrows component
- @param {string} [icon_style] - The style of the icon, defaults to 'arrow'
- @param {string} [icon_shape] - The shape of the icon background (none, circle, square), defaults to 'none'
- @param {string} [arrows_position] - { 'left' | 'center' | 'right' } The position of the arrows, defaults to 'center'
-
- @example
- {%- render 'slideshow-arrows' -%}
-{%- enddoc -%}
-
-{%- liquid
- if arrows_position == null
- assign arrows_position = 'center'
- endif
--%}
-
-
- {% render 'background-media',
- background_media: section.settings.background_media,
- background_video: section.settings.video,
- background_video_position: section.settings.video_position,
- background_image: section.settings.background_image,
- background_image_position: section.settings.background_image_position
- %}
-
-
-
- {% if section.settings.toggle_overlay %}
- {% render 'overlay', settings: section.settings, layer: '0' %}
- {% endif %}
-
-
-
-
- {% for option in results.sort_options %}
-
- {% endfor %}
-
-
- - - {{- 'actions.sort' | t -}} - - - {{- status -}} - - - {{- 'icon-caret.svg' | inline_asset_content -}} - -
-
-
- Accepts:
- settings: {block.settings || section.settings}
-{%- endcomment -%}
-
---padding-block-start: {{ settings.padding-block-start | default: 0 }}px; --padding-block-end:{{- settings.padding-block-end | default: 0 -}}px;
---padding-inline-start:{{ settings.padding-inline-start | default: 0 }}px; --padding-inline-end:{{- settings.padding-inline-end | default: 0 -}}px;
diff --git a/snippets/spacing-style.liquid b/snippets/spacing-style.liquid
deleted file mode 100644
index bfbc62173..000000000
--- a/snippets/spacing-style.liquid
+++ /dev/null
@@ -1,36 +0,0 @@
-{%- doc -%}
- Renders CSS variables for spacing (padding and margin) styles with responsive scaling.
- Intended for blocks and sections that provide values for all the referenced settings.
-
- @param {object} settings - The block or section settings object containing spacing values
-
- @example
-
-{%- enddoc -%}
-{%- liquid
- assign scale_min = 20
- assign keys = 'padding-block-start,padding-block-end,padding-inline-start,padding-inline-end' | split: ','
-
- for key in keys
- assign value = settings[key]
-
- if value != blank
- echo '--'
- echo key
- echo ': '
-
- if value > scale_min
- echo 'max('
- echo scale_min
- echo 'px, calc(var(--spacing-scale) * '
- echo value
- echo 'px))'
- else
- echo value
- echo 'px'
- endif
-
- echo ';'
- endif
- endfor
--%}
diff --git a/snippets/strikethrough-variant.liquid b/snippets/strikethrough-variant.liquid
deleted file mode 100644
index f5e85ee2a..000000000
--- a/snippets/strikethrough-variant.liquid
+++ /dev/null
@@ -1,11 +0,0 @@
-{% unless product_option.available %}
-
-{% endunless %}
diff --git a/snippets/stylesheets.liquid b/snippets/stylesheets.liquid
deleted file mode 100644
index 88668ee40..000000000
--- a/snippets/stylesheets.liquid
+++ /dev/null
@@ -1,2 +0,0 @@
-{{ 'overflow-list.css' | asset_url | preload_tag: as: 'style' }}
-{{ 'base.css' | asset_url | stylesheet_tag: preload: true }}
diff --git a/snippets/submenu-font-styles.liquid b/snippets/submenu-font-styles.liquid
deleted file mode 100644
index 92d071c7c..000000000
--- a/snippets/submenu-font-styles.liquid
+++ /dev/null
@@ -1,48 +0,0 @@
-{%- comment -%}
- Derives CSS variables from the menu typography settings for 2nd and 3rd level menu items.
- Accepts:
- settings: {block.settings}
-{%- endcomment -%}
-
---menu-parent-font-family: var(--font-{{ settings.type_font_primary_link }}--family); --menu-parent-font-style:
-var(--font-
-{{- settings.type_font_primary_link -}}
---style); --menu-parent-font-weight: var(--font-
-{{- settings.type_font_primary_link -}}
---weight); --menu-parent-font-case:
-{% if settings.type_case_primary_link == 'uppercase' %}uppercase{% else %}none{% endif %};
-{% case settings.menu_font_style %}
- {% when 'regular' %}
- --menu-parent-font-size: var(--menu-font-md--size); --menu-parent-font-line-height:
- var(--menu-font-md--line-height); --menu-parent-font-color: var(--color-foreground);
- --menu-parent-active-font-color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
- {% when 'inverse' %}
- --menu-parent-font-size: var(--menu-font-sm--size); --menu-parent-font-line-height:
- var(--menu-font-sm--line-height); --menu-parent-font-color: rgb(var(--color-foreground-rgb) /
- var(--opacity-subdued-text)); --menu-parent-active-font-color: var(--color-foreground);
- {% when 'inverse_large' %}
- --menu-parent-font-size: var(--menu-font-sm--size); --menu-parent-font-line-height:
- var(--menu-font-sm--line-height); --menu-parent-font-color: rgb(var(--color-foreground-rgb) /
- var(--opacity-subdued-text)); --menu-parent-active-font-color: var(--color-foreground);
-{% endcase %}
---menu-child-font-family: var(--font-{{ settings.type_font_primary_link }}--family); --menu-child-font-style:
-var(--font-
-{{- settings.type_font_primary_link -}}
---style); --menu-child-font-weight: var(--font-
-{{- settings.type_font_primary_link -}}
---weight); --menu-child-font-case:
-{% if settings.type_case_primary_link == 'uppercase' %}uppercase{% else %}none{% endif %};
-{% case settings.menu_font_style %}
- {% when 'regular' %}
- --menu-child-font-size: var(--menu-font-sm--size); --menu-child-font-line-height: var(--menu-font-sm--line-height);
- --menu-child-font-color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
- --menu-child-active-font-color: var(--color-foreground);
- {% when 'inverse' %}
- --menu-child-font-size: var(--menu-font-md--size); --menu-child-font-line-height: var(--menu-font-md--line-height);
- --menu-child-font-color: var(--color-foreground); --menu-child-active-font-color: rgb(var(--color-foreground-rgb) /
- var(--opacity-subdued-text));
- {% when 'inverse_large' %}
- --menu-child-font-size: var(--menu-font-xl--size); --menu-child-font-line-height: var(--menu-font-xl--line-height);
- --menu-child-font-color: var(--color-foreground); --menu-child-active-font-color: rgb(var(--color-foreground-rgb) /
- var(--opacity-subdued-text));
-{% endcase %}
diff --git a/snippets/swatch.liquid b/snippets/swatch.liquid
deleted file mode 100644
index a8bf87d28..000000000
--- a/snippets/swatch.liquid
+++ /dev/null
@@ -1,41 +0,0 @@
-{%- doc -%}
- Renders a swatch
-
- @param {object} swatch - a swatch object
- @param {object} [variant_image] - an alternate image
- @param {string} [mode] - one of 'unscaled' or 'filter'
-
- @example
- {% render 'swatch', swatch: swatch, variant_image: variant_image, mode: 'unscaled' %}
-{%- enddoc -%}
-
-{% liquid
- assign swatch_value = null
- if settings.show_variant_image and variant_image
- assign swatch_image_width = settings.variant_swatch_width | times: 2
- assign swatch_image_url = variant_image | image_url: width: swatch_image_width
- assign swatch_value = 'url(' | append: swatch_image_url | append: ')'
- elsif swatch.image
- assign swatch_image_url = swatch.image | image_url: width: 80
- assign swatch_value = 'url(' | append: swatch_image_url | append: ')'
- elsif swatch.color
- assign swatch_value = 'rgb(' | append: swatch.color.rgb | append: ')'
- endif
-
- case mode
- when 'unscaled'
- assign extra_classes = ' swatch--unscaled'
- when 'filter'
- assign extra_classes = ' swatch--filter'
- when 'pill'
- assign extra_classes = ' swatch--pill'
- else
- assign extra_classes = ''
- endcase
-%}
-
-
-
diff --git a/snippets/tax-info.liquid b/snippets/tax-info.liquid
deleted file mode 100644
index 3c16eaee0..000000000
--- a/snippets/tax-info.liquid
+++ /dev/null
@@ -1,84 +0,0 @@
-{%- comment -%}
- Intended for use in a block similar to the text block.
-
- Accepts:
- has_discounts_enabled: {boolean} - whether discounts are enabled
-{%- endcomment -%}
-
-
- {%- if cart.duties_included and cart.taxes_included -%}
- {%- if shop.shipping_policy.body == blank -%}
- {%- if has_discounts_enabled -%}
- {{ 'content.duties_and_taxes_included_shipping_at_checkout_without_policy_without_discounts' | t }}
- {%- else -%}
- {{ 'content.duties_and_taxes_included_shipping_at_checkout_without_policy' | t }}
- {%- endif -%}
- {%- else -%}
- {%- if has_discounts_enabled -%}
- {{
- 'content.duties_and_taxes_included_shipping_at_checkout_with_policy_without_discounts_html'
- | t: link: shop.shipping_policy.url
- }}
- {%- else -%}
- {{
- 'content.duties_and_taxes_included_shipping_at_checkout_with_policy_html'
- | t: link: shop.shipping_policy.url
- }}
- {%- endif -%}
- {%- endif -%}
- {%- elsif cart.duties_included == false and cart.taxes_included -%}
- {%- if shop.shipping_policy.body == blank -%}
- {%- if has_discounts_enabled -%}
- {{ 'content.duties_and_taxes_included_shipping_at_checkout_without_policy_without_discounts' | t }}
- {%- else -%}
- {{ 'content.taxes_included_shipping_at_checkout_without_policy' | t }}
- {%- endif -%}
- {%- else -%}
- {%- if has_discounts_enabled -%}
- {{
- 'content.duties_and_taxes_included_shipping_at_checkout_with_policy_without_discounts_html'
- | t: link: shop.shipping_policy.url
- }}
- {%- else -%}
- {{ 'content.taxes_included_shipping_at_checkout_with_policy_html' | t: link: shop.shipping_policy.url }}
- {%- endif -%}
- {%- endif -%}
- {%- elsif cart.duties_included and cart.taxes_included == false -%}
- {%- if shop.shipping_policy.body == blank -%}
- {%- if has_discounts_enabled -%}
- {{ 'content.duties_included_taxes_at_checkout_shipping_at_checkout_without_policy_without_discounts' | t }}
- {%- else -%}
- {{ 'content.duties_included_taxes_at_checkout_shipping_at_checkout_without_policy' | t }}
- {%- endif -%}
- {%- else -%}
- {%- if has_discounts_enabled -%}
- {{
- 'content.duties_included_taxes_at_checkout_shipping_at_checkout_with_policy_without_discounts_html'
- | t: link: shop.shipping_policy.url
- }}
- {%- else -%}
- {{
- 'content.duties_included_taxes_at_checkout_shipping_at_checkout_with_policy_html'
- | t: link: shop.shipping_policy.url
- }}
- {%- endif -%}
- {%- endif -%}
- {%- elsif cart.duties_included == false and cart.taxes_included == false -%}
- {%- if shop.shipping_policy.body == blank -%}
- {%- if has_discounts_enabled -%}
- {{ 'content.taxes_at_checkout_shipping_at_checkout_without_policy_without_discounts' | t }}
- {%- else -%}
- {{ 'content.taxes_at_checkout_shipping_at_checkout_without_policy' | t }}
- {%- endif -%}
- {%- else -%}
- {%- if has_discounts_enabled -%}
- {{
- 'content.taxes_at_checkout_shipping_at_checkout_with_policy_without_discounts_html'
- | t: link: shop.shipping_policy.url
- }}
- {%- else -%}
- {{ 'content.taxes_at_checkout_shipping_at_checkout_with_policy_html' | t: link: shop.shipping_policy.url }}
- {%- endif -%}
- {%- endif -%}
- {%- endif -%}
-
diff --git a/snippets/text.liquid b/snippets/text.liquid
deleted file mode 100644
index f5526be2e..000000000
--- a/snippets/text.liquid
+++ /dev/null
@@ -1,218 +0,0 @@
-{%- doc -%}
- Intended for use in a block similar to the text block.
-
- @param {string} [class] - custom class to define in addition to text-block classes
- @param {string} [fallback_text] - fallback text if settings.text does not exist
- @param {object} [block] - The block object
- @param {string} [width] - width of the text block
-{%- enddoc -%}
-
-{% liquid
- assign block_settings = block.settings
- assign plain_text = block_settings.text | strip_newlines | strip_html | strip
- assign text_width = width | default: block_settings.width
-
- if block_settings.font_size contains 'heading-lg' or block_settings.font_size contains 'heading-xl'
- assign type = 'display'
- elsif block_settings.font_size contains 'heading'
- assign type = 'heading'
- else
- assign type = 'body'
- endif
- if block_settings.type_preset == 'rte' or block_settings.type_preset == 'paragraph'
- assign is_rte = true
- endif
-
- capture text_block_classes
- if text_width == '100%'
- echo 'text-block--align-' | append: block_settings.alignment
- if block_settings.max_width == 'none'
- echo ' text-block--full-width '
- endif
- endif
- if block_settings.type_preset == 'custom'
- echo ' custom-typography '
- if block_settings.font_size != ''
- echo ' custom-font-size '
- endif
- if block_settings.color != ''
- echo ' custom-color '
- endif
- endif
- if block_settings.background
- echo ' text-block--background '
- endif
- if is_rte
- echo ' rte '
- endif
- endcapture
-%}
-
-{% capture attributes %}
- class="{{ class }} spacing-style text-block text-block--{{ block.id }} {{ block_settings.type_preset }}
- {{ text_block_classes }}
- "
-
- style="
- {% render 'spacing-padding', settings: block_settings %}
- {% render 'typography-style', settings: block_settings %}
- --width: {{ text_width }};
- --max-width: var(--max-width--{{ type }}-{{ block_settings.max_width }});
- {% if text_width == "100%" %}
- --text-align: {{ block_settings.alignment }};
- {% endif %}
- {% if block_settings.background %}
- --text-background-color: {{ block_settings.background_color | default: 'rgb(255 255 255 / 1.0)' }};
- --text-corner-radius: {{ block_settings.corner_radius }}px;
- --text-padding: max(var(--padding-2xs), calc((var(--text-corner-radius) + var(--padding-xs)) * (1 - cos(45deg))));
- {% endif %}
- "
-
- {{ block.shopify_attributes }}
-{% endcapture %}
-{% liquid
- # {{ attributes }} must be on the immediate HTML parent of the text to preserve
- # the click-to-edit connection in the theme editor. Any break between the text,
- # including if-statements, will break the connection.
-
- assign element = 'div'
- if is_rte
- assign element = 'rte-formatter'
- endif
-%}
-
-{% if fallback_text != blank and plain_text == blank %}
-
- {{ fallback_text }}
-
-{% elsif plain_text != blank %}
- <{{ element }} {{ attributes }}>
- {{ block.settings.text }}
-
-{% endif %}
-
-{% stylesheet %}
- :root {
- --text-align-default: left;
- }
-
- [style*='--horizontal-alignment: center'] .text-block {
- --text-align-default: center;
- }
-
- [style*='--horizontal-alignment: flex-end'] .text-block {
- --text-align-default: right;
- }
-
- [style*='--horizontal-alignment: flex-start'] > .text-block {
- --text-align-default: left;
- }
-
- [style*='--horizontal-alignment: center'] > .text-block {
- --text-align-default: center;
- }
-
- [style*='--horizontal-alignment: flex-end'] > .text-block {
- --text-align-default: right;
- }
-
- .text-block {
- width: var(--width);
- max-width: 100%;
- display: flex;
- flex-direction: column;
- align-items: var(--horizontal-alignment);
- }
-
- .text-block > * {
- width: var(--width);
- max-width: var(--max-width, 100%);
- text-align: var(--text-align, var(--text-align-default));
- text-wrap: var(--text-wrap);
- }
-
- .text-block:not(.text-block--full-width).rte,
- .text-block:not(.text-block--full-width).paragraph {
- /* Safari doesn't support pretty, so fallback to balance */
- text-wrap: balance;
- text-wrap: pretty;
- }
-
- .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
- text-wrap: balance;
- }
-
- /* Hide underline unless text is using paragraph styles. */
- .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
- text-decoration-color: transparent;
- }
-
- .text-block h1,
- .text-block.h1 > * {
- margin-block: var(--font-h1--spacing);
- }
-
- .text-block h2,
- .text-block.h2 > * {
- margin-block: var(--font-h2--spacing);
- }
-
- .text-block h3,
- .text-block.h3 > * {
- margin-block: var(--font-h3--spacing);
- }
-
- .text-block h4,
- .text-block.h4 > * {
- margin-block: var(--font-h4--spacing);
- }
-
- .text-block h5,
- .text-block.h5 > * {
- margin-block: var(--font-h5--spacing);
- }
-
- .text-block h6,
- .text-block.h6 > * {
- margin-block: var(--font-h6--spacing);
- }
-
- .text-block p,
- .text-block.p > * {
- margin-block: var(--font-paragraph--spacing);
- }
-
- .text-block > *:first-child {
- margin-block-start: 0;
- }
-
- .text-block > *:last-child {
- margin-block-end: 0;
- }
-
- .text-block--align-center,
- .text-block--align-center > * {
- margin-inline: auto;
- }
-
- .text-block--align-right,
- .text-block--align-right > * {
- margin-inline-start: auto;
- }
-
- .text-block--background {
- background-color: var(--text-background-color);
- border-radius: var(--text-corner-radius);
-
- /* To avoid text being cropped when using a border radius we add a minimum padding. */
- padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
- padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
- padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
- padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
- }
-
- .custom-color,
- .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
- color: var(--color);
- }
-{% endstylesheet %}
diff --git a/snippets/theme-editor.liquid b/snippets/theme-editor.liquid
deleted file mode 100644
index c34f0907d..000000000
--- a/snippets/theme-editor.liquid
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/snippets/theme-styles-variables.liquid b/snippets/theme-styles-variables.liquid
deleted file mode 100644
index cda55ed00..000000000
--- a/snippets/theme-styles-variables.liquid
+++ /dev/null
@@ -1,566 +0,0 @@
-{% style %}
- {%- liquid
- assign primary_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
- assign primary_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
- assign primary_font_bold_italic = primary_font_bold | font_modify: 'style', 'italic'
- %}
-
- {{ settings.type_body_font | font_face: font_display: 'swap' }}
- {{ primary_font_bold | font_face: font_display: 'swap' }}
- {{ primary_font_italic | font_face: font_display: 'swap' }}
- {{ primary_font_bold_italic | font_face: font_display: 'swap' }}
-
- {% if settings.type_subheading_font != settings.type_body_font %}
- {%- liquid
- assign secondary_font_bold = settings.type_subheading_font | font_modify: 'weight', 'bold'
- assign secondary_font_italic = settings.type_subheading_font | font_modify: 'style', 'italic'
- assign secondary_font_bold_italic = secondary_font_bold | font_modify: 'style', 'italic'
- %}
-
- {{ settings.type_subheading_font | font_face: font_display: 'swap' }}
- {{ secondary_font_bold | font_face: font_display: 'swap' }}
- {{ secondary_font_italic | font_face: font_display: 'swap' }}
- {{ secondary_font_bold_italic | font_face: font_display: 'swap' }}
- {% endif %}
-
- {% if settings.type_heading_font != settings.type_body_font and settings.type_heading_font != settings.type_subheading_font %}
- {%- liquid
- assign tertiary_font_bold = settings.type_heading_font | font_modify: 'weight', 'bold'
- assign tertiary_font_italic = settings.type_heading_font | font_modify: 'style', 'italic'
- assign tertiary_font_bold_italic = tertiary_font_bold | font_modify: 'style', 'italic'
- %}
-
- {{ settings.type_heading_font | font_face: font_display: 'swap' }}
- {{ tertiary_font_bold | font_face: font_display: 'swap' }}
- {{ tertiary_font_italic | font_face: font_display: 'swap' }}
- {{ tertiary_font_bold_italic | font_face: font_display: 'swap' }}
- {% endif %}
-
- {% if settings.type_accent_font != settings.type_body_font and settings.type_accent_font != settings.type_subheading_font and settings.type_accent_font != settings.type_heading_font %}
- {%- liquid
- assign accent_font_bold = settings.type_accent_font | font_modify: 'weight', 'bold'
- assign accent_font_italic = settings.type_accent_font | font_modify: 'style', 'italic'
- assign accent_font_bold_italic = accent_font_bold | font_modify: 'style', 'italic'
- %}
-
- {{ settings.type_accent_font | font_face: font_display: 'swap' }}
- {{ accent_font_bold | font_face: font_display: 'swap' }}
- {{ accent_font_italic | font_face: font_display: 'swap' }}
- {{ accent_font_bold_italic | font_face: font_display: 'swap' }}
- {% endif %}
-
- :root {
- /* Page Layout */
- --sidebar-width: 25rem;
- --narrow-content-width: 36rem;
- --normal-content-width: 42rem;
- --wide-content-width: 46rem;
- --narrow-page-width: 90rem;
- --normal-page-width: 120rem;
- --wide-page-width: 150rem;
-
- /* Section Heights */
- --section-height-small: 15rem;
- --section-height-medium: 25rem;
- --section-height-large: 35rem;
-
- @media screen and (min-width: 40em) {
- --section-height-small: 40svh;
- --section-height-medium: 55svh;
- --section-height-large: 70svh;
- }
-
- @media screen and (min-width: 60em) {
- --section-height-small: 50svh;
- --section-height-medium: 65svh;
- --section-height-large: 80svh;
- }
-
- /* Letter spacing */
- --letter-spacing-sm: 0.06em;
- --letter-spacing-md: 0.13em;
-
- /* Font families */
- --font-body--family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
- --font-body--style: {{ settings.type_body_font.style }};
- --font-body--weight: {{ settings.type_body_font.weight }};
- --font-subheading--family: {{ settings.type_subheading_font.family }}, {{ settings.type_subheading_font.fallback_families }};
- --font-subheading--style: {{ settings.type_subheading_font.style }};
- --font-subheading--weight: {{ settings.type_subheading_font.weight }};
- --font-heading--family: {{ settings.type_heading_font.family }}, {{ settings.type_heading_font.fallback_families }};
- --font-heading--style: {{ settings.type_heading_font.style }};
- --font-heading--weight: {{ settings.type_heading_font.weight }};
- --font-accent--family: {{ settings.type_accent_font.family }}, {{ settings.type_accent_font.fallback_families }};
- --font-accent--style: {{ settings.type_accent_font.style }};
- --font-accent--weight: {{ settings.type_accent_font.weight }};
-
- /* Margin sizes */
- --font-h1--spacing: 0.25em;
- --font-h2--spacing: 0.25em;
- --font-h3--spacing: 0.25em;
- --font-h4--spacing: 0.25em;
- --font-h5--spacing: 0.25em;
- --font-h6--spacing: 0.25em;
- --font-paragraph--spacing: 0.5em;
-
- /* Heading colors */
- --font-h1--color: var(--color-foreground-heading);
- --font-h2--color: var(--color-foreground-heading);
- --font-h3--color: var(--color-foreground-heading);
- --font-h4--color: var(--color-foreground-heading);
- --font-h5--color: var(--color-foreground-heading);
- --font-h6--color: var(--color-foreground-heading);
-
- /** Z-Index / Layering */
- --layer-section-background: -2;
- --layer-lowest: -1;
- --layer-base: 0;
- --layer-flat: 1;
- --layer-raised: 2;
- --layer-heightened: 4;
- --layer-sticky: 8;
- --layer-window-overlay: 10;
- --layer-header-menu: 12;
- --layer-overlay: 16;
- --layer-menu-drawer: 18;
- --layer-temporary: 20;
-
- /* Max-width / Measure */
- --max-width--body-normal: 50ch;
- --max-width--body-narrow: 35ch;
-
- --max-width--heading-normal: 50ch;
- --max-width--heading-narrow: 30ch;
-
- --max-width--display-normal: 20ch;
- --max-width--display-narrow: 15ch;
- --max-width--display-tight: 5ch;
-
- /* Letter-spacing / Tracking */
- --letter-spacing--display-tight: -0.03em;
- --letter-spacing--display-normal: 0em;
- --letter-spacing--display-loose: 0.03em;
-
- --letter-spacing--heading-tight: -0.03em;
- --letter-spacing--heading-normal: 0em;
- --letter-spacing--heading-loose: 0.03em;
-
- --letter-spacing--body-tight: -0.03em;
- --letter-spacing--body-normal: 0em;
- --letter-spacing--body-loose: 0.03em;
-
- /* Line height / Leading */
- --line-height: 1;
-
- --line-height--display-tight: 1;
- --line-height--display-normal: 1.1;
- --line-height--display-loose: 1.2;
-
- --line-height--heading-tight: 1.15;
- --line-height--heading-normal: 1.25;
- --line-height--heading-loose: 1.35;
-
- --line-height--body-tight: 1.2;
- --line-height--body-normal: 1.4;
- --line-height--body-loose: 1.6;
-
- /* Typography presets */
- {% liquid
- assign font_sizes = "paragraph, h1, h2, h3, h4, h5, h6" | split: ", "
- assign fluid_size_cutoff = 48
- assign absolute_font_size_min = 10
-
- comment
- Build an array of font sizes and sort it
- endcomment
- assign font_size_values = ''
- for font_size in font_sizes
- assign size_setting = 'type_size_[font_size]' | replace: '[font_size]', font_size
- assign size_setting_value = settings[size_setting] | times: 1
-
- comment
- If the font size is less than 100, pad it with a 0
- This is because we end up with an array of strings, which | sort filter can't order "correctly")
- endcomment
- if size_setting_value < 100
- assign size_setting_value = '0[size_setting_value]' | replace: '[size_setting_value]', size_setting_value
- endif
-
- assign font_size_values = font_size_values | append: '[size_setting_value],' | replace: '[size_setting_value]', size_setting_value
- endfor
-
- assign font_size_values = font_size_values | split: ',' | uniq | sort_natural
-
- comment
- For each font size S, find the next smaller size S-1, and determine the minimum for S
- The calculation depends on the size of S-1 (over or under the cutoff)
- endcomment
- for font_size in font_sizes
- assign size_setting = 'type_size_[font_size]' | replace: '[font_size]', font_size
- assign font_size_value = settings[size_setting] | times: 1
- assign font_size_string = '[font_size_value]' | replace: '[font_size_value]', font_size_value
- assign index = font_size_values | find_index: font_size_string
-
- if font_size_value >= fluid_size_cutoff
-
- comment
- Calculate the minimum size for each font size
- endcomment
- assign fluid_font_size_min = font_size_value
-
- if index == 0
- assign fluid_font_size_min = absolute_font_size_min
- else
- assign next_font_size_index = index | minus: 1
- assign next_font_size_value = font_size_values[next_font_size_index]
- assign next_font_size_value_number = next_font_size_value | times: 1
-
- comment
- If the next bigger font size under the fluid cutoff, we use keep a 4px buffer
- endcomment
- if next_font_size_value_number < fluid_size_cutoff
- assign fluid_font_size_min = next_font_size_value_number | plus: 4
- if font_size_value < fluid_font_size_min
- assign fluid_font_size_min = font_size_value
- endif
- else
- assign fluid_font_size_min = next_font_size_value | times: 1
- endif
- endif
-
- comment
- Calculate the fluid and maximum size for each font size
- endcomment
- assign fluid_size_min_rem = fluid_font_size_min | divided_by: 16.0
- assign fluid_size = font_size_value | times: 0.1
- assign fluid_size_max_rem = font_size_value | divided_by: 16.0
-
- echo '--font-size--[font_size]: clamp([fluid_size_min_rem]rem, [fluid_size]vw, [fluid_size_max_rem]rem);' | replace: '[font_size]', font_size | replace: '[fluid_size_min_rem]', fluid_size_min_rem | replace: '[fluid_size]', fluid_size | replace: '[fluid_size_max_rem]', fluid_size_max_rem
- else
- assign fluid_size_rem = font_size_value | divided_by: 16.0
- echo '--font-size--[font_size]: [fluid_size_rem]rem;' | replace: '[font_size]', font_size | replace: '[fluid_size_rem]', fluid_size_rem
- endif
- endfor
-
- assign type_presets = "paragraph, h1, h2, h3, h4, h5, h6" | split: ", "
-
- for preset_name in type_presets
- assign preset_size = '--font-size--[preset_name]' | replace: '[preset_name]', preset_name
- assign preset_line_height = 'type_line_height_[preset_name]' | replace: '[preset_name]', preset_name
-
- if preset_name == 'paragraph'
- assign preset_font = '--font-body--family'
- assign preset_style = '--font-body--style'
- assign preset_weight = '400'
- assign preset_case = '--font-body--case'
- assign preset_letter_spacing = 'body-normal'
-
- echo '--font-[preset_name]--weight: [preset_weight];' | replace: '[preset_name]', preset_name | replace: '[preset_weight]', preset_weight
- echo '--font-[preset_name]--letter-spacing: var(--letter-spacing--[preset_letter_spacing]);' | replace: '[preset_name]', preset_name | replace: '[preset_letter_spacing]', preset_letter_spacing
- else
- assign preset_font_id = 'type_font_[preset_name]' | replace: '[preset_name]', preset_name
- assign preset_font = '--font-[preset_font]--family' | replace: '[preset_font]', settings[preset_font_id]
- assign preset_style = '--font-[preset_font]--style' | replace: '[preset_font]', settings[preset_font_id]
- assign preset_weight = '--font-[preset_font]--weight' | replace: '[preset_font]', settings[preset_font_id]
- assign preset_case = 'type_case_[preset_name]' | replace: '[preset_name]', preset_name
- assign preset_letter_spacing = 'type_letter_spacing_[preset_name]' | replace: '[preset_name]', preset_name
-
- echo '--font-[preset_name]--weight: var([preset_weight]);' | replace: '[preset_name]', preset_name | replace: '[preset_weight]', preset_weight
- echo '--font-[preset_name]--letter-spacing: var(--letter-spacing--[preset_letter_spacing]);' | replace: '[preset_name]', preset_name | replace: '[preset_letter_spacing]', settings[preset_letter_spacing]
- endif
-
- echo '--font-[preset_name]--size: var([preset_size]);' | replace: '[preset_name]', preset_name | replace: '[preset_size]', preset_size
- echo '--font-[preset_name]--family: var([preset_font]);' | replace: '[preset_name]', preset_name | replace: '[preset_font]', preset_font
- echo '--font-[preset_name]--style: var([preset_style]);' | replace: '[preset_name]', preset_name | replace: '[preset_style]', preset_style
- echo '--font-[preset_name]--case: [preset_case];' | replace: '[preset_name]', preset_name | replace: '[preset_case]', settings[preset_case]
- echo '--font-[preset_name]--line-height: var(--line-height--[preset_line_height]);' | replace: '[preset_name]', preset_name | replace: '[preset_line_height]', settings[preset_line_height]
- endfor
- %}
-
- /* Hardcoded font sizes */
- --font-size--2xs: 0.625rem;
- --font-size--xs: 0.8125rem;
- --font-size--sm: 0.875rem;
- --font-size--md: 1rem;
- --font-size--lg: 1.125rem;
- --font-size--xl: 1.25rem;
- --font-size--2xl: 1.5rem;
- --font-size--3xl: 2rem;
- --font-size--4xl: 2.5rem;
- --font-size--5xl: 3rem;
- --font-size--6xl: 3.5rem;
-
- /* Menu font sizes */
- --menu-font-sm--size: 0.875rem;
- --menu-font-sm--line-height: calc(1.1 + 0.5 * min(16 / 14));
- --menu-font-md--size: 1rem;
- --menu-font-md--line-height: calc(1.1 + 0.5 * min(16 / 16));
- --menu-font-lg--size: 1.125rem;
- --menu-font-lg--line-height: calc(1.1 + 0.5 * min(16 / 18));
- --menu-font-xl--size: 1.25rem;
- --menu-font-xl--line-height: calc(1.1 + 0.5 * min(16 / 20));
- --menu-font-2xl--size: 1.75rem;
- --menu-font-2xl--line-height: calc(1.1 + 0.5 * min(16 / 28));
-
- /* Colors */
- --color-error: #8B0000;
- --color-success: #006400;
- --color-white: #FFFFFF;
- --color-white-rgb: 255 255 255;
- --color-black: #000000;
- --color-instock: #3ED660;
- --color-lowstock: #EE9441;
- --color-outofstock: #C8C8C8;
-
- /* Opacity */
- --opacity-5: 0.05;
- --opacity-8: 0.08;
- --opacity-10: 0.1;
- --opacity-15: 0.15;
- --opacity-20: 0.2;
- --opacity-25: 0.25;
- --opacity-30: 0.3;
- --opacity-40: 0.4;
- --opacity-50: 0.5;
- --opacity-60: 0.6;
- --opacity-70: 0.7;
- --opacity-80: 0.8;
- --opacity-85: 0.85;
- --opacity-90: 0.9;
- --opacity-subdued-text: var(--opacity-70);
-
- --shadow-button: 0 2px 3px rgb(0 0 0 / 20%);
- --gradient-image-overlay: linear-gradient(to top, rgb(0 0 0 / 0.5), transparent);
-
- /* Spacing */
- --margin-3xs: 0.125rem;
- --margin-2xs: 0.3rem;
- --margin-xs: 0.5rem;
- --margin-sm: 0.7rem;
- --margin-md: 0.8rem;
- --margin-lg: 1rem;
- --margin-xl: 1.25rem;
- --margin-2xl: 1.5rem;
- --margin-3xl: 1.75rem;
- --margin-4xl: 2rem;
- --margin-5xl: 3rem;
- --margin-6xl: 5rem;
-
- --scroll-margin: 50px;
-
- --padding-3xs: 0.125rem;
- --padding-2xs: 0.25rem;
- --padding-xs: 0.5rem;
- --padding-sm: 0.7rem;
- --padding-md: 0.8rem;
- --padding-lg: 1rem;
- --padding-xl: 1.25rem;
- --padding-2xl: 1.5rem;
- --padding-3xl: 1.75rem;
- --padding-4xl: 2rem;
- --padding-5xl: 3rem;
- --padding-6xl: 4rem;
-
- --gap-3xs: 0.125rem;
- --gap-2xs: 0.3rem;
- --gap-xs: 0.5rem;
- --gap-sm: 0.7rem;
- --gap-md: 0.9rem;
- --gap-lg: 1rem;
- --gap-xl: 1.25rem;
- --gap-2xl: 2rem;
- --gap-3xl: 3rem;
-
- --spacing-scale-sm: 0.6;
- --spacing-scale-md: 0.7;
- --spacing-scale-default: 1.0;
-
- /* Checkout buttons gap */
- --checkout-button-gap: 10px;
-
- /* Borders */
- --style-border-width: 1px;
- --style-border-radius-xs: 0.2rem;
- --style-border-radius-sm: 0.6rem;
- --style-border-radius-md: 0.8rem;
- --style-border-radius-50: 50%;
- --style-border-radius-lg: 1rem;
- --style-border-radius-pills: {{ settings.pills_border_radius }}px;
- --style-border-radius-inputs: {{ settings.inputs_border_radius }}px;
- --style-border-radius-buttons-primary: {{ settings.button_border_radius_primary }}px;
- --style-border-radius-buttons-secondary: {{ settings.button_border_radius_secondary }}px;
- --style-border-width-primary: {{ settings.primary_button_border_width }}px;
- --style-border-width-secondary: {{ settings.secondary_button_border_width }}px;
- --style-border-width-inputs: {{ settings.input_border_width }}px;
- --style-border-radius-popover: {{ settings.popover_border_radius }}px;
- --style-border-popover: {{ settings.popover_border_width }}px {{ settings.popover_border }} rgb(var(--color-border-rgb) / {{ settings.popover_border_opacity }}%);
- --style-border-drawer: {{ settings.drawer_border_width }}px {{ settings.drawer_border }} rgb(var(--color-border-rgb) / {{ settings.drawer_border_opacity }}%);
- --style-border-swatch-opacity: {{ settings.variant_swatch_border_opacity }}%;
- --style-border-swatch-width: {{ settings.variant_swatch_border_width }}px;
- --style-border-swatch-style: {{ settings.variant_swatch_border_style }};
-
- /* Animation */
- --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
- --ease-out-quad: cubic-bezier(0.32, 0.72, 0, 1);
- --animation-speed-fast: 0.0625s;
- --animation-speed: 0.125s;
- --animation-speed-slow: 0.2s;
- --animation-speed-medium: 0.15s;
- --animation-easing: ease-in-out;
- --animation-slideshow-easing: cubic-bezier(0.4, 0, 0.2, 1);
- --drawer-animation-speed: 0.2s;
- --animation-values-slow: var(--animation-speed-slow) var(--animation-easing);
- --animation-values: var(--animation-speed) var(--animation-easing);
- --animation-values-fast: var(--animation-speed-fast) var(--animation-easing);
- --animation-values-allow-discrete: var(--animation-speed) var(--animation-easing) allow-discrete;
- --animation-timing-hover: cubic-bezier(0.25, 0.46, 0.45, 0.94);
- --animation-timing-active: cubic-bezier(0.5, 0, 0.75, 0);
- --animation-timing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
- --animation-timing-default: cubic-bezier(0, 0, 0.2, 1);
- --animation-timing-fade-in: cubic-bezier(0.16, 1, 0.3, 1);
- --animation-timing-fade-out: cubic-bezier(0.4, 0, 0.2, 1);
-
- /* View transitions */
- /* View transition old */
- --view-transition-old-main-content: var(--animation-speed) var(--animation-easing) both fadeOut;
-
- /* View transition new */
- --view-transition-new-main-content: var(--animation-speed) var(--animation-easing) both fadeIn, var(--animation-speed) var(--animation-easing) both slideInTopViewTransition;
-
- /* Focus */
- --focus-outline-width: 0.09375rem;
- --focus-outline-offset: 0.2em;
-
- /* Badges */
- --badge-blob-padding-block: 1px;
- --badge-blob-padding-inline: 12px 8px;
- --badge-rectangle-padding-block: 1px;
- --badge-rectangle-padding-inline: 6px;
- @media screen and (min-width: 750px) {
- --badge-blob-padding-block: 4px;
- --badge-blob-padding-inline: 16px 12px;
- --badge-rectangle-padding-block: 4px;
- --badge-rectangle-padding-inline: 10px;
- }
-
- /* Icons */
- --icon-size-2xs: 0.6rem;
- --icon-size-xs: 0.85rem;
- --icon-size-sm: 1.25rem;
- --icon-size-md: 1.375rem;
- --icon-size-lg: 1.5rem;
- --icon-stroke-width: {% if settings.icon_stroke == 'thin' %}1px{% elsif settings.icon_stroke == 'heavy' %}2px{% else %}1.5px{% endif %};
-
- /* Input */
- --input-email-min-width: 200px;
- --input-search-max-width: 650px;
- --input-padding-y: 0.8rem;
- --input-padding-x: 0.8rem;
- --input-padding: var(--input-padding-y) var(--input-padding-x);
- --input-box-shadow-width: var(--style-border-width-inputs);
- --input-box-shadow: 0 0 0 var(--input-box-shadow-width) var(--color-input-border);
- --input-box-shadow-focus: 0 0 0 calc(var(--input-box-shadow-width) + 0.5px) var(--color-input-border);
- --input-disabled-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
- --input-disabled-border-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
- --input-disabled-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
- --input-textarea-min-height: 55px;
-
- /* Button size */
- --button-size-sm: 30px;
- --button-size-md: 36px;
- --button-size: var(--minimum-touch-target);
- --button-padding-inline: 24px;
- --button-padding-block: 16px;
-
- /* Button font-family */
- --button-font-family-primary: var(--font-{{ settings.type_font_button_primary }}--family);
- --button-font-family-secondary: var(--font-{{ settings.type_font_button_secondary }}--family);
-
- /* Button text case */
- --button-text-case: {{ settings.button_text_case }};
- --button-text-case-primary: {{ settings.button_text_case_primary }};
- --button-text-case-secondary: {{ settings.button_text_case_secondary }};
-
- /* Borders */
- --border-color: rgb(var(--color-border-rgb) / var(--opacity-50));
- --border-width-sm: 1px;
- --border-width-md: 2px;
- --border-width-lg: 5px;
-
- /* Drawers */
- --drawer-inline-padding: 25px;
- --drawer-menu-inline-padding: 2.5rem;
- --drawer-header-block-padding: 20px;
- --drawer-content-block-padding: 10px;
- --drawer-header-desktop-top: 0rem;
- --drawer-padding: calc(var(--padding-sm) + 7px);
- --drawer-height: 100dvh;
- --drawer-width: 95vw;
- --drawer-max-width: 500px;
-
- /* Variant Picker Swatches */
- --variant-picker-swatch-width-unitless: {{ settings.variant_swatch_width }};
- --variant-picker-swatch-height-unitless: {{ settings.variant_swatch_height }};
- --variant-picker-swatch-width: {{ settings.variant_swatch_width | append: 'px' }};
- --variant-picker-swatch-height: {{ settings.variant_swatch_height | append: 'px' }};
- --variant-picker-swatch-radius: {{ settings.variant_swatch_radius | append: 'px' }};
- --variant-picker-border-width: {{ settings.variant_swatch_border_width | append: 'px' }};
- --variant-picker-border-style: {{ settings.variant_swatch_border_style }};
- --variant-picker-border-opacity: {{ settings.variant_swatch_border_opacity | append: '%' }};
-
- /* Variant Picker Buttons */
- --variant-picker-button-radius: {{ settings.variant_button_radius | append: 'px' }};
- --variant-picker-button-border-width: {{ settings.variant_button_border_width | append: 'px' }};
-
- /* Slideshow */
- --slideshow-controls-size: 3.5rem;
- --slideshow-controls-icon: 2rem;
- --peek-next-slide-size: 3rem;
-
- /* Utilities */
- --backdrop-opacity: 0.15;
- --backdrop-color-rgb: var(--color-shadow-rgb);
- --minimum-touch-target: 44px;
- --disabled-opacity: 0.5;
- --skeleton-opacity: 0.025;
-
- /* Shapes */
- --shape--circle: circle(50% at center);
- --shape--sunburst: polygon(100% 50%,94.62% 55.87%,98.3% 62.94%,91.57% 67.22%,93.3% 75%,85.7% 77.39%,85.36% 85.36%,77.39% 85.7%,75% 93.3%,67.22% 91.57%,62.94% 98.3%,55.87% 94.62%,50% 100%,44.13% 94.62%,37.06% 98.3%,32.78% 91.57%,25% 93.3%,22.61% 85.7%,14.64% 85.36%,14.3% 77.39%,6.7% 75%,8.43% 67.22%,1.7% 62.94%,5.38% 55.87%,0% 50%,5.38% 44.13%,1.7% 37.06%,8.43% 32.78%,6.7% 25%,14.3% 22.61%,14.64% 14.64%,22.61% 14.3%,25% 6.7%,32.78% 8.43%,37.06% 1.7%,44.13% 5.38%,50% 0%,55.87% 5.38%,62.94% 1.7%,67.22% 8.43%,75% 6.7%,77.39% 14.3%,85.36% 14.64%,85.7% 22.61%,93.3% 25%,91.57% 32.78%,98.3% 37.06%,94.62% 44.13%);
- --shape--diamond: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
- --shape--blob: polygon(85.349% 11.712%, 87.382% 13.587%, 89.228% 15.647%, 90.886% 17.862%, 92.359% 20.204%, 93.657% 22.647%, 94.795% 25.169%, 95.786% 27.752%, 96.645% 30.382%, 97.387% 33.048%, 98.025% 35.740%, 98.564% 38.454%, 99.007% 41.186%, 99.358% 43.931%, 99.622% 46.685%, 99.808% 49.446%, 99.926% 52.210%, 99.986% 54.977%, 99.999% 57.744%, 99.975% 60.511%, 99.923% 63.278%, 99.821% 66.043%, 99.671% 68.806%, 99.453% 71.565%, 99.145% 74.314%, 98.724% 77.049%, 98.164% 79.759%, 97.433% 82.427%, 96.495% 85.030%, 95.311% 87.529%, 93.841% 89.872%, 92.062% 91.988%, 89.972% 93.796%, 87.635% 95.273%, 85.135% 96.456%, 82.532% 97.393%, 79.864% 98.127%, 77.156% 98.695%, 74.424% 99.129%, 71.676% 99.452%, 68.918% 99.685%, 66.156% 99.844%, 63.390% 99.942%, 60.624% 99.990%, 57.856% 99.999%, 55.089% 99.978%, 52.323% 99.929%, 49.557% 99.847%, 46.792% 99.723%, 44.031% 99.549%, 41.273% 99.317%, 38.522% 99.017%, 35.781% 98.639%, 33.054% 98.170%, 30.347% 97.599%, 27.667% 96.911%, 25.024% 96.091%, 22.432% 95.123%, 19.907% 93.994%, 17.466% 92.690%, 15.126% 91.216%, 12.902% 89.569%, 10.808% 87.761%, 8.854% 85.803%, 7.053% 83.703%, 5.418% 81.471%, 3.962% 79.119%, 2.702% 76.656%, 1.656% 74.095%, 0.846% 71.450%, 0.294% 68.740%, 0.024% 65.987%, 0.050% 63.221%, 0.343% 60.471%, 0.858% 57.752%, 1.548% 55.073%, 2.370% 52.431%, 3.283% 49.819%, 4.253% 47.227%, 5.249% 44.646%, 6.244% 42.063%, 7.211% 39.471%, 8.124% 36.858%, 8.958% 34.220%, 9.711% 31.558%, 10.409% 28.880%, 11.083% 26.196%, 11.760% 23.513%, 12.474% 20.839%, 13.259% 18.186%, 14.156% 15.569%, 15.214% 13.012%, 16.485% 10.556%, 18.028% 8.261%, 19.883% 6.211%, 22.041% 4.484%, 24.440% 3.110%, 26.998% 2.057%, 29.651% 1.275%, 32.360% 0.714%, 35.101% 0.337%, 37.859% 0.110%, 40.624% 0.009%, 43.391% 0.016%, 46.156% 0.113%, 48.918% 0.289%, 51.674% 0.533%, 54.425% 0.837%, 57.166% 1.215%, 59.898% 1.654%, 62.618% 2.163%, 65.322% 2.750%, 68.006% 3.424%, 70.662% 4.197%, 73.284% 5.081%, 75.860% 6.091%, 78.376% 7.242%, 80.813% 8.551%, 83.148% 10.036%, 85.349% 11.712%);
-
- /* Buy buttons */
- --height-buy-buttons: calc(var(--padding-lg) * 2 + var(--icon-size-sm));
-
- /* Card image width and height variables */
- --card-width-small: 10rem;
-
- --height-small: 10rem;
- --height-medium: 11.5rem;
- --height-large: 13rem;
- --height-full: 100vh;
-
- @media screen and (min-width: 750px) {
- --height-small: 17.5rem;
- --height-medium: 21.25rem;
- --height-large: 25rem;
- }
-
- /* Modal */
- --modal-max-height: 65dvh;
-
- /* Card styles for search */
- --card-bg-hover: rgb(var(--color-foreground-rgb) / var(--opacity-5));
- --card-border-hover: rgb(var(--color-foreground-rgb) / var(--opacity-30));
- --card-border-focus: rgb(var(--color-foreground-rgb) / var(--opacity-10));
-
- /* Cart */
- --cart-primary-font-family: var(--font-body--family);
- --cart-primary-font-style: var(--font-body--style);
- --cart-primary-font-weight: var(--font-body--weight);
- --cart-secondary-font-family: var(--font-{{ settings.cart_price_font }}--family);
- --cart-secondary-font-style: var(--font-{{ settings.cart_price_font }}--style);
- --cart-secondary-font-weight: var(--font-{{ settings.cart_price_font }}--weight);
- }
-{% endstyle %}
diff --git a/snippets/timeline-scope.liquid b/snippets/timeline-scope.liquid
deleted file mode 100644
index 67c1cfe02..000000000
--- a/snippets/timeline-scope.liquid
+++ /dev/null
@@ -1,11 +0,0 @@
-{%- liquid
- assign timeline_scope = ''
-
- for index in (1..count)
- assign scope = '--prefix-index, ' | replace: 'prefix', prefix | replace: 'index', index
- assign timeline_scope = timeline_scope | append: scope
- endfor
-
- assign timeline_scope = timeline_scope | strip | split: ',' | compact | join: ','
--%}
-{{- timeline_scope -}}
diff --git a/snippets/typography-style.liquid b/snippets/typography-style.liquid
deleted file mode 100644
index c7aff6a36..000000000
--- a/snippets/typography-style.liquid
+++ /dev/null
@@ -1,75 +0,0 @@
-{%- comment -%}
- Intended for blocks and sections that provide values for all the referenced settings.
-
-
-
- Accepts:
- settings: {settings || section.settings}
-{%- endcomment -%}
-
-{% assign preset = preset | default: settings.type_preset %}
-
-{%- capture variables -%}
- {%- if preset != 'rte' and settings.color != "" -%}
- --color: {{ settings.color }};
- {%- endif -%}
- {%- if preset == 'custom' -%}
- {% liquid
- unless type
- comment
- When choosing to customize the font, picking a specific font size
- determines the type of text block.
- endcomment
- if settings.font_size != ''
- assign font_size_value = settings.font_size | split: 'rem' | first | times: 1.0
-
- if font_size_value > 4.5
- assign type = 'display'
- elsif font_size_value > 3.5
- assign type = 'heading'
- else
- assign type = 'body'
- endif
- endif
- endunless
- %}
- {%- if settings.font_size != blank -%}
- {%- liquid
- assign font_size_rem = settings.font_size | split: 'rem' | first | times: 1.0
- assign fluid_size_cutoff_rem = 3.0
-
- if font_size_rem >= fluid_size_cutoff_rem
- assign target_viewport = 1400
- assign vw_value = font_size_rem | times: 16 | divided_by: target_viewport | times: 100
-
- assign scale_factor = font_size_rem | divided_by: fluid_size_cutoff_rem
- assign base_min_rem = 3.0
- assign scaling_bonus_rem = scale_factor | minus: 1 | times: 0.25
- assign dynamic_min_rem = base_min_rem | plus: scaling_bonus_rem
- endif
- -%}
- {%- if font_size_rem >= fluid_size_cutoff_rem -%}
- --font-size: clamp({{ dynamic_min_rem }}rem, {{ vw_value }}vw, {{ settings.font_size }});
- {%- else -%}
- --font-size: {{ settings.font_size }};
- {%- endif -%}
- {%- endif -%}
- {%- if settings.weight != blank -%}
- --font-weight: {{ settings.weight }};
- {% else %}
- --font-weight: {{ settings.font | replace: 'family', 'weight' }};
- {%- endif -%}
- --font-family: {{ settings.font }};
- --text-transform: {{ settings.case }};
- --text-wrap: {{ settings.wrap }};
- {% if settings.type_preset == 'custom' and settings.font_size == blank %}
- --line-height--display: var(--line-height--display-{{ settings.line_height }});
- --line-height--heading: var(--line-height--heading-{{ settings.line_height }});
- --line-height--body: var(--line-height--body-{{ settings.line_height }});
- {% else %}
- --line-height: var(--line-height--{{ type }}-{{ settings.line_height }});
- {% endif %}
- --letter-spacing: var(--letter-spacing--{{ type }}-{{ settings.letter_spacing }});
- {%- endif -%}
-{%- endcapture -%}
-{{- variables | strip | strip_newlines -}}
diff --git a/snippets/unit-price.liquid b/snippets/unit-price.liquid
deleted file mode 100644
index 6d9ba4d59..000000000
--- a/snippets/unit-price.liquid
+++ /dev/null
@@ -1,16 +0,0 @@
-{%- doc -%}
- Renders the unit price, including its measurement.
-
- @param {object} price - The unit price (money or string).
- @param {object} measurement - The unit_price_measurement object.
-
- @example
- {% render 'unit-price', price: variant.unit_price, measurement: variant.unit_price_measurement %}
-
- @example
- {% render 'unit-price', price: line_item.unit_price | money_with_currency, measurement: line_item.unit_price_measurement }
-{%- enddoc -%}
-
- {{ 'accessibility.unit_price' | t }}
- {{ price | unit_price_with_measurement: measurement }}
-
diff --git a/snippets/util-autofill-img-size-attr.liquid b/snippets/util-autofill-img-size-attr.liquid
deleted file mode 100644
index 79dbf1e40..000000000
--- a/snippets/util-autofill-img-size-attr.liquid
+++ /dev/null
@@ -1,75 +0,0 @@
-{%- doc -%}
- Echo a sizes attribute for an ![]()
tag based on a minimum image size.
-
- @param {number} card_size - The minimum pixel-width of the product card.
- @param {number} [card_gap] - The pixel-width of the gap between product cards.
- @param {number} [max_breakpoint] - The maximum pixel-width to calculate breakpoints for.
- @param {number} [min_breakpoint] - The minimum pixel-width before defaulting to 50vw.
-
- @example
- {% capture size_attribute %}
- {% render 'util-autofill-img-size-attr' card_size: 400 %}
- {% endcapture %}
- {% assign size_attribute = size_attribute | strip %}
- {{ image_url | image_tag: sizes: size_attribute }}
-{%- enddoc -%}
-
-{% liquid
- # Defense: ensure card_size and card_gap are numbers
- assign card_size = card_size | strip | replace: 'px', '' | plus: 0
-
- if card_gap
- assign card_gap = card_gap | strip | replace: 'px', '' | plus: 0
- else
- assign card_gap = 0
- endif
-
- assign card_size_with_gap = card_size | plus: card_gap
-
- assign max_breakpoint = max_breakpoint | default: 2000
-
- assign min_breakpoint = min_breakpoint | default: 750
-
- # Calculate maximum number of columns at max width
- assign max_cols = max_breakpoint | divided_by: card_size_with_gap | floor
-
- assign sizes_attr = ''
-
- # Calculate breakpoints dynamically based on card size
- # Start with max columns and work down
- for i in (1..max_cols)
- # Current number of columns we're calculating for
- assign current_cols = max_cols | minus: i | plus: 1
-
- # Skip if we're down to 1 column
- if current_cols < 2
- break
- endif
-
- # Calculate the minimum width needed for this many columns
- assign min_width_needed = current_cols | times: card_size_with_gap
-
- if min_width_needed < min_breakpoint
- break
- endif
-
- assign percentage = 100 | divided_by: current_cols
-
- # Build up the sizes attribute
- if sizes_attr != ''
- assign sizes_attr = sizes_attr | append: ', '
- endif
- assign sizes_attr = sizes_attr | append: '(min-width: ' | append: min_width_needed | append: 'px) ' | append: percentage | append: 'vw'
- endfor
-
- # Add tablet size (50vw) and mobile size (100vw) fallbacks
- if sizes_attr != ''
- assign sizes_attr = sizes_attr | append: ', '
- endif
- assign sizes_attr = sizes_attr | append: '(min-width: ' | append: min_breakpoint | append: 'px) 50vw'
-
- assign sizes_attr = sizes_attr | append: ', 100vw'
-
- # Echo the sizes attribute
- echo sizes_attr
-%}
diff --git a/snippets/util-mega-menu-img-sizes-attr.liquid b/snippets/util-mega-menu-img-sizes-attr.liquid
deleted file mode 100644
index a8ce818a5..000000000
--- a/snippets/util-mega-menu-img-sizes-attr.liquid
+++ /dev/null
@@ -1,87 +0,0 @@
-{%- doc -%}
- Calculate the sizes attribute for mega menu images based on menu type and grid configuration.
-
- @param {string} menu_content_type - Type of menu: 'collection_images', 'featured_products', or 'featured_collections'
- @param {object} settings - Theme settings object containing page width configuration
- @param {number} [grid_columns] - Number of grid columns for the mega menu
- @param {number} [grid_columns_tablet] - Number of grid columns for tablet view
- @param {number} [grid_columns_collection_images] - Grid columns when menu_content_type is 'collection_images' with < 5 items
- @param {number} [parent_links_size] - Number of parent links (for collection images special case)
- @param {number} [columns_per_item] - Columns each item occupies (2 for collection images, 1 for products)
-
- @example
- {% capture image_sizes %}
- {% render 'util-mega-menu-img-sizes-attr',
- menu_content_type: 'collection_images',
- settings: settings,
- grid_columns: 8,
- grid_columns_tablet: 4,
- columns_per_item: 2
- %}
- {% endcapture %}
-
- {{ image | image_url: width: 1024 | image_tag: sizes: image_sizes }}
-{%- enddoc -%}
-
-{% liquid
- # Early exit for featured collections
- if menu_content_type == 'featured_collections'
- echo '300px'
- break
- endif
-
- # Define breakpoints and max widths based on page width setting
- case settings.page_width
- when 'narrow'
- assign page_max_width = '90rem'
- assign breakpoint = '95rem'
- when 'normal'
- assign page_max_width = '120rem'
- assign breakpoint = '125rem'
- when 'wide'
- assign page_max_width = '150rem'
- assign breakpoint = '155rem'
- endcase
-
- # Common values
- # Gap between items in pixels (numeric for calculations)
- # Page margins (with unit for direct use in calc())
- assign gap = 20
- assign margins = '80px'
- assign grid_tablet = grid_columns_tablet | default: 4
-
- # Set up grid configuration based on menu type
- case menu_content_type
- when 'collection_images'
- assign cols_per_item = columns_per_item | default: 2
- assign grid_desktop = grid_columns | default: 8
-
- # Special case: fewer than 5 collection images
- if parent_links_size < 5
- assign grid_desktop = grid_columns_collection_images | default: grid_desktop
- endif
-
- when 'featured_products'
- assign cols_per_item = 1
- assign grid_desktop = grid_columns | default: 6
- endcase
-
- # Calculate gaps for each breakpoint
- assign items_desktop = grid_desktop | divided_by: cols_per_item
- assign items_tablet = grid_tablet | divided_by: cols_per_item
- assign gaps_desktop_px = items_desktop | minus: 1 | times: gap | append: 'px'
- assign gaps_tablet_px = items_tablet | minus: 1 | times: gap | append: 'px'
-%}
-
-{%- capture sizes -%}
- {%- comment -%} Large viewports with fixed page width {%- endcomment -%}
- (min-width: {{ breakpoint }}) calc(({{ page_max_width }} - {{ margins }} - {{ gaps_desktop_px }}) * {{ cols_per_item }} / {{ grid_desktop }}),
-
- {%- comment -%} Desktop viewports {%- endcomment -%}
- (min-width: 990px) calc((100vw - {{ margins }} - {{ gaps_desktop_px }}) * {{ cols_per_item }} / {{ grid_desktop }}),
-
- {%- comment -%} Tablet {%- endcomment -%}
- calc((100vw - {{ margins }} - {{ gaps_tablet_px }}) / {{ grid_tablet }})
-{%- endcapture -%}
-
-{{ sizes | strip_newlines | strip }}
diff --git a/snippets/util-product-grid-card-size.liquid b/snippets/util-product-grid-card-size.liquid
deleted file mode 100644
index fdbcd0f42..000000000
--- a/snippets/util-product-grid-card-size.liquid
+++ /dev/null
@@ -1,45 +0,0 @@
-{%- doc -%}
- Output the minimum product card size for cards in a product grid (main collection and search results).
-
- @param {object} section - Section object that contains the product card block.
-
- @example
- {% capture product_card_size %}
- {% render 'util-product-grid-card-size' section: section %}
- {% endcapture %}
-{%- enddoc -%}
-
-{% liquid
- if section.settings.layout_type == 'organic'
- if section.settings.product_grid_width == 'centered'
- assign product_card_size = '250px'
- else
- assign product_card_size = '260px'
- endif
- elsif section.settings.product_grid_width == 'centered'
- # Hardcoded values for product card size when width set to 'centered'
- case section.settings.product_card_size
- when 'small'
- assign product_card_size = '165px'
- when 'medium'
- assign product_card_size = '250px'
- when 'large'
- assign product_card_size = '340px'
- when 'extra-large'
- assign product_card_size = '480px'
- endcase
- else
- # Hardcoded values for product card size when width set to 'full-width'
- case section.settings.product_card_size
- when 'small'
- assign product_card_size = '180px'
- when 'medium'
- assign product_card_size = '260px'
- when 'large'
- assign product_card_size = '365px'
- when 'extra-large'
- assign product_card_size = '530px'
- endcase
- endif
- echo product_card_size
-%}
diff --git a/snippets/util-product-media-sizes-attr.liquid b/snippets/util-product-media-sizes-attr.liquid
deleted file mode 100644
index 8458af158..000000000
--- a/snippets/util-product-media-sizes-attr.liquid
+++ /dev/null
@@ -1,142 +0,0 @@
-{%- doc -%}
- Calculate the sizes attribute for product media images in the product media gallery.
-
- @param {object} block - Block object containing media gallery settings
- @param {object} section - Section object containing layout settings
- @param {object} settings - Theme settings object containing page width configuration
- @param {boolean} [is_first_image] - Whether this is the first image (for large_first_image mode)
- @param {boolean} [is_single_column] - Whether the layout is single column (carousel or one-column grid)
- @param {boolean} [needs_both_sizes] - Whether we need to calculate different sizes for first and other images
-
- @example
- {% capture media_sizes %}
- {% render 'util-product-media-sizes-attr', block: block, section: section, settings: settings, is_single_column: is_single_column %}
- {% endcapture %}
- {% assign media_sizes = media_sizes | strip %}
- {{ media | image_url: width: 800 | image_tag: sizes: media_sizes }}
-{%- enddoc -%}
-
-{%- liquid
- assign block_settings = block.settings
- # Constants
- assign page_margin = '40px'
- # Section gap divided by 2 (used for single column layouts)
- assign gap_half = section.settings.gap | divided_by: 2 | append: 'px'
- # Section gap divided by 4 (used for two column layouts where each column gets half of the half gap)
- assign gap_quarter = section.settings.gap | divided_by: 4 | append: 'px'
- # Image gap divided by 2 (space between images in grid)
- assign image_gap_half = block_settings.image_gap | divided_by: 2 | append: 'px'
-
- assign is_single_column = is_single_column | default: false
- assign needs_both_sizes = needs_both_sizes | default: false
-
- # Determine which size calculation to use
- assign calculate_single_column = false
- assign calculate_grid_column = false
-
- if needs_both_sizes
- if is_first_image
- assign calculate_single_column = true
- else
- assign calculate_grid_column = true
- endif
- elsif is_single_column
- assign calculate_single_column = true
- else
- assign calculate_grid_column = true
- endif
-
- # Set up default sizes
- 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
- else
- assign default_sizes = '(min-width: 750px) calc(50vw - [gap_half]), 100vw' | 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
- 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
- endif
- endif
-
- # Override for center-aligned content
- if section.settings.content_width == 'content-center-aligned'
- # Define breakpoints and base sizes based on page width
- # Breakpoints are the page width setting + margin (where 2 x margin is 80px = 5rem)
- case settings.page_width
- when 'narrow'
- assign breakpoint = '95rem'
- assign media_base_size_equal_columns = '45rem'
- assign media_base_size_unequal_columns = '65rem'
- when 'normal'
- assign breakpoint = '125rem'
- assign media_base_size_equal_columns = '60rem'
- assign media_base_size_unequal_columns = '95rem'
- when 'wide'
- assign breakpoint = '155rem'
- assign media_base_size_equal_columns = '75rem'
- assign media_base_size_unequal_columns = '125rem'
- endcase
-
- # Select the appropriate base size
- if section.settings.equal_columns
- assign media_base_size = media_base_size_equal_columns
- else
- assign media_base_size = media_base_size_unequal_columns
- endif
-
- # Calculate large screen size base
- if block_settings.extend_media
- assign large_size_base = '[media_base_size] + (100vw - [breakpoint])' | replace: '[media_base_size]', media_base_size | replace: '[breakpoint]', breakpoint
- else
- assign large_size_base = media_base_size
- endif
-
- # Calculate medium screen size
- if section.settings.equal_columns
- assign medium_base = '50vw'
- else
- assign medium_base = '100vw - 25rem'
- endif
-
- # Build calculation based on column type
- if calculate_grid_column
- # Grid column calculation - includes image gap
- assign medium_base = '([medium_base]) / 2' | replace: '[medium_base]', medium_base
- # Build the complete large size expression
- assign large_size_expr = '([large_size_base]) / 2 - [image_gap_half]' | replace: '[large_size_base]', large_size_base | replace: '[image_gap_half]', image_gap_half
- assign large_size = 'calc([large_size_expr])' | replace: '[large_size_expr]', large_size_expr
-
- if block_settings.extend_media
- assign medium_size = 'calc([medium_base] - [page_margin] - [gap_quarter] - [image_gap_half] + [page_margin])' | replace: '[medium_base]', medium_base | replace: '[page_margin]', page_margin | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
- 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
- else
- # Single column calculation
- if block_settings.extend_media
- assign large_size = 'calc([large_size_base])' | replace: '[large_size_base]', large_size_base
- else
- assign large_size = large_size_base
- endif
-
- if block_settings.extend_media
- assign medium_size = 'calc([medium_base] - [page_margin] - [gap_half])' | replace: '[medium_base]', medium_base | replace: '[page_margin]', page_margin | replace: '[gap_half]', gap_half
- 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
- endif
- else
- # Use default sizes
- assign sizes = default_sizes
- endif
-
- # Echo the sizes attribute
- echo sizes
--%}
diff --git a/snippets/variant-main-picker.liquid b/snippets/variant-main-picker.liquid
deleted file mode 100644
index b29424a74..000000000
--- a/snippets/variant-main-picker.liquid
+++ /dev/null
@@ -1,512 +0,0 @@
-{%- doc -%}
- Renders a default variant picker, used to display the variant picker in the variants block.
-
- @param {object} product_resource - The product object.
- @param {object} [block] - The block object
-{%- enddoc -%}
-
-{% assign block_settings = block.settings %}
-
-{% unless product_resource.has_only_default_variant %}
- {% liquid
- assign button_background_brightness = section.settings.color_scheme.settings.foreground | color_brightness
- if button_background_brightness < 105
- assign strikethrough_color_mix = '#000'
- else
- assign strikethrough_color_mix = '#fff'
- endif
- %}
-
-
-
-{% endunless %}
-
-{% stylesheet %}
- .variant-picker {
- width: 100%;
- }
-
- .variant-picker__form {
- display: flex;
- flex-direction: column;
- gap: var(--padding-lg);
- width: 100%;
- }
-
- .variant-picker[data-shopify-visual-preview] {
- min-width: 300px;
- padding-inline-start: max(4px, var(--padding-inline-start));
- }
-
- .variant-option {
- --options-border-radius: var(--variant-picker-button-radius);
- --options-border-width: var(--variant-picker-button-border-width);
- --variant-option-padding-inline: var(--padding-md);
- }
-
- .variant-option--swatches {
- --options-border-radius: var(--variant-picker-swatch-radius);
-
- width: 100%;
- }
-
- .variant-option--swatches-disabled {
- pointer-events: none;
- cursor: not-allowed;
- }
-
- .variant-option--swatches > overflow-list {
- justify-content: var(--product-swatches-alignment);
-
- @media (max-width: 749px) {
- justify-content: var(--product-swatches-alignment-mobile);
- }
- }
-
- .variant-option--buttons {
- display: flex;
- flex-wrap: wrap;
- gap: var(--gap-sm);
- margin: 0;
- padding: 0;
- border: none;
- }
-
- .variant-option--buttons legend {
- padding: 0;
- margin-block-end: var(--margin-xs);
- }
-
- .variant-option__swatch-value {
- padding-inline-start: var(--padding-xs);
- color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
- }
-
- .variant-option__button-label {
- --variant-picker-stroke-color: var(--color-variant-border);
-
- display: flex;
- flex: 0 0 calc(3ch + 1.3em);
- align-items: center;
- position: relative;
- padding-block: var(--padding-sm);
- padding-inline: var(--padding-lg);
- border: var(--style-border-width) solid var(--color-variant-border);
- border-radius: var(--options-border-radius);
- border-width: var(--options-border-width);
- overflow: clip;
- justify-content: center;
- min-height: calc(3ch + 1.3em);
- min-width: fit-content;
- white-space: nowrap;
- background-color: var(--color-variant-background);
- color: var(--color-variant-text);
- transition: background-color var(--animation-speed) var(--animation-easing),
- border-color var(--animation-speed) var(--animation-easing);
-
- &:hover {
- background-color: var(--color-variant-hover-background);
- border-color: var(--color-variant-hover-border);
- color: var(--color-variant-hover-text);
- }
-
- @media screen and (min-width: 750px) {
- padding: var(--padding-xs) var(--variant-option-padding-inline);
- }
- }
-
- .variant-option__button-label__text {
- text-align: left;
- text-wrap: auto;
- }
-
- .variant-option--equal-width-buttons {
- --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);
-
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));
-
- .variant-option__button-label {
- min-width: var(--variant-min-width);
- }
-
- .variant-option__button-label__text {
- text-align: center;
- text-wrap: balance;
- }
- }
-
- .variant-option__button-label:has(:focus-visible) {
- --variant-picker-stroke-color: var(--color-foreground);
-
- border-color: var(--color-foreground);
- outline: var(--focus-outline-width) solid var(--color-foreground);
- outline-offset: var(--focus-outline-offset);
- }
-
- .variant-option__button-label--has-swatch {
- --focus-outline-radius: var(--variant-picker-swatch-radius);
-
- padding: 0;
- border: none;
- display: block;
- flex-basis: auto;
- min-height: auto;
- }
-
- .variant-option__button-label:has(:checked) {
- color: var(--color-selected-variant-text);
- background-color: var(--color-selected-variant-background);
- border-color: var(--color-selected-variant-border);
- transition: background-color var(--animation-speed) var(--animation-easing),
- border-color var(--animation-speed) var(--animation-easing);
-
- &:hover {
- background-color: var(--color-selected-variant-hover-background);
- border-color: var(--color-selected-variant-hover-border);
- color: var(--color-selected-variant-hover-text);
- }
- }
-
- .variant-option__button-label:has([data-option-available='false']) {
- color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
- }
-
- .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
- --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
-
- outline: var(--focus-outline);
- outline-offset: var(--focus-outline-offset);
- }
-
- .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
- --focus-outline: var(--focus-outline-width) solid currentcolor;
-
- outline: var(--focus-outline);
- outline-offset: var(--focus-outline-offset);
- }
-
- .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
- outline: none;
- }
-
- .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
- outline: none;
- }
-
- .variant-option__button-label--has-swatch:hover {
- outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
- outline-offset: var(--focus-outline-offset);
- }
-
- .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
- --focus-outline: none;
- }
-
- .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
- outline: var(--focus-outline);
- outline-offset: var(--focus-outline-offset);
- }
-
- .variant-option__button-label--has-swatch:has(:checked) {
- --focus-outline: var(--focus-outline-width) solid var(--color-foreground);
-
- outline: var(--focus-outline);
- outline-offset: var(--focus-outline-offset);
- }
-
- /* 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,
- .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
- outline: none;
- position: relative;
- overflow: visible;
- }
-
- .variant-option__button-label--has-swatch:has(:checked)::after,
- .variant-option__button-label:has(:focus-visible) .swatch::after,
- .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
- content: '';
- position: absolute;
- inset: calc(-1 * var(--focus-outline-offset));
- border: var(--focus-outline);
- border-radius: var(--focus-outline-radius, 50%);
- background-color: transparent;
- display: inherit;
- }
- }
-
- .variant-option__button-label:has([data-option-available='false']):has(:checked) {
- --variant-picker-stroke-color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
-
- background-color: inherit;
- color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
- border-color: var(--color-selected-variant-border);
- }
-
- .variant-option__button-label input,
- .variant-option--images input {
- /* remove the checkbox from the page flow */
- position: absolute;
-
- /* set the dimensions to match those of the label */
- inset: 0;
-
- /* hide it */
- opacity: 0;
- margin: 0;
- cursor: pointer;
- width: 100%;
- height: 100%;
- }
-
- .variant-option__button-label svg {
- position: absolute;
- top: 0;
- left: 0;
- cursor: pointer;
- pointer-events: none;
- stroke-width: var(--style-border-width);
- stroke: var(--variant-picker-stroke-color);
- }
-
- .variant-option__select-wrapper {
- display: flex;
- position: relative;
- border: var(--style-border-width-inputs) solid var(--color-border);
- border-radius: var(--style-border-radius-inputs);
- align-items: center;
- margin-top: var(--margin-2xs);
- overflow: clip;
- transition: background-color var(--animation-speed) var(--animation-easing),
- border-color var(--animation-speed) var(--animation-easing);
- }
-
- .variant-option__select-wrapper:has(.swatch) {
- --variant-picker-swatch-width: 20px;
- --variant-picker-swatch-height: 20px;
- }
-
- .variant-option__select-wrapper:hover {
- border-color: var(--color-variant-hover-border);
- }
-
- .variant-option__select:focus-visible {
- outline: var(--focus-outline-width) solid currentcolor;
- outline-offset: var(--focus-outline-offset);
- }
-
- .variant-option__select {
- padding-block: var(--padding-md);
- padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
- appearance: none;
- border: 0;
- width: 100%;
- margin: 0;
- cursor: pointer;
- }
-
- .variant-option__select-wrapper .icon {
- position: absolute;
- right: var(--padding-md);
- top: 50%;
- transform: translateY(-50%);
- width: var(--icon-size-2xs);
- height: var(--icon-size-2xs);
- pointer-events: none;
- }
-
- .variant-option__select--has-swatch {
- padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
- }
-
- .variant-option__select-wrapper .swatch {
- position: absolute;
- top: 50%;
- left: var(--padding-md);
- transform: translateY(-50%);
- }
-
- .variant-picker--center,
- .variant-picker--center .variant-option {
- text-align: center;
- align-items: center;
- justify-content: center;
- width: 100%;
- }
-
- .variant-picker--right,
- .variant-picker--right .variant-option {
- text-align: right;
- justify-content: right;
- }
-{% endstylesheet %}
diff --git a/snippets/variant-quick-add.liquid b/snippets/variant-quick-add.liquid
deleted file mode 100644
index d67f086ad..000000000
--- a/snippets/variant-quick-add.liquid
+++ /dev/null
@@ -1,101 +0,0 @@
-{%- doc -%}
- Renders a quick-add variant picker, used to display the variant picker in the quick-add modal.
-
- @param {object} product_resource - The product object.
-{%- enddoc -%}
-
-
- {%- for product_option in product_resource.options_with_values -%}
- {%- liquid
- assign swatch_count = product_option.values | map: 'swatch' | compact | size
- assign variant_style = ''
-
- if swatch_count > 0
- assign variant_style = 'swatch'
- else
- assign fieldset_id = section.id | append: '-' | append: product_resource.id | append: '-' | append: product_option.name | handleize
- assign option_id_attribute = 'data-option-id="' | append: fieldset_id | append: '"'
- assign longest_value = 0
- endif
- -%}
-
-
- {%- endfor -%}
-
-
-
diff --git a/snippets/variant-swatches.liquid b/snippets/variant-swatches.liquid
deleted file mode 100644
index 6380efaf1..000000000
--- a/snippets/variant-swatches.liquid
+++ /dev/null
@@ -1,165 +0,0 @@
-{%- doc -%}
- Renders a swatches variant picker, used within the product-swatches block.
-
- @param {object} product_resource - The product object, which contains variants and options.
- @param {boolean} [has_option_selected] - Whether an option is already selected.
-
- @example
- {% render 'variant-swatches', product_resource: product %}
-{%- enddoc -%}
-
-
-
-
diff --git a/snippets/video.liquid b/snippets/video.liquid
deleted file mode 100644
index 36e8a0fd9..000000000
--- a/snippets/video.liquid
+++ /dev/null
@@ -1,216 +0,0 @@
-{%- doc -%}
- Renders a video element, from a video object (
{{- 'blogs.comment_form.heading' | t -}}
- - {%- if form.errors -%} - - -- {%- for field in form.errors -%} --
- {%- if form.errors.translated_fields[field] contains 'author' -%}
-
- {{- 'blogs.comment_form.name' | t -}}
-
- {%- elsif form.errors.translated_fields[field] contains 'body' -%}
-
- {{- 'blogs.comment_form.message' | t -}}
-
- {%- else -%}
-
- {{- form.errors.translated_fields[field] | capitalize -}}
-
- {%- endif -%}
- {{ form.errors.messages[field] }}
-
- {%- endfor -%}
-
- {%- elsif form.posted_successfully? -%} - - {%- endif -%} - -- {{- 'blogs.comment_form.moderated' | t -}} -
- {% endif %} - - -