YSHOP2-1313: Themes placeholders (#428)

## JIRA Ticket ### [YSHOP2-1313](https://youcanshop.atlassian.net/browse/YSHOP2-1313) ## QA Steps - [ ] Go to theme listing and select `Aura` Theme - [ ] then add the id of the theme on `youcan.theme.json` file - [ ] verify that the theme is have all the placeholder inplace ## Note #### a prerelease is [published](https://github.com/youcan-shop/cod-theme/releases) to test the theme and to avoid any breaking changes for the sellers that already install and custome the theme [YSHOP2-1313]: https://youcanshop.atlassian.net/browse/YSHOP2-1313?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
youcan-shop · Feb 5, 2024 · 8e71b65 · 8e71b65
1 parent 13a841e
commit 8e71b65
Show file tree

Hide file tree

Showing 29 changed files with 663 additions and 334 deletions.
diff --git a/.gitignore b/.gitignore
@@ -83,8 +83,9 @@ sw.*
 # Vim swap files
 *.swp
 
-# youcan 
+# youcan
 .youcan
+youcan.theme.json
 
 # local dev files
 styles/utils.scss

diff --git a/assets/default-hero.png b/assets/default-hero.png
diff --git a/assets/express-checkout.css b/assets/express-checkout.css
@@ -9,7 +9,6 @@
     grid-gap: 18px;
   }
 }
-
 #express-checkout-form * {
   font-family: var(--yc-font-family);
 }
@@ -192,3 +191,13 @@
     padding-bottom: 0;
   }
 }
+
+.sticky-checkout-placeholder .express-checkout-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.sticky-btn-placehodler {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
diff --git a/assets/featured-products.css b/assets/featured-products.css
@@ -50,15 +50,15 @@
   padding: 0 0 100%;
   height: 0;
 }
