How to make collection list images clickable when titles are hidden?

[hamza-elkaissi1]

Hello, I added a check box to my collection list section that allows me to hide or show the collection title, but when I hide the titles, the images become unclickable; could you please help me fix this?

my store 

password: hamza

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

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

  {%- unless section.settings.show_title -%}
    .section-{{ section.id }}-padding .card__content {
      display: none !important;
    }
  {%- endunless -%}
{%- 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 {{ section.settings.heading_size }}">
          {{ section.settings.title | escape }}
        </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"
            aria-labelledby="ViewAll-{{ section.id }} SectionHeading-{{ section.id }}"
          >
            {{- 'sections.collection_list.view_all' | t -}}
          </a>
        {%- endif -%}
      </div>
    {%- endunless -%}

    <slider-component class="slider-mobile-gutter">
      <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 -%}
          {% assign indexx = forloop.index | minus: 1 %}
          {% assign coltet = section.settings.columns_desktop | minus: 1 %}
          {% if indexx > coltet -%}
            {%- assign indexx = indexx | minus: coltet %}
          {% endif %}
          <li
            data-aos="{{ section.settings.aos-title }}"
            data-aos-duration="1500"
            data-aos-once="{{ section.settings.animation-once }}"
            data-aos-delay="{{ indexx | times: 3 }}00"
            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 %}"
            {{ block.shopify_attributes }}
          >
            {% render 'card-collection',
              card_collection: block.settings.collection,
              media_aspect_ratio: section.settings.image_ratio,
              columns: columns
            %}
          </li>
        {%- endfor -%}
      </ul>
      {%- if show_mobile_slider -%}
        <div class="slider-buttons no-js-hidden">
          <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 %}">
        <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,
  "settings": [
    {
       "type": "select",
       "id": "animation-once",
       "options": [
		  { "value": "none", "label": "Aucune"},
          { "value": "true", "label": "once"},
          { "value": "false", "label": "unlimited"}
       ],
       "label": "Play animation",
	   "default": "none"
    },
       {
       "type": "select",
       "id": "aos-title",
       "options": [
		  { "value": "none", "label": "Aucune"},
          { "value": "fade-in", "label": "Fade In"},
          { "value": "fade-up", "label": "Fade Up"},
          { "value": "fade-down", "label": "Fade Down"},
          { "value": "fade-right", "label": "Fade Right"},
		  { "value": "fade-left", "label": "Fade Left"},
          { "value": "fade-up-right", "label": "Fade Up Right"},
          { "value": "fade-up-left", "label": "Fade Up Left"},
		  { "value": "fade-down-right", "label": "Fade Down Right"},
          { "value": "fade-down-left", "label": "Fade Down Left"},
		  { "value": "flip-left", "label": "Flip Left"},
          { "value": "flip-right", "label": "Flip Right"},
          { "value": "flip-up", "label": "Flip Up"},
		  { "value": "flip-down", "label": "Flip Down"},
          { "value": "zoom-in", "label": "Zoom in"},
          { "value": "zoom-in-up", "label": "Zoom in Up"},
		  { "value": "zoom-in-down", "label": "Zoom in Down"},
          { "value": "zoom-in-left", "label": "Zoom in Left"},
		  { "value": "zoom-in-right", "label": "Zoom in Right"},
		  { "value": "zoom-out", "label": "Zoom out"},
          { "value": "zoom-out-up", "label": "Zoom out Up"},
		  { "value": "zoom-out-down", "label": "Zoom out Down"},
          { "value": "zoom-out-right", "label": "Zoom out Right"},
		  { "value": "zoom-out-left", "label": "Zoom out Left"}
       ],
       "label": "The animation",
	   "default": "none"
    },
    {
      "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": "checkbox",
      "id": "show_title",
      "default": true,
      "label": "Show collections title"
    },
    {
      "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"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.collection-list.presets.name",
      "blocks": [
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        }
      ]
    }
  ]
}
{% endschema %}

@GemPages @PageFly-Victor @EBOOST @Absolutelee123 @suyash1 

[niraj_patel]

@hamza-elkaissi1 

Hello,

if you want to image of collection card make clickable then you should be edit in 'card-collection' snippet.

snippet >> card-collection

in this snippet, firstly find all <img> then add before the <img <a href="{{product.url}}">  and add after </a>

example-

<a href="{{product.url}}">

     <img src="{{image}}" >

</a>

[hamza-elkaissi1]

Can you please do it for me? When I try to apply your instructor by myself, what happens is that when I click on any collection, it directs me just to the home page.

the is the snippet 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 == nil
    assign ratio = 1
  endif
  assign card_color_scheme = settings.card_color_scheme
  assign card_style = settings.card_style
  if wrapper_class == nil 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 -%}
      <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>
    </div>
    {% if 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 == nil 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 %} 
  </div>
</div>

[suyash1]

@hamza-elkaissi1 - can you please share the page link where you are facing this issue?

[hamza-elkaissi1]

I face his issue in the  home page

my store 

password: hamza

[niraj_patel]

please replace the whole code with given code in 'card-collection' snippet.

