How to customize text in collections thumbnail?

[managerae]

Hello Shopify design community! I’m positing this because I am stuck and can’t figure out how to add and customize additional text on the collections thumbnail.

I am currently using the Dawn Theme on Shopify.

What I want to do is create a collections thumbnail that has the title of the collection and under it a subtitle giving further description.

Example would be:
Image of the collection thumbnail

Name of the Designer or Brand

Subtitle saying country of origin

Also, there will be multiple collections with different names and subtitles. I would love to know if there is a way to customize all of this inside the dawn theme.

I have attached an image of what I want to achieve.

Thanks in advance!

[Litos]

Hi @managerae ,

Please send me the code of the collection-list.liquid file, I will help you add options for it

[managerae]

@Litos

Hello, thank you so much for helping out. Let me attach the liquid file on this reply.

Since I cannot attach a liquid file, I’ve converted it into .csv. You can just change it back to .liquid.

[Litos]

Hi @managerae ,

Please change all code:

{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  assign columns_mobile_int = section.settings.columns_mobile | plus: 0
  assign show_mobile_slider = false
  if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
    assign show_mobile_slider = true
  endif
-%}

  

    {%- unless section.settings.title == blank -%}
      

        ## 
          {{ section.settings.title | escape }}
        

        {%- if section.settings.show_view_all and show_mobile_slider -%}
          
            {{- 'sections.collection_list.view_all' | t -}}
          
        {%- endif -%}
      

    {%- endunless -%}

    

    {%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
      

        
          {{- 'sections.collection_list.view_all' | t -}}
        
      

    {%- endif -%}
  

{% schema %}
{
  "name": "t:sections.collection-list.name",
  "tag": "section",
  "class": "section section-collection-list",
  "max_blocks": 15,
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "Collections",
      "label": "t:sections.collection-list.settings.title.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.collection-list.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.collection-list.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.collection-list.settings.image_ratio.options__3.label"
        }
      ],
      "default": "square",
      "label": "t:sections.collection-list.settings.image_ratio.label",
      "info": "t:sections.collection-list.settings.image_ratio.info"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 3,
      "label": "t:sections.collection-list.settings.columns_desktop.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": false,
      "label": "t:sections.collection-list.settings.show_view_all.label"
    },
    {
      "type": "header",
      "content": "t:sections.collection-list.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.collection-list.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.collection-list.settings.columns_mobile.options__2.label"
        }
      ],
      "default": "1",
      "label": "t:sections.collection-list.settings.columns_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.collection-list.settings.swipe_on_mobile.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "blocks": [
    {
      "type": "featured_collection",
      "name": "t:sections.collection-list.blocks.featured_collection.name",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label"
        },
        {	
          "type": "text",
          "id": "subtitle",	
          "label": "Subtitle"	
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.collection-list.presets.name",
      "blocks": [
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        }
      ]
    }
  ]
}
{% endschema %}

Then go to card-collection.liquid file and change all code:

{% 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)
  - wrapper_class: {String} Wrapper class for card (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 == null
    assign ratio = 1
  endif
  assign card_color_scheme = settings.card_color_scheme
  assign card_style = settings.card_style
  if wrapper_class == null or wrapper_class == 'none'
    assign card_color_scheme = settings.collection_card_color_scheme
    assign card_style = settings.collection_card_style
  endif
-%}

  

    

      {%- if card_collection.featured_image -%}
        

          

            
          

        

      {%- 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 subtitle != blank -%}
            

              {{- subtitle -}}
            

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

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

          {%- endif -%}
        

      

    

    {% if 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 == null and card_collection.description != blank -%}
            

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

          {%- endif -%}
        

      

    {% endif %}
  

Now you can go to customize and add subtitle, it should display fine:

[managerae]

@Litos thanks for the suggestion. The subtitle you have mentioned in the previous post displays fine after following all the directions. However, for some reason it does not render inside the website. The “painting” should be showing but it doesn’t unfortunately… Any further suggestion on how this could work?

[Litos]

Hi @managerae ,

Please send your site and if your site is password protected, please send me the password. I will check it.

[managerae]

@Litos again, thank you so much for helping me out. You are a life saver. What I have found is that the moment a collection is added to the collection list, the rendered subtitle is gone. Here is the link to the website and the password.

Website: https://architect-edition.com/
Or
Shopify Domain: architectedition.myshopify.com

PW: ae2023

[Litos]

Hi @managerae ,

Please go to card-collection.liquid file and change all code:

{% 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)
  - wrapper_class: {String} Wrapper class for card (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 == null
    assign ratio = 1
  endif
  assign card_color_scheme = settings.card_color_scheme
  assign card_style = settings.card_style
  if wrapper_class == null or wrapper_class == 'none'
    assign card_color_scheme = settings.collection_card_color_scheme
    assign card_style = settings.collection_card_style
  endif
-%}

  

    

      {%- if card_collection.featured_image -%}
        

          

            
          

        

      {%- 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 subtitle != blank -%}
            

              {{- subtitle -}}
            

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

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

          {%- endif -%}
        

      

    

    {% if 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 subtitle != blank -%}
            

              {{- subtitle -}}
            

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

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

          {%- endif -%}
        

      

    {% endif %}
  

[managerae]

@Litos thank you so much. It renders perfectly.

[calycopiscandle]

hey @Litos i changed the theme code in thecard-collection.liquid file with the code that you provided, but it doesn’t work

[user137137]

Hi @Litos thanks for your help! I am asking the same thing

I got errors and figured out how to fix the errors by replacing  {% render ‘icon-arrow’ %} with  {{- ‘icon-arrow.svg’ | inline_asset_content -}}. However it’s blank under each collection title - where do I find the “Subtitle” field to type in the subtitles for each collection, as shown in your previous thread outlined in red? Thank you kindly!