Adds model notes

Misha-Puff · Jul 25, 2024 · afe4de1 · afe4de1
1 parent c5768d9
commit afe4de1
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -3575,3 +3575,25 @@ details-disclosure > details {
 .is-flex-wrap {
   flex-wrap: wrap;
 }
+
+.model-note {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 2px;
+  margin: 0;
+  opacity: 0;
+  background-color: #fff;
+  font-size: 1rem;
+}
+
+.product-media-container:hover .model-note {
+  opacity: 1;
+}
+
+@media screen and (max-width: 749px) {
+  .model-note {
+    opacity: 1;
+    left: 0;
+  }
+}
diff --git a/snippets/product-thumbnail.liquid b/snippets/product-thumbnail.liquid
@@ -58,6 +58,9 @@
     assign ratio = media.aspect_ratio
     assign preview_ratio = media.preview_image.aspect_ratio
   endif
+
+  assign filename = media | replace: 'files', 'products'
+  assign model_note = product.metafields.product_page.model_notes.value[filename]
 %}
 <div
   class="product-media-container media-type-{{ media.media_type }} media-fit-{{ media_fit }} global-media-settings gradient{% if constrain_to_viewport %} constrain-height{% endif %}"
@@ -169,4 +172,7 @@
       </deferred-media>
     {%- endif -%}
   {%- endif -%}
+  {%- if model_note != null -%}
+    <p class="model-note">{{ model_note }}</p>
+  {%- endif -%}
 </div>