CODIGOS

{% assign block_settings = block.settings %}

{% style %}
  {% if request.visual_preview_mode %}
    product-card-link {
      width: 100%;
      min-width: 250px;
    }
  {% endif %}
{% endstyle %}

{% liquid
  assign has_quick_add = false
  if settings.quick_add and product.available
    assign has_quick_add = true
  endif

  assign has_mobile_quick_add = false
  if has_quick_add and settings.mobile_quick_add
    assign has_mobile_quick_add = true
  endif

  assign product_card_id = 'product-card-link-' | append: block.id | append: '-' | append: product.id
  assign product_card_gap_value = product_card_gap | default: block_settings.product_card_gap

  assign variant_to_link = product.selected_or_first_available_variant
  assign onboarding = false
  if product.id == empty or product == blank
    assign onboarding = true
  endif
%}

<product-card
  class="product-card"
  data-product-id="{{ product.id }}"
  id="product-card-{{ block.id }}"
  {{ block.shopify_attributes }}
>
  <a
    id="{{ product_card_id | md5 }}"
    {% unless onboarding %}
      href="{{ variant_to_link.url }}"
    {% endunless %}
    class="product-card__link"
    ref="productCardLink"
  >
    <span class="visually-hidden">{{ product.title }}</span>
  </a>

  <div
    class="
      product-card__content
      layout-panel-flex
      layout-panel-flex--column
      product-grid__card
    "
    style="
      --quick-add-display: {% if has_quick_add %}flex{% else %}none{% endif %};
      --quick-add-mobile-display: {% if has_mobile_quick_add %}flex{% else %}none{% endif %};
    "
  >
    {{ children }}

    {% if product.compare_at_price_max > product.price %}
      <div class="ovrs-product-badge">
        <img
          src="**AQUI_VA_LA_URL_DE_TU_IMAGEN**"
          alt="Promo"
          class="ovrs-product-badge__img">
      </div>
    {% endif %}
  </div>
</product-card>

{% stylesheet %}
  product-card-link,
  :not(product-card-link) product-card {
    width: 100%;
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content {
    position: relative;
  }

  .ovrs-product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
  }

  .ovrs-product-badge__img {
    width: 60px;
    height: auto;
    display: block;
  } 
{% endstylesheet %}