Solved

Removing Card Titles From Collection List- Dawn Theme

graham555
Tourist
6 0 1

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!

 

graham555_0-1645722004022.png

 

Accepted Solution (1)
brandography
Shopify Partner
113 25 21

This is an 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;
}

 

Find a Powerful eCommerce Marketing Partner


Let Brandography help you spread the word about your products through cutting-edge eCommerce web design, strategic sales channels, and expert digital marketing tactics.
Check out our website

View solution in original post

Replies 10 (10)

brandography
Shopify Partner
113 25 21

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

Find a Powerful eCommerce Marketing Partner


Let Brandography help you spread the word about your products through cutting-edge eCommerce web design, strategic sales channels, and expert digital marketing tactics.
Check out our website
graham555
Tourist
6 0 1

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
Shopify Partner
113 25 21

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!

Find a Powerful eCommerce Marketing Partner


Let Brandography help you spread the word about your products through cutting-edge eCommerce web design, strategic sales channels, and expert digital marketing tactics.
Check out our website
graham555
Tourist
6 0 1

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
Tourist
6 0 1

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
Shopify Partner
113 25 21

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.

Find a Powerful eCommerce Marketing Partner


Let Brandography help you spread the word about your products through cutting-edge eCommerce web design, strategic sales channels, and expert digital marketing tactics.
Check out our website
graham555
Tourist
6 0 1

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

 

brandography
Shopify Partner
113 25 21

This is an 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;
}

 

Find a Powerful eCommerce Marketing Partner


Let Brandography help you spread the word about your products through cutting-edge eCommerce web design, strategic sales channels, and expert digital marketing tactics.
Check out our website
graham555
Tourist
6 0 1

Thank you! Much appreciated!!

padraigtomas
Visitor
2 0 1

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