Collection grid full width + make image clickable

IMYOURGIRL · April 1, 2023, 11:47am

Hi guys,

I’m struggling with Dawn theme where I want to make a collection grid on a homepage without any text underneath it (card) and remove the padding. I tried to hide the text with css, but then the collection image isn’t a link anymore. I need the images to be clickable to the collection of choice.

Or maybe I’m looking at this the wrong way and need to use Multicollumns instead? But the image in a multicolumn isnt clickable either.. any recommendation or code is highly appreciated!

I want to use my own images where the title would be designed inside the image already because I need it to be a certain font.

Desired result:

https://www.dropbox.com/s/d84qfnd94o8pm21/Final%20result.jpg?dl=0

Default collection grid in Dawn theme (I don’t want the text underneath the images and no padding):

-https://www.dropbox.com/s/8u6s3cd009n6hgv/Remove%20collection%20text.jpg?dl=0

-https://www.dropbox.com/s/rbdbw9mgl91z49m/Remove%20padding.jpg?dl=0

Thanks!

PageFly-Victor · April 2, 2023, 10:44am

Hi [email removed]IMYOURGIRL,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file component-card.css

Step 3: Paste the below code at bottom of the file → Save

.card-wrapper >.card--media > .card__content {
display:none !important
}
#shopify-section-template--16798324162776__1656362007dea1a619 #Slider-template--16798324162776__1656362007dea1a619{
gap:0 !important;
--card-corner-radius:0 
}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

IMYOURGIRL · April 2, 2023, 8:50pm

Hi Victor!

Yes, this does indeed remove the padding and titles, but the images aren’t clickable anymore.

I’ve used this code from another thread, which created a checkbox in the section to show/hide the titles:

{{ '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": "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": "Animation au Scroll du block titre",
	   "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 title collection"
    },
    {
      "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 %}

And this CSS on collection section in the editor custom css box:

.collection-list__item .card {
  position: relative;
}
.collection-list__item .card__content {
  position: absolute;
  height: 100%;
  width: 100%;
}
.collection-list__item .card__information {
  justify-content: center;
  align-items: center;
  display: flex;
}
.card-wrapper .card {
  position: relative;
}

IMYOURGIRL · April 2, 2023, 8:53pm

Way easier, but no checkbox to show/hide the titles is to place this code at the custom CSS box:

.collection-list__item .card {
  position: relative;
}
.collection-list__item .card__content {
  position: absolute;
  height: 100%;
  width: 100%;
}
.collection-list__item .card__information {
  justify-content: center;
  align-items: center;
  display: flex;
}
.card-wrapper .card {
  position: relative;
}
.collection-list-wrapper .card__content {
  opacity: 0;
}

Topic		Replies	Views
How to make collection list images clickable when titles are hidden? Store Design design , collection-page , css , shopify-themes , troubleshooting	11	86	April 10, 2024
Collection List Images in Dawn theme are only clickable on part of image Store Design customizations	11	221	October 29, 2024
Need help on removing the title cards from the collection in Dawn Theme Technical Q&A	6	77	February 23, 2022
How to remove collection title dawn theme Store Design	11	97	May 12, 2023
Hide collection list title homepage dawn theme Store Design	31	324	March 20, 2024

Collection grid full width + make image clickable

Related topics