{% 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 == nil
assign ratio = 1
endif
assign card_color_scheme = settings.card_color_scheme
assign card_style = settings.card_style
if wrapper_class == nil 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">
<a href="{{product.url}}">
<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"
>
</a>
</div>
</div>
{%- endif -%}
<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>
</div>
{% if 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 == nil 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 %}
</div>
</div>

[hamza-elkaissi1]

Hi, now the image is clickable, but it just redirects to the home page, not to the actual collection!

[niraj_patel]

@hamza-elkaissi1 

please add the link in <a> tag which collection link want you to add on the particular image. (see the screenshot)

[Josh_Tydlacka]

How would I do this on my website www.XGear101.com

here is my code for the card-collection

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

<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 -%}
<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>
</div>
{% if 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 %}
</div>
</div>

[LitCommerce · Accepted solution]

Hi @hamza-elkaissi1,

Please change all code:

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

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

  {%- unless section.settings.show_title -%}
    .section-{{ section.id }}-padding .card__information {
      padding: 0 !important;
    }
    .section-{{ section.id }}-padding .full-unstyled-link {
      font-size: 0 !important;
    }
    .section-{{ section.id }}-padding .card .icon-wrap {
      display: none !important;
    }
  {%- endunless -%}
{%- 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 {{ section.settings.heading_size }}">
          {{ section.settings.title | escape }}
        </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"
            aria-labelledby="ViewAll-{{ section.id }} SectionHeading-{{ section.id }}"
          >
            {{- 'sections.collection_list.view_all' | t -}}
          </a>
        {%- endif -%}
      </div>
    {%- endunless -%}

    <slider-component class="slider-mobile-gutter">
      <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 -%}
          {% assign indexx = forloop.index | minus: 1 %}
          {% assign coltet = section.settings.columns_desktop | minus: 1 %}
          {% if indexx > coltet -%}
            {%- assign indexx = indexx | minus: coltet %}
          {% endif %}
          <li
            data-aos="{{ section.settings.aos-title }}"
            data-aos-duration="1500"
            data-aos-once="{{ section.settings.animation-once }}"
            data-aos-delay="{{ indexx | times: 3 }}00"
            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 %}"
            {{ block.shopify_attributes }}
          >
            {% render 'card-collection',
              card_collection: block.settings.collection,
              media_aspect_ratio: section.settings.image_ratio,
              columns: columns
            %}
          </li>
        {%- endfor -%}
      </ul>
      {%- if show_mobile_slider -%}
        <div class="slider-buttons no-js-hidden">
          <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 %}">
        <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,
  "settings": [
    {
       "type": "select",
       "id": "animation-once",
       "options": [
		  { "value": "none", "label": "Aucune"},
          { "value": "true", "label": "once"},
          { "value": "false", "label": "unlimited"}
       ],
       "label": "Play animation",
	   "default": "none"
    },
       {
       "type": "select",
       "id": "aos-title",
       "options": [
		  { "value": "none", "label": "Aucune"},
          { "value": "fade-in", "label": "Fade In"},
          { "value": "fade-up", "label": "Fade Up"},
          { "value": "fade-down", "label": "Fade Down"},
          { "value": "fade-right", "label": "Fade Right"},
		  { "value": "fade-left", "label": "Fade Left"},
          { "value": "fade-up-right", "label": "Fade Up Right"},
          { "value": "fade-up-left", "label": "Fade Up Left"},
		  { "value": "fade-down-right", "label": "Fade Down Right"},
          { "value": "fade-down-left", "label": "Fade Down Left"},
		  { "value": "flip-left", "label": "Flip Left"},
          { "value": "flip-right", "label": "Flip Right"},
          { "value": "flip-up", "label": "Flip Up"},
		  { "value": "flip-down", "label": "Flip Down"},
          { "value": "zoom-in", "label": "Zoom in"},
          { "value": "zoom-in-up", "label": "Zoom in Up"},
		  { "value": "zoom-in-down", "label": "Zoom in Down"},
          { "value": "zoom-in-left", "label": "Zoom in Left"},
		  { "value": "zoom-in-right", "label": "Zoom in Right"},
		  { "value": "zoom-out", "label": "Zoom out"},
          { "value": "zoom-out-up", "label": "Zoom out Up"},
		  { "value": "zoom-out-down", "label": "Zoom out Down"},
          { "value": "zoom-out-right", "label": "Zoom out Right"},
		  { "value": "zoom-out-left", "label": "Zoom out Left"}
       ],
       "label": "The animation",
	   "default": "none"
    },
    {
      "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": "checkbox",
      "id": "show_title",
      "default": true,
      "label": "Show collections title"
    },
    {
      "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"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.collection-list.presets.name",
      "blocks": [
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        },
        {
          "type": "featured_collection"
        }
      ]
    }
  ]
}
{% endschema %}

[hamza-elkaissi1]

thank you so much.

[IMYOURGIRL]

@LitCommerce I’m so happy with this code, thank you! Is there a way to remove the padding/margin underneath the images aswel? Where the title used to be? I want my collections grid without any padding but can’t find how to do this :). 

If someone else reads this and know what I mean, any help is appreciated. Thanks!