product-main

Shopify · Oct 3, 2024 · f1ab0a8 · f1ab0a8
1 parent a3ef067
commit f1ab0a8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 25 deletions.
diff --git a/blocks/product-variants.liquid b/blocks/product-variants.liquid
@@ -40,31 +40,33 @@
 </style>
 
 <div class="flex col product-options">
-  <input type="hidden" name="url" value="{{ product.url }}">
   <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id | default: product.variants.first.id }}">
-  {%- for option in product.options_with_values -%}
-    {%- assign selected_value = option.values | where: 'selected', true | first -%}
-    <div class="flex col product-option">
-      <p class="h6"><strong>{{ option.name }}:</strong>{% if selected_value.swatch != blank %} {{ selected_value.name }}{% endif %}</p>
-      <div class="flex row wrap product-option-values">
-        {%- for option_value in option.values -%}
-          <product-option-value {% if option_value.selected %}selected {% endif %}variant-id="{{ option_value.variant.id }}" product-url="{{ option_value.product_url | default: product.url }}">
-            {%- if option_value.swatch != blank -%}
-              <div class="product-swatch flex col" {%- if option_value.swatch.color != blank -%}style="--swatch-color: {{ option_value.swatch.color }};"{%- endif -%}>
-                {%- if option_value.swatch.image != blank -%}
-                  {%- render 'image-element', image: option_value.swatch.image, aspect_ratio: 1, fit: 'cover', sizes: '50px', widths: '50,100,150' -%}
-                {%- endif -%}
-              </div>
-            {% else %}
-              <div class="product-option-name flex row center middle">
-                <p>{{ option_value.name }}</p>
-              </div>
-            {%- endif -%}
-          </product-option-value>
-        {%- endfor -%}
+  <input type="hidden" name="url" value="{{ product.url }}">
+  {%- unless product.has_only_default_variant or product.variants.size < 2 -%}
+    {%- for option in product.options_with_values -%}
+      {%- assign selected_value = option.values | where: 'selected', true | first -%}
+      <div class="flex col product-option">
+        <p class="h6"><strong>{{ option.name }}:</strong>{% if selected_value.swatch != blank %} {{ selected_value.name }}{% endif %}</p>
+        <div class="flex row wrap product-option-values">
+          {%- for option_value in option.values -%}
+            <product-option-value {% if option_value.selected %}selected {% endif %}variant-id="{{ option_value.variant.id }}" product-url="{{ option_value.product_url | default: product.url }}">
+              {%- if option_value.swatch != blank -%}
+                <div class="product-swatch flex col" {%- if option_value.swatch.color != blank -%}style="--swatch-color: {{ option_value.swatch.color }};"{%- endif -%}>
+                  {%- if option_value.swatch.image != blank -%}
+                    {%- render 'image-element', image: option_value.swatch.image, aspect_ratio: 1, fit: 'cover', sizes: '50px', widths: '50,100,150' -%}
+                  {%- endif -%}
+                </div>
+              {% else %}
+                <div class="product-option-name flex row center middle">
+                  <p>{{ option_value.name }}</p>
+                </div>
+              {%- endif -%}
+            </product-option-value>
+          {%- endfor -%}
+        </div>
       </div>
-    </div>
-  {%- endfor -%}
+    {%- endfor -%}
+  {%- endunless -%}
 </div>
 
 {% schema %}

diff --git a/sections/collection-main.liquid b/sections/collection-main.liquid
@@ -4,16 +4,19 @@
   {%- paginate collection.products by 24 -%}
     <div class="grid col-4 medium_col-2 small_col-1">
       {%- for product in collection.products -%}
-        <a href="{{ product.url }}" class="flex col product-grid-item">
+        <div class="flex col product-grid-item" style="aspect-ratio: 2/3;">
           <h5>{{ product.title }}</h5>
+          <div class="flex col">
+            {%- render 'image-element', image: product.featured_image -%}
+          </div>
           <div class="flex row wrap">
             {%- for option in product.options_with_values limit: 1 -%}
               {%- for option_value in option.values -%}
                 <a href="{{ option_value.variant.url | within: collection }}">{{ option_value.name }}</a>
               {%- endfor -%}
             {%- endfor -%}
           </div>
-        </a>
+        </div>
       {%- endfor -%}
     </div>
     {{- paginate | default_pagination -}}