From ee9bbf886c78b038b08ae7478eb7f8b64db3703a Mon Sep 17 00:00:00 2001 From: Guilherme Carreiro Date: Thu, 9 Jul 2026 11:00:01 +0200 Subject: [PATCH 01/11] Add container block --- blocks/container.liquid | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 blocks/container.liquid diff --git a/blocks/container.liquid b/blocks/container.liquid new file mode 100644 index 000000000..98fd16839 --- /dev/null +++ b/blocks/container.liquid @@ -0,0 +1,33 @@ +{% doc %} + Wraps composed page content in a semantic HTML element. Every template + composes its page through a container block: the block owns the outer + layout element and renders the composed body via {{ block.content }}. + + @param {string} [tag] - HTML element for the wrapper. Default: 'section'. + + @example Default section wrapper + {% block 'container' %} +

{{ page.title }}

+ {{ page.content }} + {% endblock %} + + @example Override the wrapper element + {% block 'container', tag: 'div' %} + ... + {% endblock %} +{% enddoc %} + +{%- liquid + assign tag = tag | default: 'section' +-%} + +<{{ tag }} {{ block.shopify_attributes }}> + {{ block.content }} + + +{% schema %} +{ + "name": "Container", + "settings": [] +} +{% endschema %} From e7b75acad36d96d06afeb3e0f3b970abde4dc85e Mon Sep 17 00:00:00 2001 From: Guilherme Carreiro Date: Thu, 9 Jul 2026 11:07:07 +0200 Subject: [PATCH 02/11] Convert hello-world and text to blocks --- assets/critical.css | 89 ++++++++++++++++++++ blocks/group.liquid | 105 ------------------------ {sections => blocks}/hello-world.liquid | 98 ++-------------------- blocks/text.liquid | 19 +---- 4 files changed, 101 insertions(+), 210 deletions(-) delete mode 100644 blocks/group.liquid rename {sections => blocks}/hello-world.liquid (54%) diff --git a/assets/critical.css b/assets/critical.css index cdb1ae1aa..b073f6996 100644 --- a/assets/critical.css +++ b/assets/critical.css @@ -115,3 +115,92 @@ body { .shopify-section > .full-width { grid-column: 1 / -1; } + +/** Hello world block */ +.welcome { + display: grid; + grid-template-columns: var(--content-grid); + background-color: #f6f6f7; + padding: 72px 0; +} + +.welcome-content { + grid-column: 2; + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; + width: 100%; + padding: 0 24px; +} + +.welcome-description { + max-width: 80ch; + line-height: 1.4; + margin-top: 1.5rem; +} + +.icon { + width: 300px; +} + +.highlights { + display: grid; + gap: 2rem; + grid-template-columns: repeat(3, 1fr); + margin-top: 50px; +} + +@media (max-width: 1100px) { + .highlights { + grid-template-columns: 1fr; + } +} + +.highlight { + display: flex; + flex-direction: column; + height: 100%; + padding: 24px; + border-radius: 8px; + background-color: #eef3ff; + color: rgb(92, 95, 98); + line-height: 1.4; +} + +.highlight > * + * { + margin-top: 1rem; +} + +.highlight h3 { + font-size: 1rem; + color: rgb(32, 34, 35); +} + +.highlight-description { + flex: 1 1; +} + +.highlight a { + display: flex; + width: fit-content; + background-color: rgb(250, 251, 251); + box-shadow: rgba(0, 0, 0, 0.2) 0px -3px 0px 0px inset, rgba(255, 255, 255, 0.9) 0px 2px 0px 0px inset; + border: 1px solid rgb(140, 145, 150); + border-radius: 4px; + color: rgb(92, 95, 98); + padding: 3px 10px 5px; + text-decoration: none; +} + +/** Text block */ +.text { + text-align: var(--text-align); +} +.text--title { + font-size: 2rem; + font-weight: 700; +} +.text--subtitle { + font-size: 1.5rem; +} diff --git a/blocks/group.liquid b/blocks/group.liquid deleted file mode 100644 index baea31c58..000000000 --- a/blocks/group.liquid +++ /dev/null @@ -1,105 +0,0 @@ -{% doc %} - Renders a group of blocks with configurable layout direction, gap and - alignment. - - All settings apply to only one dimension to reduce configuration complexity. - - This component is a wrapper concerned only with rendering its children in - the specified layout direction with appropriate padding and alignment. - - @example - {% content_for 'block', type: 'group', id: 'group' %} -{% enddoc %} - -
- {% content_for 'blocks' %} -
- -{% stylesheet %} - .group { - display: flex; - flex-wrap: nowrap; - overflow: hidden; - width: 100%; - } - - .group--horizontal { - flex-direction: row; - justify-content: space-between; - align-items: center; - padding: 0 var(--padding); - } - - .group--vertical { - flex-direction: column; - align-items: var(--alignment); - padding: var(--padding) 0; - } -{% endstylesheet %} - -{% schema %} -{ - "name": "t:general.group", - "blocks": [{ "type": "@theme" }], - "settings": [ - { - "type": "select", - "id": "layout_direction", - "label": "t:labels.layout_direction", - "default": "group--vertical", - "options": [ - { "value": "group--horizontal", "label": "t:options.direction.horizontal" }, - { "value": "group--vertical", "label": "t:options.direction.vertical" } - ] - }, - { - "visible_if": "{{ block.settings.layout_direction == 'group--vertical' }}", - "type": "select", - "id": "alignment", - "label": "t:labels.alignment", - "default": "flex-start", - "options": [ - { "value": "flex-start", "label": "t:options.alignment.left" }, - { "value": "center", "label": "t:options.alignment.center" }, - { "value": "flex-end", "label": "t:options.alignment.right" } - ] - }, - { - "type": "range", - "id": "padding", - "label": "t:labels.padding", - "default": 0, - "min": 0, - "max": 200, - "step": 2, - "unit": "px" - } - ], - "presets": [ - { - "name": "t:general.column", - "category": "t:general.layout", - "settings": { - "layout_direction": "group--vertical", - "alignment": "flex-start", - "padding": 0 - } - }, - { - "name": "t:general.row", - "category": "t:general.layout", - "settings": { - "layout_direction": "group--horizontal", - "padding": 0 - } - } - ] -} -{% endschema %} diff --git a/sections/hello-world.liquid b/blocks/hello-world.liquid similarity index 54% rename from sections/hello-world.liquid rename to blocks/hello-world.liquid index 839823ac0..de2d0ce08 100644 --- a/sections/hello-world.liquid +++ b/blocks/hello-world.liquid @@ -1,8 +1,10 @@ -{% comment %} - Welcome to Shopify theme development! -{% endcomment %} +{% doc %} + Renders the skeleton theme's welcome message and getting-started + highlights. This is the theme's signature starter block: the index + template composes it inside a container block. +{% enddoc %} -
+

Hello, World!

@@ -52,93 +54,11 @@
-{% stylesheet %} - .welcome { - display: grid; - grid-template-columns: var(--content-grid); - background-color: #f6f6f7; - padding: 72px 0; - } - - .welcome-content { - grid-column: 2; - display: flex; - justify-content: space-between; - align-items: center; - gap: 1rem; - width: 100%; - padding: 0 24px; - } - - .welcome-description { - max-width: 80ch; - line-height: 1.4; - margin-top: 1.5rem; - } - - .icon { - width: 300px; - } - - .highlights { - display: grid; - gap: 2rem; - grid-template-columns: repeat(3, 1fr); - margin-top: 50px; - } - - @media (max-width: 1100px) { - .highlights { - grid-template-columns: 1fr; - } - } - - .highlight { - display: flex; - flex-direction: column; - height: 100%; - padding: 24px; - border-radius: 8px; - background-color: #eef3ff; - color: rgb(92, 95, 98); - line-height: 1.4; - } - - .highlight > * + * { - margin-top: 1rem; - } - - .highlight h3 { - font-size: 1rem; - color: rgb(32, 34, 35); - } - - .highlight-description { - flex: 1 1; - } - - .highlight a { - display: flex; - width: fit-content; - background-color: rgb(250, 251, 251); - box-shadow: rgba(0, 0, 0, 0.2) 0px -3px 0px 0px inset, rgba(255, 255, 255, 0.9) 0px 2px 0px 0px inset; - border: 1px solid rgb(140, 145, 150); - border-radius: 4px; - color: rgb(92, 95, 98); - padding: 3px 10px 5px; - text-decoration: none; - } -{% endstylesheet %} +{{ block.content }} {% schema %} { - "name": "Hello World", - "settings": [], - "presets": [ - { - "name": "Hello World Template", - "category": "Demo" - } - ] + "name": "Hello world", + "settings": [] } {% endschema %} diff --git a/blocks/text.liquid b/blocks/text.liquid index b985c3894..83c07ce63 100644 --- a/blocks/text.liquid +++ b/blocks/text.liquid @@ -2,7 +2,7 @@ Renders a text block. @example - {% content_for 'block', type: 'text', id: 'text' %} + {% block 'text' %}{% endblock %} {% enddoc %}
{{ block.settings.text }} + {{ block.content }}
-{% stylesheet %} - .text { - text-align: var(--text-align); - } - .text--title { - font-size: 2rem; - font-weight: 700; - } - .text--subtitle { - font-size: 1.5rem; - } -{% endstylesheet %} - {% schema %} { "name": "t:general.text", @@ -53,7 +41,6 @@ "label": "t:labels.alignment", "default": "left" } - ], - "presets": [{ "name": "t:general.text" }] + ] } {% endschema %} From 9fde893129f6b136401a562fa1938ba3aa3b9d33 Mon Sep 17 00:00:00 2001 From: Guilherme Carreiro Date: Thu, 9 Jul 2026 11:10:22 +0200 Subject: [PATCH 03/11] Convert index template to liquid --- templates/index.json | 20 -------------------- templates/index.liquid | 3 +++ 2 files changed, 3 insertions(+), 20 deletions(-) delete mode 100644 templates/index.json create mode 100644 templates/index.liquid diff --git a/templates/index.json b/templates/index.json deleted file mode 100644 index 1f827db93..000000000 --- a/templates/index.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "hello-world", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/index.liquid b/templates/index.liquid new file mode 100644 index 000000000..f8e3250fd --- /dev/null +++ b/templates/index.liquid @@ -0,0 +1,3 @@ +{% block 'container', tag: 'div' %} + {% block 'hello-world' %}{% endblock %} +{% endblock %} From c78cd59e4f673d0d61dacf43df5069efc78072ee Mon Sep 17 00:00:00 2001 From: Guilherme Carreiro Date: Thu, 9 Jul 2026 11:18:10 +0200 Subject: [PATCH 04/11] Convert content page templates to liquid --- templates/404.json | 20 --------------- templates/404.liquid | 11 ++++++++ templates/article.json | 20 --------------- templates/article.liquid | 55 ++++++++++++++++++++++++++++++++++++++++ templates/blog.json | 20 --------------- templates/blog.liquid | 23 +++++++++++++++++ templates/page.json | 20 --------------- templates/page.liquid | 5 ++++ 8 files changed, 94 insertions(+), 80 deletions(-) delete mode 100644 templates/404.json create mode 100644 templates/404.liquid delete mode 100644 templates/article.json create mode 100644 templates/article.liquid delete mode 100644 templates/blog.json create mode 100644 templates/blog.liquid delete mode 100644 templates/page.json create mode 100644 templates/page.liquid diff --git a/templates/404.json b/templates/404.json deleted file mode 100644 index fc12fc786..000000000 --- a/templates/404.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ - { - "sections": { - "main": { - "type": "404", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/404.liquid b/templates/404.liquid new file mode 100644 index 000000000..621c1ba75 --- /dev/null +++ b/templates/404.liquid @@ -0,0 +1,11 @@ +{% block 'container' %} +

{{ '404.title' | t }}

+ +

+ {{ '404.not_found' | t }} +

+ + + {{ '404.back_to_shopping' | t }} + +{% endblock %} diff --git a/templates/article.json b/templates/article.json deleted file mode 100644 index d3bc0dfda..000000000 --- a/templates/article.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "article", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/article.liquid b/templates/article.liquid new file mode 100644 index 000000000..20f75de65 --- /dev/null +++ b/templates/article.liquid @@ -0,0 +1,55 @@ +{% block 'container' %} + {% if article.image %} + {{ article.image | image_url: width: 1000 | image_tag }} + {% endif %} + +

{{ article.title }}

+ + {% assign date = article.published_at | time_tag: format: 'date' %} +

{{ 'blog.article_metadata_html' | t: date: date, author: article.author }}

+ + {{ article.content }} + + {% if blog.comments_enabled? %} +

{{ 'blog.article_comments' | t }}

+ +
+ {% paginate article.comments by 10 %} + {% for comment in article.comments %} +
+

{{ comment.author }}

+

+ {{- comment.created_at | time_tag: format: 'date' -}} +

+

{{ comment.content }}

+
+ {% endfor %} + + {{ paginate | default_pagination: anchor: 'comments' }} + {% endpaginate %} +
+ + {% form 'new_comment', article %} +

{{ 'blog.comment_form_title' | t }}

+ + {{ form.errors | default_errors }} + +
+ + +
+ +
+ + +
+ +
+ + +
+ + + {% endform %} + {% endif %} +{% endblock %} diff --git a/templates/blog.json b/templates/blog.json deleted file mode 100644 index 09705d701..000000000 --- a/templates/blog.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "blog", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/blog.liquid b/templates/blog.liquid new file mode 100644 index 000000000..be7176e7e --- /dev/null +++ b/templates/blog.liquid @@ -0,0 +1,23 @@ +{% block 'container' %} +

{{ blog.title }}

+ + {% paginate blog.articles by 5 %} + {% for article in blog.articles %} +
+ {% if article.image %} + {{ article.image | image_url: width: 1000 | image_tag }} + {% endif %} +

+ {{ article.title | link_to: article.url }} +

+ {% assign date = article.published_at | time_tag: format: 'date' %} +

{{ 'blog.article_metadata_html' | t: date: date, author: article.author }}

+

{{ article.excerpt }}

+
+ {% endfor %} + + {%- if paginate.pages > 1 -%} + {{- paginate | default_pagination -}} + {%- endif -%} + {% endpaginate %} +{% endblock %} diff --git a/templates/page.json b/templates/page.json deleted file mode 100644 index 36d23000f..000000000 --- a/templates/page.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "page", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/page.liquid b/templates/page.liquid new file mode 100644 index 000000000..56f217da2 --- /dev/null +++ b/templates/page.liquid @@ -0,0 +1,5 @@ +{% block 'container' %} +

{{ page.title }}

+ + {{ page.content }} +{% endblock %} From 2dad835a907fa24a65ed04bbd99ee6dbd4769aa5 Mon Sep 17 00:00:00 2001 From: Guilherme Carreiro Date: Thu, 9 Jul 2026 11:26:39 +0200 Subject: [PATCH 05/11] Convert grid templates to liquid and consolidate CSS --- assets/critical.css | 35 +++++++++++++++++++++++ templates/collection.json | 20 -------------- templates/collection.liquid | 28 +++++++++++++++++++ templates/list-collections.json | 20 -------------- templates/list-collections.liquid | 27 ++++++++++++++++++ templates/search.json | 20 -------------- templates/search.liquid | 46 +++++++++++++++++++++++++++++++ 7 files changed, 136 insertions(+), 60 deletions(-) delete mode 100644 templates/collection.json create mode 100644 templates/collection.liquid delete mode 100644 templates/list-collections.json create mode 100644 templates/list-collections.liquid delete mode 100644 templates/search.json create mode 100644 templates/search.liquid diff --git a/assets/critical.css b/assets/critical.css index b073f6996..dd04a0d4a 100644 --- a/assets/critical.css +++ b/assets/critical.css @@ -204,3 +204,38 @@ body { .text--subtitle { font-size: 1.5rem; } + +/** Collection page */ +.collection-products { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); +} + +/** Collections list page */ +.collections { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr)); + gap: var(--grid-gap); +} +.collections--compact { + --collection-card-size: 160px; +} +.collections--full { + --collection-card-size: 280px; +} +.collection-card { + display: flex; + flex-direction: column; + width: 100%; +} + +/** Search page */ +.search-results { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); +} +.search-results .prev, +.search-results .page, +.search-results .next { + grid-column: 1 / -1; +} diff --git a/templates/collection.json b/templates/collection.json deleted file mode 100644 index 7592ac075..000000000 --- a/templates/collection.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "collection", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/collection.liquid b/templates/collection.liquid new file mode 100644 index 000000000..254007edd --- /dev/null +++ b/templates/collection.liquid @@ -0,0 +1,28 @@ +{% block 'container' %} +

