From a5f5bc3d401effd25fafaebb3de0f8b88425b827 Mon Sep 17 00:00:00 2001 From: "Gentiana.B.R" Date: Tue, 24 Mar 2026 09:43:30 +0100 Subject: [PATCH 1/2] mega menu --- snippets/siteHeader.liquid | 335 ++++++++++++++++++++++++------------- 1 file changed, 220 insertions(+), 115 deletions(-) diff --git a/snippets/siteHeader.liquid b/snippets/siteHeader.liquid index 711fefa..70a49b6 100644 --- a/snippets/siteHeader.liquid +++ b/snippets/siteHeader.liquid @@ -1,138 +1,243 @@ {% comment %} -responsive (dropdown menu on small screen, center menu on large screen) modified as little as possible, from daisy UI webpage +Responsive header with dropdown menu on small screens and click‑based mega menu on desktop. {% endcomment %} {% assign main-nav = settings.main_nav_linklist | def: "main-menu" %} -
- - {% if settings.headerTopEnabled %} -
- {%if settings.headerTopURL %}{% endif %} -

{{ settings.headerTopText | t:'default' }}

- {%if settings.headerTopURL %}{% endif %} +
+ + {% if settings.headerTopEnabled %} +
+ {% if settings.headerTopURL %}{% endif %} +

{{ settings.headerTopText | t:'default' }}