-.yc-featured-products .product-list .product-block .product-thumbnail img {
+.yc-featured-products .product-list .product-block .product-thumbnail img, .yc-featured-products .product-list .product-block .product-thumbnail svg {
   position: absolute;
   top: 50%;
   left: 50%;
   height: 100%;
   transform: translate(-50%, -50%);
   transition: transform 0.25s ease;
 }
-.yc-featured-products .product-list .product-block .product-thumbnail img:hover {
+.yc-featured-products .product-list .product-block .product-thumbnail img:hover, .yc-featured-products .product-list .product-block .product-thumbnail svg:hover {
   transform: translate(-50%, -50%) scale(1.1);
 }
 .yc-featured-products .product-list .product-block .product-details {
@@ -135,6 +135,9 @@
 .yc-featured-products .product-list .product-block .prices .product-thumbnail:hover img {
   transform: scale(1.1);
 }
+.yc-featured-products .product-list .featured-product-placeholder {
+  cursor: not-allowed;
+}
 .yc-featured-products .button-container {
   max-width: max-content;
   margin-left: auto;

diff --git a/assets/hero.png b/assets/hero.png
diff --git a/assets/product-column.css b/assets/product-column.css
@@ -13,7 +13,7 @@
 }
 @media (min-width: 1400px) {
   .product-home-container {
-    padding: 0 280px;
+    padding: 0 240px;
   }
 }
 .product-home-container .product-block {
@@ -60,16 +60,19 @@
   position: relative;
   width: 50%;
 }
-.product-home-container .product-block .image-box img {
+.product-home-container .product-block .image-box img, .product-home-container .product-block .image-box svg {
   width: 100%;
   height: 400px;
   object-fit: cover;
 }
 @media screen and (max-width: 768px) {
-  .product-home-container .product-block .image-box img {
+  .product-home-container .product-block .image-box img, .product-home-container .product-block .image-box svg {
     height: 330px;
   }
 }
+.product-home-container .product-block .image-box svg {
+  height: 290px;
+}
 .product-home-container .product-block .buy-btn {
   width: 100%;
 }
@@ -86,3 +89,6 @@
     width: 100%;
   }
 }
+.product-home-container .product-placeholder .buy-btn {
+  cursor: not-allowed;
+}
diff --git a/assets/product-slider.css b/assets/product-slider.css
@@ -4,15 +4,15 @@
   padding: 0 0 100%;
   height: 0;
 }
-.product-slider .product-thumbnail img {
+.product-slider .product-thumbnail img, .product-slider .product-thumbnail svg {
   position: absolute;
   top: 50%;
   left: 50%;
   height: 100%;
   transform: translate(-50%, -50%);
   transition: transform 0.25s ease;
 }
-.product-slider .product-thumbnail img:hover {
+.product-slider .product-thumbnail img:hover, .product-slider .product-thumbnail svg:hover {
   transform: translate(-50%, -50%) scale(1.1);
 }
 .product-slider .prices {
@@ -66,3 +66,6 @@
   line-height: 120%;
   text-decoration-line: line-through;
 }
+.product-slider .product-slider-placeholder {
+  cursor: not-allowed;
+}
diff --git a/assets/product.css b/assets/product.css
@@ -311,6 +311,19 @@
   padding: 4px 10px !important;
 }
 
+.single-product-placeholder svg {
+  width: 100%;
+  height: 333px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+}
+@media (min-width: 768px) {
+  .single-product-placeholder svg {
+    height: 474px;
+  }
+}
+
 /* ----- Quantity input ----- */
 .quantity-field {
   display: flex;

diff --git a/sections/featured-products.liquid b/sections/featured-products.liquid
@@ -43,16 +43,29 @@
   }
 {% endstyle %}
 
+{% assign products_exist = false %}
+
+{% for block in section.blocks %}
+  {% if block.settings.product %}
+    {% assign products_exist = true %}
+  {% endif %}
+{% endfor %}
+
 <section class='section-featured-products-{{ id }} yc-featured-products container'>
-  <h1 class='yc-section-title'>
-    {{ section.settings.title }}
-  </h1>
+  <h1 class='yc-section-title'>{{ section.settings.title }}</h1>
   <div class='product-list product-container-{{ id }}'>
-    {%- for block in section.blocks -%}
-      <div {{ block.youcan_attributes }} class="product-item-{{ id }}">
-        {%- render 'product-preview', item: block.settings.product, block_settings: block.settings, section_settings: section.settings -%}
-      </div>
-    {%- endfor -%}
+    {% for block in section.blocks %}
+      {% if block.settings.product %}
+        <div {{ block.youcan_attributes }} class="product-item-{{ id }}">
+          {%- render 'product-preview', item: block.settings.product, block_settings: block.settings, section_settings: section.settings -%}
+        </div>
+      {% elsif products_exist == false %}
+        {%- assign index = forloop.index0 | modulo: 4 -%}
+        <div {{ block.youcan_attributes }} class="product-item-{{ id }}">
+          {%- render 'product-placeholder', index: index -%}
+         </div>
+      {% endif %}
+    {% endfor %}
   </div>
 </section>
 

diff --git a/sections/multi-column.liquid b/sections/multi-column.liquid
@@ -76,6 +76,13 @@
     padding: 15px;
   }
 
+  .column-image-wrapper svg {
+    object-fit: contain;
+    aspect-ratio: 1;
+    width: 50px;
+    height: 50px;
+  }
+
   @media only screen and (max-width: 576px) {
     .multi-column-{{ id }} .multi-column-blocks {
       grid-template-columns: repeat({{ section.settings.columns_mobile }}, 1fr);
@@ -100,27 +107,15 @@
     <div class='multi-column-blocks'>
       {% for block in section.blocks %}
         {% assign block_setting = block.settings %}
-        <div
-          class='column-block'
-          {{ block.youcan_attributes }}
-        >
+        <div class='column-block' {{ block.youcan_attributes }}>
           {% if block_setting.image %}
-          <div class="column-image-wrapper">
-            <img
-              class='column-image'
-              src='{{ block_setting.image.src }}'
-              loading='lazy'
-            >
-          </div>
+            <div class="column-image-wrapper">
+              <img class='column-image' src='{{ block_setting.image.src }}' loading='lazy'>
+            </div>
           {% else %}
-          <div class="column-image-wrapper">
-            <img
-              class='column-image'
-              src='{{ 'default_product.jpeg' | asset_url }}'
-              loading='lazy'
-            >
-          </div>
-
+            <div class="column-image-wrapper">
+              {% render 'multi-column-svg', svg_index: forloop.index %}
+            </div>
           {% endif %}
           {% if block_setting.heading %}
             <h4 class='column-title'>{{ block_setting.heading }}</h4>

diff --git a/sections/product-column.liquid b/sections/product-column.liquid
@@ -3,27 +3,27 @@
 {{ 'product-column.css' | asset_url | stylesheet_tag }}
 
 {%- style -%}
-  .product_customization-{{ id }} {
-    padding-top: {{ section.settings.space_top}}px;
-    padding-bottom: {{ section.settings.space_bottom}}px;
-  }
-
-  .product_customization-{{ id }} {
-    background-color: {{ section.settings.background_color.hex }};
-  }
+.product_customization-{{ id }} {
+  padding-top: {{ section.settings.space_top }}px;
+  padding-bottom: {{ section.settings.space_bottom }}px;
+  background-color: {{ section.settings.background_color.hex }};
+}
 
-  .product_customization-{{ id }} .yc-btn {
-    color: {{ section.settings.button_text_color.hex }} !important;
-  }
+.product_customization-{{ id }} .yc-btn {
+  color: {{ section.settings.button_text_color.hex }} !important;
+}
 {%- endstyle -%}
 
-{%- assign selected_product = section.settings.product %}
+{%- assign selected_product = section.settings.product -%}
+
+<section class='product_customization-{{ id }}'>
+  {%- if selected_product -%}
+    {%- render 'product-home', product_id: selected_product.id, product: selected_product, block_settings: section.settings -%}
+  {%- else -%}
+    {%- render 'product-column-placeholder', id: id, section_settings: section.settings -%}
+  {%- endif -%}
+</section>
 
-{%- if selected_product %}
-  <section class='product_customization-{{ id }}'>
-    {%- render 'product-home', product_id: selected_product.id, product: selected_product, block_settings: section.settings-%}
-  </section>
-{%- endif %}
 
 {%- schema -%}
   {

diff --git a/sections/product.liquid b/sections/product.liquid
@@ -15,14 +15,12 @@
 {%- endstyle -%}
 
 <section class='product_customization-{{ id }}'>
-  {%- assign selected_product = section.settings.product %}
+  {%- assign selected_product = section.settings.product -%}
 
-  {%- if product %}
-    {%- assign selected_product = product %}
-  {%- endif %}
-
-  {%- if selected_product %}
+  {%- if selected_product -%}
     {%- render 'single-product', product: selected_product, section: section -%}
+  {%- else -%}
+    {%- render 'single-product-placeholder', section: section, id: id -%}
   {%- endif %}
 </section>
 

diff --git a/snippets/add-to-cart.liquid b/snippets/add-to-cart.liquid
@@ -19,17 +19,9 @@
 {%- endstyle -%}
 
 <div class='yc-{{ uniq }}-add-to-cart{% if is_sticky %} is_sticky{% endif %}'>
-  <button
-    class='yc-btn'
-    onclick='addToCart("{{ snippetId }}")'
-  >
-    <span
-      class='spinner hidden'
-      id='loading__cart'
-    ></span>
-    <span>
-      {{ text }}
-    </span>
+  <button class='yc-btn' {% if is_placeholder %} disabled {% endif %} onclick='addToCart("{{ snippetId }}")'>
+    <span class='spinner hidden' id='loading__cart'></span>
+    <span>{{ text }}</span>
   </button>
 </div>
 

diff --git a/snippets/express-checkout.liquid b/snippets/express-checkout.liquid
@@ -66,11 +66,16 @@
     color: {{ settings.input_placeholder_color.hex }};
   }
   {% endif %}
+
+  .express-checkout-placeholder .express-checkout-button {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 {% endstyle %}
 
 <form
   id='express-checkout-form'
-  class='custom-checkout-{{ checkout_id }}'
+  class='custom-checkout-{{ checkout_id }} {% if is_placeholder %}express-checkout-placeholder{% endif %}'
   onsubmit="return false;"
 >
   <div class='express-checkout-fields'>
@@ -105,6 +110,7 @@
       <button
         type='submit'
         class='yc-btn w-full express-checkout-button'
+        {% if is_placeholder %} disabled {% endif %}
         onclick='placeOrder(this)'
       >
         <span

diff --git a/snippets/multi-column-svg.liquid b/snippets/multi-column-svg.liquid
@@ -0,0 +1,45 @@
+{% case svg_index %}
+  {% when 1 %}
+    <svg width="83" height="61" viewBox="0 0 83 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M5.00549 24.5658C6.0137 24.4068 6.98785 25.0949 7.15589 26.1168L9.02017 37.6008H17.8182V27.4124H19.6927V37.6008H29.2752V27.0808H31.1486V37.6008H40.2316V27.2466H42.1049V37.6008H51.6886V27.2466H53.562V37.6008H62.9799V27.0808H64.8544V37.6008H74.2644L75.6722 26.6743C75.8039 25.649 76.7099 24.9178 77.7715 25.0552C78.7979 25.1869 79.5234 26.127 79.3906 27.1535L75.2396 59.3663C75.1182 60.302 74.3223 61.0003 73.3799 61.0003H10.6176C9.69912 61.0003 8.91572 60.3337 8.76698 59.4265L3.45457 26.7163C3.28995 25.6956 3.98366 24.7327 5.00436 24.5658H5.00549ZM9.32445 39.4754L10.9344 49.3846L17.817 49.3664V39.4754H9.32332H9.32445ZM19.6927 39.4754V49.363L29.2752 49.3369V39.4754H19.6927ZM51.6886 51.1536L42.1049 51.1774V57.2521H51.6886V51.1536ZM53.5631 57.2521H62.981V51.1263L53.5631 51.1502V57.2521ZM40.2327 51.1831L31.1497 51.207V57.2521H40.2327V51.1831ZM29.2752 51.2104L19.6927 51.2365V57.2521H29.2752V51.2104ZM31.1486 39.4754V49.3335L40.2316 49.3096V39.4754H31.1486ZM42.1061 39.4754V49.3039L51.6897 49.2801V39.4754H42.1061ZM53.5631 39.4754V49.2767L62.981 49.2528V39.4754H53.5631ZM64.8555 39.4754V49.2472L72.7668 49.2267L74.0237 39.4754H64.8555ZM72.525 51.1014L64.8555 51.1218V57.2533H71.7325L72.525 51.1014ZM17.8182 57.2521V51.2399L11.2387 51.2569L12.2117 57.2533H17.8182V57.2521Z" fill="#29B3B0"/>
+      <path d="M0 22.5164C0 25.7706 2.63975 28.4105 5.89486 28.4105H76.9567C80.213 28.4105 82.8516 25.7706 82.8516 22.5164C82.8516 19.2599 80.213 16.6211 76.9567 16.6211H5.89486C2.63861 16.6211 0 19.261 0 22.5164Z" fill="#E06461"/>
+      <path d="M65.2123 23.2171C65.9491 23.2171 66.6849 22.9287 67.2389 22.3553C68.3141 21.2369 68.2801 19.4576 67.1617 18.3801L49.5612 1.44251C48.444 0.364966 46.666 0.39903 45.5874 1.51972C44.511 2.63815 44.5462 4.4174 45.6634 5.49495L63.264 22.4325C63.8101 22.9571 64.5129 23.2171 65.2134 23.2171H65.2123Z" fill="#29B3B0"/>
+      <path d="M19.7244 23.387C20.4533 23.387 21.1811 23.1065 21.7306 22.5456L39.1642 4.77912C40.2508 3.67092 40.2349 1.89052 39.1279 0.802757C38.0186 -0.282738 36.2361 -0.26457 35.1529 0.840227L17.7193 18.6078C16.6327 19.716 16.6486 21.4964 17.7568 22.5842C18.304 23.1201 19.0159 23.3881 19.7255 23.3881L19.7244 23.387Z" fill="#29B3B0"/>
+    </svg>
+  {% when 2 %}
+    <svg width="59" height="30" viewBox="0 0 59 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M57.543 0.953125H21.2266V24.4005H57.543V0.953125Z" fill="#E9E5D9"/>
+      <path d="M21.2285 4.35547H7.84275L1.53906 14.4937V24.4022H21.2285V4.35547Z" fill="#FBBE68"/>
+      <path d="M18.9444 6.63672H9.09964L4.21875 14.4908H18.9444V6.63672Z" fill="#3A4D57"/>
+      <path d="M11.0763 28.4456C13.3104 28.4456 15.1214 26.6346 15.1214 24.4005C15.1214 22.1665 13.3104 20.3555 11.0763 20.3555C8.84229 20.3555 7.03125 22.1665 7.03125 24.4005C7.03125 26.6346 8.84229 28.4456 11.0763 28.4456Z" fill="#3A4D57"/>
+      <path d="M11.0796 26.3076C12.1332 26.3076 12.9873 25.4535 12.9873 24.3999C12.9873 23.3463 12.1332 22.4922 11.0796 22.4922C10.026 22.4922 9.17188 23.3463 9.17188 24.3999C9.17188 25.4535 10.026 26.3076 11.0796 26.3076Z" fill="#E9E5D9"/>
+      <path d="M47.8576 28.4456C50.0916 28.4456 51.9027 26.6346 51.9027 24.4005C51.9027 22.1665 50.0916 20.3555 47.8576 20.3555C45.6235 20.3555 43.8125 22.1665 43.8125 24.4005C43.8125 26.6346 45.6235 28.4456 47.8576 28.4456Z" fill="#3A4D57"/>
+      <path d="M47.853 26.3076C48.9066 26.3076 49.7607 25.4535 49.7607 24.3999C49.7607 23.3463 48.9066 22.4922 47.853 22.4922C46.7994 22.4922 45.9453 23.3463 45.9453 24.3999C45.9453 25.4535 46.7994 26.3076 47.853 26.3076Z" fill="#E9E5D9"/>
+      <path d="M43.6223 25.3576H21.2149C20.6853 25.3576 20.2578 24.9301 20.2578 24.4006V0.953132C20.2578 0.423571 20.6853 -0.00390625 21.2149 -0.00390625H43.2267C43.7563 -0.00390625 44.1838 0.423571 44.1838 0.953132C44.1838 1.48269 43.7563 1.91017 43.2267 1.91017H22.1719V23.4435H43.6223C44.1519 23.4435 44.5793 23.871 44.5793 24.4006C44.5793 24.9301 44.1519 25.3576 43.6223 25.3576Z" fill="#3A4D57"/>
+      <path d="M45.4716 1.91017H44.9102C44.3806 1.91017 43.9531 1.48269 43.9531 0.953131C43.9531 0.423571 44.3806 -0.00390625 44.9102 -0.00390625H45.4716C46.0012 -0.00390625 46.4287 0.423571 46.4287 0.953131C46.4287 1.48269 46.0012 1.91017 45.4716 1.91017Z" fill="#3A4D57"/>
+      <path d="M57.5432 25.3576H52.4964C51.9668 25.3576 51.5393 24.9301 51.5393 24.4006C51.5393 23.871 51.9668 23.4435 52.4964 23.4435H56.5861V1.91017H48.4258C47.8962 1.91017 47.4688 1.48269 47.4688 0.953132C47.4688 0.423571 47.8962 -0.00390625 48.4258 -0.00390625H57.5432C58.0727 -0.00390625 58.5002 0.423571 58.5002 0.953132V24.4006C58.5002 24.9301 58.0727 25.3576 57.5432 25.3576Z" fill="#3A4D57"/>
+      <path d="M21.2246 25.3593H15.3675C14.838 25.3593 14.4105 24.9318 14.4105 24.4022C14.4105 23.8727 14.838 23.4452 15.3675 23.4452H20.2676V5.31251H8.36841L2.4922 14.7617V17.8433C2.4922 18.3729 2.06472 18.8004 1.53516 18.8004C1.0056 18.8004 0.578125 18.3729 0.578125 17.8433V14.4873C0.578125 14.3087 0.629167 14.1364 0.724871 13.9833L7.02218 3.85143C7.19445 3.5707 7.50708 3.39844 7.83247 3.39844H21.2182C21.7478 3.39844 22.1753 3.82591 22.1753 4.35548V24.4022C22.1753 24.9318 21.7478 25.3593 21.2182 25.3593H21.2246Z" fill="#3A4D57"/>
+      <path d="M6.87686 25.3576H1.54298C1.01341 25.3576 0.585938 24.9301 0.585938 24.4006V19.9727C0.585938 19.4431 1.01341 19.0156 1.54298 19.0156C2.07254 19.0156 2.50001 19.4431 2.50001 19.9727V23.4435H6.87686C7.40643 23.4435 7.8339 23.871 7.8339 24.4006C7.8339 24.9301 7.40643 25.3576 6.87686 25.3576Z" fill="#3A4D57"/>
+      <path d="M11.0802 29.4027C8.32397 29.4027 6.07812 27.1568 6.07812 24.4006C6.07812 21.6443 8.32397 19.3984 11.0802 19.3984C13.8365 19.3984 16.0824 21.6443 16.0824 24.4006C16.0824 27.1568 13.8365 29.4027 11.0802 29.4027ZM11.0802 21.3189C9.37672 21.3189 7.9922 22.7034 7.9922 24.4069C7.9922 26.1105 9.37672 27.495 11.0802 27.495C12.7838 27.495 14.1683 26.1105 14.1683 24.4069C14.1683 22.7034 12.7838 21.3189 11.0802 21.3189Z" fill="#3A4D57"/>
+      <path d="M47.8537 29.4027C45.0974 29.4027 42.8516 27.1568 42.8516 24.4006C42.8516 21.6443 45.0974 19.3984 47.8537 19.3984C50.61 19.3984 52.8558 21.6443 52.8558 24.4006C52.8558 27.1568 50.61 29.4027 47.8537 29.4027ZM47.8537 21.3189C46.1502 21.3189 44.7656 22.7034 44.7656 24.4069C44.7656 26.1105 46.1502 27.495 47.8537 27.495C49.5572 27.495 50.9417 26.1105 50.9417 24.4069C50.9417 22.7034 49.5572 21.3189 47.8537 21.3189Z" fill="#3A4D57"/>
+      </svg>
+  {% when 3 %}
+    <svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M23.3541 11.1016H16.7109V15.0004H23.3541V11.1016Z" fill="#C12106"/>
+      <path d="M33.4129 13.3047H6.65625V40.0614H33.4129V13.3047Z" fill="#FDC63A"/>
+      <path d="M34.5469 13.3047H5.53125V22.6001H34.5469V13.3047Z" fill="#FDC63A"/>
+      <path d="M33.4129 22.6055H6.65625V23.3166H33.4129V22.6055Z" fill="#EA932A"/>
+      <path d="M2.65821 16.2564L0.859375 14.9345C3.80445 10.9185 13.9616 10.8013 15.1162 10.793V13.0269C12.305 13.0269 4.59929 13.6125 2.65821 16.2564Z" fill="#A81D05"/>
+      <path d="M33.4129 39.3398H6.65625V40.051H33.4129V39.3398Z" fill="#EA932A"/>
+      <path d="M23.6596 13.3047H16.4141V40.0614H23.6596V13.3047Z" fill="#C12106"/>
+      <path d="M19.2204 7.34609C19.2204 7.34609 9.60704 -6.54261 2.48699 3.87392C-0.00628793 6.90266 1.95152 10.1908 2.48699 10.2828C3.02245 10.3748 4.26072 13.3032 16.4175 13.3032C23.6631 13.3032 19.2287 7.34609 19.2287 7.34609H19.2204Z" fill="#C12106"/>
+      <path d="M37.4111 16.2564C35.6876 13.9054 28.852 13.0352 24.9531 13.0269V10.793C26.0994 10.793 36.2649 10.9185 39.21 14.9345L37.4111 16.2564Z" fill="#A81D05"/>
+      <path d="M16.9937 12.7259C10.7354 12.7259 6.64407 11.9645 4.83686 10.4585C4.71136 10.3497 4.55239 10.2242 4.35159 10.0987C4.12569 9.66364 3.62369 8.35844 4.77829 6.95283L4.87033 6.8357C6.2341 4.84443 7.6397 3.89062 9.19591 3.89062C12.7267 3.89062 16.7176 8.50067 17.9642 10.2744C18.5248 11.0358 18.9347 12.0481 18.918 12.4246C18.7339 12.5334 18.165 12.7259 16.9853 12.7259H16.9937Z" fill="#A81D05"/>
+      <path d="M20.8515 7.34609C20.8515 7.34609 30.4649 -6.54261 37.5849 3.87392C40.0782 6.90266 38.1204 10.1908 37.5849 10.2828C37.0494 10.3748 35.8112 13.3032 23.6544 13.3032C16.4088 13.3032 20.8432 7.34609 20.8432 7.34609H20.8515Z" fill="#C12106"/>
+      <path d="M23.0889 12.7259C29.3472 12.7259 33.4385 11.9645 35.2457 10.4585C35.3712 10.3497 35.5302 10.2242 35.731 10.0987C35.9569 9.66364 36.4589 8.35844 35.3043 6.95283L35.2122 6.8357C33.8485 4.84443 32.4429 3.89062 30.8867 3.89062C27.3559 3.89062 23.365 8.50067 22.1184 10.2744C21.5578 11.0358 21.1478 12.0481 21.1646 12.4246C21.3486 12.5334 21.9176 12.7259 23.0973 12.7259H23.0889Z" fill="#A81D05"/>
+    </svg>
+  {% else %}
+  <svg width="42" height="34" viewBox="0 0 42 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M41.4236 16.8129L38.3023 13.5202L35.1811 10.1245C34.4951 9.54139 33.6376 9.54139 33.0545 10.1245L29.8303 13.5202L26.709 16.8129C26.1259 17.4989 26.3317 17.9791 27.1892 17.9791H29.4187V18.2535C29.3158 22.9183 27.0863 26.5197 23.9651 28.7492C19.5747 31.7676 13.3665 32.042 8.80459 28.4405C18.5114 39.4164 38.8511 32.2478 38.8511 17.9448H40.8748C41.7323 17.9448 41.9381 17.4646 41.355 16.7786L41.4236 16.8129ZM12.2346 20.5173L15.3558 17.2245C15.9389 16.5385 15.7331 16.0583 14.8756 16.0583H12.6462V15.7839C12.7491 11.0163 14.9785 7.41481 18.0998 5.28823C22.4902 2.16695 28.6984 1.99545 33.1574 5.56262C23.5192 -5.41329 3.21374 1.75536 3.21374 16.0583H1.15576C0.298263 16.0583 -0.0104349 16.5385 0.57266 17.2245L3.79683 20.5173L6.91811 23.913C7.5012 24.4961 8.4616 24.4961 9.04469 23.913L12.2689 20.5173H12.2346Z" fill="#FFEAB3"/>
+    </svg>
+{% endcase %}