{{ collection.title }}

+ +
+ {% paginate collection.products by 20 %} + {% for product in collection.products %} +
+ {% if product.featured_image %} + {% render 'image', + class: 'collection-product__image', + image: product.featured_image, + url: product.url, + width: 400, + height: 400, + crop: 'center' + %} + {% endif %} +
+

{{ product.title | escape | link_to: product.url }}

+

{{ product.price | money }}

+
+
+ {% endfor %} + + {{ paginate | default_pagination }} + {% endpaginate %} +
+{% endblock %} diff --git a/templates/list-collections.json b/templates/list-collections.json deleted file mode 100644 index 309842879..000000000 --- a/templates/list-collections.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "collections", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/list-collections.liquid b/templates/list-collections.liquid new file mode 100644 index 000000000..8acd78e81 --- /dev/null +++ b/templates/list-collections.liquid @@ -0,0 +1,27 @@ +{% block 'container' %} +

{{ 'collections.title' | t }}

+ +
+ {% for collection in collections %} + + {% if collection.featured_image %} + {% render 'image', + class: 'collection-card__image', + image: collection.featured_image, + width: 600, + height: 600, + crop: 'center' + %} + {% endif %} + +
+

{{ collection.title }}

+ + {% if collection.description %} +

{{ collection.description | strip_html | truncatewords: 15 }}

