Different Title for Collection in Collection List Section

Different Title for Collection in Collection List Section

eight1echo
Shopify Partner
5 0 1

When adding a collection to a Collection List section, is it possible to choose a different title than the actual name of the collection?

 

When pointing a navigation menu item to a collection, there is the opportunity to enter a different name but this does not seem possible on the Collection List section.

Replies 4 (4)

namphan
Shopify Partner
449 60 82

Hi @eight1echo,

You can follow these steps:

- Step 1: Please go to collection-list.liquid file and change all code:

{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.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
-%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="collection-list-wrapper page-width isolate{% if show_mobile_slider %} 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 %} section-{{ section.id }}-padding">
    {%- unless section.settings.title == blank -%}
      <div class="title-wrapper-with-link{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
        <h2
          id="SectionHeading-{{ section.id }}"
          class="collection-list-title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
        >
          {{ section.settings.title }}
        </h2>

        {%- if section.settings.show_view_all and show_mobile_slider -%}
          <a
            href="{{ routes.collections_url }}"
            id="ViewAll-{{ section.id }}"
            class="link underlined-link large-up-hide{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
            aria-labelledby="ViewAll-{{ section.id }} SectionHeading-{{ section.id }}"
          >
            {{- 'sections.collection_list.view_all' | t -}}
          </a>
        {%- endif -%}
      </div>
    {%- endunless -%}

    <slider-component class="slider-mobile-gutter{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
      <ul
        class="collection-list contains-card contains-card--collection{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %} collection-list--{{ section.blocks.size }}-items"
        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 show_mobile_slider %} slider__slide{% endif %}{% if block.settings.collection.featured_image == nil %} collection-list__item--no-media{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
            {{ block.shopify_attributes }}
            {% if settings.animations_reveal_on_scroll %}
              data-cascade
              style="--animation-order: {{ forloop.index }};"
            {% endif %}
          >
            {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
            {%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
            {% render 'card-collection',
              card_collection: block.settings.collection,
              media_aspect_ratio: section.settings.image_ratio,
              collection_title: section.settings.collection_title,
              columns: columns,
              placeholder_image: placeholder_image
            %}
          </li>
        {%- endfor -%}
      </ul>
      {%- if show_mobile_slider -%}
        <div class="slider-buttons">
          <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 collection-list-view-all{% if show_mobile_slider %} small-hide medium-hide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
        {% if settings.animations_reveal_on_scroll %}
          data-cascade
        {% endif %}
      >
        <a
          href="{{ routes.collections_url }}"
          class="button"
          id="ViewAllButton-{{ section.id }}"
          aria-labelledby="ViewAllButton-{{ section.id }} SectionHeading-{{ section.id }}"
        >
          {{- 'sections.collection_list.view_all' | t -}}
        </a>
      </div>
    {%- endif -%}
  </div>
</div>

{% schema %}
{
  "name": "t:sections.collection-list.name",
  "tag": "section",
  "class": "section section-collection-list",
  "max_blocks": 15,
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "inline_richtext",
      "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": 6,
      "step": 1,
      "default": 3,
      "label": "t:sections.collection-list.settings.columns_desktop.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.all.colors.has_cards_info",
      "default": "scheme-1"
    },
    {
      "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": "collection_title",
          "label": "Collection title"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.collection-list.presets.name",
      "blocks": [
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        }
      ]
    }
  ]
}
{% endschema %}

- Step 2: 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)
  - placeholder_image: {String} Placeholder image when collection is empty (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
-%}

