Removing Card Titles From Collection List- Dawn Theme

[graham555]

Hello, I am having trouble figuring out how to remove the card titles from the collection list only. I want to remove them since I already have them within my image. Please refer to the screenshot below. Thank you!

[brandography]

I'd be happy to help! Can you share your websites URL with me please so I can take a look?

[graham555]

Thank you for the fast response. The link to my page is destinationtbdshop.com but this collections list has not been published yet. I do not want to publish until I can remove the card titles for the collections list. Please let me know, thanks!

[brandography]

So here's a way to remove the titles but I also wanted to give you a heads up that it's not great SEO practice to remove titles/headings like this on a webpage. Search engines don't crawl images for titles/headings so you could potentially rank lower. 

1. Open up card-collection.liquid in your code editor under Snippets.

2. Comment out (or delete) the code between lines 62-80.

3. Click Save.

Good Luck!

[graham555]

Thank you for the advice. Unfortunately this method did not work. I removed lines 62-80 and the title still appeared. Here is my original code without any deletion: 

{% comment %}
Renders a collection card

Accepts:
- card_collection: {Object} Collection Liquid object
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- columns: {Number}
- extend_height: {Boolean} Card height extends to available container space. Default: false (optional)

Usage:
{% render 'card-collection' %}
{% endcomment %}

{%- liquid
assign ratio = 1
if card_collection.featured_image and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_collection.featured_image and media_aspect_ratio == 'adapt'
assign ratio = card_collection.featured_image.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}

<div class="card-wrapper animate-arrow">
<div class="card
card--{{ settings.card_style }}
{% if card_collection.featured_image %} card--media{% else %} card--text{% endif %}
{% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }}{% endif %}
{% if extend_height %} card--extend-height{% endif %}
{% if card_collection.featured_image == nil and settings.card_style == 'card' %} ratio{% endif %}"
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
>
<div class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }}{% endif %}{% if card_collection.featured_image or settings.card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
{%- if card_collection.featured_image -%}
<div class="card__media">
<div class="media media--transparent media--hover-effect">
<img
srcset="{%- if card_collection.featured_image.width >= 165 -%}{{ card_collection.featured_image | img_url: '165x' }} 165w,{%- endif -%}
{%- if card_collection.featured_image.width >= 330 -%}{{ card_collection.featured_image | img_url: '330x' }} 330w,{%- endif -%}
{%- if card_collection.featured_image.width >= 535 -%}{{ card_collection.featured_image | img_url: '535x' }} 535w,{%- endif -%}
{%- if card_collection.featured_image.width >= 750 -%}{{ card_collection.featured_image | img_url: '750x' }} 750w,{%- endif -%}
{%- if card_collection.featured_image.width >= 1000 -%}{{ card_collection.featured_image | img_url: '1000x' }} 1000w,{%- endif -%}
{%- if card_collection.featured_image.width >= 1500 -%}{{ card_collection.featured_image | img_url: '1500x' }} 1500w,{%- endif -%}
{%- if card_collection.featured_image.width >= 3000 -%}{{ card_collection.featured_image | img_url: '3000x' }} 3000w,{%- endif -%}
{{ card_collection.featured_image | img_url: 'master' }} {{ card_collection.featured_image.width }}w"
src="{{ card_collection.featured_image | img_url: '1500x' }}"
sizes="
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: columns }}px,
(min-width: 750px) {% if columns > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
calc(100vw - 3rem)"
alt="{{ card_collection.title | escape }}"
height="{{ card_collection.featured_image.height }}"
width="{{ card_collection.featured_image.width }}"
loading="lazy"
class="motion-reduce"
>
</div>
</div>
{%- endif -%}
<div class="card__content">
<div class="card__information">
<h3 class="card__heading">
<a href="{{ card_collection.url }}" class="full-unstyled-link">
{%- if card_collection.title != blank -%}
{{- card_collection.title | escape -}}
{%- else -%}
{{ 'onboarding.collection_title' | t }}
{%- endif -%}
{%- if card_collection.description == blank -%}<span class="icon-wrap">{% render 'icon-arrow' %}</span>{% endif %}
</a>
</h3>
{%- if card_collection.description != blank -%}
<p class="card__caption">
{{- card_collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
</p>
{%- endif -%}
</div>
</div>
</div>
{% if settings.card_style == 'card' or card_collection.featured_image %}
<div class="card__content">
<div class="card__information">
<h3 class="card__heading">
<a href="{{ card_collection.url }}" class="full-unstyled-link">
{%- if card_collection.title != blank -%}
{{- card_collection.title | escape -}}
{%- else -%}
{{ 'onboarding.collection_title' | t }}
{%- endif -%}
{%- if card_collection.featured_image or card_collection.description == blank -%}<span class="icon-wrap">{% render 'icon-arrow' %}</span>{% endif %}
</a>
</h3>
{%- if card_collection.featured_image == nil and card_collection.description != blank -%}
<p class="card__caption">
{{- card_collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
</p>
{%- endif -%}
</div>
</div>
{% endif %}
</div>
</div>

[graham555]

Removing lines 62-81 worked to remove the title but now the image is unclickable. Is there any way I can just make the text color white for the collection list so it is unable to be seen?

[brandography]

I would suggest targeting that specific section heading to change the color to white, that way we aren't changing every collection title white, which could cause some trouble down the road. 

I can help you out with this more, but first you'd need to publish that page so I can take a look at it specifically.

[graham555]

I have published the collection list. Here is the website again: https://destinationtbdshop.com/

[brandography · Accepted solution]

Here ya go, pal!

Add this to the end of the base.css file and click save.

section#shopify-section-template--15696392913127__16457329270a73e60d .card__heading {
    color: #ffffff !important;
}

[graham555]

Thank you! Much appreciated!!

[padraigtomas]

Does this method still work? I have attempted this code as instructed but nothing is changing on my end.