card__heading is repeated in card-product snippet

[RodrigoTomeES]

Hi,

I am new using Shopify Liquid Theme, I was reviewing the official shopify theme and I saw that the product name is repeated inside the image of the card and in the content section. Is this intentional? In that case why?

Thanks!

      <div
        class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if card_product.featured_media or settings.card_style == 'standard' %} ratio{% endif %}"
        style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
      >
        {%- if card_product.featured_media -%}
          <div class="card__media{% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
            <div class="media media--transparent media--hover-effect">
              Irrelevant code
            </div>
          </div>
        {%- endif -%}
        <div class="card__content">
          <div class="card__information">
            <h3
              class="card__heading"
              {% if card_product.featured_media == null and settings.card_style == 'standard' %}
                id="title-{{ section_id }}-{{ card_product.id }}"
              {% endif %}
            >
              <a
                href="{{ card_product.url }}"
                id="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }}"
                class="full-unstyled-link"
                aria-labelledby="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }} NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
              >
                {{ card_product.title | escape }}
              </a>
            </h3>
          </div>
          <div class="card__badge {{ settings.badge_position }}">
            {%- if card_product.available == false -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
              >
                {{- 'products.product.sold_out' | t -}}
              </span>
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
              >
                {{- 'products.product.on_sale' | t -}}
              </span>
            {%- endif -%}
          </div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3
            class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}"
            {% if card_product.featured_media or settings.card_style == 'card' %}
              id="title-{{ section_id }}-{{ card_product.id }}"
            {% endif %}
          >
            <a
              href="{{ card_product.url }}"
              id="CardLink-{{ section_id }}-{{ card_product.id }}"
              class="full-unstyled-link"
              aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"
            >
              {{ card_product.title | escape }}
            </a>
          </h3>
          <div class="card-information">
            Irrelevant code
        </div>
      </div>

[KedarMalapDev]

@RodrigoTomeES You're right to notice that there are two <div class="card__content"> elements in this product card template. Let me explain what i have understood and why this structure exists:

1. First card__content:
   This div is inside the card__inner div and appears to be used for products that don't have featured media (images). It contains:

   • The product title (h3 element)
   • A badge for sold out or on sale status

2. Second card__content:
   This div is outside the card__inner div and seems to be the main content area for all products. It contains:

   • The product title again (possibly for styling purposes)
   • Product information like vendor, description, and rating
   • Price information
   • Quick add buttons or forms
   • Another badge for sold out or on sale status

The reason for this structure could be:

1. Flexibility in layout: This allows for different layouts depending on whether the product has an image or not.
2. Fallback content: The first card__content might serve as fallback content when there's no product image, ensuring that essential information is always visible.
3. Design requirements: This structure might accommodate specific design needs, such as overlaying text on images in certain views.

While this structure might seem redundant at first glance, it's likely designed to handle various product display scenarios and responsive layout requirements.

[KedarMalapDev]

Now, there’s a question about why the product heading is not visible in the second card__content div of the first product, but it is visible in the second product. This is because the heading in the second card__content has a specific condition applied to it (refer to the image for details).