<div class="card-wrapper animate-arrow {% if wrapper_class and wrapper_class != 'none' %}{{ wrapper_class }}{% else %}collection-card-wrapper{% endif %}">
  <div
    class="
      card
      card--{{ card_style }}
      {% if card_collection.featured_image %} card--media{% else %} card--text{% endif %}
      {% if card_style == 'card' %} color-{{ card_color_scheme }} gradient{% endif %}
      {% if extend_height %} card--extend-height{% endif %}
      {% if card_collection.featured_image == nil and card_style == 'card' %} ratio{% endif %}
    "
    style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
  >
    <div
      class="card__inner {% if card_style == 'standard' %}color-{{ card_color_scheme }} gradient{% endif %}{% if card_collection.featured_image or 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 | image_url: width: 165 }} 165w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 330 -%}{{ card_collection.featured_image | image_url: width: 330 }} 330w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 535 -%}{{ card_collection.featured_image | image_url: width: 535 }} 535w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 750 -%}{{ card_collection.featured_image | image_url: width: 750 }} 750w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 1000 -%}{{ card_collection.featured_image | image_url: width: 1000 }} 1000w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 1500 -%}{{ card_collection.featured_image | image_url: width: 1500 }} 1500w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 3000 -%}{{ card_collection.featured_image | image_url: width: 3000 }} 3000w,{%- endif -%}
                {{ card_collection.featured_image | image_url }} {{ card_collection.featured_image.width }}w
              "
              src="{{ card_collection.featured_image | image_url: width: 1500 }}"
              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.featured_image.alt | escape }}"
              height="{{ card_collection.featured_image.height }}"
              width="{{ card_collection.featured_image.width }}"
              loading="lazy"
              class="motion-reduce"
            >
          </div>
        </div>
      {%- endif -%}
      {%- if card_collection == blank -%}
        <div class="card__media">
          {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {%- else -%}
        <div class="card__content">
          <div class="card__information">
            <h3 class="card__heading">
              <a
                {% if card_collection == blank %}
                  role="link" aria-disabled="true"
                {% else %}
                  href="{{ card_collection.url }}"
                {% endif %}
                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>
      {%- endif -%}
    </div>
    {%- if card_collection != blank and card_style == 'card' or card_collection.featured_image -%}
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading">
            <a
              {% if card_collection == blank %}
                role="link" aria-disabled="true"
              {% else %}
                href="{{ card_collection.url }}"
              {% endif %}
              class="full-unstyled-link"
            >
              {%- if collection_title !- blank -%}
                {{- collection_title | escape -}}
              {%- else 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 == null 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 -%}
    {%- if card_collection == blank -%}
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading card__heading--placeholder">
            <a role="link" aria-disabled="true" class="full-unstyled-link">
              {{ 'onboarding.collection_title' | t }}
              <span class="icon-wrap">{% render 'icon-arrow' %}</span>
            </a>
          </h3>
        </div>
      </div>
    {%- endif -%}
  </div>
</div>

- Step 3: Add 'Collection list' section instead of using 'Collections list page', then add blocks, it will work fine

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
eight1echo
Shopify Partner
5 0 1

Hi Namphan, thanks for the assistance. I have done what you suggested and I see the box where I can enter a different collection title but it does not seem to change from the current collection name.

namphan
Shopify Partner
449 60 82

Hi @eight1echo,

Can I send collaborator invitations? it will help me debug things better

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com
namphan
Shopify Partner
449 60 82

Hi @eight1echo,

You can change the code of card-collection.liquid file again in step 2, it will work fine:

{% 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)
  - placeholder_image: {String} Placeholder image when collection is empty (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
-%}

<div class="card-wrapper animate-arrow {% if wrapper_class and wrapper_class != 'none' %}{{ wrapper_class }}{% else %}collection-card-wrapper{% endif %}">
  <div
    class="
      card
      card--{{ card_style }}
      {% if card_collection.featured_image %} card--media{% else %} card--text{% endif %}
      {% if card_style == 'card' %} color-{{ card_color_scheme }} gradient{% endif %}
      {% if extend_height %} card--extend-height{% endif %}
      {% if card_collection.featured_image == nil and card_style == 'card' %} ratio{% endif %}
    "
    style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
  >
    <div
      class="card__inner {% if card_style == 'standard' %}color-{{ card_color_scheme }} gradient{% endif %}{% if card_collection.featured_image or 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 | image_url: width: 165 }} 165w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 330 -%}{{ card_collection.featured_image | image_url: width: 330 }} 330w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 535 -%}{{ card_collection.featured_image | image_url: width: 535 }} 535w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 750 -%}{{ card_collection.featured_image | image_url: width: 750 }} 750w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 1000 -%}{{ card_collection.featured_image | image_url: width: 1000 }} 1000w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 1500 -%}{{ card_collection.featured_image | image_url: width: 1500 }} 1500w,{%- endif -%}
                {%- if card_collection.featured_image.width >= 3000 -%}{{ card_collection.featured_image | image_url: width: 3000 }} 3000w,{%- endif -%}
                {{ card_collection.featured_image | image_url }} {{ card_collection.featured_image.width }}w
              "
              src="{{ card_collection.featured_image | image_url: width: 1500 }}"
              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.featured_image.alt | escape }}"
              height="{{ card_collection.featured_image.height }}"
              width="{{ card_collection.featured_image.width }}"
              loading="lazy"
              class="motion-reduce"
            >
          </div>
        </div>
      {%- endif -%}
      {%- if card_collection == blank -%}
        <div class="card__media">
          {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {%- else -%}
        <div class="card__content">
          <div class="card__information">
            <h3 class="card__heading">
              <a
                {% if card_collection == blank %}
                  role="link" aria-disabled="true"
                {% else %}
                  href="{{ card_collection.url }}"
                {% endif %}
                class="full-unstyled-link"
              >
                {%- if collection_title != blank -%}
                  {{- collection_title | escape -}}
                {%- else 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>
      {%- endif -%}
    </div>
    {%- if card_collection != blank and card_style == 'card' or card_collection.featured_image -%}
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading">
            <a
              {% if card_collection == blank %}
                role="link" aria-disabled="true"
              {% else %}
                href="{{ card_collection.url }}"
              {% endif %}
              class="full-unstyled-link"
            >
              {%- if collection_title != blank -%}
                {{- collection_title | escape -}}
              {%- else 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 == null 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 -%}
    {%- if card_collection == blank -%}
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading card__heading--placeholder">
            <a role="link" aria-disabled="true" class="full-unstyled-link">
              {{ 'onboarding.collection_title' | t }}
              <span class="icon-wrap">{% render 'icon-arrow' %}</span>
            </a>
          </h3>
        </div>
      </div>
    {%- endif -%}
  </div>
</div>
Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? namphan992@gmail.com