+ {% if settings.headerTopURL %}{% endif %} +
+ {% endif %} + + + +
+ + + + {% if site.langs.size > 1 %} +
+ {% endif %} + + + + + + + {% include 'cartWidget' %}
-
-
- - - -
+
+ +
+
+ + +
+
+
+ + \ No newline at end of file From 16b1256b7cbff39aadd823e998731f2338656e7a Mon Sep 17 00:00:00 2001 From: "Gentiana.B.R" Date: Fri, 27 Mar 2026 11:25:40 +0100 Subject: [PATCH 2/2] Improve navbar: unified desktop/mobile behavior and fix accordion for submenus and produckt card --- assets/custom.css.liquid | 203 +++++++++++++++++++----------------- snippets/productCard.liquid | 71 +++++++------ snippets/siteHeader.liquid | 47 ++++----- 3 files changed, 163 insertions(+), 158 deletions(-) diff --git a/assets/custom.css.liquid b/assets/custom.css.liquid index 1c18af4..24f2818 100644 --- a/assets/custom.css.liquid +++ b/assets/custom.css.liquid @@ -58,7 +58,13 @@ input[type=number] { .collection-row-container { display: grid; grid-template-columns: repeat({{ settings.secProdRowAmount | def:"4" }}, minmax(calc(1375px / {{ settings.secProdRowAmount | def:"4" }}), 1fr)); - overflow-x: auto; + overflow-x: scroll; +} + +.collection-template-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(1280px / {{ settings.colProductCount | def:"4" }})) , 1fr)); + overflow: visible; } {% if settings.border_radius != blank%} @@ -431,125 +437,128 @@ body { box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset; --size: calc(var(--size-field, 0.25rem) * 10); } -@media(min-width:768px){ - -.footer-main{ -max-width:1200px; -margin:0 auto; -display:grid; -grid-template-columns:1.5fr 1fr 1fr 1fr; -grid-template-areas: -"brand col1 col2 col3 col4"; -gap:3rem; -justify-content:center; -} -.footer-brand{ -grid-area:brand; -border-right:1px solid rgba(255,255,255,0.2); -padding-right:2.5rem; -display:flex; -flex-direction:column; -gap:1.5rem; -} -.footer-col-1{grid-area:col1;} -.footer-col-2{grid-area:col2;} -.footer-col-3{grid-area:col3;} -.footer-col-4{grid-area:col4;} +/* FOOTER STYLES */ -.footer-bottom{ -grid-area:bottom; -border-top:1px solid rgba(255,255,255,0.2); -padding-top:2.5rem; -} -.footer-bottom-inner{ -display:flex; -justify-content:center; -align-items:flex-start; -gap:6rem; -} +@media(min-width:768px){ + .footer-main{ + max-width:1200px; + margin:0 auto; + gap:3rem; + } + .footer-brand { + display:flex; + flex-direction:column; + gap:1.5rem; + } + .footer-bottom { + padding-top:2.5rem; + } + .footer-bottom-inner { + display:flex; + justify-content:center; + align-items:flex-start; + gap:6rem; + } } + .footer-bottom .container, -.footer-copyright.container{ -max-width:100%; +.footer-copyright.container { + max-width:100%; } -.footer-title{ -font-weight:600; -margin-bottom:.75rem; +.footer-title { + font-weight:600; + margin-bottom:.75rem; } .social-icons{ -display:flex; -gap:1rem; -align-items:center; + display:flex; + gap:1rem; + align-items:center; } -.shopify-payments, .footer-payments ul{ -display:flex; -gap:.75rem; -align-items:center; + display:flex; + gap:.75rem; + align-items:center; } .footer-cta{ -background:#5b3df5; -color:white; -padding:.75rem 1.5rem; -font-weight:600; -border-radius:4px; -text-decoration:none; -width:fit-content; + background:#5b3df5; + color:white; + padding:.75rem 1.5rem; + font-weight:600; + border-radius:4px; + text-decoration:none; + width:fit-content; } .footer-bottom-title, -.footer-title{ -margin-bottom:.20rem; -font-weight:600; -} -.footer-navigation{ -display:contents; +.footer-title { + margin-bottom:.20rem; + font-weight:600; } -@media(max-width:767px){ -.footer-main{ -display:grid; -grid-template-columns:1fr; -gap:0.5rem; -} -.footer-brand{ -border-right:none; -padding-right:0; -} -.footer-links{ -border-bottom:1px solid rgba(255,255,255,0.15); -padding:1rem 0; -} -} -.payment-single ul{ -max-width:420px; -grid-template-columns:repeat(4,1fr); +@media(max-width:767px){ + .footer-main{ + gap:0.5rem; + } + .footer-brand{ + border-right:none; + padding-right:0; + } + .footer-links { + padding:1rem 0; + } } -@media(min-width:768px){ .payment-single ul{ -grid-template-columns:repeat(5,1fr); + max-width:420px; + grid-template-columns:repeat(4,1fr); } -.payment-single{ -max-width:420px; -}.payment-single ul li{ -min-width:48px; -min-height:32px; + +@media(min-width:768px) { + .footer-nav { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); + } + .payment-single ul { + grid-template-columns:repeat(5,1fr); + } + .payment-single { + max-width:420px; + } + .payment-single ul li { + min-width:48px; + min-height:32px; + } } /* center footer when only one link column */ -.footer-main.footer-single{ -max-width:1100px; -margin-left:auto; -margin-right:auto; -padding-left:25rem; -grid-template-columns:1fr 1fr 1fr; -column-gap:15em; +.footer-main.footer-single { + max-width:1100px; + margin-left:auto; + margin-right:auto; + padding-left:25rem; + column-gap:15em; } + @media (min-width:768px) and (max-width:1024px){ -.footer-main.footer-single{ -padding-left:4rem; -column-gap:2rem; + .footer-main.footer-single{ + padding-left:4rem; + column-gap:2rem; + } } +/* FOOTER STYLES END */ + +/* ProductCard image styling */ + +.product-image-wrapper { + height: 220px; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; } -/**/ + +.product-image { + max-height: 100%; + width: auto; + object-fit: contain; +} \ No newline at end of file diff --git a/snippets/productCard.liquid b/snippets/productCard.liquid index ef2d83d..451061f 100644 --- a/snippets/productCard.liquid +++ b/snippets/productCard.liquid @@ -1,37 +1,42 @@
- + + {% if product.quantity <= 0 %} +
+ {{ 'Out of stock' | t:'collection' }} +
+ {% endif %} + {% if product.featuredImage %} - {% if product.quantity <= 0 %} -
- {{ 'Out of stock' | t:'collection' }} -
- {% endif %} -
- {{ product.featuredImage.alt }} -
- {% endif %} -
-
-

- {{ product.meta.h1 }} -

-
- {% if product.variants.size > 1 and product.priceMin < product.priceMax %} - - {{ product.priceMin | money }} - - ‐ - - {{ product.priceMax | money }} - - {% else %} - {{ product.price | money }} - {% endif %} +
+ {{ product.featuredImage | img_tag:0,productHeight,class:settings.col_card_img_height }} +
+ {% endif %} +
+
+

+ {{ product.meta.h1 }} +

+
+ {% if product.variants.size > 1 and product.priceMin < product.priceMax %} + + {{ product.priceMin | money }} + + ‐ + + {{ product.priceMax | money }} + + {% else %} + {% if product.compareAtPrice > product.price %} + {{ product.compareAtPrice | money }}{{ product.price | money }} + {% else %} + {{ product.price | money }} + {% endif %} + {% endif %} +
+
+
+
-
- {{ 'Read more' | t:'collection' }} -
-
- -
+ +
\ No newline at end of file diff --git a/snippets/siteHeader.liquid b/snippets/siteHeader.liquid index 70a49b6..481ac56 100644 --- a/snippets/siteHeader.liquid +++ b/snippets/siteHeader.liquid @@ -99,7 +99,7 @@ Responsive header with dropdown menu on small screens and click‑based mega men {{ link.title }} -
+
{% for childlink in navigation[link.param].links %} {% if childlink.type == 'navigation' %} @@ -109,7 +109,7 @@ Responsive header with dropdown menu on small screens and click‑based mega men › -
+
    {% for subchild in navigation[childlink.handle].links %}
  • @@ -200,33 +200,24 @@ Responsive header with dropdown menu on small screens and click‑based mega men