Solved

Dawn Theme Collection List - Add Descriptions

SVNSales
Excursionist
25 2 13

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

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

SVNSales_1-1641664519456.png

 

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!

Accepted Solution (1)

made4Uo
Shopify Partner
3821 716 1151

This is an accepted solution.

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 -%}
<p class="card__caption">
{{- block.settings.collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
</p>
{%- 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 }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>

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

<div class="collection-list-wrapper page-width{% if section.settings.swipe_on_mobile == true %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %}{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %}">
  <div class="title-wrapper-with-link{% if section.settings.swipe_on_mobile == true %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %}{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}">
    <h2 class="collection-list-title">{{ section.settings.title | escape }}</h2>

    {%- if section.settings.show_view_all and section.settings.swipe_on_mobile -%}
      <a href="{{ routes.collections_url }}" class="link underlined-link large-up-hide">{{ 'sections.collection_list.view_all' | t }}</a>
    {%- endif -%}
  </div>

  <slider-component class="slider-mobile-gutter">
    <ul class="collection-list grid grid--1-col{% if section.blocks.size < 5 %} grid--{{ section.blocks.size }}-col-tablet{% else %} grid--3-col-tablet{% endif %}{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %} collection-list--{{ section.blocks.size }}-items{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} negative-margin--small{% endif %}"
      id="Slider-{{ section.id }}"
      role="list"
    >

      {%- liquid
        assign columns = section.blocks.size
        if columns > 3
          assign columns = 3
        endif
      -%}

      {%- for block in section.blocks -%}
        <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="collection-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}" {{ block.shopify_attributes }}>
          <a{% if block.settings.collection != blank and block.settings.collection.all_products_count > 0 %} href="{{ block.settings.collection.url }}"{% else %} role="link" aria-disabled="true"{% endif %}
            class="card animate-arrow link{% if block.settings.collection.featured_image != blank %} card--media{% else %}{% if section.settings.image_ratio != 'adapt' %} card--stretch{% endif %}{% endif %}{% unless section.settings.image_padding %} card--light-border{% endunless %}"
          >
            <div class="card--stretch card-colored color-{{ section.settings.color_scheme }}">
              {%- if block.settings.collection.featured_image != blank -%}
                <div{% if section.settings.image_padding %} class="card__media-spacer"{% endif %}>
                  {% if section.settings.image_padding %}<div class="overlay-card"></div>{% endif %}
                  <div class="media{% if section.blocks.size > 1 %} media--{{ section.settings.image_ratio }}{% endif %} media--hover-effect overflow-hidden"
                    {% if section.settings.image_ratio == 'adapt' and section.blocks.size > 1 %}style="padding-bottom: {{ 1 | divided_by: block.settings.collection.featured_image.aspect_ratio | times: 100 }}%;"{% endif %}>

                    <img
                      srcset="{%- if block.settings.collection.featured_image.width >= 165 -%}{{ block.settings.collection.featured_image | img_url: '165x' }} 165w,{%- endif -%}
                        {%- if block.settings.collection.featured_image.width >= 330 -%}{{ block.settings.collection.featured_image | img_url: '330x' }} 330w,{%- endif -%}
                        {%- if block.settings.collection.featured_image.width >= 535 -%}{{ block.settings.collection.featured_image | img_url: '535x' }} 535w,{%- endif -%}
                        {%- if block.settings.collection.featured_image.width >= 750 -%}{{ block.settings.collection.featured_image | img_url: '750x' }} 750w,{%- endif -%}
                        {%- if block.settings.collection.featured_image.width >= 1000 -%}{{ block.settings.collection.featured_image | img_url: '1000x' }} 1000w,{%- endif -%}
                        {%- if block.settings.collection.featured_image.width >= 1500 -%}{{ block.settings.collection.featured_image | img_url: '1500x' }} 1500w,{%- endif -%}
                        {%- if block.settings.collection.featured_image.width >= 3000 -%}{{ block.settings.collection.featured_image | img_url: '3000x' }} 3000w,{%- endif -%}
                        {{ block.settings.collection.featured_image | img_url: 'master' }} {{ block.settings.collection.featured_image.width }}w"
                      src="{{ block.settings.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 section.blocks.size > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
                      calc(100vw - 3rem)"
                      alt="{{ block.settings.collection.title | escape }}"
                      height="{{ block.settings.collection.featured_image.height }}"
                      width="{{ block.settings.collection.featured_image.width }}"
                      loading="lazy"
                      class="motion-reduce"
                    >
                  </div>
                </div>

                <div class="card__text card__text-spacing card-colored card__text-hover{% if section.settings.image_padding == false %} color-{{ section.settings.color_scheme }}{% endif %}">
                  {% unless section.settings.image_padding %}<div class="overlay-card"></div>{% endunless %}
                  <h3>
                    {%- if block.settings.collection.title != blank -%}
                      {{- block.settings.collection.title | escape -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
                    {%- else -%}
                      {{ 'onboarding.collection_title' | t }}
                    {%- endif -%}
                  </h3>
<!--  =======================  Place the code here =========================== -->
                    {%- if block.settings.collection.description != blank -%}
                    <p class="card__caption">
                      {{- block.settings.collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
                    </p>
                  {%- endif -%}
<!--  =======================  Place the code here =========================== -->
                </div>
              {%- else -%}
                <div class="overlay-card"></div>
                <div class="card__text-spacing card__text-hover">
                  <h3 class="h1">
                    {%- if block.settings.collection.title != blank -%}
                      {{- block.settings.collection.title | escape -}}{%- if block.settings.collection.description == blank -%}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>{% endif %}
                    {%- else -%}
                      {{ 'onboarding.collection_title' | t }}
                    {%- endif -%}
                  </h3>
                  {%- if block.settings.collection.description != blank -%}
                    <p class="card__caption">
                      {{- block.settings.collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
                    </p>
                  {%- endif -%}
                </div>
              {%- endif -%}
            </div>
          </a>
        </li>
      {%- endfor -%}
    </ul>

    {%- if section.settings.swipe_on_mobile -%}
      <div class="slider-buttons no-js-hidden{% if section.blocks.size < 5 %} medium-hide{% endif %}{% if section.blocks.size < 2 %} small-hide{% endif %}">
        <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}">{% render 'icon-caret' %}</button>
        <div class="slider-counter caption">
          <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
          <span class="slider-counter--total">{{ section.blocks.size }}</span>
        </div>
        <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}">{% render 'icon-caret' %}</button>
      </div>
    {%- endif -%}
  </slider-component>

  {%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
    <div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
      <a href="{{ routes.collections_url }}" class="button">{{ 'sections.collection_list.view_all' | t }}</a>
    </div>
  {%- endif -%}
</div>

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 5 (5)

Sheesh_b
Shopify Partner
512 113 117

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.

We're here to simplify website creation for those looking to establish a strong online presence. Book a meeting slot if you want to discuss. It's FREE. BOOK NOW | Try Shopify for $1 for 3 Months: Shopify Trial | Shopify Web Store Developer |
LIKE or mark as ACCEPTED SOLUTION
SVNSales
Excursionist
25 2 13

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

made4Uo
Shopify Partner
3821 716 1151

This is an accepted solution.

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 -%}
<p class="card__caption">
{{- block.settings.collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
</p>
{%- 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 }}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">

<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>

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

<div class="collection-list-wrapper page-width{% if section.settings.swipe_on_mobile == true %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %}{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %}">
  <div class="title-wrapper-with-link{% if section.settings.swipe_on_mobile == true %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %}{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}">
    <h2 class="collection-list-title">{{ section.settings.title | escape }}</h2>

    {%- if section.settings.show_view_all and section.settings.swipe_on_mobile -%}
      <a href="{{ routes.collections_url }}" class="link underlined-link large-up-hide">{{ 'sections.collection_list.view_all' | t }}</a>
    {%- endif -%}
  </div>

  <slider-component class="slider-mobile-gutter">
    <ul class="collection-list grid grid--1-col{% if section.blocks.size < 5 %} grid--{{ section.blocks.size }}-col-tablet{% else %} grid--3-col-tablet{% endif %}{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %} collection-list--{{ section.blocks.size }}-items{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} negative-margin--small{% endif %}"
      id="Slider-{{ section.id }}"
      role="list"
    >

      {%- liquid
        assign columns = section.blocks.size
        if columns > 3
          assign columns = 3
        endif
      -%}

      {%- for block in section.blocks -%}
        <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="collection-list__item grid__item{% if section.settings.swipe_on_mobile %} slider__slide{% endif %}" {{ block.shopify_attributes }}>
          <a{% if block.settings.collection != blank and block.settings.collection.all_products_count > 0 %} href="{{ block.settings.collection.url }}"{% else %} role="link" aria-disabled="true"{% endif %}
            class="card animate-arrow link{% if block.settings.collection.featured_image != blank %} card--media{% else %}{% if section.settings.image_ratio != 'adapt' %} card--stretch{% endif %}{% endif %}{% unless section.settings.image_padding %} card--light-border{% endunless %}"
          >
            <div class="card--stretch card-colored color-{{ section.settings.color_scheme }}">
              {%- if block.settings.collection.featured_image != blank -%}
                <div{% if section.settings.image_padding %} class="card__media-spacer"{% endif %}>
                  {% if section.settings.image_padding %}<div class="overlay-card"></div>{% endif %}
                  <div class="media{% if section.blocks.size > 1 %} media--{{ section.settings.image_ratio }}{% endif %} media--hover-effect overflow-hidden"
                    {% if section.settings.image_ratio == 'adapt' and section.blocks.size > 1 %}style="padding-bottom: {{ 1 | divided_by: block.settings.collection.featured_image.aspect_ratio | times: 100 }}%;"{% endif %}>

                    <img
                      srcset="{%- if block.settings.collection.featured_image.width >= 165 -%}{{ block.settings.collection.featured_image | img_url: '165x' }} 165w,{%- endif -%}
                        {%- if block.settings.collection.featured_image.width >= 330 -%}{{ block.settings.collection.featured_image | img_url: '330x' }} 330w,{%- endif -%}
                        {%- if block.settings.collection.featured_image.width >= 535 -%}{{ block.settings.collection.featured_image | img_url: '535x' }} 535w,{%- endif -%}
                        {%- if block.settings.collection.featured_image.width >= 750 -%}{{ block.settings.collection.featured_image | img_url: '750x' }} 750w,{%- endif -%}
                        {%- if block.settings.collection.featured_image.width >= 1000 -%}{{ block.settings.collection.featured_image | img_url: '1000x' }} 1000w,{%- endif -%}
                        {%- if block.settings.collection.featured_image.width >= 1500 -%}{{ block.settings.collection.featured_image | img_url: '1500x' }} 1500w,{%- endif -%}
                        {%- if block.settings.collection.featured_image.width >= 3000 -%}{{ block.settings.collection.featured_image | img_url: '3000x' }} 3000w,{%- endif -%}
                        {{ block.settings.collection.featured_image | img_url: 'master' }} {{ block.settings.collection.featured_image.width }}w"
                      src="{{ block.settings.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 section.blocks.size > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
                      calc(100vw - 3rem)"
                      alt="{{ block.settings.collection.title | escape }}"
                      height="{{ block.settings.collection.featured_image.height }}"
                      width="{{ block.settings.collection.featured_image.width }}"
                      loading="lazy"
                      class="motion-reduce"
                    >
                  </div>
                </div>

                <div class="card__text card__text-spacing card-colored card__text-hover{% if section.settings.image_padding == false %} color-{{ section.settings.color_scheme }}{% endif %}">
                  {% unless section.settings.image_padding %}<div class="overlay-card"></div>{% endunless %}
                  <h3>
                    {%- if block.settings.collection.title != blank -%}
                      {{- block.settings.collection.title | escape -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
                    {%- else -%}
                      {{ 'onboarding.collection_title' | t }}
                    {%- endif -%}
                  </h3>
<!--  =======================  Place the code here =========================== -->
                    {%- if block.settings.collection.description != blank -%}
                    <p class="card__caption">
                      {{- block.settings.collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
                    </p>
                  {%- endif -%}
<!--  =======================  Place the code here =========================== -->
                </div>
              {%- else -%}
                <div class="overlay-card"></div>
                <div class="card__text-spacing card__text-hover">
                  <h3 class="h1">
                    {%- if block.settings.collection.title != blank -%}
                      {{- block.settings.collection.title | escape -}}{%- if block.settings.collection.description == blank -%}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>{% endif %}
                    {%- else -%}
                      {{ 'onboarding.collection_title' | t }}
                    {%- endif -%}
                  </h3>
                  {%- if block.settings.collection.description != blank -%}
                    <p class="card__caption">
                      {{- block.settings.collection.description | strip_html | truncatewords: 12 -}}<span class="icon-wrap">&nbsp;{% render 'icon-arrow' %}</span>
                    </p>
                  {%- endif -%}
                </div>
              {%- endif -%}
            </div>
          </a>
        </li>
      {%- endfor -%}
    </ul>

    {%- if section.settings.swipe_on_mobile -%}
      <div class="slider-buttons no-js-hidden{% if section.blocks.size < 5 %} medium-hide{% endif %}{% if section.blocks.size < 2 %} small-hide{% endif %}">
        <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}">{% render 'icon-caret' %}</button>
        <div class="slider-counter caption">
          <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
          <span class="slider-counter--total">{{ section.blocks.size }}</span>
        </div>
        <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}">{% render 'icon-caret' %}</button>
      </div>
    {%- endif -%}
  </slider-component>

  {%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
    <div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
      <a href="{{ routes.collections_url }}" class="button">{{ 'sections.collection_list.view_all' | t }}</a>
    </div>
  {%- endif -%}
</div>

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
SVNSales
Excursionist
25 2 13

@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 -%}
                    <p class="card__caption">
                      {{- block.settings.collection.description | strip_html | truncatewords: 20 -}}<span class="icon-wrap">&nbsp;</span>
                    </p>
                  {%- endif -%}     

 

 

Starling
Tourist
4 0 2

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?