Claude/wizardly hopper dd235d

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.

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.

blocks/_slide.liquid

@@ -14,23 +14,13 @@
       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 %}
-  {% endif %}
-
   <div class="slide__image-container{% if rounded_image_corners %} slide__image-container--rounded{% endif %}">
     {%- if block_settings.toggle_overlay -%}
       {% render 'overlay', settings: block_settings %}
     {%- endif -%}
+    {%- if block_settings.link != blank -%}
+      <a href="{{ block_settings.link }}" class="slide__link" aria-hidden="true" tabindex="-1"></a>
+    {%- endif -%}
     {%- if preview_image -%}
       {%- liquid
         assign height = preview_image.width | divided_by: preview_image.aspect_ratio | round
@@ -56,11 +46,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'
+          -%}
+          <picture>
+            <source
+              media="(max-width: 749px)"
+              srcset="
+                {%- for mobile_width in mobile_widths_array -%}
+                  {{ block_settings.image_mobile | image_url: width: mobile_width }} {{ mobile_width }}w{% unless forloop.last %},{% endunless %}
+                {%- endfor -%}
+              "
+              sizes="{{ sizes_mobile }}"
+              width="{{ block_settings.image_mobile.width }}"
+              height="{{ block_settings.image_mobile.height }}"
+            >
+            {{
+              block_settings.image_1
+              | image_url: width: 3840
+              | image_tag: height: height, sizes: sizes, widths: widths, class: 'slide__image', loading: loading, fetchpriority: fetchpriority
+            }}
+          </picture>
+        {%- 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 -%}
 
@@ -107,6 +123,28 @@
   </div>
 {% endcapture %}
 
+{%- if section.settings.slide_height == 'auto' and block_index == 0 -%}
+  {%- if preview_image != blank -%}
+    {% style %}
+      @media screen and (min-width: 750px) {
+        .shopify-section-{{ section.id }} slideshow-slide {
+          aspect-ratio: {{ preview_image.width }} / {{ preview_image.height }};
+        }
+      }
+    {% 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-slide {
+          aspect-ratio: {{ mobile_adapt_image.width }} / {{ mobile_adapt_image.height }};
+        }
+      }
+    {% endstyle %}
+  {%- endif -%}
+{%- endif -%}
+
 {%- capture class -%}
   {%- if block_settings.inherit_color_scheme == false -%}
     color-{{ block_settings.color_scheme }}
@@ -155,9 +193,38 @@
     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;
   }
+
+  .slide__link {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+  }
+
+  slideshow-slide:has(.slide__link) .slide__content {
+    pointer-events: none;
+  }
+
+  slideshow-slide:has(.slide__link) .slide__content a,
+  slideshow-slide:has(.slide__link) .slide__content button {
+    pointer-events: auto;
+  }
 {% endstylesheet %}
 
 {% schema %}
@@ -219,6 +286,18 @@
       "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": "url",
+      "id": "link",
+      "label": "Link"
+    },
     {
       "type": "video",
       "id": "video_1",

sections/slideshow.liquid

@@ -46,6 +46,10 @@
     endif
   endif
 
+  if section.settings.transition_style == 'fade'
+    assign slideshow_class = slideshow_class | append: ' slideshow--fade-transition'
+  endif
+
   assign show_arrows = true
   if section.settings.icons_style == 'none' or section.blocks.size <= 1
     assign show_arrows = false
@@ -79,6 +83,21 @@
 </div>
 
 {% 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);
@@ -262,7 +281,7 @@
           "label": "t:options.large"
         }
       ],
-      "default": "medium",
+      "default": "auto",
       "label": "t:settings.media_height"
     },
     {
@@ -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",