diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 000000000..f42cf6ac4 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +*.json linguist-language=jsonc \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..3bcb0dd2f --- /dev/null +++ b/.gitignore @@ -0,0 +1,22 @@ +# OS generated files # +###################### +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db +node_modules/ + +# Shopify CLI files +.shopify/ + +## Release files +release +*.zip + +# custom +*.md +.theme-check.yml +.shopifyignore \ No newline at end of file diff --git a/assets/gallery.css b/assets/gallery.css new file mode 100644 index 000000000..bf454941c --- /dev/null +++ b/assets/gallery.css @@ -0,0 +1,35 @@ +.gallery-section { + width: 100%; +} + +.gallery-container { + display: grid; + width: 100%; +} + +.gallery-item { + position: relative; + overflow: hidden; + width: 100%; +} + +.gallery-item img { + transition: transform 0.3s ease; + width: 100%; + height: 100%; +} + +.gallery-item a:hover img { + transform: scale(1.05); +} + +.gallery-item a { + position: relative; + display: block; +} + +.placeholder-svg { + background: #f0f0f0; + width: 100%; + height: 100%; +} diff --git a/blocks/_announcement.liquid b/blocks/_announcement.liquid index bf37fb5f3..ae96fda9b 100644 --- a/blocks/_announcement.liquid +++ b/blocks/_announcement.liquid @@ -19,13 +19,13 @@ {% render 'typography-style', settings: block_settings, preset: 'custom' %} --width: 100%; --text-align: center; - --line-height: 1; + --line-height: 1.4; " {{ block.shopify_attributes }} aria-hidden="{% if block_index == 0 %}false{% else %}true{% endif %}" >