+ {% endif %} +
+ + {% endfor %} +
+{% endblock %} diff --git a/templates/search.json b/templates/search.json deleted file mode 100644 index 8c540c545..000000000 --- a/templates/search.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "search", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/search.liquid b/templates/search.liquid new file mode 100644 index 000000000..52c351296 --- /dev/null +++ b/templates/search.liquid @@ -0,0 +1,46 @@ +{% block 'container' %} +

{{ 'search.title' | t }}

+ +
+ + +
+ + {% if search.performed %} + {% if search.results_count == 0 %} +

{{ 'search.no_results_html' | t: terms: search.terms }}

+ {% else %} +

{{ 'search.results_for_html' | t: terms: search.terms, count: search.results_count }}

+ +
+ {% paginate search.results by 20 %} + {% # Search result items may be an article, a page, or a product. %} + {% for result in search.results %} +
+ {% assign featured_image = result.featured_image | default: result.image %} + {% if featured_image %} + {% render 'image', class: 'search-result__image', image: featured_image, url: result.url, width: 400 %} + {% endif %} +
+

+ {{ result.title | link_to: result.url }} + {% if result.price %} + {{ result.price | money_with_currency }} + {% endif %} +

+
+
+ {% endfor %} + + {{ paginate | default_pagination }} + {% endpaginate %} +
+ {% endif %} + {% endif %} +{% endblock %} From 60ecf3505512d853c42ac6519d5111d5f347e119 Mon Sep 17 00:00:00 2001 From: Guilherme Carreiro Date: Thu, 9 Jul 2026 11:30:40 +0200 Subject: [PATCH 06/11] Convert product, cart, and password templates to liquid --- templates/cart.json | 20 -------------------- templates/cart.liquid | 25 +++++++++++++++++++++++++ templates/password.json | 21 --------------------- templates/password.liquid | 25 +++++++++++++++++++++++++ templates/product.json | 20 -------------------- templates/product.liquid | 37 +++++++++++++++++++++++++++++++++++++ 6 files changed, 87 insertions(+), 61 deletions(-) delete mode 100644 templates/cart.json create mode 100644 templates/cart.liquid delete mode 100644 templates/password.json create mode 100644 templates/password.liquid delete mode 100644 templates/product.json create mode 100644 templates/product.liquid diff --git a/templates/cart.json b/templates/cart.json deleted file mode 100644 index 78c2add24..000000000 --- a/templates/cart.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "cart", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/cart.liquid b/templates/cart.liquid new file mode 100644 index 000000000..65cd5f264 --- /dev/null +++ b/templates/cart.liquid @@ -0,0 +1,25 @@ +{% block 'container' %} +

{{ 'cart.title' | t }}

+ +
+ + {% for item in cart.items %} + + + + + + {% endfor %} +
+ {% render 'image', image: item.image, url: item.url %} + +

{{ item.product.title }}

+ {{ 'cart.remove' | t | link_to: item.url_to_remove }} + 		+ + +
+ + +
+{% endblock %} diff --git a/templates/password.json b/templates/password.json deleted file mode 100644 index 030b72597..000000000 --- a/templates/password.json +++ /dev/null @@ -1,21 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "layout": "password", - "sections": { - "main": { - "type": "password", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/password.liquid b/templates/password.liquid new file mode 100644 index 000000000..572c482e7 --- /dev/null +++ b/templates/password.liquid @@ -0,0 +1,25 @@ +{% layout 'password' %} + +{% block 'container' %} +

{{ 'password.title' | t }}

+ + {% if shop.password_message %} +

{{ shop.password_message }}

+ {% endif %} + + {% form 'storefront_password' %} + {% if form.errors %} + {{ form.errors | default_errors }} + {% endif %} + + + + + + + {% endform %} +{% endblock %} diff --git a/templates/product.json b/templates/product.json deleted file mode 100644 index 8329ddc68..000000000 --- a/templates/product.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "product", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/product.liquid b/templates/product.liquid new file mode 100644 index 000000000..422c33af3 --- /dev/null +++ b/templates/product.liquid @@ -0,0 +1,37 @@ +{% block 'container' %} +
+ {% for image in product.images %} + {% render 'image', class: 'product-image', image: image %} + {% endfor %} +
+ +
+

{{ product.title }}

+

{{ product.price | money }}

+

{{ product.description }}

+
+ +
+ {% form 'product', product %} + {% assign current_variant = product.selected_or_first_available_variant %} + + + + + + + {{ form | payment_button }} + {% endform %} +
+{% endblock %} From e201d5dfe3bd5cffc4cacdba0aff8b31fded42e1 Mon Sep 17 00:00:00 2001 From: Guilherme Carreiro Date: Thu, 9 Jul 2026 11:35:01 +0200 Subject: [PATCH 07/11] Convert header and footer to blocks and rewire layout --- assets/critical.css | 46 ++++++++++++++++++++++++++++++ {sections => blocks}/footer.liquid | 29 ++++++------------- {sections => blocks}/header.liquid | 43 ++++++---------------------- layout/theme.liquid | 4 +-- sections/footer-group.json | 25 ---------------- sections/header-group.json | 22 -------------- 6 files changed, 66 insertions(+), 103 deletions(-) rename {sections => blocks}/footer.liquid (64%) rename {sections => blocks}/header.liquid (56%) delete mode 100644 sections/footer-group.json delete mode 100644 sections/header-group.json diff --git a/assets/critical.css b/assets/critical.css index dd04a0d4a..5a2409fe3 100644 --- a/assets/critical.css +++ b/assets/critical.css @@ -239,3 +239,49 @@ body { .search-results .next { grid-column: 1 / -1; } + +/** Header */ +header { + height: 5rem; + display: flex; + align-items: center; + justify-content: space-between; +} +header a { + position: relative; + text-decoration: none; + color: var(--color-foreground); + display: flex; + align-items: center; + justify-content: center; +} +header a sup { + position: absolute; + left: 100%; + overflow: hidden; + max-width: var(--page-margin); +} +header svg { + width: 2rem; +} +header .header__menu, +header .header__icons { + display: flex; + gap: 1rem; +} + +/** Footer */ +footer { + display: flex; + justify-content: space-between; + margin-top: 2rem; +} +footer a { + text-decoration: none; + color: var(--color-foreground); +} +footer .footer__links, +footer .footer__payment { + display: flex; + gap: 1rem; +} diff --git a/sections/footer.liquid b/blocks/footer.liquid similarity index 64% rename from sections/footer.liquid rename to blocks/footer.liquid index 66e6f0978..309f43a36 100644 --- a/sections/footer.liquid +++ b/blocks/footer.liquid @@ -1,4 +1,10 @@ -