Removing Card Titles From Collection List- Dawn Theme

Store Design
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
graham555_0-1645722004022.png895Ɨ692 152 KB

2

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

3

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!

4

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!

5

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

{%- if card_collection.featured_image -%}
{{ card_collection.title | escape }}
{%- endif -%}

{%- if card_collection.title != blank -%} {{- card_collection.title | escape -}} {%- else -%} {{ 'onboarding.collection_title' | t }} {%- endif -%} {%- if card_collection.description == blank -%}{% render 'icon-arrow' %}{% endif %}

{%- if card_collection.description != blank -%}

{{- card_collection.description | strip_html | truncatewords: 12 -}} {% render 'icon-arrow' %}

{%- endif -%}
{% if settings.card_style == 'card' or card_collection.featured_image %}

{%- 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 -%}{% render 'icon-arrow' %}{% endif %}

{%- if card_collection.featured_image == nil and card_collection.description != blank -%}

{{- card_collection.description | strip_html | truncatewords: 12 -}} {% render 'icon-arrow' %}

{%- endif -%}
{% endif %}
6

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?

7

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.

1 Like
8

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

9

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;
}
10

Thank you! Much appreciated!!

1 Like
11

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