From c54c253fefdff775595274b0a9945ef15255dc55 Mon Sep 17 00:00:00 2001 From: lgcavalini Date: Tue, 21 Apr 2026 11:00:07 -0300 Subject: [PATCH 01/10] Claude.md --- CLAUDE.md | 46 ++++++++++++++++++++++++++++++++++++++++++++++ README.md | 1 + 2 files changed, 47 insertions(+) create mode 100644 CLAUDE.md diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 000000000..a6d74495c --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,46 @@ +# Shopify Theme Development Rules + +## Layout files are off-limits + +Never edit layout files. This includes `theme.liquid`, `password.liquid`, +and any file in the `layout/` directory. If you need to add something to +the page, create a new section or snippet instead. + +## No inline styles + +Never add inline styles to Liquid templates. Each section should have its +own CSS file in `assets/` (e.g. `assets/section-custom-heading.css`). +Load it in the section file with a stylesheet tag: + +```liquid +{{ 'section-custom-heading.css' | asset_url | stylesheet_tag }} +``` + +Follow the BEM naming convention used in the rest of this theme. + +## Schema settings must be merchant-friendly + +Section schemas are the merchant's interface — not yours. Every setting must have: + +- A **human-readable label** (e.g. "Heading text", not "heading_text_content_main") +- A **realistic default** that previews well (never use lorem ipsum) +- An **info** field explaining what the setting does, whenever a non-technical user might need guidance + +## Run theme check + +After making any changes, run `shopify theme check` to catch deprecated +Liquid filters, missing translations, invalid schema, and other issues +that look fine visually but cause problems later. + +## Be surgical with changes + +Make one specific change at a time. Do not refactor surrounding code, +rename existing CSS classes, restructure Liquid files, or change existing +schema IDs unless explicitly asked. Changing schema IDs breaks saved +customizer settings. Renaming CSS classes breaks references across the theme. + +## Use existing patterns + +Before creating new sections or snippets, read a similar existing file in +the theme and match its structure, class naming, and conventions. Reference +files in `sections/` and `snippets/` for patterns. diff --git a/README.md b/README.md index 224f89a22..c3072adc1 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,7 @@ [Contributing](#contributing) | [License](#license) + Horizon is the flagship of a new generation of first party Shopify themes. It incorporates the latest Liquid Storefronts features, including [theme blocks](https://shopify.dev/docs/storefronts/themes/architecture/blocks/theme-blocks/quick-start?framework=liquid). - **Web-native in its purest form:** Themes run on the [evergreen web](https://www.w3.org/2001/tag/doc/evergreen-web/). We leverage the latest web browsers to their fullest, while maintaining support for the older ones through progressive enhancement—not polyfills. From 1692cb263980db6a1412a47183f8ee951fea27ab Mon Sep 17 00:00:00 2001 From: lgcavalini Date: Tue, 21 Apr 2026 11:14:05 -0300 Subject: [PATCH 02/10] Add mobile image support to slideshow slide block Adds an image_mobile field to the _slide block schema so merchants can upload a separate image for mobile devices. Uses a element with a to serve the mobile image on small screens. Falls back to the desktop image when no mobile image is set, preserving all existing slide behaviour. Co-Authored-By: Claude Sonnet 4.6 --- blocks/_slide.liquid | 43 ++++++++++++++++++++++++++++++++++++++----- 1 file changed, 38 insertions(+), 5 deletions(-) diff --git a/blocks/_slide.liquid b/blocks/_slide.liquid index bc6e0e3ec..7163b9169 100644 --- a/blocks/_slide.liquid +++ b/blocks/_slide.liquid @@ -56,11 +56,37 @@ -%} {%- if block_settings.media_type_1 == 'image' -%} - {{ - block_settings.image_1 - | image_url: width: 3840 - | image_tag: height: height, sizes: sizes, widths: widths, class: 'slide__image', loading: loading, fetchpriority: fetchpriority - }} + {%- if block_settings.image_mobile -%} + {%- liquid + assign mobile_widths = '416, 600, 800, 1200, 1600' + assign mobile_widths_array = mobile_widths | split: ', ' + assign sizes_mobile = '100vw' + -%} + + + {{ + block_settings.image_1 + | image_url: width: 3840 + | image_tag: height: height, sizes: sizes, widths: widths, class: 'slide__image', loading: loading, fetchpriority: fetchpriority + }} + + {%- else -%} + {{ + block_settings.image_1 + | image_url: width: 3840 + | image_tag: height: height, sizes: sizes, widths: widths, class: 'slide__image', loading: loading, fetchpriority: fetchpriority + }} + {%- endif -%} {%- else -%} {%- if block_settings.video_1.preview_image -%} @@ -219,6 +245,13 @@ "label": "t:settings.image", "visible_if": "{{ block.settings.media_type_1 == 'image' }}" }, + { + "type": "image_picker", + "id": "image_mobile", + "label": "Imagem para mobile", + "info": "Exibida em telas menores que 750px. Se não definida, a imagem principal será usada.", + "visible_if": "{{ block.settings.media_type_1 == 'image' }}" + }, { "type": "video", "id": "video_1", From 9e685f80e90ac70e8519bd087546fd902ae3dd76 Mon Sep 17 00:00:00 2001 From: "shopify[bot]" <79544226+shopify[bot]@users.noreply.github.com> Date: Tue, 21 Apr 2026 14:49:08 +0000 Subject: [PATCH 03/10] Update from Shopify for theme horizon/claude/wizardly-hopper-dd235d Committed from shop: Mono Produto --- templates/index.json | 112 +++++++++++++++++-------------------------- 1 file changed, 44 insertions(+), 68 deletions(-) diff --git a/templates/index.json b/templates/index.json index c110afca1..38ac12bc7 100644 --- a/templates/index.json +++ b/templates/index.json @@ -7,83 +7,59 @@ * made to this file may be overwritten. * ------------------------------------------------------------ */ - { +{ "sections": { - "hero_jVaWmY": { - "type": "hero", + "slideshow_c9zh8T": { + "type": "slideshow", "blocks": { - "text_YLPk4p": { - "type": "text", - "name": "t:names.heading", + "slide_KQwbwN": { + "type": "_slide", "settings": { - "text": "

