Variants As Separate Products

{% assign cds = section.id | replace: '_', '' | downcase %}

{% style %}
  .variant-products-{{ cds }} {
    padding: {{ section.settings.section_padding_top }}px 0 {{ section.settings.section_padding_bottom }}px;
  }

  .variant-products-container-{{ cds }} {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .variant-products-header-{{ cds }} {
    text-align: {{ section.settings.heading_alignment }};
    margin-bottom: 40px;
  }

  .variant-products-title-{{ cds }} {
    margin: 0 0 12px;
    color: {{ section.settings.heading_color }};
    font-size: {{ section.settings.heading_size }}px;
  }

  .variant-products-description-{{ cds }} {
    margin: 0;
    color: {{ section.settings.text_color }};
    font-size: {{ section.settings.description_size }}px;
  }

  .variant-products-grid-{{ cds }} {
    display: grid;
    grid-template-columns: repeat({{ section.settings.columns_desktop }}, 1fr);
    gap: {{ section.settings.grid_gap }}px;
  }

  .variant-card-{{ cds }} {
    background: {{ section.settings.card_background }};
    border: {{ section.settings.card_border_width }}px solid {{ section.settings.card_border_color }};
    border-radius: {{ section.settings.card_border_radius }}px;
    padding: {{ section.settings.card_padding }}px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .variant-card-{{ cds }}:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }

  .variant-image-wrapper-{{ cds }} {
    position: relative;
    width: 100%;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: {{ section.settings.image_border_radius }}px;
  }

  .variant-image-{{ cds }} {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: {{ section.settings.image_ratio }};
    object-fit: cover;
  }

  .variant-image-placeholder-{{ cds }} {
    width: 100%;
    aspect-ratio: {{ section.settings.image_ratio }};
    background-color: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .variant-image-placeholder-{{ cds }} svg {
    width: 60%;
    height: 60%;
    opacity: 0.3;
  }

  .variant-badge-{{ cds }} {
    position: absolute;
    top: 12px;
    left: 12px;
    background: {{ section.settings.badge_background }};
    color: {{ section.settings.badge_text_color }};
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
  }

  .variant-info-{{ cds }} {
    margin-bottom: 16px;
  }

  .variant-title-{{ cds }} {
    margin: 0 0 8px;
    font-size: {{ section.settings.variant_title_size }}px;
    color: {{ section.settings.variant_title_color }};
    font-weight: 600;
  }

  .variant-option-{{ cds }} {
    margin: 0 0 12px;
    font-size: {{ section.settings.variant_option_size }}px;
    color: {{ section.settings.variant_option_color }};
  }

  .variant-price-{{ cds }} {
    margin: 0 0 16px;
    font-size: {{ section.settings.price_size }}px;
    color: {{ section.settings.price_color }};
    font-weight: 600;
  }

  .variant-price-compare-{{ cds }} {
    text-decoration: line-through;
    opacity: 0.6;
    margin-left: 8px;
    font-size: {{ section.settings.price_size | times: 0.9 }}px;
  }

  .variant-button-{{ cds }} {
    display: inline-block;
    width: 100%;
    padding: 12px 24px;
    background: {{ section.settings.button_background }};
    color: {{ section.settings.button_text_color }};
    border: {{ section.settings.button_border_width }}px solid {{ section.settings.button_border_color }};
    border-radius: {{ section.settings.button_border_radius }}px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .variant-button-{{ cds }}:hover {
    background: {{ section.settings.button_hover_background }};
    color: {{ section.settings.button_hover_text_color }};
    border-color: {{ section.settings.button_hover_border_color }};
  }

  .variant-button-{{ cds }}:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .empty-state-{{ cds }} {
    text-align: center;
    padding: 60px 20px;
    color: #666;
  }

  .empty-state-{{ cds }} svg {
    max-width: 300px;
    margin: 0 auto 20px;
    opacity: 0.3;
  }

  @media screen and (max-width: 989px) {
    .variant-products-grid-{{ cds }} {
      grid-template-columns: repeat({{ section.settings.columns_tablet }}, 1fr);
    }
  }

  @media screen and (max-width: 749px) {
    .variant-products-grid-{{ cds }} {
      grid-template-columns: repeat({{ section.settings.columns_mobile }}, 1fr);
    }

    .variant-products-title-{{ cds }} {
      font-size: {{ section.settings.heading_size | times: 0.7 }}px;
    }

    .variant-card-{{ cds }} {
      padding: {{ section.settings.card_padding | times: 0.75 }}px;
    }
  }
{% endstyle %}

{% comment %}
  LOGIC: Determine the collection source.
  1. Use section setting if provided.
  2. Fallback to global collection object (if on collection page).
{% endcomment %}
{% assign target_collection = section.settings.collection %}
{% if target_collection == blank and collection != blank %}
  {% assign target_collection = collection %}
{% endif %}

<div class="variant-products-{{ cds }}" {{ section.shopify_attributes }}>
  <div class="variant-products-container-{{ cds }}">
    {% if section.settings.heading != blank or section.settings.description != blank %}
      <div class="variant-products-header-{{ cds }}">
        {% if section.settings.heading != blank %}
          <h2 class="variant-products-title-{{ cds }}">{{ section.settings.heading }}</h2>
        {% endif %}
        {% if section.settings.description != blank %}
          <div class="variant-products-description-{{ cds }}">{{ section.settings.description }}</div>
        {% endif %}
      </div>
    {% endif %}

    {% if target_collection != blank %}
      {% assign products_to_show = target_collection.products %}
      
      {% if section.settings.product_limit > 0 %}
        {% assign product_limit = section.settings.product_limit %}
      {% else %}
        {% assign product_limit = products_to_show.size %}
      {% endif %}

      {% assign variant_count = 0 %}
      {% assign has_variants = false %}

      {% if products_to_show.size > 0 %}
        <div class="variant-products-grid-{{ cds }}">
          {% for product in products_to_show limit: product_limit %}
            {% for variant in product.variants %}
              {% if section.settings.show_unavailable or variant.available %}
                {% assign variant_count = variant_count | plus: 1 %}
                {% assign has_variants = true %}
                
                <div class="variant-card-{{ cds }}">
                  <div class="variant-card-top-{{ cds }}">
                    <div class="variant-image-wrapper-{{ cds }}">
                      {% if variant.image %}
                        <img
                          src="{{ variant.image | image_url: width: 600 }}"
                          alt="{{ variant.title | escape }}"
                          loading="lazy"
                          width="600"
                          height="600"
                          class="variant-image-{{ cds }}"
                        >
                      {% elsif product.featured_image %}
                        <img
                          src="{{ product.featured_image | image_url: width: 600 }}"
                          alt="{{ product.title | escape }}"
                          loading="lazy"
                          width="600"
                          height="600"
                          class="variant-image-{{ cds }}"
                        >
                      {% else %}
                        <div class="variant-image-placeholder-{{ cds }}">
                          {{ 'product-1' | placeholder_svg_tag }}
                        </div>
                      {% endif %}

                      {% if section.settings.show_badges %}
                        {% if variant.available == false %}
                          <div class="variant-badge-{{ cds }}">Sold Out</div>
                        {% elsif variant.compare_at_price > variant.price %}
                          <div class="variant-badge-{{ cds }}">Sale</div>
                        {% endif %}
                      {% endif %}
                    </div>

                    <div class="variant-info-{{ cds }}">
                      {% if section.settings.show_product_title %}
                        <h3 class="variant-title-{{ cds }}">{{ product.title }}</h3>
                      {% endif %}

                      <p class="variant-option-{{ cds }}">{{ variant.title }}</p>

                      <div class="variant-price-{{ cds }}">
                        {{ variant.price | money }}
                        {% if variant.compare_at_price > variant.price %}
                          <span class="variant-price-compare-{{ cds }}">{{ variant.compare_at_price | money }}</span>
                        {% endif %}
                      </div>
                    </div>
                  </div>

                  <div class="variant-card-bottom-{{ cds }}">
                    {% if variant.available %}
                      <a
                        href="{{ variant.url }}"
                        class="variant-button-{{ cds }}"
                      >
                        {{ section.settings.button_text }}
                      </a>
                    {% else %}
                      <button
                        class="variant-button-{{ cds }}"
                        disabled
                      >
                        Unavailable
                      </button>
                    {% endif %}
                  </div>
                </div>
              {% endif %}
            {% endfor %}
          {% endfor %}
        </div>

        {% if has_variants == false %}
          <div class="empty-state-{{ cds }}">
            {{ 'collection-1' | placeholder_svg_tag }}
            <p>No available variants found in this collection.</p>
          </div>
        {% endif %}
      {% else %}
        <div class="empty-state-{{ cds }}">
          {{ 'collection-1' | placeholder_svg_tag }}
          <p>This collection is empty. Add products to see them here.</p>
        </div>
      {% endif %}
    {% else %}
      <div class="empty-state-{{ cds }}">
        {{ 'collection-1' | placeholder_svg_tag }}
        <p>Please select a collection in the section settings, or visit a collection page to see variants.</p>
      </div>
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "Collection variants grid",
  "settings": [
    {
      "type": "header",
      "content": "Data Source"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection",
      "info": "Select a collection to display. Leave empty to use the current page's collection."
    },
    {
      "type": "header",
      "content": "Products"
    },
    {
      "type": "range",
      "id": "product_limit",
      "min": 0,
      "max": 50,
      "step": 1,
      "label": "Product limit",
      "default": 12,
      "info": "Set to 0 to show all products. Note: Each product's variants will be shown separately, so the total card count may be much higher than this number."
    },
    {
      "type": "checkbox",
      "id": "show_unavailable",
      "label": "Show unavailable variants",
      "default": false
    },
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "All Variants"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Description",
      "default": "Browse all available variants from our collection"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "checkbox",
      "id": "show_product_title",
      "label": "Show product title",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_badges",
      "label": "Show badges",
      "default": true
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button text",
      "default": "View Product"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 2,
      "max": 5,
      "step": 1,
      "label": "Columns on desktop",
      "default": 4
    },
    {
      "type": "range",
      "id": "columns_tablet",
      "min": 2,
      "max": 4,
      "step": 1,
      "label": "Columns on tablet",
      "default": 3
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "label": "Columns on mobile",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        }
      ],
      "default": "2"
    },
    {
      "type": "range",
      "id": "grid_gap",
      "min": 10,
      "max": 50,
      "step": 5,
      "unit": "px",
      "label": "Grid gap",
      "default": 20
    },
    {
      "type": "select",
      "id": "image_ratio",
      "label": "Image ratio",
      "options": [
        {
          "value": "1/1",
          "label": "Square"
        },
        {
          "value": "3/4",
          "label": "Portrait"
        },
        {
          "value": "4/3",
          "label": "Landscape"
        }
      ],
      "default": "1/1"
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading",
      "default": "#a42325"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Description",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "card_background",
      "label": "Card background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "card_border_color",
      "label": "Card border",
      "default": "#e6e6e6"
    },
    {
      "type": "color",
      "id": "variant_title_color",
      "label": "Product title",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "variant_option_color",
      "label": "Variant option",
      "default": "#666666"
    },
    {
      "type": "color",
      "id": "price_color",
      "label": "Price",
      "default": "#a42325"
    },
    {
      "type": "color",
      "id": "badge_background",
      "label": "Badge background",
      "default": "#a42325"
    },
    {
      "type": "color",
      "id": "badge_text_color",
      "label": "Badge text",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Button style"
    },
    {
      "type": "color",
      "id": "button_background",
      "label": "Background",
      "default": "#a42325"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_border_color",
      "label": "Border",
      "default": "#a42325"
    },
    {
      "type": "color",
      "id": "button_hover_background",
      "label": "Hover background",
      "default": "#780406"
    },
    {
      "type": "color",
      "id": "button_hover_text_color",
      "label": "Hover text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_hover_border_color",
      "label": "Hover border",
      "default": "#780406"
    },
    {
      "type": "range",
      "id": "button_border_width",
      "min": 0,
      "max": 4,
      "step": 1,
      "unit": "px",
      "label": "Border width",
      "default": 0
    },
    {
      "type": "range",
      "id": "button_border_radius",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Border radius",
      "default": 0
    },
    {
      "type": "header",
      "content": "Typography"
    },
    {
      "type": "range",
      "id": "heading_size",
      "min": 20,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Heading size",
      "default": 32
    },
    {
      "type": "range",
      "id": "description_size",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Description size",
      "default": 16
    },
    {
      "type": "range",
      "id": "variant_title_size",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Product title size",
      "default": 16
    },
    {
      "type": "range",
      "id": "variant_option_size",
      "min": 12,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Variant option size",
      "default": 14
    },
    {
      "type": "range",
      "id": "price_size",
      "min": 14,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Price size",
      "default": 18
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "range",
      "id": "section_padding_top",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "px",
      "label": "Top padding",
      "default": 50
    },
    {
      "type": "range",
      "id": "section_padding_bottom",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "px",
      "label": "Bottom padding",
      "default": 50
    },
    {
      "type": "range",
      "id": "card_padding",
      "min": 10,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Card padding",
      "default": 20
    },
    {
      "type": "range",
      "id": "card_border_width",
      "min": 0,
      "max": 4,
      "step": 1,
      "unit": "px",
      "label": "Card border width",
      "default": 1
    },
    {
      "type": "range",
      "id": "card_border_radius",
      "min": 0,
      "max": 20,
      "step": 2,
      "unit": "px",
      "label": "Card border radius",
      "default": 0
    },
    {
      "type": "range",
      "id": "image_border_radius",
      "min": 0,
      "max": 20,
      "step": 2,
      "unit": "px",
      "label": "Image border radius",
      "default": 0
    }
  ],
  "presets": [
    {
      "name": "Show Variant As Separate Products"
    }
  ]
}
{% endschema %}