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

Store Design
, , , ,
1

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

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

  

    {%- unless section.settings.title == blank -%}
      

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

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

    {%- endunless -%}

    

    {%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
      

        
          {{- 'sections.collection_list.view_all' | t -}}
        
      

    {%- endif -%}
  

{% schema %}
{
  "name": "t:sections.collection-list.name",
  "tag": "section",
  "class": "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

2

@hamza-elkaissi1

Hello,

techlyser_ecom_0-1674330169695.png
techlyser_ecom_0-1674330169695.png1833×702 79.7 KB

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 then add before the <img and add after

example-

3

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

  

    

      {%- if card_collection.featured_image -%}
        

          

            
          

        

      {%- endif -%}
      
        

          ### 
            
          {%- if card_collection.description != blank -%}
            

              {{- card_collection.description | strip_html | truncatewords: 12 -}} {% render 'icon-arrow' %}
            

          {%- endif -%}
        
   
      

    

    {% if card_style == 'card' or card_collection.featured_image %} 
      
        

          ### 
            
          {%- if card_collection.featured_image == nil and card_collection.description != blank -%}
            

              {{- card_collection.description | strip_html | truncatewords: 12 -}} {% render 'icon-arrow' %}
            

          {%- endif -%}
        

      

    {% endif %}
4

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

5

I face his issue in the home page

my store

password: hamza

6

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

{%- if card_collection.featured_image -%} {%- endif -%}

{%- if card_collection.title != blank -%} {{- card_collection.title | escape -}} {%- else -%} {{ 'onboarding.collection_title' | t }} {%- endif -%} {%- if card_collection.description == blank -%}{% render 'icon-arrow' %}{% endif %}

{%- if card_collection.description != blank -%}

{{- card_collection.description | strip_html | truncatewords: 12 -}} {% render 'icon-arrow' %}

{%- endif -%}
{% if card_style == 'card' or card_collection.featured_image %}

{%- 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 -%}{% render 'icon-arrow' %}{% endif %}

{%- if card_collection.featured_image == nil and card_collection.description != blank -%}

{{- card_collection.description | strip_html | truncatewords: 12 -}} {% render 'icon-arrow' %}

{%- endif -%}
{% endif %}
7

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

8

@hamza-elkaissi1

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

techlyser_ecom_0-1674764237857.png
9

Hi @hamza-elkaissi1 ,

Please change all code:

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

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

  

    {%- unless section.settings.title == blank -%}
      

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

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

    {%- endunless -%}

    

    {%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
      

        
          {{- 'sections.collection_list.view_all' | t -}}
        
      

    {%- endif -%}
  

{% schema %}
{
  "name": "t:sections.collection-list.name",
  "tag": "section",
  "class": "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 %}
10

thank you so much.

11

@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!

12

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

{%- if card_collection.featured_image -%}
{%- endif -%}

{%- if card_collection.title != blank -%} {{- card_collection.title | escape -}} {%- else -%} {{ 'onboarding.collection_title' | t }} {%- endif -%} {%- if card_collection.description == blank -%} {% render 'icon-arrow' %} {%- endif %}

{%- if card_collection.description != blank -%}

{{- card_collection.description | strip_html | truncatewords: 12 -}}  {% render 'icon-arrow' %}

{%- endif -%}
{% if card_style == 'card' or card_collection.featured_image %}

{%- 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 -%} {% render 'icon-arrow' %} {%- endif %}

{%- if card_collection.featured_image == null and card_collection.description != blank -%}

{{- card_collection.description | strip_html | truncatewords: 12 -}}  {% render 'icon-arrow' %}

{%- endif -%}
{% endif %}