Solved

Removing Collection Titles on the front page but not including collection products

noborumelb
Tourist
12 0 3

Hi, I would like to remove the Collections Titles on the home page but keep the title and prices of the collection for my product list.

 Screen Shot 2024-02-26 at 3.27.47 pm.pngScreen Shot 2024-02-26 at 3.27.53 pm.png

Accepted Solution (1)
Sweet_Savior_3
Shopify Partner
1070 88 96

This is an accepted solution.

Please replace the code with the given 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 -%}
        <a class="card__media" {% if card_collection == blank %}
                role="link" aria-disabled="true"
              {% else %}
                href="{{ card_collection.url }}"
              {% endif %}>
          <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>
        </a>
      {%- endif -%}
      {%- if card_collection == blank -%}
        <div class="card__media">
          {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {%- else -%}
        <div class="card__content" style="display:none !important;">
          <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" style="display:none !important;">
        <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.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>
Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!

View solution in original post

Replies 9 (9)

ZestardTech
Shopify Expert
5413 976 1301

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
noborumelb
Tourist
12 0 3

https://c77750-2.myshopify.com/ 

 

 

There is no password 

Sweet_Savior_3
Shopify Partner
1070 88 96

Hello @noborumelb 

 

Please paste the given CSS in base.css file at the bottom and Save.

.collection-list__item .card__heading {
  display: none;
}

OUTPUT: 

Sweet_Savior_3_0-1708963390547.png

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
noborumelb
Tourist
12 0 3

hello, I realised that the collections doesnt work when you click on them. It took out the bottom text but now the link doesnt work 

Sweet_Savior_3
Shopify Partner
1070 88 96

Hello @noborumelb 

 

This is because the link is in the heading.

 

Okay follow below steps:

1. Open 'card-collection.liquid' >> https://prnt.sc/PbENNCfciD65

2. Search for all the 'card__content' elements and 'style="display:none !important;"' >> https://prnt.sc/U8lRtMzRTHDQ

3. Search for the highlighted line >> https://prnt.sc/-lkfxwMnz5uz

and below that replace

 

<div class="card__media"> with

 

<a class="card__media" {% if card_collection == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ card_collection.url }}"
{% endif %}>

 

So it should be >> https://prnt.sc/GObtdQXu8snQ don't forget to close the <a> tag at the bottom >> https://prnt.sc/CU2F5cE9njxX

 

Final Code:

{%- if card_collection.featured_image -%}
        <a class="card__media" {% if card_collection == blank %}
                  role="link" aria-disabled="true"
                {% else %}
                  href="{{ card_collection.url }}"
                {% endif %}>
            <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=""
                height="{{ card_collection.featured_image.height }}"
                width="{{ card_collection.featured_image.width }}"
                loading="lazy"
                class="motion-reduce"
              >
          </div>
        </a>
      {%- endif -%}

4. Save

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
noborumelb
Tourist
12 0 3

Sorry this doesnt work. Can you simplify it please

Sweet_Savior_3
Shopify Partner
1070 88 96

Did you found out the file 'card-collection.liquid' ?

 

If yes, then share the code with me I will alter and send you a new code. Just replace the code of the file afterwards.

 

Thanks

Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!
noborumelb
Tourist
12 0 3

 

Hello, this is the code 🙂 thanks

 

 

{% 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=""
height="{{ card_collection.featured_image.height }}"
width="{{ card_collection.featured_image.width }}"
loading="lazy"
class="motion-reduce"
>
</div>
</div>
{%- endif -%}
{%- if card_collection == blank -%}
<a class="card__media" {% if card_collection == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ card_collection.url }}"
{% endif %}>
{{ 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 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>

Sweet_Savior_3
Shopify Partner
1070 88 96

This is an accepted solution.

Please replace the code with the given 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 -%}
        <a class="card__media" {% if card_collection == blank %}
                role="link" aria-disabled="true"
              {% else %}
                href="{{ card_collection.url }}"
              {% endif %}>
          <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>
        </a>
      {%- endif -%}
      {%- if card_collection == blank -%}
        <div class="card__media">
          {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {%- else -%}
        <div class="card__content" style="display:none !important;">
          <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" style="display:none !important;">
        <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.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>
Don't forget to like and accept the solution to help others store owners.
Looking for an expert or Have any queries ? Send query to the Inbox
Coffee Tip ? Pay to shopify.dev.34@gmail.com
From Less To Further !!!