- {{ block.settings.text }} + {{ block.settings.text | split: '||' | join: '
' }}

{% if block_settings.link != blank %} diff --git a/blocks/_testimonial-card.liquid b/blocks/_testimonial-card.liquid new file mode 100644 index 000000000..ba41cc21a --- /dev/null +++ b/blocks/_testimonial-card.liquid @@ -0,0 +1,84 @@ +{% assign s = block.settings %} + +
+
+ {%- for i in (1..5) -%} + + {%- endfor -%} +
+ + {% if s.review_text != blank %} +
+ "{{ s.review_text }}" +
+ {% endif %} + +
+ {% if s.reviewer_name != blank %} + {{ s.reviewer_name }} + {% endif %} + + {% if s.source != 'none' %} + + {% case s.source %} + {% when 'google' %} + + Google + {% when 'facebook' %} + + Facebook + {% endcase %} + + {% endif %} +
+
+ +{% schema %} +{ + "name": "Testimonial", + "tag": null, + "settings": [ + { + "type": "textarea", + "id": "review_text", + "label": "Review text", + "default": "Amazing crystals and great customer service!" + }, + { + "type": "text", + "id": "reviewer_name", + "label": "Reviewer name", + "default": "Happy Customer" + }, + { + "type": "range", + "id": "rating", + "label": "Star rating", + "min": 1, + "max": 5, + "step": 1, + "default": 5 + }, + { + "type": "select", + "id": "source", + "label": "Review source", + "options": [ + { "value": "none", "label": "None" }, + { "value": "google", "label": "Google" }, + { "value": "facebook", "label": "Facebook" } + ], + "default": "google" + } + ] +} +{% endschema %} diff --git a/blocks/ai_gen_block_b2fcd10.liquid b/blocks/ai_gen_block_b2fcd10.liquid new file mode 100644 index 000000000..87b9b6197 --- /dev/null +++ b/blocks/ai_gen_block_b2fcd10.liquid @@ -0,0 +1,312 @@ +{% doc %} + @prompt + can i create a product safety warning section for products of this type +{% enddoc %} +{% assign ai_gen_id = block.id | replace: '_', '' | downcase %} + +{% style %} + .ai-safety-warning-{{ ai_gen_id }} { + display: block; + width: {{ block.settings.desktop_width_percent }}%; + max-width: 100%; + padding: {{ block.settings.padding }}px; + background-color: {{ block.settings.background_color }}; + border: {{ block.settings.border_width }}px solid {{ block.settings.border_color }}; + border-radius: {{ block.settings.border_radius }}px; + margin: {{ block.settings.margin_top }}px 0 {{ block.settings.margin_bottom }}px; + } + + .ai-safety-warning-header-{{ ai_gen_id }} { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: {{ block.settings.spacing }}px; + } + + .ai-safety-warning-icon-{{ ai_gen_id }} { + flex-shrink: 0; + width: {{ block.settings.icon_size }}px; + height: {{ block.settings.icon_size }}px; + color: {{ block.settings.icon_color }}; + } + + .ai-safety-warning-title-{{ ai_gen_id }} { + margin: 0; + font-size: {{ block.settings.title_size }}px; + font-weight: 600; + color: {{ block.settings.text_color }}; + } + + .ai-safety-warning-content-{{ ai_gen_id }} { + color: {{ block.settings.text_color }}; + font-size: {{ block.settings.text_size }}px; + line-height: 1.6; + } + + .ai-safety-warning-content-{{ ai_gen_id }} p { + margin: 0 0 {{ block.settings.spacing }}px; + } + + .ai-safety-warning-content-{{ ai_gen_id }} p:last-child { + margin-bottom: 0; + } + + .ai-safety-warning-content-{{ ai_gen_id }} ul, + .ai-safety-warning-content-{{ ai_gen_id }} ol { + margin: 0 0 {{ block.settings.spacing }}px; + padding-left: 20px; + } + + .ai-safety-warning-content-{{ ai_gen_id }} li { + margin-bottom: 8px; + } + + .ai-safety-warning-content-{{ ai_gen_id }} li:last-child { + margin-bottom: 0; + } + + @media screen and (max-width: 749px) { + .ai-safety-warning-{{ ai_gen_id }} { + width: 100%; + } + } +{% endstyle %} + +
+
+ {% if block.settings.show_icon %} +
+ {% if block.settings.icon_style == 'warning' %} + + + + + + {% elsif block.settings.icon_style == 'alert' %} + + + + + + {% elsif block.settings.icon_style == 'info' %} + + + + + + {% else %} + + + + + + {% endif %} +
+ {% endif %} + + {% if block.settings.title != blank %} +

{{ block.settings.title }}

+ {% endif %} +
+ + {% if block.settings.content != blank %} +
+ {{ block.settings.content }} +
+ {% endif %} +
+ +{% schema %} +{ + "name": "Product safety warning", + "settings": [ + { + "type": "header", + "content": "Content" + }, + { + "type": "text", + "id": "title", + "label": "Title", + "default": "Safety Warning" + }, + { + "type": "richtext", + "id": "content", + "label": "Warning text", + "default": "

Choking hazard: Small parts. Not suitable for children under 3 years.

Keep away from: Heat sources, open flames, and direct sunlight.

Adult supervision required when used by children.

" + }, + { + "type": "header", + "content": "Icon" + }, + { + "type": "checkbox", + "id": "show_icon", + "label": "Show icon", + "default": true + }, + { + "type": "select", + "id": "icon_style", + "label": "Icon style", + "options": [ + { + "value": "warning", + "label": "Warning triangle" + }, + { + "value": "alert", + "label": "Alert circle" + }, + { + "value": "info", + "label": "Info circle" + } + ], + "default": "warning" + }, + { + "type": "range", + "id": "icon_size", + "label": "Icon size", + "min": 16, + "max": 48, + "step": 2, + "unit": "px", + "default": 24 + }, + { + "type": "color", + "id": "icon_color", + "label": "Icon color", + "default": "#D82C0D" + }, + { + "type": "header", + "content": "Style" + }, + { + "type": "color", + "id": "background_color", + "label": "Background", + "default": "#FFF4E6" + }, + { + "type": "color", + "id": "text_color", + "label": "Text", + "default": "#121212" + }, + { + "type": "color", + "id": "border_color", + "label": "Border", + "default": "#FFB84D" + }, + { + "type": "range", + "id": "border_width", + "label": "Border width", + "min": 0, + "max": 4, + "step": 1, + "unit": "px", + "default": 1 + }, + { + "type": "range", + "id": "border_radius", + "label": "Border radius", + "min": 0, + "max": 24, + "step": 2, + "unit": "px", + "default": 8 + }, + { + "type": "range", + "id": "padding", + "label": "Padding", + "min": 8, + "max": 40, + "step": 2, + "unit": "px", + "default": 20 + }, + { + "type": "range", + "id": "spacing", + "label": "Content spacing", + "min": 4, + "max": 24, + "step": 2, + "unit": "px", + "default": 12 + }, + { + "type": "header", + "content": "Typography" + }, + { + "type": "range", + "id": "title_size", + "label": "Title size", + "min": 12, + "max": 32, + "step": 1, + "unit": "px", + "default": 16 + }, + { + "type": "range", + "id": "text_size", + "label": "Text size", + "min": 10, + "max": 24, + "step": 1, + "unit": "px", + "default": 14 + }, + { + "type": "header", + "content": "Layout" + }, + { + "type": "range", + "id": "desktop_width_percent", + "label": "Desktop width", + "min": 50, + "max": 100, + "step": 5, + "unit": "%", + "default": 100 + }, + { + "type": "range", + "id": "margin_top", + "label": "Margin top", + "min": 0, + "max": 40, + "step": 4, + "unit": "px", + "default": 0 + }, + { + "type": "range", + "id": "margin_bottom", + "label": "Margin bottom", + "min": 0, + "max": 40, + "step": 4, + "unit": "px", + "default": 0 + } + ], + "presets": [ + { + "name": "Product safety warning" + } + ] +} +{% endschema %} \ No newline at end of file diff --git a/blocks/filters.liquid b/blocks/filters.liquid index ffb0752ce..d8b370a34 100644 --- a/blocks/filters.liquid +++ b/blocks/filters.liquid @@ -157,7 +157,8 @@ filters: filters, results_url: results_url, show_filter_label: block_settings.show_filter_label, - should_show_clear_all: true + should_show_clear_all: true, + prefer: block_settings.filter_swatch_display %} {% if block_settings.enable_filtering %} @@ -194,7 +195,7 @@ else assign should_render_clear = false endif - render 'list-filter', filter: filter, filter_style: block_settings.filter_style, active_value_count: active_value_count, should_render_clear: should_render_clear, show_swatch_label: block_settings.show_swatch_label, sectionId: section.id + render 'list-filter', filter: filter, filter_style: block_settings.filter_style, active_value_count: active_value_count, should_render_clear: should_render_clear, show_swatch_label: block_settings.show_swatch_label, sectionId: section.id, prefer: block_settings.filter_swatch_display %} {% endcase %} {%- endfor -%} @@ -424,7 +425,8 @@ filters: filters, results_url: results_url, show_filter_label: block_settings.show_filter_label, - should_show_clear_all: false + should_show_clear_all: false, + prefer: block_settings.filter_swatch_display %}
@@ -450,7 +452,7 @@ assign active_value_count = filter.active_values | size assign total_active_values = total_active_values | plus: active_value_count - render 'list-filter', filter: filter, filter_style: 'vertical', active_value_count: active_value_count, should_render_clear: false, in_drawer: true, sectionId: section.id + render 'list-filter', filter: filter, filter_style: 'vertical', active_value_count: active_value_count, should_render_clear: false, in_drawer: true, sectionId: section.id, prefer: block_settings.filter_swatch_display %} {% endcase %} {%- endfor -%} @@ -1370,6 +1372,24 @@ "default": "default", "visible_if": "{{ block.settings.enable_filtering == true }}" }, + { + "type": "select", + "id": "filter_swatch_display", + "label": "Filter swatch display", + "info": "Controls whether filter swatches prefer showing solid colors or images when both are available.", + "options": [ + { + "value": "image", + "label": "Image first" + }, + { + "value": "color", + "label": "Color first" + } + ], + "default": "image", + "visible_if": "{{ block.settings.enable_filtering == true }}" + }, { "type": "checkbox", "id": "show_swatch_label", diff --git a/blocks/policies-tab.liquid b/blocks/policies-tab.liquid new file mode 100644 index 000000000..9cb3adb61 --- /dev/null +++ b/blocks/policies-tab.liquid @@ -0,0 +1,277 @@ +{% assign block_id = block.id | replace: '_', '' | downcase %} + +{% style %} + .policies-tab-{{ block_id }} { + display: block; + width: {{ block.settings.desktop_width_percent }}%; + max-width: 100%; + margin: 0 auto; + padding: {{ block.settings.padding_top }}px {{ block.settings.padding_horizontal }}px {{ block.settings.padding_bottom }}px; + background-color: {{ block.settings.background_color }}; + border-radius: {{ block.settings.border_radius }}px; + text-align: center; + } + + .policies-tab__title-{{ block_id }} { + margin: 0 0 {{ block.settings.title_spacing }}px; + color: {{ block.settings.title_color }}; + font-size: {{ block.settings.title_size }}px; + font-weight: 700; + } + + .policies-tab__list-{{ block_id }} { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-wrap: wrap; + gap: {{ block.settings.link_spacing }}px; + justify-content: center; + align-items: center; + } + + .policies-tab__link-{{ block_id }} { + color: {{ block.settings.link_color }}; + font-size: {{ block.settings.link_size }}px; + text-decoration: {{ block.settings.link_underline }}; + transition: color 0.2s ease; + white-space: nowrap; + } + + .policies-tab__link-{{ block_id }}:hover { + color: {{ block.settings.link_hover_color }}; + } + + .policies-tab__empty-{{ block_id }} { + color: {{ block.settings.title_color }}; + opacity: 0.6; + font-size: {{ block.settings.link_size }}px; + font-style: italic; + } + + @media screen and (max-width: 749px) { + .policies-tab-{{ block_id }} { + padding: {{ block.settings.padding_top | times: 0.7 }}px {{ block.settings.padding_horizontal | times: 0.7 }}px {{ block.settings.padding_bottom | times: 0.7 }}px; + } + + .policies-tab__title-{{ block_id }} { + font-size: {{ block.settings.title_size | times: 0.8 }}px; + } + + .policies-tab__link-{{ block_id }} { + font-size: {{ block.settings.link_size | times: 0.9 }}px; + } + } +{% endstyle %} + +
+

{{ block.settings.title }}

+ + {% liquid + assign menu = block.settings.menu + assign has_menu = false + if menu != blank and menu.links.size > 0 + assign has_menu = true + endif + %} + + {% if has_menu %} + + {% elsif shop.policies.size > 0 %} + + {% else %} +

+ No policies found. Select a menu or add policies in your store settings. +

+ {% endif %} +
+ +{% schema %} +{ + "name": "Policies", + "settings": [ + { + "type": "header", + "content": "Content" + }, + { + "type": "text", + "id": "title", + "label": "Title", + "default": "Policies" + }, + { + "type": "link_list", + "id": "menu", + "label": "Menu", + "default": "footer", + "info": "Select a navigation menu for policy links. Falls back to store policies if empty." + }, + { + "type": "range", + "id": "desktop_width_percent", + "label": "Desktop width", + "min": 50, + "max": 100, + "step": 5, + "unit": "%", + "default": 100 + }, + { + "type": "header", + "content": "Style" + }, + { + "type": "color", + "id": "background_color", + "label": "Background color", + "default": "#FFFFFF" + }, + { + "type": "range", + "id": "border_radius", + "label": "Border radius", + "min": 0, + "max": 40, + "step": 2, + "unit": "px", + "default": 0 + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding top", + "min": 0, + "max": 100, + "step": 5, + "unit": "px", + "default": 40 + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding bottom", + "min": 0, + "max": 100, + "step": 5, + "unit": "px", + "default": 40 + }, + { + "type": "range", + "id": "padding_horizontal", + "label": "Padding horizontal", + "min": 0, + "max": 100, + "step": 5, + "unit": "px", + "default": 20 + }, + { + "type": "header", + "content": "Title" + }, + { + "type": "color", + "id": "title_color", + "label": "Color", + "default": "#121212" + }, + { + "type": "range", + "id": "title_size", + "label": "Size", + "min": 16, + "max": 48, + "step": 2, + "unit": "px", + "default": 32 + }, + { + "type": "range", + "id": "title_spacing", + "label": "Spacing below", + "min": 10, + "max": 50, + "step": 5, + "unit": "px", + "default": 25 + }, + { + "type": "header", + "content": "Links" + }, + { + "type": "color", + "id": "link_color", + "label": "Color", + "default": "#121212" + }, + { + "type": "color", + "id": "link_hover_color", + "label": "Hover color", + "default": "#333333" + }, + { + "type": "range", + "id": "link_size", + "label": "Size", + "min": 12, + "max": 24, + "step": 1, + "unit": "px", + "default": 16 + }, + { + "type": "select", + "id": "link_underline", + "label": "Underline", + "options": [ + { + "value": "none", + "label": "None" + }, + { + "value": "underline", + "label": "Underline" + } + ], + "default": "none" + }, + { + "type": "range", + "id": "link_spacing", + "label": "Spacing between", + "min": 5, + "max": 50, + "step": 5, + "unit": "px", + "default": 20 + } + ], + "presets": [ + { + "name": "Policies" + } + ] +} +{% endschema %} diff --git a/blocks/reviews-links.liquid b/blocks/reviews-links.liquid new file mode 100644 index 000000000..3b3fe8210 --- /dev/null +++ b/blocks/reviews-links.liquid @@ -0,0 +1,390 @@ +{% assign block_id = block.id | replace: '_', '' | downcase %} + +{% style %} + .reviews-links-{{ block_id }} { + text-align: {{ block.settings.alignment }}; + padding: {{ block.settings.padding_top }}px {{ block.settings.padding_horizontal }}px {{ block.settings.padding_bottom }}px; + } + + .reviews-links__title-{{ block_id }} { + margin: 0 0 {{ block.settings.title_spacing }}px; + color: {{ block.settings.title_color }}; + font-size: {{ block.settings.title_size }}px; + font-weight: 700; + } + + .reviews-links__subtitle-{{ block_id }} { + margin: 0 0 {{ block.settings.subtitle_spacing }}px; + color: {{ block.settings.subtitle_color }}; + font-size: {{ block.settings.subtitle_size }}px; + font-weight: 400; + } + + .reviews-links__buttons-{{ block_id }} { + display: flex; + flex-wrap: wrap; + gap: {{ block.settings.button_spacing }}px; + {% case block.settings.alignment %} + {% when 'center' %} + justify-content: center; + {% when 'right' %} + justify-content: flex-end; + {% else %} + justify-content: flex-start; + {% endcase %} + } + + .reviews-links__button-{{ block_id }} { + display: inline-flex; + align-items: center; + gap: 8px; + padding: {{ block.settings.button_padding_vertical }}px {{ block.settings.button_padding_horizontal }}px; + font-size: {{ block.settings.button_font_size }}px; + font-weight: 600; + text-decoration: none; + border-radius: {{ block.settings.button_border_radius }}px; + transition: opacity 0.2s ease, transform 0.2s ease; + } + + .reviews-links__button-{{ block_id }}:hover { + opacity: 0.85; + transform: translateY(-1px); + } + + .reviews-links__button--google-{{ block_id }} { + background-color: {{ block.settings.google_bg_color }}; + color: {{ block.settings.google_text_color }}; + } + + .reviews-links__button--facebook-{{ block_id }} { + background-color: {{ block.settings.facebook_bg_color }}; + color: {{ block.settings.facebook_text_color }}; + } + + .reviews-links__button-{{ block_id }} svg { + width: 20px; + height: 20px; + flex-shrink: 0; + } + + @media screen and (max-width: 749px) { + .reviews-links-{{ block_id }} { + padding: {{ block.settings.padding_top | times: 0.7 }}px {{ block.settings.padding_horizontal | times: 0.7 }}px {{ block.settings.padding_bottom | times: 0.7 }}px; + } + + .reviews-links__title-{{ block_id }} { + font-size: {{ block.settings.title_size | times: 0.8 }}px; + } + + .reviews-links__buttons-{{ block_id }} { + {% if block.settings.stack_on_mobile %} + flex-direction: column; + align-items: stretch; + {% endif %} + } + + .reviews-links__button-{{ block_id }} { + justify-content: center; + } + } +{% endstyle %} + +
+ {% if block.settings.title != blank %} +

{{ block.settings.title }}

+ {% endif %} + + {% if block.settings.subtitle != blank %} +

{{ block.settings.subtitle }}

+ {% endif %} + + {% if block.settings.google_url != blank or block.settings.facebook_url != blank %} +
+ {% if block.settings.google_url != blank %} + + + {{ block.settings.google_label }} + + {% endif %} + + {% if block.settings.facebook_url != blank %} + + {% endif %} +
+ {% else %} +

+ Add your Google and Facebook review URLs in the block settings. +

+ {% endif %} +
+ +{% schema %} +{ + "name": "Reviews Links", + "settings": [ + { + "type": "header", + "content": "Content" + }, + { + "type": "text", + "id": "title", + "label": "Title", + "default": "What Our Customers Say" + }, + { + "type": "text", + "id": "subtitle", + "label": "Subtitle", + "default": "Read our reviews on Google and Facebook" + }, + { + "type": "header", + "content": "Google Reviews" + }, + { + "type": "url", + "id": "google_url", + "label": "Google reviews URL" + }, + { + "type": "text", + "id": "google_label", + "label": "Button label", + "default": "Google Reviews" + }, + { + "type": "color", + "id": "google_bg_color", + "label": "Button background", + "default": "#FFFFFF" + }, + { + "type": "color", + "id": "google_text_color", + "label": "Button text color", + "default": "#333333" + }, + { + "type": "header", + "content": "Facebook Reviews" + }, + { + "type": "url", + "id": "facebook_url", + "label": "Facebook reviews URL" + }, + { + "type": "text", + "id": "facebook_label", + "label": "Button label", + "default": "Facebook Reviews" + }, + { + "type": "color", + "id": "facebook_bg_color", + "label": "Button background", + "default": "#1877F2" + }, + { + "type": "color", + "id": "facebook_text_color", + "label": "Button text color", + "default": "#FFFFFF" + }, + { + "type": "header", + "content": "Layout" + }, + { + "type": "select", + "id": "alignment", + "label": "Alignment", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "center", "label": "Center" }, + { "value": "right", "label": "Right" } + ], + "default": "center" + }, + { + "type": "checkbox", + "id": "stack_on_mobile", + "label": "Stack buttons on mobile", + "default": true + }, + { + "type": "header", + "content": "Title style" + }, + { + "type": "color", + "id": "title_color", + "label": "Title color", + "default": "#121212" + }, + { + "type": "range", + "id": "title_size", + "label": "Title size", + "min": 16, + "max": 48, + "step": 2, + "unit": "px", + "default": 28 + }, + { + "type": "range", + "id": "title_spacing", + "label": "Title spacing below", + "min": 0, + "max": 50, + "step": 5, + "unit": "px", + "default": 10 + }, + { + "type": "color", + "id": "subtitle_color", + "label": "Subtitle color", + "default": "#555555" + }, + { + "type": "range", + "id": "subtitle_size", + "label": "Subtitle size", + "min": 12, + "max": 24, + "step": 1, + "unit": "px", + "default": 16 + }, + { + "type": "range", + "id": "subtitle_spacing", + "label": "Subtitle spacing below", + "min": 0, + "max": 50, + "step": 5, + "unit": "px", + "default": 20 + }, + { + "type": "header", + "content": "Button style" + }, + { + "type": "range", + "id": "button_font_size", + "label": "Font size", + "min": 12, + "max": 20, + "step": 1, + "unit": "px", + "default": 14 + }, + { + "type": "range", + "id": "button_padding_vertical", + "label": "Vertical padding", + "min": 4, + "max": 24, + "step": 2, + "unit": "px", + "default": 12 + }, + { + "type": "range", + "id": "button_padding_horizontal", + "label": "Horizontal padding", + "min": 8, + "max": 40, + "step": 2, + "unit": "px", + "default": 24 + }, + { + "type": "range", + "id": "button_border_radius", + "label": "Border radius", + "min": 0, + "max": 30, + "step": 2, + "unit": "px", + "default": 8 + }, + { + "type": "range", + "id": "button_spacing", + "label": "Spacing between buttons", + "min": 5, + "max": 30, + "step": 5, + "unit": "px", + "default": 15 + }, + { + "type": "header", + "content": "Padding" + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding top", + "min": 0, + "max": 100, + "step": 5, + "unit": "px", + "default": 40 + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding bottom", + "min": 0, + "max": 100, + "step": 5, + "unit": "px", + "default": 40 + }, + { + "type": "range", + "id": "padding_horizontal", + "label": "Padding horizontal", + "min": 0, + "max": 100, + "step": 5, + "unit": "px", + "default": 20 + } + ], + "presets": [ + { + "name": "Reviews Links", + "category": "Custom" + } + ] +} +{% endschema %} diff --git a/blocks/social-links.liquid b/blocks/social-links.liquid index 803e2b2e8..cf149ec70 100644 --- a/blocks/social-links.liquid +++ b/blocks/social-links.liquid @@ -3,7 +3,7 @@ {{ block.shopify_attributes }} > {% liquid - assign social_links = 'facebook_url,instagram_url,youtube_url,tiktok_url,twitter_url,threads_url,linkedin_url,bluesky_url,snapchat_url,pinterest_url,tumblr_url,vimeo_url,custom_url' | split: ',' + assign social_links = 'facebook_url,instagram_url,youtube_url,tiktok_url,twitter_url,threads_url,linkedin_url,bluesky_url,snapchat_url,pinterest_url,tumblr_url,vimeo_url,whatsapp_url,custom_url' | split: ',' %} {% for link_key in social_links %} @@ -38,6 +38,8 @@ assign platform = 'tumblr' when 'vimeo_url' assign platform = 'vimeo' + when 'whatsapp_url' + assign platform = 'whatsapp' when 'custom_url' # For custom URLs, extract domain from URL for platform identification assign platform = link_url | split: '//' | last | remove: 'www.' | split: '.' | first @@ -224,6 +226,11 @@ "id": "vimeo_url", "label": "t:options.vimeo" }, + { + "type": "url", + "id": "whatsapp_url", + "label": "t:options.whatsapp" + }, { "type": "url", "id": "custom_url", diff --git a/blocks/testimonials.liquid b/blocks/testimonials.liquid new file mode 100644 index 000000000..7a8fc5a3a --- /dev/null +++ b/blocks/testimonials.liquid @@ -0,0 +1,380 @@ +{% assign block_id = block.id | replace: '_', '' | downcase %} +{% assign s = block.settings %} + +{% style %} + .testimonials-{{ block_id }} { + padding: {{ s.padding_top }}px {{ s.padding_horizontal }}px {{ s.padding_bottom }}px; + text-align: center; + } + + .testimonials__title-{{ block_id }} { + margin: 0 0 {{ s.title_spacing }}px; + color: {{ s.title_color }}; + font-size: {{ s.title_size }}px; + font-weight: 700; + } + + .testimonials__subtitle-{{ block_id }} { + margin: 0 0 {{ s.subtitle_spacing }}px; + color: {{ s.subtitle_color }}; + font-size: {{ s.subtitle_size }}px; + } + + .testimonials__grid-{{ block_id }} { + display: grid; + grid-template-columns: repeat({{ s.columns }}, 1fr); + gap: {{ s.card_gap }}px; + max-width: 1200px; + margin: 0 auto; + } + + .testimonials__grid-{{ block_id }} .testimonial-card { + background: {{ s.card_bg_color }}; + border: 1px solid {{ s.card_border_color }}; + border-radius: {{ s.card_border_radius }}px; + padding: {{ s.card_padding }}px; + display: flex; + flex-direction: column; + gap: 12px; + text-align: left; + } + + .testimonials__grid-{{ block_id }} .testimonial-card__stars { + display: flex; + gap: 2px; + } + + .testimonials__grid-{{ block_id }} .testimonial-card__star { + fill: {{ s.star_empty_color }}; + } + + .testimonials__grid-{{ block_id }} .testimonial-card__star--filled { + fill: {{ s.star_color }}; + } + + .testimonials__grid-{{ block_id }} .testimonial-card__text { + margin: 0; + font-size: {{ s.review_font_size }}px; + line-height: 1.6; + color: {{ s.review_text_color }}; + font-style: italic; + } + + .testimonials__grid-{{ block_id }} .testimonial-card__footer { + display: flex; + align-items: center; + gap: 8px; + margin-top: auto; + } + + .testimonials__grid-{{ block_id }} .testimonial-card__name { + font-weight: 600; + font-size: {{ s.name_font_size }}px; + color: {{ s.name_color }}; + } + + .testimonials__grid-{{ block_id }} .testimonial-card__source { + display: inline-flex; + align-items: center; + gap: 4px; + font-size: 12px; + opacity: 0.7; + color: {{ s.review_text_color }}; + } + + @media screen and (max-width: 749px) { + .testimonials__grid-{{ block_id }} { + grid-template-columns: 1fr; + } + + .testimonials__title-{{ block_id }} { + font-size: {{ s.title_size | times: 0.8 }}px; + } + + .testimonials-{{ block_id }} { + padding: {{ s.padding_top | times: 0.7 }}px {{ s.padding_horizontal | times: 0.7 }}px {{ s.padding_bottom | times: 0.7 }}px; + } + } + + @media screen and (min-width: 750px) and (max-width: 989px) { + .testimonials__grid-{{ block_id }} { + grid-template-columns: repeat({{ s.columns | at_most: 2 }}, 1fr); + } + } +{% endstyle %} + +
+ {% if s.title != blank %} +

{{ s.title }}

+ {% endif %} + + {% if s.subtitle != blank %} +

{{ s.subtitle }}

+ {% endif %} + +
+ {% content_for 'blocks' %} +
+
+ +{% schema %} +{ + "name": "Testimonials", + "tag": null, + "blocks": [ + { + "type": "_testimonial-card" + } + ], + "settings": [ + { + "type": "header", + "content": "Content" + }, + { + "type": "text", + "id": "title", + "label": "Title", + "default": "What Our Customers Say" + }, + { + "type": "text", + "id": "subtitle", + "label": "Subtitle", + "default": "Real reviews from our happy customers" + }, + { + "type": "header", + "content": "Layout" + }, + { + "type": "range", + "id": "columns", + "label": "Columns (desktop)", + "min": 1, + "max": 4, + "step": 1, + "default": 3 + }, + { + "type": "range", + "id": "card_gap", + "label": "Gap between cards", + "min": 8, + "max": 40, + "step": 4, + "unit": "px", + "default": 20 + }, + { + "type": "header", + "content": "Card style" + }, + { + "type": "color", + "id": "card_bg_color", + "label": "Card background", + "default": "#FFFFFF" + }, + { + "type": "color", + "id": "card_border_color", + "label": "Card border color", + "default": "#E5E5E5" + }, + { + "type": "range", + "id": "card_border_radius", + "label": "Card border radius", + "min": 0, + "max": 24, + "step": 2, + "unit": "px", + "default": 8 + }, + { + "type": "range", + "id": "card_padding", + "label": "Card padding", + "min": 12, + "max": 40, + "step": 4, + "unit": "px", + "default": 24 + }, + { + "type": "header", + "content": "Stars" + }, + { + "type": "color", + "id": "star_color", + "label": "Filled star color", + "default": "#FFB800" + }, + { + "type": "color", + "id": "star_empty_color", + "label": "Empty star color", + "default": "#D4D4D4" + }, + { + "type": "header", + "content": "Typography" + }, + { + "type": "color", + "id": "title_color", + "label": "Title color", + "default": "#121212" + }, + { + "type": "range", + "id": "title_size", + "label": "Title size", + "min": 16, + "max": 48, + "step": 2, + "unit": "px", + "default": 28 + }, + { + "type": "range", + "id": "title_spacing", + "label": "Title spacing below", + "min": 0, + "max": 50, + "step": 5, + "unit": "px", + "default": 10 + }, + { + "type": "color", + "id": "subtitle_color", + "label": "Subtitle color", + "default": "#555555" + }, + { + "type": "range", + "id": "subtitle_size", + "label": "Subtitle size", + "min": 12, + "max": 24, + "step": 1, + "unit": "px", + "default": 16 + }, + { + "type": "range", + "id": "subtitle_spacing", + "label": "Subtitle spacing below", + "min": 0, + "max": 50, + "step": 5, + "unit": "px", + "default": 25 + }, + { + "type": "color", + "id": "review_text_color", + "label": "Review text color", + "default": "#333333" + }, + { + "type": "range", + "id": "review_font_size", + "label": "Review text size", + "min": 12, + "max": 20, + "step": 1, + "unit": "px", + "default": 14 + }, + { + "type": "color", + "id": "name_color", + "label": "Reviewer name color", + "default": "#121212" + }, + { + "type": "range", + "id": "name_font_size", + "label": "Reviewer name size", + "min": 12, + "max": 18, + "step": 1, + "unit": "px", + "default": 14 + }, + { + "type": "header", + "content": "Padding" + }, + { + "type": "range", + "id": "padding_top", + "label": "Padding top", + "min": 0, + "max": 100, + "step": 5, + "unit": "px", + "default": 40 + }, + { + "type": "range", + "id": "padding_bottom", + "label": "Padding bottom", + "min": 0, + "max": 100, + "step": 5, + "unit": "px", + "default": 40 + }, + { + "type": "range", + "id": "padding_horizontal", + "label": "Padding horizontal", + "min": 0, + "max": 100, + "step": 5, + "unit": "px", + "default": 20 + } + ], + "presets": [ + { + "name": "Testimonials", + "category": "Custom", + "blocks": [ + { + "type": "_testimonial-card", + "settings": { + "review_text": "The crystals are absolutely stunning. Quality is unmatched and shipping was fast!", + "reviewer_name": "Sarah M.", + "rating": 5, + "source": "google" + } + }, + { + "type": "_testimonial-card", + "settings": { + "review_text": "Best crystal shop I've found. The selection is incredible and prices are fair.", + "reviewer_name": "James K.", + "rating": 5, + "source": "facebook" + } + }, + { + "type": "_testimonial-card", + "settings": { + "review_text": "I keep coming back! Every order has been perfect. Highly recommend ASE Crystals.", + "reviewer_name": "Emily R.", + "rating": 5, + "source": "google" + } + } + ] + } + ] +} +{% endschema %} diff --git a/config/settings_data.json b/config/settings_data.json index 41beca196..a6765718a 100644 --- a/config/settings_data.json +++ b/config/settings_data.json @@ -7,10 +7,11 @@ * made to this file may be overwritten. * ------------------------------------------------------------ */ - { +{ "current": { - "logo_height": 36, - "logo_height_mobile": 28, + "logo": "shopify://shop_images/logo_210_60.svg", + "logo_height": 50, + "logo_height_mobile": 40, "type_body_font": "inter_n4", "type_subheading_font": "inter_n5", "type_heading_font": "inter_n7", @@ -54,7 +55,6 @@ "button_border_radius_primary": 14, "secondary_button_border_width": 1, "button_border_radius_secondary": 14, - "button_font_weight_secondary": "default", "cart_type": "drawer", "cart_price_font": "subheading", "show_cart_note": false, @@ -77,111 +77,112 @@ "variant_button_border_width": 1, "variant_button_radius": 14, "variant_button_width": "equal-width-buttons", + "button_font_weight_secondary": "default", "content_for_index": [], "color_schemes": { "scheme-1": { "settings": { "background": "#ffffff", - "foreground_heading": "#000000", - "foreground": "#000000cf", - "primary": "#000000cf", - "primary_hover": "#000000", - "border": "#0000000f", - "shadow": "#000000", - "primary_button_background": "#000000", + "foreground_heading": "#121212", + "foreground": "#121212cf", + "primary": "#121212cf", + "primary_hover": "#121212", + "border": "#12121221", + "shadow": "#121212", + "primary_button_background": "#121212", "primary_button_text": "#ffffff", - "primary_button_border": "#000000", + "primary_button_border": "#121212", "primary_button_hover_background": "#333333", "primary_button_hover_text": "#ffffff", - "primary_button_hover_border": "#000000", + "primary_button_hover_border": "#121212", "secondary_button_background": "rgba(0,0,0,0)", - "secondary_button_text": "#000000", - "secondary_button_border": "#000000", - "secondary_button_hover_background": "#fafafa", + "secondary_button_text": "#121212", + "secondary_button_border": "#121212", + "secondary_button_hover_background": "#f5f5f5", "secondary_button_hover_text": "#333333", "secondary_button_hover_border": "#333333", "input_background": "#ffffffc7", - "input_text_color": "#333333", - "input_border_color": "#dfdfdf", - "input_hover_background": "#00000003", + "input_text_color": "#121212", + "input_border_color": "#12121221", + "input_hover_background": "#f5f5f5", "variant_background_color": "#ffffff", - "variant_text_color": "#000000", - "variant_border_color": "#00000021", + "variant_text_color": "#121212", + "variant_border_color": "#12121221", "variant_hover_background_color": "#f5f5f5", - "variant_hover_text_color": "#000000", + "variant_hover_text_color": "#121212", "variant_hover_border_color": "#e6e6e6", - "selected_variant_background_color": "#000000", + "selected_variant_background_color": "#121212", "selected_variant_text_color": "#ffffff", - "selected_variant_border_color": "#000000", - "selected_variant_hover_background_color": "#1a1a1a", + "selected_variant_border_color": "#121212", + "selected_variant_hover_background_color": "#333333", "selected_variant_hover_text_color": "#ffffff", - "selected_variant_hover_border_color": "#1a1a1a" + "selected_variant_hover_border_color": "#333333" } }, "scheme-2": { "settings": { - "background": "#f5f5f5", - "foreground_heading": "#000000", - "foreground": "#000000cf", - "primary": "#000000cf", - "primary_hover": "#ffffff", - "border": "#dfdfdf", - "shadow": "#000000", - "primary_button_background": "#000000", - "primary_button_text": "#ffffff", - "primary_button_border": "#000000", + "background": "#f3f3f3", + "foreground_heading": "#121212", + "foreground": "#121212cf", + "primary": "#121212cf", + "primary_hover": "#121212", + "border": "#12121221", + "shadow": "#121212", + "primary_button_background": "#121212", + "primary_button_text": "#f3f3f3", + "primary_button_border": "#121212", "primary_button_hover_background": "#333333", "primary_button_hover_text": "#ffffff", "primary_button_hover_border": "#333333", "secondary_button_background": "rgba(0,0,0,0)", - "secondary_button_text": "#000000", - "secondary_button_border": "#000000", + "secondary_button_text": "#121212", + "secondary_button_border": "#121212", "secondary_button_hover_background": "#ffffff5c", - "secondary_button_hover_text": "#000000", + "secondary_button_hover_text": "#121212", "secondary_button_hover_border": "#333333ba", "input_background": "rgba(0,0,0,0)", - "input_text_color": "#00000087", - "input_border_color": "#00000021", + "input_text_color": "#121212", + "input_border_color": "#12121221", "input_hover_background": "#ffffff5c", "variant_background_color": "#ffffff", - "variant_text_color": "#000000", + "variant_text_color": "#121212", "variant_border_color": "#e6e6e6", "variant_hover_background_color": "#f5f5f5", - "variant_hover_text_color": "#000000", + "variant_hover_text_color": "#121212", "variant_hover_border_color": "#e6e6e6", - "selected_variant_background_color": "#000000", + "selected_variant_background_color": "#121212", "selected_variant_text_color": "#ffffff", - "selected_variant_border_color": "#000000", - "selected_variant_hover_background_color": "#1a1a1a", + "selected_variant_border_color": "#121212", + "selected_variant_hover_background_color": "#333333", "selected_variant_hover_text_color": "#ffffff", - "selected_variant_hover_border_color": "#1a1a1a" + "selected_variant_hover_border_color": "#333333" } }, "scheme-3": { "settings": { - "background": "#eef1ea", - "foreground_heading": "#000000", - "foreground": "#000000cf", - "primary": "#000000cf", - "primary_hover": "#000000", - "border": "#000000cf", - "shadow": "#000000", - "primary_button_background": "#000000", - "primary_button_text": "#ffffff", - "primary_button_border": "#000000", - "primary_button_hover_background": "#333333", + "background": "#242833", + "foreground_heading": "#ffffff", + "foreground": "#ffffff", + "primary": "#ffffff", + "primary_hover": "#ffffffb0", + "border": "#ffffffb0", + "shadow": "#121212", + "primary_button_background": "#ffffff", + "primary_button_text": "#000000", + "primary_button_border": "#ffffff", + "primary_button_hover_background": "#000000", "primary_button_hover_text": "#ffffff", - "primary_button_hover_border": "#333333", + "primary_button_hover_border": "#000000", "secondary_button_background": "rgba(0,0,0,0)", - "secondary_button_text": "#000000", - "secondary_button_border": "#000000", - "secondary_button_hover_background": "#ffffff5c", - "secondary_button_hover_text": "#000000cf", - "secondary_button_hover_border": "#000000cf", - "input_background": "rgba(0,0,0,0)", - "input_text_color": "#000000cf", - "input_border_color": "#000000cf", - "input_hover_background": "#ffffff5c", + "secondary_button_text": "#ffffff", + "secondary_button_border": "#ffffffb0", + "secondary_button_hover_background": "#ffffff0a", + "secondary_button_hover_text": "#ffffffed", + "secondary_button_hover_border": "#ffffffb0", + "input_background": "#242833", + "input_text_color": "#ffffffed", + "input_border_color": "#ffffffb0", + "input_hover_background": "#ffffff0a", "variant_background_color": "#ffffff", "variant_text_color": "#000000", "variant_border_color": "#e6e6e6", @@ -198,54 +199,54 @@ }, "scheme-4": { "settings": { - "background": "#e1edf5", - "foreground_heading": "#000000", - "foreground": "#000000cf", - "primary": "#000000cf", - "primary_hover": "#000000", - "border": "#1d368680", - "shadow": "#000000", - "primary_button_background": "#000000", - "primary_button_text": "#ffffff", - "primary_button_border": "#1d3686", - "primary_button_hover_background": "#333333", + "background": "#121212", + "foreground_heading": "#ffffff", + "foreground": "#ffffff", + "primary": "#ffffff", + "primary_hover": "#ffffffb0", + "border": "#ffffffb0", + "shadow": "#121212", + "primary_button_background": "#ffffff", + "primary_button_text": "#121212", + "primary_button_border": "#ffffff", + "primary_button_hover_background": "#000000", "primary_button_hover_text": "#ffffff", "primary_button_hover_border": "#000000", "secondary_button_background": "rgba(0,0,0,0)", - "secondary_button_text": "#000000", - "secondary_button_border": "#000000", - "secondary_button_hover_background": "#ffffff5c", - "secondary_button_hover_text": "#000000cf", - "secondary_button_hover_border": "#000000cf", - "input_background": "rgba(0,0,0,0)", - "input_text_color": "#000000cf", - "input_border_color": "#000000cf", - "input_hover_background": "#ffffff5c", + "secondary_button_text": "#ffffff", + "secondary_button_border": "#ffffffb0", + "secondary_button_hover_background": "#ffffff0a", + "secondary_button_hover_text": "#ffffffed", + "secondary_button_hover_border": "#ffffffb0", + "input_background": "#121212", + "input_text_color": "#ffffffed", + "input_border_color": "#ffffffb0", + "input_hover_background": "#ffffff0a", "variant_background_color": "#ffffff", - "variant_text_color": "#000000", + "variant_text_color": "#121212", "variant_border_color": "#e6e6e6", "variant_hover_background_color": "#f5f5f5", - "variant_hover_text_color": "#000000", + "variant_hover_text_color": "#121212", "variant_hover_border_color": "#e6e6e6", - "selected_variant_background_color": "#000000", - "selected_variant_text_color": "#ffffff", - "selected_variant_border_color": "#000000", - "selected_variant_hover_background_color": "#1a1a1a", - "selected_variant_hover_text_color": "#ffffff", - "selected_variant_hover_border_color": "#1a1a1a" + "selected_variant_background_color": "#ffffff", + "selected_variant_text_color": "#121212", + "selected_variant_border_color": "#ffffff", + "selected_variant_hover_background_color": "#f0f0f0", + "selected_variant_hover_text_color": "#121212", + "selected_variant_hover_border_color": "#f0f0f0" } }, "scheme-5": { "settings": { - "background": "#333333", + "background": "#4e6b9e", "foreground_heading": "#ffffff", "foreground": "#ffffff", "primary": "#ffffff", "primary_hover": "#ffffffb0", "border": "#ffffffb0", - "shadow": "#000000", + "shadow": "#121212", "primary_button_background": "#ffffff", - "primary_button_text": "#000000", + "primary_button_text": "#4e6b9e", "primary_button_border": "#ffffff", "primary_button_hover_background": "#000000", "primary_button_hover_text": "#ffffff", @@ -256,22 +257,22 @@ "secondary_button_hover_background": "#ffffff0a", "secondary_button_hover_text": "#ffffffed", "secondary_button_hover_border": "#ffffffb0", - "input_background": "#333333", + "input_background": "#4e6b9e", "input_text_color": "#ffffffed", "input_border_color": "#ffffffb0", "input_hover_background": "#ffffff0a", "variant_background_color": "#ffffff", - "variant_text_color": "#000000", - "variant_border_color": "#e6e6e6", + "variant_text_color": "#4e6b9e", + "variant_border_color": "#4e6b9e66", "variant_hover_background_color": "#f5f5f5", - "variant_hover_text_color": "#000000", - "variant_hover_border_color": "#e6e6e6", - "selected_variant_background_color": "#000000", + "variant_hover_text_color": "#4e6b9e", + "variant_hover_border_color": "#4e6b9e", + "selected_variant_background_color": "#4e6b9e", "selected_variant_text_color": "#ffffff", - "selected_variant_border_color": "#000000", - "selected_variant_hover_background_color": "#1a1a1a", + "selected_variant_border_color": "#4e6b9e", + "selected_variant_hover_background_color": "#2339a0", "selected_variant_hover_text_color": "#ffffff", - "selected_variant_hover_border_color": "#1a1a1a" + "selected_variant_hover_border_color": "#394fc0" } }, "scheme-6": { @@ -359,22 +360,22 @@ "color_schemes": { "scheme-1": { "settings": { - "background": "#ffffff", - "foreground_heading": "#000000", - "foreground": "#000000cf", - "primary": "#000000cf", - "primary_hover": "#000000", - "border": "#0000000f", - "shadow": "#000000", - "primary_button_background": "#000000", - "primary_button_text": "#ffffff", - "primary_button_border": "#000000", + "background": "#FFFFFF", + "foreground_heading": "#121212", + "foreground": "#121212cf", + "primary": "#121212cf", + "primary_hover": "#121212", + "border": "#12121220", + "shadow": "#121212", + "primary_button_background": "#121212", + "primary_button_text": "#FFFFFF", + "primary_button_border": "#121212", "primary_button_hover_background": "#333333", - "primary_button_hover_text": "#ffffff", - "primary_button_hover_border": "#000000", + "primary_button_hover_text": "#FFFFFF", + "primary_button_hover_border": "#121212", "secondary_button_background": "rgba(0,0,0,0)", - "secondary_button_text": "#000000", - "secondary_button_border": "#000000", + "secondary_button_text": "#121212", + "secondary_button_border": "#121212", "secondary_button_hover_background": "#fafafa", "secondary_button_hover_text": "#333333", "secondary_button_hover_border": "#333333", @@ -382,77 +383,77 @@ "input_text_color": "#333333", "input_border_color": "#dfdfdf", "input_hover_background": "#00000003", - "variant_background_color": "#ffffff", - "variant_text_color": "#000000", + "variant_background_color": "#FFFFFF", + "variant_text_color": "#121212", "variant_border_color": "#00000021", "variant_hover_background_color": "#f5f5f5", - "variant_hover_text_color": "#000000", + "variant_hover_text_color": "#121212", "variant_hover_border_color": "#e6e6e6", - "selected_variant_background_color": "#000000", - "selected_variant_text_color": "#ffffff", - "selected_variant_border_color": "#000000", + "selected_variant_background_color": "#121212", + "selected_variant_text_color": "#FFFFFF", + "selected_variant_border_color": "#121212", "selected_variant_hover_background_color": "#1a1a1a", - "selected_variant_hover_text_color": "#ffffff", + "selected_variant_hover_text_color": "#FFFFFF", "selected_variant_hover_border_color": "#1a1a1a" } }, "scheme-2": { "settings": { - "background": "#f5f5f5", - "foreground_heading": "#000000", - "foreground": "#000000cf", - "primary": "#000000cf", + "background": "#F3F3F3", + "foreground_heading": "#121212", + "foreground": "#121212cf", + "primary": "#121212cf", "primary_hover": "#ffffff", "border": "#DFDFDF", - "shadow": "#000000", - "primary_button_background": "#000000", - "primary_button_text": "#ffffff", - "primary_button_border": "#000000", + "shadow": "#121212", + "primary_button_background": "#121212", + "primary_button_text": "#F3F3F3", + "primary_button_border": "#121212", "primary_button_hover_background": "#333333", - "primary_button_hover_text": "#ffffff", + "primary_button_hover_text": "#FFFFFF", "primary_button_hover_border": "#333333", "secondary_button_background": "rgba(0,0,0,0)", - "secondary_button_text": "#000000", - "secondary_button_border": "#000000", + "secondary_button_text": "#121212", + "secondary_button_border": "#121212", "secondary_button_hover_background": "#ffffff5c", - "secondary_button_hover_text": "#000000", + "secondary_button_hover_text": "#121212", "secondary_button_hover_border": "#333333ba", "input_background": "rgba(0,0,0,0)", "input_text_color": "#00000087", "input_border_color": "#00000021", "input_hover_background": "#ffffff5c", - "variant_background_color": "#ffffff", - "variant_text_color": "#000000", + "variant_background_color": "#FFFFFF", + "variant_text_color": "#121212", "variant_border_color": "#e6e6e6", "variant_hover_background_color": "#f5f5f5", - "variant_hover_text_color": "#000000", + "variant_hover_text_color": "#121212", "variant_hover_border_color": "#e6e6e6", - "selected_variant_background_color": "#000000", - "selected_variant_text_color": "#ffffff", - "selected_variant_border_color": "#000000", + "selected_variant_background_color": "#121212", + "selected_variant_text_color": "#FFFFFF", + "selected_variant_border_color": "#121212", "selected_variant_hover_background_color": "#1a1a1a", - "selected_variant_hover_text_color": "#ffffff", + "selected_variant_hover_text_color": "#FFFFFF", "selected_variant_hover_border_color": "#1a1a1a" } }, "scheme-3": { "settings": { - "background": "#eef1ea", + "background": "#242833", "foreground_heading": "#000000", "foreground": "#000000cf", "primary": "#000000cf", "primary_hover": "#000000", "border": "#000000cf", - "shadow": "#000000", - "primary_button_background": "#000000", - "primary_button_text": "#ffffff", - "primary_button_border": "#000000", + "shadow": "#121212", + "primary_button_background": "#FFFFFF", + "primary_button_text": "#000000", + "primary_button_border": "#FFFFFF", "primary_button_hover_background": "#333333", - "primary_button_hover_text": "#ffffff", + "primary_button_hover_text": "#FFFFFF", "primary_button_hover_border": "#333333", "secondary_button_background": "rgba(0,0,0,0)", - "secondary_button_text": "#000000", - "secondary_button_border": "#000000", + "secondary_button_text": "#FFFFFF", + "secondary_button_border": "#FFFFFF", "secondary_button_hover_background": "#ffffff5c", "secondary_button_hover_text": "#000000cf", "secondary_button_hover_border": "#000000cf", @@ -460,38 +461,38 @@ "input_text_color": "#000000cf", "input_border_color": "#000000cf", "input_hover_background": "#ffffff5c", - "variant_background_color": "#ffffff", + "variant_background_color": "#FFFFFF", "variant_text_color": "#000000", "variant_border_color": "#e6e6e6", "variant_hover_background_color": "#f5f5f5", "variant_hover_text_color": "#000000", "variant_hover_border_color": "#e6e6e6", "selected_variant_background_color": "#000000", - "selected_variant_text_color": "#ffffff", + "selected_variant_text_color": "#FFFFFF", "selected_variant_border_color": "#000000", "selected_variant_hover_background_color": "#1a1a1a", - "selected_variant_hover_text_color": "#ffffff", + "selected_variant_hover_text_color": "#FFFFFF", "selected_variant_hover_border_color": "#1a1a1a" } }, "scheme-4": { "settings": { - "background": "#e1edf5", + "background": "#121212", "foreground_heading": "#000000", "foreground": "#000000cf", "primary": "#000000cf", "primary_hover": "#000000", "border": "#1d368680", - "shadow": "#000000", - "primary_button_background": "#000000", - "primary_button_text": "#ffffff", - "primary_button_border": "#1d3686", + "shadow": "#121212", + "primary_button_background": "#FFFFFF", + "primary_button_text": "#121212", + "primary_button_border": "#FFFFFF", "primary_button_hover_background": "#333333", - "primary_button_hover_text": "#ffffff", + "primary_button_hover_text": "#FFFFFF", "primary_button_hover_border": "#000000", "secondary_button_background": "rgba(0,0,0,0)", - "secondary_button_text": "#000000", - "secondary_button_border": "#000000", + "secondary_button_text": "#FFFFFF", + "secondary_button_border": "#FFFFFF", "secondary_button_hover_background": "#ffffff5c", "secondary_button_hover_text": "#000000cf", "secondary_button_hover_border": "#000000cf", @@ -499,31 +500,31 @@ "input_text_color": "#000000cf", "input_border_color": "#000000cf", "input_hover_background": "#ffffff5c", - "variant_background_color": "#ffffff", - "variant_text_color": "#000000", + "variant_background_color": "#FFFFFF", + "variant_text_color": "#121212", "variant_border_color": "#e6e6e6", "variant_hover_background_color": "#f5f5f5", - "variant_hover_text_color": "#000000", + "variant_hover_text_color": "#121212", "variant_hover_border_color": "#e6e6e6", - "selected_variant_background_color": "#000000", - "selected_variant_text_color": "#ffffff", - "selected_variant_border_color": "#000000", + "selected_variant_background_color": "#121212", + "selected_variant_text_color": "#FFFFFF", + "selected_variant_border_color": "#121212", "selected_variant_hover_background_color": "#1a1a1a", - "selected_variant_hover_text_color": "#ffffff", + "selected_variant_hover_text_color": "#FFFFFF", "selected_variant_hover_border_color": "#1a1a1a" } }, "scheme-5": { "settings": { - "background": "#333333", + "background": "#4E6B9E", "foreground_heading": "#ffffff", "foreground": "#ffffff", "primary": "#ffffff", "primary_hover": "#ffffffb0", "border": "#ffffffb0", - "shadow": "#000000", - "primary_button_background": "#ffffff", - "primary_button_text": "#000000", + "shadow": "#121212", + "primary_button_background": "#FFFFFF", + "primary_button_text": "#4E6B9E", "primary_button_border": "#ffffff", "primary_button_hover_background": "#000000", "primary_button_hover_text": "#ffffff", @@ -534,33 +535,33 @@ "secondary_button_hover_background": "#ffffff0a", "secondary_button_hover_text": "#ffffffed", "secondary_button_hover_border": "#ffffffb0", - "input_background": "#333333", + "input_background": "#4E6B9E", "input_text_color": "#ffffffed", "input_border_color": "#ffffffb0", "input_hover_background": "#ffffff0a", - "variant_background_color": "#ffffff", - "variant_text_color": "#000000", - "variant_border_color": "#e6e6e6", + "variant_background_color": "#FFFFFF", + "variant_text_color": "#4E6B9E", + "variant_border_color": "#4E6B9E66", "variant_hover_background_color": "#f5f5f5", - "variant_hover_text_color": "#000000", - "variant_hover_border_color": "#e6e6e6", - "selected_variant_background_color": "#000000", - "selected_variant_text_color": "#ffffff", - "selected_variant_border_color": "#000000", - "selected_variant_hover_background_color": "#1a1a1a", - "selected_variant_hover_text_color": "#ffffff", - "selected_variant_hover_border_color": "#1a1a1a" + "variant_hover_text_color": "#4E6B9E", + "variant_hover_border_color": "#4E6B9E", + "selected_variant_background_color": "#4E6B9E", + "selected_variant_text_color": "#FFFFFF", + "selected_variant_border_color": "#4E6B9E", + "selected_variant_hover_background_color": "#3d5475", + "selected_variant_hover_text_color": "#FFFFFF", + "selected_variant_hover_border_color": "#3d5475" } }, "scheme-6": { "settings": { "background": "rgba(0,0,0,0)", "foreground_heading": "#ffffff", - "foreground": "#ffffff", - "primary": "#ffffff", + "foreground": "#f2f2f2", + "primary": "#eaeaea", "primary_hover": "#ffffffb0", "border": "#e6e6e6", - "shadow": "#000000", + "shadow": "#121212", "primary_button_background": "#ffffff", "primary_button_text": "#000000", "primary_button_border": "#ffffff", diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json index f21b6729f..1010cb895 100644 --- a/locales/en.default.schema.json +++ b/locales/en.default.schema.json @@ -740,6 +740,7 @@ "vimeo": "Vimeo", // Icon option for washing machine or laundry symbol "washing": "Washing", + "whatsapp": "WhatsApp", "wide": "Wide", "youtube": "YouTube", "with_hints": "With hints", diff --git a/sections/ase-color-palette.liquid b/sections/ase-color-palette.liquid new file mode 100644 index 000000000..587d38d71 --- /dev/null +++ b/sections/ase-color-palette.liquid @@ -0,0 +1,592 @@ +{% liquid + assign color_filter = nil + assign filter_option = section.settings.filter_option | downcase + + for filter in collection.filters + assign filter_label_down = filter.label | downcase + if filter_label_down == filter_option + assign color_filter = filter + break + endif + endfor + + assign has_swatch = false + if color_filter != blank + assign swatch_index = color_filter.values | find_index: 'swatch' + if swatch_index != null + assign has_swatch = true + endif + endif + + assign display_mode = section.settings.display_mode | default: 'color' + + assign columns_desktop = section.settings.columns_desktop + assign columns_mobile = section.settings.columns_mobile + assign gap = section.settings.grid_gap + assign gap_mobile = gap | divided_by: 2 +%} + +{% if color_filter != blank and color_filter.values.size > 0 %} +
+
+
+ + +
+
    + {%- comment -%} Show All button {%- endcomment -%} +
  • + +
    • + + {%- for value in color_filter.values -%} + {%- if value.count > 0 or value.active -%} +
  • + +
    • + {%- endif -%} + {%- endfor -%} +
+
+
+
+{% endif %} + +{% stylesheet %} + .ase-color-grid { + display: flex; + flex-direction: column; + gap: 16px; + } + + .ase-color-grid__toggle { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 0; + border: none; + background: none; + cursor: pointer; + color: inherit; + font: inherit; + text-align: left; + gap: 8px; + } + + .ase-color-grid__heading { + margin: 0; + font-weight: 600; + } + + .ase-color-grid__chevron { + display: flex; + align-items: center; + transition: transform 0.3s ease; + } + + .ase-color-grid__toggle[aria-expanded="false"] .ase-color-grid__chevron { + transform: rotate(-90deg); + } + + .ase-color-grid__collapsible { + display: grid; + grid-template-rows: 1fr; + transition: grid-template-rows 0.3s ease, opacity 0.3s ease; + opacity: 1; + } + + .ase-color-grid__collapsible--closed { + grid-template-rows: 0fr; + opacity: 0; + } + + .ase-color-grid__collapsible > ul { + overflow: hidden; + } + + .ase-color-grid__list { + display: flex; + flex-wrap: wrap; + list-style: none; + padding: 0; + margin: 0; + column-gap: var(--grid-gap-mobile, 8px); + row-gap: var(--grid-gap-mobile, 8px); + } + + /* Mobile: calc-based columns */ + .ase-color-grid__item { + width: calc(100% / var(--grid-mobile-columns) - var(--grid-gap-mobile) * (var(--grid-mobile-columns) - 1) / var(--grid-mobile-columns)); + flex-grow: 0; + flex-shrink: 0; + } + + /* Desktop: calc-based columns */ + @media screen and (min-width: 750px) { + .ase-color-grid__list { + column-gap: var(--grid-gap, 16px); + row-gap: var(--grid-gap, 16px); + } + + .ase-color-grid__item { + width: calc(100% / var(--grid-desktop-columns) - var(--grid-gap) * (var(--grid-desktop-columns) - 1) / var(--grid-desktop-columns)); + } + } + + .ase-color-grid__card { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + width: 100%; + padding: 12px 8px; + border: 2px solid transparent; + border-radius: 8px; + background: var(--color-background); + cursor: pointer; + transition: border-color 0.15s ease, box-shadow 0.15s ease; + text-align: center; + } + + @media (hover: hover) and (pointer: fine) { + .ase-color-grid__card:hover { + border-color: var(--color-border, rgba(0, 0, 0, 0.12)); + } + } + + .ase-color-grid__card--active { + border-color: rgba(0, 0, 0, 0.25); + } + + .ase-color-grid__swatch { + width: 28px; + height: 28px; + border-radius: 50%; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .ase-color-grid__swatch .swatch { + width: 100% !important; + height: 100% !important; + border-radius: 50%; + } + + .ase-color-grid__show-all { + border: none; + background: rgba(0, 0, 0, 0.04); + color: var(--color-foreground); + } + + .ase-color-grid__label { + font-size: 0.8125rem; + color: var(--color-foreground); + line-height: 1.3; + word-wrap: break-word; + overflow-wrap: break-word; + } + + .ase-color-grid__color-fallback { + width: 100%; + height: 100%; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background: var(--color-border, #ccc); + font-size: 0.75rem; + text-transform: uppercase; + color: var(--color-foreground); + } + + .ase-color-grid__swatch--image { + width: 48px; + height: 48px; + border-radius: 8px; + } + + .ase-color-grid__swatch-image { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: inherit; + } +{% endstylesheet %} + + + +{% schema %} +{ + "name": "ASE Color palette", + "templates": ["collection"], + "settings": [ + { + "type": "header", + "content": "Filter" + }, + { + "type": "text", + "id": "filter_option", + "label": "Filter option name", + "info": "Enter the filter label exactly as it appears in your Shopify filters (e.g., Color, Colour, Material).", + "default": "Color" + }, + { + "type": "select", + "id": "display_mode", + "label": "Display mode", + "info": "Color-first shows solid colors and falls back to images. Image-first shows swatch images and falls back to colors.", + "options": [ + { "value": "color", "label": "Color first" }, + { "value": "image", "label": "Image first" } + ], + "default": "color" + }, + { + "type": "header", + "content": "Content" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "Filter by color" + }, + { + "type": "range", + "id": "heading_font_size", + "label": "Heading font size", + "min": 10, + "max": 36, + "step": 1, + "unit": "px", + "default": 16 + }, + { + "type": "text", + "id": "show_all_label", + "label": "Show all label", + "default": "All" + }, + { + "type": "checkbox", + "id": "default_open", + "label": "Open by default", + "default": false + }, + { + "type": "checkbox", + "id": "collapse_on_select", + "label": "Collapse after selection", + "info": "Automatically minimizes the color grid after a swatch is selected.", + "default": true + }, + { + "type": "header", + "content": "Grid layout" + }, + { + "type": "range", + "id": "columns_desktop", + "label": "Desktop columns", + "min": 2, + "max": 10, + "step": 1, + "default": 6 + }, + { + "type": "select", + "id": "columns_mobile", + "label": "Mobile columns", + "options": [ + { "value": "2", "label": "2" }, + { "value": "3", "label": "3" }, + { "value": "4", "label": "4" } + ], + "default": "3" + }, + { + "type": "range", + "id": "grid_gap", + "label": "Grid spacing", + "min": 4, + "max": 32, + "step": 2, + "unit": "px", + "default": 16 + }, + { + "type": "header", + "content": "Appearance" + }, + { + "type": "color_scheme", + "id": "color_scheme", + "label": "Color scheme", + "default": "scheme-1" + }, + { + "type": "select", + "id": "section_width", + "label": "Width", + "options": [ + { "value": "page-width", "label": "Page" }, + { "value": "full-width", "label": "Full" } + ], + "default": "page-width" + }, + { + "type": "header", + "content": "Padding" + }, + { + "type": "range", + "id": "padding-block-start", + "label": "Top", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 0 + }, + { + "type": "range", + "id": "padding-block-end", + "label": "Bottom", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 16 + } + ], + "presets": [ + { + "name": "ASE Color palette", + "settings": { + "display_mode": "color" + } + }, + { + "name": "ASE Image palette", + "settings": { + "display_mode": "image" + } + } + ] +} +{% endschema %} diff --git a/sections/ase-featured-products.liquid b/sections/ase-featured-products.liquid new file mode 100644 index 000000000..41ad5cb83 --- /dev/null +++ b/sections/ase-featured-products.liquid @@ -0,0 +1,210 @@ +{% comment %} + ASE Featured Products - Hand-pick specific products to display +{% endcomment %} + +
+
+ {% if section.settings.title != blank %} +
+

{{ section.settings.title }}

+
+ {% endif %} + +
+ {% for block in section.blocks %} + {% if block.settings.product != blank %} +
+ {% render 'resource-card', + resource: block.settings.product, + resource_type: 'product', + image_aspect_ratio: section.settings.image_ratio, + image_hover: true, + image_sizes: 'auto' + %} +
+ {% endif %} + {% endfor %} +
+
+ +{% stylesheet %} + .ase-featured-products__grid { + display: grid; + grid-template-columns: repeat(var(--ase-fp-columns, 3), 1fr); + gap: var(--ase-fp-gap, 16px); + } + + @media screen and (max-width: 749px) { + .ase-featured-products__grid { + grid-template-columns: repeat(2, 1fr); + } + } + + @media screen and (max-width: 449px) { + .ase-featured-products__grid { + grid-template-columns: 1fr; + } + } +{% endstylesheet %} + +{% schema %} +{ + "name": "ASE Featured Products", + "tag": "section", + "class": "ase-featured-products", + "disabled_on": { + "groups": ["header", "footer"] + }, + "settings": [ + { + "type": "inline_richtext", + "id": "title", + "label": "Heading", + "default": "Featured Products" + }, + { + "type": "select", + "id": "heading_size", + "label": "Heading size", + "options": [ + { "value": "h3", "label": "Small" }, + { "value": "h2", "label": "Medium" }, + { "value": "h1", "label": "Large" } + ], + "default": "h2" + }, + { + "type": "select", + "id": "heading_alignment", + "label": "Heading alignment", + "options": [ + { "value": "left", "label": "Left" }, + { "value": "center", "label": "Center" }, + { "value": "right", "label": "Right" } + ], + "default": "left" + }, + { + "type": "range", + "id": "heading_spacing", + "label": "Heading spacing", + "min": 0, + "max": 60, + "step": 4, + "unit": "px", + "default": 24 + }, + { + "type": "range", + "id": "columns", + "label": "Columns", + "min": 1, + "max": 6, + "step": 1, + "default": 3 + }, + { + "type": "range", + "id": "gap", + "label": "Gap between items", + "min": 0, + "max": 50, + "step": 2, + "unit": "px", + "default": 16 + }, + { + "type": "select", + "id": "image_ratio", + "label": "Image ratio", + "options": [ + { "value": "adapt", "label": "Adapt to image" }, + { "value": "1 / 1", "label": "Square" }, + { "value": "3 / 4", "label": "Portrait" }, + { "value": "4 / 3", "label": "Landscape" }, + { "value": "16 / 9", "label": "Widescreen" } + ], + "default": "adapt" + }, + { + "type": "select", + "id": "section_width", + "label": "Section width", + "options": [ + { "value": "page-width", "label": "Page width" }, + { "value": "full-width", "label": "Full width" } + ], + "default": "page-width" + }, + { + "type": "color_scheme", + "id": "color_scheme", + "label": "Color scheme", + "default": "scheme-1" + }, + { + "type": "header", + "content": "Spacing" + }, + { + "type": "range", + "id": "padding-block-start", + "label": "Top padding", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "default": 40 + }, + { + "type": "range", + "id": "padding-block-end", + "label": "Bottom padding", + "min": 0, + "max": 100, + "step": 4, + "unit": "px", + "default": 40 + } + ], + "blocks": [ + { + "type": "product", + "name": "Product", + "settings": [ + { + "type": "product", + "id": "product", + "label": "Product" + } + ] + } + ], + "presets": [ + { + "name": "ASE Featured Products", + "blocks": [ + { "type": "product" }, + { "type": "product" }, + { "type": "product" } + ] + } + ] +} +{% endschema %} diff --git a/sections/footer-group.json b/sections/footer-group.json index 280ae488d..da3b78822 100644 --- a/sections/footer-group.json +++ b/sections/footer-group.json @@ -7,178 +7,179 @@ * made to this file may be overwritten. * ------------------------------------------------------------ */ - { +{ "type": "footer", "name": "t:names.footer", "sections": { - "footer": { - "type": "footer", + "divider_3tgLe6": { + "type": "divider", + "name": "t:names.divider_section", + "settings": { + "color_scheme": "", + "section_width": "full-width", + "thickness": 1, + "corner_radius": "square", + "width_percent": 100, + "alignment_horizontal": "center", + "padding-block-start": 16, + "padding-block-end": 16 + } + }, + "17712692021bcf299f": { + "type": "_blocks", "blocks": { - "group_wErUQf": { - "type": "group", - "name": "Join our email list", + "policies_tab_block": { + "type": "policies-tab", "settings": { - "link": "", - "open_in_new_tab": false, - "content_direction": "column", - "vertical_on_mobile": true, - "horizontal_alignment": "flex-start", - "vertical_alignment": "center", - "align_baseline": false, - "horizontal_alignment_flex_direction_column": "flex-start", - "vertical_alignment_flex_direction_column": "center", - "gap": 6, - "width": "fill", - "custom_width": 100, - "width_mobile": "fill", - "custom_width_mobile": 100, - "height": "fit", - "custom_height": 100, - "inherit_color_scheme": true, - "color_scheme": "", - "background_media": "none", - "video_position": "cover", - "background_image_position": "cover", - "border": "none", - "border_width": 1, - "border_opacity": 100, + "title": "Policies", + "desktop_width_percent": 100, + "background_color": "#ffffff", "border_radius": 0, - "placeholder": "", - "toggle_overlay": false, - "overlay_color": "#00000026", - "overlay_style": "solid", - "gradient_direction": "to top", + "padding_top": 15, + "padding_bottom": 20, + "padding_horizontal": 20, + "title_color": "#121212", + "title_size": 16, + "title_spacing": 15, + "link_color": "#121212", + "link_hover_color": "#333333", + "link_size": 12, + "link_underline": "none", + "link_spacing": 20 + }, + "blocks": {} + } + }, + "block_order": [ + "policies_tab_block" + ], + "settings": { + "content_direction": "column", + "vertical_on_mobile": true, + "horizontal_alignment": "flex-start", + "vertical_alignment": "center", + "align_baseline": false, + "horizontal_alignment_flex_direction_column": "center", + "vertical_alignment_flex_direction_column": "center", + "gap": 12, + "section_width": "page-width", + "section_height": "", + "section_height_custom": 50, + "color_scheme": "", + "background_media": "none", + "video_position": "cover", + "background_image_position": "cover", + "border": "none", + "border_width": 1, + "border_opacity": 100, + "border_radius": 0, + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "padding-block-start": 0, + "padding-block-end": 0 + } + }, + "footer_eHkxBX": { + "type": "footer", + "blocks": { + "social_links_xBwmjm": { + "type": "social-links", + "name": "t:names.social_media_links", + "settings": { + "facebook_url": "https://www.facebook.com/asecrystals/", + "instagram_url": "https://www.instagram.com/asecrystals", + "youtube_url": "", + "tiktok_url": "https://www.tiktok.com/@ase.crystals", + "twitter_url": "", + "threads_url": "", + "linkedin_url": "", + "bluesky_url": "", + "snapchat_url": "", + "pinterest_url": "", + "tumblr_url": "", + "vimeo_url": "", + "whatsapp_url": "https://wa.me/16047825025", + "custom_url": "" + }, + "blocks": {} + } + }, + "block_order": [ + "social_links_xBwmjm" + ], + "name": "t:names.footer", + "settings": { + "section_width": "page-width", + "gap": 20, + "color_scheme": "scheme-1", + "padding-block-start": 20, + "padding-block-end": 20 + } + }, + "footer_QHWT3R": { + "type": "footer", + "blocks": { + "payment_icons_mY8z97": { + "type": "payment-icons", + "name": "t:names.payment_icons", + "settings": { + "horizontal_alignment": "center", + "gap": 10, "padding-block-start": 0, "padding-block-end": 0, "padding-inline-start": 0, "padding-inline-end": 0 }, - "blocks": { - "text_pF6rVi": { - "type": "text", - "name": "Heading", - "settings": { - "text": "

Join our email list

", - "width": "100%", - "max_width": "normal", - "alignment": "left", - "type_preset": "h3", - "font": "var(--font-body--family)", - "font_size": "", - "line_height": "normal", - "letter_spacing": "normal", - "case": "none", - "wrap": "pretty", - "color": "var(--color-foreground)", - "background": false, - "background_color": "#00000026", - "corner_radius": 0, - "padding-block-start": 0, - "padding-block-end": 0, - "padding-inline-start": 0, - "padding-inline-end": 0 - }, - "blocks": {} - }, - "text_HafH7P": { - "type": "text", - "name": "Text", - "settings": { - "text": "

Get exclusive deals and early access to new products.

", - "width": "100%", - "max_width": "normal", - "alignment": "left", - "type_preset": "rte", - "font": "var(--font-body--family)", - "font_size": "", - "line_height": "normal", - "letter_spacing": "normal", - "case": "none", - "wrap": "pretty", - "color": "var(--color-foreground)", - "background": false, - "background_color": "#00000026", - "corner_radius": 0, - "padding-block-start": 0, - "padding-block-end": 0, - "padding-inline-start": 0, - "padding-inline-end": 0 - }, - "blocks": {} - } - }, - "block_order": [ - "text_pF6rVi", - "text_HafH7P" - ] - }, - "email-signup_HafH7P": { - "type": "email-signup", - "name": "Email Signup", - "settings": { - "width": "fill" - } + "blocks": {} } }, "block_order": [ - "group_wErUQf", - "email-signup_HafH7P" + "payment_icons_mY8z97" ], "name": "t:names.footer", "settings": { "section_width": "page-width", "gap": 20, - "color_scheme": "scheme-5", - "padding-block-start": 36, - "padding-block-end": 36 + "color_scheme": "scheme-1", + "padding-block-start": 20, + "padding-block-end": 20 } }, - "utilities": { + "footer_utilities_wiLgXM": { "type": "footer-utilities", - "settings": { - "section_width": "page-width", - "gap": 24, - "divider_thickness": 1, - "color_scheme": "scheme-5", - "padding-block-start": 12, - "padding-block-end": 16 - }, "blocks": { - "copyright": { + "footer_copyright_97wXpW": { "type": "footer-copyright", + "name": "t:names.copyright", "settings": { - "show_powered_by": true, - "font_size": "0.75rem", - "case": "none" - } - }, - "policy_list": { - "type": "footer-policy-list", - "settings": { + "show_powered_by": false, "font_size": "0.75rem", "case": "none" - } - }, - "social_icons": { - "type": "social-links", - "settings": { - "facebook_url": "https://www.facebook.com", - "instagram_url": "https://www.instagram.com", - "tiktok_url": "https://www.tiktok.com", - "twitter_url": "https://www.twitter.com", - "youtube_url": "https://www.youtube.com" - } + }, + "blocks": {} } }, "block_order": [ - "copyright", - "policy_list", - "social_icons" - ] + "footer_copyright_97wXpW" + ], + "name": "t:names.policies_and_links", + "settings": { + "section_width": "page-width", + "gap": 23, + "divider_thickness": 0, + "color_scheme": "", + "padding-block-start": 20, + "padding-block-end": 20 + } } }, "order": [ - "footer", - "utilities" + "17712692021bcf299f", + "footer_eHkxBX", + "divider_3tgLe6", + "footer_QHWT3R", + "footer_utilities_wiLgXM" ] } diff --git a/sections/footer-utilities.liquid b/sections/footer-utilities.liquid index 15a639094..e3aea22d1 100644 --- a/sections/footer-utilities.liquid +++ b/sections/footer-utilities.liquid @@ -48,15 +48,15 @@ /* Dynamic positioning based on number of blocks */ @media screen and (min-width: 750px) { - /* 1 block: Single column, left aligned */ + /* 1 block: Single column, centered */ .utilities--blocks-1 { grid-template-columns: 1fr; - justify-content: start; + justify-content: center; } .utilities--blocks-1 > * { - justify-self: start; - text-align: left; + justify-self: center; + text-align: center; } /* 2 blocks: Two equal columns, start and end aligned */ diff --git a/sections/gallery-compact.liquid b/sections/gallery-compact.liquid new file mode 100644 index 000000000..2738b4f25 --- /dev/null +++ b/sections/gallery-compact.liquid @@ -0,0 +1,368 @@ +{{ 'gallery.css' | asset_url | stylesheet_tag }} + +{%- style -%} + .gallery-compact-section--{{ section.id }} { + max-width: {{ section.settings.max_width }}px; + margin-inline: auto; + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + padding-left: {{ section.settings.padding_sides }}px; + padding-right: {{ section.settings.padding_sides }}px; + } + + .gallery-compact-section--{{ section.id }} .gallery-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax({{ section.settings.minimum_column_width }}px, 1fr)); + gap: {{ section.settings.gap }}px; + width: 100%; + } + + .gallery-compact-section--{{ section.id }} .gallery-item { + position: relative; + overflow: hidden; + border-radius: {{ section.settings.border_radius }}px; + aspect-ratio: {{ section.settings.aspect_ratio }}; + } + + .gallery-compact-section--{{ section.id }} .gallery-item img { + width: 100%; + height: 100%; + object-fit: {{ section.settings.object_fit }}; + object-position: center; + display: block; + } + + .gallery-compact-section--{{ section.id }} .gallery-item a { + display: block; + width: 100%; + height: 100%; + } + + /* Lightbox overlay */ + .gallery-lightbox { + position: fixed; + inset: 0; + z-index: 999; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.85); + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; + cursor: zoom-out; + } + + .gallery-lightbox--open { + opacity: 1; + visibility: visible; + } + + .gallery-lightbox__img { + max-width: 90vw; + max-height: 90vh; + object-fit: contain; + border-radius: 4px; + box-shadow: 0 4px 40px rgba(0, 0, 0, 0.4); + transform: scale(0.95); + transition: transform 0.3s ease; + } + + .gallery-lightbox--open .gallery-lightbox__img { + transform: scale(1); + } + + .gallery-lightbox__close { + position: absolute; + top: 16px; + right: 16px; + background: none; + border: none; + color: #fff; + cursor: pointer; + padding: 8px; + line-height: 0; + } + + .gallery-compact-section--{{ section.id }} .gallery-item[data-lightbox] { + cursor: zoom-in; + } + + @media screen and (max-width: 749px) { + .gallery-compact-section--{{ section.id }} { + padding-top: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px; + padding-left: {{ section.settings.padding_sides | times: 0.5 | round: 0 }}px; + padding-right: {{ section.settings.padding_sides | times: 0.5 | round: 0 }}px; + } + + .gallery-compact-section--{{ section.id }} .gallery-container { + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + } + } +{%- endstyle -%} + +
+ {% if section.blocks.size > 0 %} +
+ {% for block in section.blocks %} +
+ {% if block.settings.link != blank %} + + {% if block.settings.image != blank %} + {{ + block.settings.image + | image_url: width: 1200 + | image_tag: alt: block.settings.alt_text, loading: 'lazy' + }} + {% else %} + {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }} + {% endif %} + + {% else %} + {% if block.settings.image != blank %} + {{ + block.settings.image + | image_url: width: 1200 + | image_tag: alt: block.settings.alt_text, loading: 'lazy' + }} + {% else %} + {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }} + {% endif %} + {% endif %} +
+ {% endfor %} +
+ {% else %} +
+

Add images to your gallery

+
+ {% endif %} +
+ +{%- comment -%} Lightbox overlay {%- endcomment -%} + + + + +{% schema %} +{ + "name": "Gallery Compact", + "settings": [ + { + "type": "header", + "content": "Layout" + }, + { + "type": "range", + "id": "max_width", + "min": 600, + "max": 1600, + "step": 50, + "unit": "px", + "label": "Max content width", + "default": 1200 + }, + { + "type": "range", + "id": "minimum_column_width", + "min": 100, + "max": 600, + "step": 50, + "unit": "px", + "label": "Minimum column width", + "default": 200 + }, + { + "type": "range", + "id": "gap", + "min": 0, + "max": 50, + "step": 5, + "unit": "px", + "label": "Gap between images", + "default": 10 + }, + { + "type": "header", + "content": "Image settings" + }, + { + "type": "select", + "id": "aspect_ratio", + "label": "Aspect ratio", + "options": [ + { "value": "auto", "label": "Adapt to image" }, + { "value": "1", "label": "Square (1:1)" }, + { "value": "16/9", "label": "Landscape (16:9)" }, + { "value": "4/3", "label": "Landscape (4:3)" }, + { "value": "3/4", "label": "Portrait (3:4)" }, + { "value": "9/16", "label": "Portrait (9:16)" } + ], + "default": "1" + }, + { + "type": "select", + "id": "object_fit", + "label": "Image fit", + "options": [ + { "value": "cover", "label": "Cover (crop to fit)" }, + { "value": "contain", "label": "Contain (fit entire image)" }, + { "value": "fill", "label": "Fill (stretch to fit)" } + ], + "default": "cover" + }, + { + "type": "range", + "id": "border_radius", + "min": 0, + "max": 40, + "step": 2, + "unit": "px", + "label": "Border radius", + "default": 0 + }, + { + "type": "header", + "content": "Styling" + }, + { + "type": "select", + "id": "color_scheme", + "label": "Color scheme", + "options": [ + { "value": "accent-1", "label": "Accent 1" }, + { "value": "accent-2", "label": "Accent 2" }, + { "value": "accent-3", "label": "Accent 3" } + ], + "default": "accent-1" + }, + { + "type": "header", + "content": "Spacing" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 10, + "unit": "px", + "label": "Top padding", + "default": 40 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 10, + "unit": "px", + "label": "Bottom padding", + "default": 40 + }, + { + "type": "range", + "id": "padding_sides", + "min": 0, + "max": 200, + "step": 10, + "unit": "px", + "label": "Side padding", + "default": 40 + } + ], + "blocks": [ + { + "type": "image", + "name": "Image", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Image" + }, + { + "type": "text", + "id": "alt_text", + "label": "Alt text (for accessibility)", + "placeholder": "Describe the image" + }, + { + "type": "url", + "id": "link", + "label": "Link (optional)" + } + ] + } + ], + "presets": [ + { + "name": "Gallery Compact", + "blocks": [ + { "type": "image" }, + { "type": "image" }, + { "type": "image" }, + { "type": "image" } + ] + } + ] +} +{% endschema %} diff --git a/sections/gallery.liquid b/sections/gallery.liquid new file mode 100644 index 000000000..b25109af9 --- /dev/null +++ b/sections/gallery.liquid @@ -0,0 +1,405 @@ +{{ 'gallery.css' | asset_url | stylesheet_tag }} + +{%- style -%} + .gallery-section { + padding-top: {{ section.settings.padding_top }}px; + padding-bottom: {{ section.settings.padding_bottom }}px; + padding-left: {{ section.settings.padding_sides }}px; + padding-right: {{ section.settings.padding_sides }}px; + } + + .gallery-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax({{ section.settings.minimum_column_width }}px, 1fr)); + gap: {{ section.settings.gap }}px; + width: 100%; + } + + .gallery-item { + position: relative; + overflow: hidden; + border-radius: {{ section.settings.border_radius }}px; + aspect-ratio: {{ section.settings.aspect_ratio }}; + } + + .gallery-item img { + width: 100%; + height: 100%; + object-fit: {{ section.settings.object_fit }}; + object-position: center; + display: block; + } + + .gallery-item a { + display: block; + width: 100%; + height: 100%; + } + + /* Lightbox overlay */ + .gallery-lightbox { + position: fixed; + inset: 0; + z-index: 999; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.85); + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; + cursor: zoom-out; + } + + .gallery-lightbox--open { + opacity: 1; + visibility: visible; + } + + .gallery-lightbox__img { + max-width: 90vw; + max-height: 90vh; + object-fit: contain; + border-radius: 4px; + box-shadow: 0 4px 40px rgba(0, 0, 0, 0.4); + transform: scale(0.95); + transition: transform 0.3s ease; + } + + .gallery-lightbox--open .gallery-lightbox__img { + transform: scale(1); + } + + .gallery-lightbox__close { + position: absolute; + top: 16px; + right: 16px; + background: none; + border: none; + color: #fff; + cursor: pointer; + padding: 8px; + line-height: 0; + } + + .gallery-item[data-lightbox] { + cursor: zoom-in; + } + + @media screen and (max-width: 749px) { + .gallery-section { + padding-top: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px; + padding-bottom: {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px; + padding-left: {{ section.settings.padding_sides | times: 0.5 | round: 0 }}px; + padding-right: {{ section.settings.padding_sides | times: 0.5 | round: 0 }}px; + } + + .gallery-container { + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + } + } +{%- endstyle -%} + +
+
+ {% if section.blocks.size > 0 %} +
+ {% for block in section.blocks %} +
+ {% if block.settings.link != blank %} + + {% if block.settings.image != blank %} + {{ + block.settings.image + | image_url: width: 1200 + | image_tag: alt: block.settings.alt_text, loading: 'lazy' + }} + {% else %} + {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }} + {% endif %} + + {% else %} + {% if block.settings.image != blank %} + {{ + block.settings.image + | image_url: width: 1200 + | image_tag: alt: block.settings.alt_text, loading: 'lazy' + }} + {% else %} + {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }} + {% endif %} + {% endif %} +
+ {% endfor %} +
+ {% else %} +
+

Add images to your gallery

+
+ {% endif %} +
+
+ +{%- comment -%} Lightbox overlay (shared per section) {%- endcomment -%} + + + + +{% schema %} +{ + "name": "Gallery", + "settings": [ + { + "type": "header", + "content": "Layout" + }, + { + "type": "range", + "id": "minimum_column_width", + "min": 100, + "max": 600, + "step": 50, + "unit": "px", + "label": "Minimum column width", + "default": 200 + }, + { + "type": "range", + "id": "gap", + "min": 0, + "max": 50, + "step": 5, + "unit": "px", + "label": "Gap between images", + "default": 10 + }, + { + "type": "header", + "content": "Image settings" + }, + { + "type": "select", + "id": "aspect_ratio", + "label": "Aspect ratio", + "options": [ + { + "value": "auto", + "label": "Adapt to image" + }, + { + "value": "1", + "label": "Square (1:1)" + }, + { + "value": "16/9", + "label": "Landscape (16:9)" + }, + { + "value": "4/3", + "label": "Landscape (4:3)" + }, + { + "value": "3/4", + "label": "Portrait (3:4)" + }, + { + "value": "9/16", + "label": "Portrait (9:16)" + } + ], + "default": "1" + }, + { + "type": "select", + "id": "object_fit", + "label": "Image fit", + "options": [ + { + "value": "cover", + "label": "Cover (crop to fit)" + }, + { + "value": "contain", + "label": "Contain (fit entire image)" + }, + { + "value": "fill", + "label": "Fill (stretch to fit)" + } + ], + "default": "cover" + }, + { + "type": "range", + "id": "border_radius", + "min": 0, + "max": 40, + "step": 2, + "unit": "px", + "label": "Border radius", + "default": 0 + }, + { + "type": "header", + "content": "Styling" + }, + { + "type": "select", + "id": "color_scheme", + "label": "Color scheme", + "options": [ + { + "value": "accent-1", + "label": "Accent 1" + }, + { + "value": "accent-2", + "label": "Accent 2" + }, + { + "value": "accent-3", + "label": "Accent 3" + } + ], + "default": "accent-1" + }, + { + "type": "header", + "content": "Spacing" + }, + { + "type": "range", + "id": "padding_top", + "min": 0, + "max": 100, + "step": 10, + "unit": "px", + "label": "Top padding", + "default": 40 + }, + { + "type": "range", + "id": "padding_bottom", + "min": 0, + "max": 100, + "step": 10, + "unit": "px", + "label": "Bottom padding", + "default": 40 + }, + { + "type": "range", + "id": "padding_sides", + "min": 0, + "max": 200, + "step": 10, + "unit": "px", + "label": "Side padding", + "default": 0 + } + ], + "blocks": [ + { + "type": "image", + "name": "Image", + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Image" + }, + { + "type": "text", + "id": "alt_text", + "label": "Alt text (for accessibility)", + "placeholder": "Describe the image" + }, + { + "type": "url", + "id": "link", + "label": "Link (optional)" + } + ] + } + ], + "presets": [ + { + "name": "Gallery", + "blocks": [ + { + "type": "image" + }, + { + "type": "image" + }, + { + "type": "image" + }, + { + "type": "image" + } + ] + } + ] +} +{% endschema %} diff --git a/sections/header-announcements.liquid b/sections/header-announcements.liquid index 586c58e7a..b09a7be23 100644 --- a/sections/header-announcements.liquid +++ b/sections/header-announcements.liquid @@ -1,3 +1,15 @@ +{% liquid + assign social_platforms = 'facebook,instagram,youtube,tiktok,twitter,threads,linkedin,bluesky,snapchat,pinterest,tumblr,vimeo,whatsapp' | split: ',' + assign has_social_links = false + for platform in social_platforms + assign setting_key = platform | append: '_url' + if section.settings[setting_key] != blank + assign has_social_links = true + break + endif + endfor +%} + {% if section.blocks.size > 1 %} + +{% schema %} +{ + "name": "TR Color palette", + "templates": ["collection"], + "settings": [ + { + "type": "header", + "content": "Filter" + }, + { + "type": "text", + "id": "filter_option", + "label": "Filter option name", + "info": "Enter the filter label exactly as it appears in your Shopify filters (e.g., Color, Colour, Material).", + "default": "Color" + }, + { + "type": "header", + "content": "Content" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "Filter by color" + }, + { + "type": "range", + "id": "heading_font_size", + "label": "Heading font size", + "min": 10, + "max": 36, + "step": 1, + "unit": "px", + "default": 16 + }, + { + "type": "text", + "id": "show_all_label", + "label": "Show all label", + "default": "All" + }, + { + "type": "checkbox", + "id": "show_labels", + "label": "Show color labels", + "default": true + }, + { + "type": "header", + "content": "Appearance" + }, + { + "type": "range", + "id": "swatch_size", + "label": "Swatch size", + "min": 20, + "max": 64, + "step": 2, + "unit": "px", + "default": 28 + }, + { + "type": "range", + "id": "swatch_gap", + "label": "Swatch spacing", + "min": 4, + "max": 24, + "step": 2, + "unit": "px", + "default": 10 + }, + { + "type": "color_scheme", + "id": "color_scheme", + "label": "Color scheme", + "default": "scheme-1" + }, + { + "type": "select", + "id": "section_width", + "label": "Width", + "options": [ + { + "value": "page-width", + "label": "Page" + }, + { + "value": "full-width", + "label": "Full" + } + ], + "default": "page-width" + }, + { + "type": "header", + "content": "Padding" + }, + { + "type": "range", + "id": "padding-block-start", + "label": "Top", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 0 + }, + { + "type": "range", + "id": "padding-block-end", + "label": "Bottom", + "min": 0, + "max": 100, + "step": 1, + "unit": "px", + "default": 16 + } + ], + "presets": [ + { + "name": "TR Color palette" + } + ] +} +{% endschema %} diff --git a/snippets/collection-card.liquid b/snippets/collection-card.liquid index 80866e60b..a00e8a0a5 100644 --- a/snippets/collection-card.liquid +++ b/snippets/collection-card.liquid @@ -159,4 +159,44 @@ aspect-ratio: 99; } } + /* Hover zoom for collection images + - Adds a subtle scale transform to the image inside a collection card + - `transition` defines the animation timing and easing + - `will-change: transform` gives the browser a hint to optimize for animation + - `transform-origin: center center` makes the image scale from its center + */ + .collection-card__image .image-block__image { + transition: transform 240ms cubic-bezier(.2,.8,.2,1); + will-change: transform; + transform-origin: center center; + } + + /* Respect users who prefer reduced motion: + - Remove transitions when `prefers-reduced-motion: reduce` is set + */ + @media (prefers-reduced-motion: reduce) { + .collection-card__image .image-block__image { + transition: none; + } + } + + /* Apply the zoom effect only on devices that support hover and have a + fine pointer (usually non-touch desktop devices). This prevents the + scale effect from triggering on touch devices where hover isn't meaningful. + */ + @media (hover: hover) and (pointer: fine) { + .collection-card:hover .collection-card__image .image-block__image, + .collection-card:focus-within .collection-card__image .image-block__image { + transform: scale(1.06); + } + } + + /* Arrow nudge for inline links in card content + - Moves the generated ::after arrow slightly to the right on hover/focus + - A micro-interaction that signals the link is actionable + */ + .collection-card__content a:hover::after, + .collection-card__content a:focus::after { + transform: translateX(4px); + } {% endstylesheet %} diff --git a/snippets/filter-remove-buttons.liquid b/snippets/filter-remove-buttons.liquid index 464445586..41b84f40a 100644 --- a/snippets/filter-remove-buttons.liquid +++ b/snippets/filter-remove-buttons.liquid @@ -7,6 +7,7 @@ @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 + @param {string} [prefer] - Swatch display preference ('image' | 'color') {%- enddoc -%}
@@ -65,7 +66,7 @@ {% endif %} > {% if value.swatch %} - {% render 'swatch', swatch: value.swatch, mode: 'pill' %} + {% render 'swatch', swatch: value.swatch, mode: 'pill', prefer: prefer %} {% endif %} {% if filter.type == 'boolean' or show_filter_label %} diff --git a/snippets/header-actions.liquid b/snippets/header-actions.liquid index d19ac8b25..5c629cbec 100644 --- a/snippets/header-actions.liquid +++ b/snippets/header-actions.liquid @@ -26,6 +26,27 @@ + + + + {% if shop.customer_accounts_enabled %}