Dawn Theme Collection List - Add Descriptions

Store Design
1

Hi all,

Looking to tweak my homepage a little and need some guidance. I currently have the following collection list and multicolumn setup, which looks good on desktop:

SVNSales_0-1641664331427.png
SVNSales_0-1641664331427.png3071×1653 766 KB

However, it does not look good on mobile, as they scroll separately:

SVNSales_1-1641664519456.png
SVNSales_1-1641664519456.png780×1501 257 KB

I would like the collection title (shown in the list) and description (shown in the multicolumn) to be part of the same block, and scroll together. How can I do this?

Ideally, the description would be part of the collection list block. If this is not possible, though, an alternative solution could be to somehow have them sync/scroll together. Website is at buy-glo.com.

Would appreciate the input!

2

Hi @SVNSales

I checked and found you’re using a separate section to show the description.

Also, it looks we can create a description block under collection title and it will scroll with collection title.

Let’s connect to do this.

3

Hi @Sheesh_b thanks for connecting! That does sound like the right solution. How do I create this description block?

4

Hi,

This is easy if you added descriptions in your collection. In you section folder, open the collection-list.liquid and find the code below:

{%- if block.settings.collection.description != blank -%}

{{- block.settings.collection.description | strip_html | truncatewords: 12 -}} {% render 'icon-arrow' %}

{%- endif -%}

Copy the code and place it before the {% else %} tag. Please refer to code below for placement.

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

{{ 'component-card.css' | asset_url | stylesheet_tag }}

  

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

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

  

          
        
      {%- endfor -%}
    

    {%- if section.settings.swipe_on_mobile -%}
      
        
        

          1
             / 
            {{ 'general.slider.of' | t }}
          {{ section.blocks.size }}
        

        
      

    {%- endif -%}
  

  {%- 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": "spaced-section collection-list-section",
  "max_blocks": 15,
  "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "Collections",
      "label": "t:sections.collection-list.settings.title.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": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.collection-list.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.collection-list.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.collection-list.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.collection-list.settings.color_scheme.options__4.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.collection-list.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.collection-list.settings.color_scheme.label"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "t:sections.collection-list.settings.swipe_on_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "image_padding",
      "default": false,
      "label": "t:sections.collection-list.settings.image_padding.label"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": false,
      "label": "t:sections.collection-list.settings.show_view_all.label"
    }
  ],
  "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"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.collection-list.presets.name",
      "blocks": [
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        }
      ]
    }
  ]
}
{% endschema %}
5

@made4Uo that worked perfectly, thank you very much! The result looks great and really brings the page together better.

I made a couple of small tweaks - I increased “truncatewords” to 20 to show the whole description, and removed the “{% render ‘icon-arrow’ %}” code for aesthetics. Here’s what I ended up with:

{%- if block.settings.collection.description != blank -%}
                    

                      {{- block.settings.collection.description | strip_html | truncatewords: 20 -}} 
                    

                  {%- endif -%}
6

Please forgive me, but I can’t for the life of me figure out where to paste the code. I am using the Dawn them, but my collection-list.liquid looks different?