Moving the product name below the card picture placeholder

gladfulspirit · May 27, 2026, 6:32pm

Hi,

Thank you in advance. I have been looking for hours using inspector in Google Chrome.

How do I move the ‘card__heading’ which I think contains the card_product.title to be below the image area for product cards both without and with images. In a different thread I got help to setup a placeholder image which works. It was indicated that it was in the css but I can’t find it. I want to learn. Is it related to css definition differences between the

settings.card_style == ‘standard’ versus ‘card’ ?

gladfulspirit · May 27, 2026, 7:13pm

Here is the code. I have stared at it for hours. It looks like .card__information is below the card__inner div. Is that what you are seeing too?

%- unless skip_styles -%}

{{ ‘component-volume-pricing.css’ | asset_url | stylesheet_tag }}

{%- endunless -%}

{%- if card_product and card_product != empty -%}

{%- liquid

assign ratio = 1

if card_product.featured_media and media_aspect_ratio == ‘portrait’

assign ratio = 0.8

elsif card_product.featured_media and media_aspect_ratio == ‘adapt’

assign ratio = card_product.featured_media.aspect_ratio

endif

if ratio == 0 or ratio == null

assign ratio = 1

endif

-%}

<div

class="

    card card--{{ settings.card_style }}

{% if card_product.featured_media %} card–media{% else %} card–text{% endif %}

{% if settings.card_style == ‘card’ %} color-{{ settings.card_color_scheme }} gradient{% endif %}

{% if image_shape and image_shape != ‘default’ %} card–shape{% endif %}

{% if extend_height %} card–extend-height{% endif %}

{% if card_product.featured_media == nil and settings.card_style == ‘card’ %} ratio{% endif %}

{% if horizontal_class %} card–horizontal{% endif %}

style=“–ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;”

>

<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 -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}

<img

srcset="

{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}

{%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}

{%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}

{%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}

{%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}

{%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}

{{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w

src=“{{ card_product.featured_media | image_url: width: 533 }}”

sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”

alt=“{{ card_product.featured_media.alt | escape }}”

class=“motion-reduce”

{% unless lazy_load == false %}

loading=“lazy”

{% endunless %}

width=“{{ card_product.featured_media.width }}”

height=“{{ card_product.featured_media.height }}”

>

{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != null and show_secondary_image -%}

<img

srcset="

{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}

{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}

{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}

{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}

{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}

{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}

{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w

src=“{{ card_product.media[1] | image_url: width: 533 }}”

sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”

alt=“{{ card_product.media[1].alt | escape }}”

class=“motion-reduce”

loading=“lazy”

width=“{{ card_product.media[1].width }}”

height=“{{ card_product.media[1].height }}”

>

{%- endif -%}

<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 }}”

>

{%- 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 }}”

>

{%- 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 }}”

>

{%- endif -%}

<h3

class=“card__heading h5”{% comment %}{% if card_product.featured_media or settings.card_style == ‘standard’ %} h5{% endif %}"

         {% if card_product.featured_media or settings.card_style == 'card' %} {% endcomment %}

id=“title-{{ section_id }}-{{ card_product.id }}”

{% comment %} {% endif %} {% endcomment %}

>

<a

href=“{{ card_product.url }}”

id="CardLink-{{ section_id }}-{{ card_product.id }}"s

class=“full-unstyled-link”

aria-labelledby=“CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}”

>

{%- if show_vendor -%}

{%- endif -%}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}

{% liquid

assign rating_decimal = 0

assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1

if decimal >= 0.3 and decimal <= 0.7

assign rating_decimal = 0.5

elsif decimal > 0.7

assign rating_decimal = 1

endif

NKCreativeSoulutions · May 27, 2026, 7:52pm

Here’s what I picked up from looking at your website, from the product “Abelia mosanensis”, you have the following:

Whereas, for “Abutilon megapotamicum” it looks like this:

I swapped the text to media in the class name lists and it put the name of the product below.

I hope that helps!

gladfulspirit · May 27, 2026, 8:00pm

I can’t see parts of your answer. Whatever is after the colons is missing. Can you explain a little more.

NKCreativeSoulutions · May 27, 2026, 8:05pm

Sorry! Yes! I can’t edit my response for whatever reason…

Abutilon megapotamicum

<div class="card card--standard card--media" style="--ratio-percent: 100%;">

Abelia mosanensis

<div class="card card--standard card--text" style="--ratio-percent: 100%;">

Changing the text to media seemed to have done it.

tim_tairli · May 28, 2026, 3:02am

It’s condition like this – if product has media, then card--media class is assigned, otherwise – card--text.

And this changes the layout of the entire product card.

github.com/Shopify/dawn

snippets/card-product.liquid

main


      
              assign ratio = card_product.featured_media.aspect_ratio
            endif
            if ratio == 0 or ratio == null
              assign ratio = 1
            endif
          -%}
          <div class="card-wrapper product-card-wrapper underline-links-hover">
            <div
              class="
                card card--{{ settings.card_style }}
                {% if card_product.featured_media %} card--media{% else %} card--text{% endif %}
                {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
                {% if image_shape and image_shape != 'default' %} card--shape{% endif %}
                {% if extend_height %} card--extend-height{% endif %}
                {% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}
                {% if horizontal_class %} card--horizontal{% endif %}
              "
              style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
            >
              <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 %}"

gladfulspirit · May 28, 2026, 2:36pm

Thank you everyone very much! You are all great!

I found the solution in the component-card.css.

The heading with the product title below the picture was being generated by the code in card-product.liquid but suppressed by code in base.css that is shown below that is commented out.

.card–standard.card–media .card__inner .card__information,

/* .card–standard.card–text:not(.card–horizontal) > .card__content .card__heading:not(.card__heading–placeholder), */

.card–standard:not(.card–horizontal) > .card__content .card__badge,

.card–standard.card–text.article-card > .card__content .card__information,

.card–standard > .card__content .card__caption {

display: none;

}

NKCreativeSoulutions · May 28, 2026, 8:30pm

Happy to be of help!

Topic		Replies	Views
product card information Store Design css	0	31	October 29, 2024
Clickable product image. Dawn theme Store Design product-page	8	225	August 21, 2024
How to improve the quality of a product image on homepage when linking to a product? refresh theme Store Design design	7	148	October 1, 2024
Productos en blanco! Español	1	58	August 28, 2025
URGENT! I would like price and product title to show upon hovering on Shop Home Page Technical Q&A optimization , css , html , shopify-theme	8	112	June 10, 2024

Moving the product name below the card picture placeholder

Related topics