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. diff --git a/blocks/_slide.liquid b/blocks/_slide.liquid index bc6e0e3ec..9526ffd50 100644 --- a/blocks/_slide.liquid +++ b/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 %} -
{%- if block_settings.toggle_overlay -%} {% render 'overlay', settings: block_settings %} {%- endif -%} + {%- if block_settings.link != blank -%} + + {%- 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' + -%} + + + {{ + 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 -%} @@ -107,6 +123,28 @@
{% 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", diff --git a/sections/slideshow.liquid b/sections/slideshow.liquid index 13ebb86f0..2e33f06ca 100644 --- a/sections/slideshow.liquid +++ b/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 @@ {% 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", diff --git a/templates/index.json b/templates/index.json index c110afca1..bc3cb1988 100644 --- a/templates/index.json +++ b/templates/index.json @@ -7,83 +7,85 @@ * 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 + "media_type_1": "image", + "image_1": "shopify://shop_images/LINHA-MAES-DESKTOP.webp", + "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": {} }, - "button_H9gpTf": { - "type": "button", - "name": "t:names.button", + "slide_PMxDM7": { + "type": "_slide", "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/GELEIA-ABRIL-DESKTOP.webp", + "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", + "slide_PMxDM7" ], - "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": "arrow", + "icons_shape": "circle", + "slideshow_controls_style": "none", + "autoplay": true, + "autoplay_speed": 4, + "padding-block-start": 0, + "padding-block-end": 0 } }, "product_list_fa6P9H": { @@ -282,7 +284,7 @@ } }, "order": [ - "hero_jVaWmY", + "slideshow_c9zh8T", "product_list_fa6P9H" ] }