Browse our latest products

", - "width": "fit-content", - "max_width": "normal", - "alignment": "left", - "type_preset": "h2", - "font": "var(--font-body--family)", - "font_size": "1rem", - "line_height": "normal", - "letter_spacing": "normal", - "case": "none", - "wrap": "pretty", - "color": "var(--color-foreground-heading)", - "background": false, - "background_color": "#00000026", - "corner_radius": 0, - "padding-block-start": 0, - "padding-block-end": 0, - "padding-inline-start": 0, - "padding-inline-end": 0 - }, - "blocks": {} - }, - "button_H9gpTf": { - "type": "button", - "name": "t:names.button", - "settings": { - "label": "Shop all", - "link": "shopify://collections/all", - "open_in_new_tab": false, - "style_class": "button-secondary", - "width": "fit-content", - "custom_width": 100, - "width_mobile": "fit-content", - "custom_width_mobile": 100 + "media_type_1": "image", + "image_1": "shopify://shop_images/LINHA-MAES-DESKTOP.webp", + "image_mobile": "shopify://shop_images/Logo_Shaun_1.avif", + "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": 0, + "inherit_color_scheme": true, + "color_scheme": "scheme-6", + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "padding-block-start": 48, + "padding-block-end": 48, + "padding-inline-start": 48, + "padding-inline-end": 48 }, "blocks": {} } }, "block_order": [ - "text_YLPk4p", - "button_H9gpTf" + "slide_KQwbwN" ], - "name": "t:names.hero", + "name": "t:names.slideshow_full_frame", "settings": { - "media_type_1": "image", - "media_type_2": "image", - "link": "", - "open_in_new_tab": false, - "content_direction": "column", - "vertical_on_mobile": true, - "horizontal_alignment": "space-between", - "vertical_alignment": "flex-end", - "align_baseline": true, - "horizontal_alignment_flex_direction_column": "center", - "vertical_alignment_flex_direction_column": "flex-end", - "gap": 24, - "section_width": "page-width", - "section_height": "medium", - "section_height_custom": 50, - "color_scheme": "scheme-6", - "toggle_overlay": true, - "overlay_color": "#12121266", - "overlay_style": "solid", - "gradient_direction": "to bottom", - "blurred_reflection": false, - "reflection_opacity": 75, - "padding-block-start": 100, - "padding-block-end": 72 + "display_mode": "full_frame", + "section_width": "full-width", + "full_frame_on_mobile": false, + "slideshow_gap": 12, + "corner_radius": 0, + "slide_height": "medium", + "content_position": "on-media", + "color_scheme": "", + "icons_style": "arrows_large", + "icons_shape": "none", + "slideshow_controls_style": "dots", + "autoplay": true, + "autoplay_speed": 4, + "padding-block-start": 0, + "padding-block-end": 0 } }, "product_list_fa6P9H": { @@ -282,7 +258,7 @@ } }, "order": [ - "hero_jVaWmY", + "slideshow_c9zh8T", "product_list_fa6P9H" ] } From 795bf5b244fd237e9e47a5ee6ab8773838112abf Mon Sep 17 00:00:00 2001 From: "shopify[bot]" <79544226+shopify[bot]@users.noreply.github.com> Date: Tue, 21 Apr 2026 14:49:56 +0000 Subject: [PATCH 04/10] Update from Shopify for theme horizon/claude/wizardly-hopper-dd235d Committed from shop: Mono Produto --- templates/index.json | 1 - 1 file changed, 1 deletion(-) diff --git a/templates/index.json b/templates/index.json index 38ac12bc7..ee9fec297 100644 --- a/templates/index.json +++ b/templates/index.json @@ -17,7 +17,6 @@ "settings": { "media_type_1": "image", "image_1": "shopify://shop_images/LINHA-MAES-DESKTOP.webp", - "image_mobile": "shopify://shop_images/Logo_Shaun_1.avif", "content_direction": "column", "vertical_on_mobile": true, "horizontal_alignment": "flex-start", From 6a588e83a3d173a9b6d36d4725802b27c872fa4a Mon Sep 17 00:00:00 2001 From: lgcavalini Date: Tue, 21 Apr 2026 11:50:59 -0300 Subject: [PATCH 05/10] Fix mobile image shrinking banner and add adapt_image height option Bug: the element introduced for mobile images broke the full-screen layout because the CSS used direct-child selectors (>) that no longer matched the nested inside . Fixed by adding explicit rules for picture and picture > .slide__image inside .slide__image-container. Feature: the adapt_image height mode (already wired in block logic) is now exposed as a schema option and set as the default. The min-height calculation is split by breakpoint so desktop uses the desktop image aspect ratio and mobile uses the mobile image ratio (falling back to desktop if no mobile image is set). Co-Authored-By: Claude Sonnet 4.6 --- blocks/_slide.liquid | 47 ++++++++++++++++++++++++++++++--------- sections/slideshow.liquid | 6 ++++- 2 files changed, 41 insertions(+), 12 deletions(-) diff --git a/blocks/_slide.liquid b/blocks/_slide.liquid index 7163b9169..cf0a94942 100644 --- a/blocks/_slide.liquid +++ b/blocks/_slide.liquid @@ -14,17 +14,28 @@ assign rounded_image_corners = true endif %} - {% if section.settings.slide_height == 'adapt_image' and block_index == 0 and preview_image != blank %} - {% - # Great example of why it can be helpful for a section to be able to read the settings of its direct child blocks. - # In this case, we want the section to be able to read the image aspect ratio of the first slide and apply it to the slideshow slides and slides. - %} - {% style %} - .shopify-section-{{ section.id }} slideshow-slides, - .shopify-section-{{ section.id }} slideshow-slide { - min-height: {{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}vw; - } - {% endstyle %} + {% if section.settings.slide_height == 'adapt_image' and block_index == 0 %} + {%- if preview_image != blank -%} + {% style %} + @media screen and (min-width: 750px) { + .shopify-section-{{ section.id }} slideshow-slides, + .shopify-section-{{ section.id }} slideshow-slide { + min-height: {{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}vw; + } + } + {% endstyle %} + {%- endif -%} + {%- assign mobile_adapt_image = block_settings.image_mobile | default: preview_image -%} + {%- if mobile_adapt_image != blank -%} + {% style %} + @media screen and (max-width: 749px) { + .shopify-section-{{ section.id }} slideshow-slides, + .shopify-section-{{ section.id }} slideshow-slide { + min-height: {{ 1 | divided_by: mobile_adapt_image.aspect_ratio | times: 100 }}vw; + } + } + {% endstyle %} + {%- endif -%} {% endif %}
@@ -181,6 +192,20 @@ object-position: center center; } + .slide__image-container > picture { + display: block; + width: 100%; + height: 100%; + } + + .slide__image-container > picture > .slide__image { + position: relative; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center center; + } + .slide__image-container > .slide__video-poster { position: absolute; } diff --git a/sections/slideshow.liquid b/sections/slideshow.liquid index 13ebb86f0..a41840899 100644 --- a/sections/slideshow.liquid +++ b/sections/slideshow.liquid @@ -245,6 +245,10 @@ "type": "select", "id": "slide_height", "options": [ + { + "value": "adapt_image", + "label": "Adaptar à imagem" + }, { "value": "auto", "label": "t:options.auto" @@ -262,7 +266,7 @@ "label": "t:options.large" } ], - "default": "medium", + "default": "adapt_image", "label": "t:settings.media_height" }, { From e75ad89a0272acba77a8c43d2a8032375c1accad Mon Sep 17 00:00:00 2001 From: "shopify[bot]" <79544226+shopify[bot]@users.noreply.github.com> Date: Tue, 21 Apr 2026 14:52:22 +0000 Subject: [PATCH 06/10] Update from Shopify for theme horizon/claude/wizardly-hopper-dd235d Committed from shop: Mono Produto --- templates/index.json | 33 +++++++++++++++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/templates/index.json b/templates/index.json index ee9fec297..8f74d6a82 100644 --- a/templates/index.json +++ b/templates/index.json @@ -17,6 +17,34 @@ "settings": { "media_type_1": "image", "image_1": "shopify://shop_images/LINHA-MAES-DESKTOP.webp", + "image_mobile": "shopify://shop_images/Logo_Shaun_1.avif", + "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": 0, + "inherit_color_scheme": true, + "color_scheme": "scheme-6", + "toggle_overlay": false, + "overlay_color": "#00000026", + "overlay_style": "solid", + "gradient_direction": "to top", + "padding-block-start": 48, + "padding-block-end": 48, + "padding-inline-start": 48, + "padding-inline-end": 48 + }, + "blocks": {} + }, + "slide_6Hbkyt": { + "type": "_slide", + "settings": { + "media_type_1": "image", + "image_1": "shopify://shop_images/banner-esfoliante_2800-1000.webp", + "image_mobile": "shopify://shop_images/339da34acfe99c3b636afe62ca52e9b0.png", "content_direction": "column", "vertical_on_mobile": true, "horizontal_alignment": "flex-start", @@ -40,7 +68,8 @@ } }, "block_order": [ - "slide_KQwbwN" + "slide_KQwbwN", + "slide_6Hbkyt" ], "name": "t:names.slideshow_full_frame", "settings": { @@ -49,7 +78,7 @@ "full_frame_on_mobile": false, "slideshow_gap": 12, "corner_radius": 0, - "slide_height": "medium", + "slide_height": "large", "content_position": "on-media", "color_scheme": "", "icons_style": "arrows_large", From 37d79364e4d8f559cd2470fe9b5f495edd5485fc Mon Sep 17 00:00:00 2001 From: lgcavalini Date: Tue, 21 Apr 2026 11:57:57 -0300 Subject: [PATCH 07/10] Make auto height adapt to image aspect ratio when no content is present MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When slide_height is 'auto' and the slide has an image but no text/buttons, the image is position:absolute so it doesn't contribute to the content height and the slide collapses to a minimal bar. Fix: apply the image-based min-height calculation (split by breakpoint for desktop/mobile images) whenever slide_height is 'auto' and an image exists. Removes the separate 'adapt_image' schema option — 'auto' now covers both content-driven and image-driven height in one mode. Co-Authored-By: Claude Sonnet 4.6 --- blocks/_slide.liquid | 2 +- sections/slideshow.liquid | 6 +----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/blocks/_slide.liquid b/blocks/_slide.liquid index cf0a94942..9922ab524 100644 --- a/blocks/_slide.liquid +++ b/blocks/_slide.liquid @@ -14,7 +14,7 @@ assign rounded_image_corners = true endif %} - {% if section.settings.slide_height == 'adapt_image' and block_index == 0 %} + {% if section.settings.slide_height == 'auto' and block_index == 0 %} {%- if preview_image != blank -%} {% style %} @media screen and (min-width: 750px) { diff --git a/sections/slideshow.liquid b/sections/slideshow.liquid index a41840899..310e72a1a 100644 --- a/sections/slideshow.liquid +++ b/sections/slideshow.liquid @@ -245,10 +245,6 @@ "type": "select", "id": "slide_height", "options": [ - { - "value": "adapt_image", - "label": "Adaptar à imagem" - }, { "value": "auto", "label": "t:options.auto" @@ -266,7 +262,7 @@ "label": "t:options.large" } ], - "default": "adapt_image", + "default": "auto", "label": "t:settings.media_height" }, { From 0f16c1a35914f8649ed9c7d87e003154c7d53f84 Mon Sep 17 00:00:00 2001 From: "shopify[bot]" <79544226+shopify[bot]@users.noreply.github.com> Date: Tue, 21 Apr 2026 14:58:27 +0000 Subject: [PATCH 08/10] Update from Shopify for theme horizon/claude/wizardly-hopper-dd235d Committed from shop: Mono Produto --- templates/index.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/templates/index.json b/templates/index.json index 8f74d6a82..117d91e80 100644 --- a/templates/index.json +++ b/templates/index.json @@ -78,12 +78,12 @@ "full_frame_on_mobile": false, "slideshow_gap": 12, "corner_radius": 0, - "slide_height": "large", + "slide_height": "adapt_image", "content_position": "on-media", "color_scheme": "", - "icons_style": "arrows_large", - "icons_shape": "none", - "slideshow_controls_style": "dots", + "icons_style": "arrow", + "icons_shape": "circle", + "slideshow_controls_style": "none", "autoplay": true, "autoplay_speed": 4, "padding-block-start": 0, From e43ca1efd5c571e468d5986aa9702e5cf52fae9d Mon Sep 17 00:00:00 2001 From: "shopify[bot]" <79544226+shopify[bot]@users.noreply.github.com> Date: Tue, 21 Apr 2026 15:01:15 +0000 Subject: [PATCH 09/10] Update from Shopify for theme horizon/claude/wizardly-hopper-dd235d Committed from shop: Mono Produto --- templates/index.json | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/templates/index.json b/templates/index.json index 117d91e80..bc3cb1988 100644 --- a/templates/index.json +++ b/templates/index.json @@ -17,7 +17,6 @@ "settings": { "media_type_1": "image", "image_1": "shopify://shop_images/LINHA-MAES-DESKTOP.webp", - "image_mobile": "shopify://shop_images/Logo_Shaun_1.avif", "content_direction": "column", "vertical_on_mobile": true, "horizontal_alignment": "flex-start", @@ -39,12 +38,11 @@ }, "blocks": {} }, - "slide_6Hbkyt": { + "slide_PMxDM7": { "type": "_slide", "settings": { "media_type_1": "image", - "image_1": "shopify://shop_images/banner-esfoliante_2800-1000.webp", - "image_mobile": "shopify://shop_images/339da34acfe99c3b636afe62ca52e9b0.png", + "image_1": "shopify://shop_images/GELEIA-ABRIL-DESKTOP.webp", "content_direction": "column", "vertical_on_mobile": true, "horizontal_alignment": "flex-start", @@ -69,7 +67,7 @@ }, "block_order": [ "slide_KQwbwN", - "slide_6Hbkyt" + "slide_PMxDM7" ], "name": "t:names.slideshow_full_frame", "settings": { @@ -78,7 +76,7 @@ "full_frame_on_mobile": false, "slideshow_gap": 12, "corner_radius": 0, - "slide_height": "adapt_image", + "slide_height": "medium", "content_position": "on-media", "color_scheme": "", "icons_style": "arrow", From 07490f25ffa6fbf3af8b627c262d067369e06d2c Mon Sep 17 00:00:00 2001 From: lgcavalini Date: Tue, 21 Apr 2026 12:23:41 -0300 Subject: [PATCH 10/10] Responsive banners, clickable slides, and fade transition MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Responsive height: move {% style %} outside {% capture %} so the tag is processed at the block render level (reliable). Replace min-height vw with aspect-ratio W/H — the browser maintains the correct proportions as viewport width changes, per desktop and mobile breakpoints independently. Clickable slides: add a `link` URL field to the _slide block schema. Renders an absolute-positioned transparent inside the image container (inset: 0, z-index: 1). Uses CSS :has(.slide__link) to set pointer-events: none on .slide__content so clicks pass through to the link, while and
{% stylesheet %} + .slideshow--fade-transition slideshow-slides { + overflow: hidden; + } + + .slideshow--fade-transition slideshow-slide { + opacity: 0; + transition: opacity 0.5s ease; + pointer-events: none; + } + + .slideshow--fade-transition slideshow-slide[aria-hidden='false'] { + opacity: 1; + pointer-events: auto; + } + .slideshow-section { slideshow-arrows .slideshow-control:first-of-type { margin-inline-start: var(--padding-xs); @@ -360,6 +379,22 @@ ], "default": "dots" }, + { + "type": "select", + "id": "transition_style", + "label": "Transição", + "options": [ + { + "value": "fade", + "label": "Fade" + }, + { + "value": "slide", + "label": "Slide" + } + ], + "default": "fade" + }, { "type": "checkbox", "id": "autoplay",