Make List section items clickable

Site URL: http://vibemade.com/

Hi. We have a List section in our home page to show our product categories. However, the images are not clickable which makes for weird UX. Is it possible to make them clickable?

Help is appreciated!

On 11/21/2021 at 3:25 AM, vibemade said:

Site URL: http://vibemade.com/

Hi. We have a List section in our home page to show our product categories. However, the images are not clickable which makes for weird UX. Is it possible to make them clickable?

Help is appreciated!

Do you mean clicking on the image will direct to the link attached in button below?

On 11/21/2021 at 3:25 AM, vibemade said:

Site URL: http://vibemade.com/

Hi. We have a List section in our home page to show our product categories. However, the images are not clickable which makes for weird UX. Is it possible to make them clickable?

Help is appreciated!

Try adding buttons on each item then add this to Design > Custom CSS

body.homepage {
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}
}

This code works to remove the button on all lists, but what if I am using multiple list blocks. Is there a way to target only specific sections? Thank you in advance!

7 hours ago, myberman said:

This code works to remove the button on all lists, but what if I am using multiple list blocks. Is there a way to target only specific sections? Thank you in advance!

You can target data-section-id

[data-section-id] {
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}
}

Use this free tool to find data section id: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en