Jump to content

Adding Links to List Section Images

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://amethyst-orchid-6rbh.squarespace.com/config/

Hi.

So when designing my website, I have used a list section to allow users to choose between two options. However, I cannot find a way to allow the users to select their option by clicking on the respective image. Instead, they would have to click on the button below the image.

Is there any way to set it so that members can choose their option by clicking on the image instead of having to use the button? I would prefer it this way as I feel as though the button looks unprofessional.

Let me know!175302818_Screenshot2021-12-08at18_00_04.thumb.png.48d26f2c5d5205403df95613de701cc3.png

Link to comment
1 hour ago, LMallon10 said:

Is there any way to set it so that members can choose their option by clicking on the image instead of having to use the button?

It should be possible with code, if you are on a business plan or above. However we can't view the site right now so we'll need you to set a password in the visibility settings and share it with us.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • Solution

Thanks for the details @LMallon10 (sent by DM).

I've published a solution here: Make Squarespace list items clickable.

This takes the link that you've assigned to each CTA button and applies it to the entire list item. This means that users can click the image or any other aspect of an item to trigger the CTA action on your 'Simple' (not scrollable) List Section.

This was updated in June 2024 to improve performance and to respect the "open in new tab" checkbox!

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

Edited by paul2009
updated in June 2024

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 5 months later...
On 5/29/2022 at 5:12 AM, DrewSomething said:

Is there a way to have the image clickable/tappable to link, but remove the buttons?

You should be able to hide the buttons with CSS. For example, something like:

.list-item-content__button-wrapper {
  display: none;
}

 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 1 month later...

Hi,  @paul2009

I'm trying to make the list section item clickable using the code. But it's not working. Only buttons are clickable. I also used the CSS code to hide buttons. Each item has already assigned link to other page (within site).

I'm still building the site so images and titles are just for placement.

I'd greatly appreciate if you can help me for any possible reason.

Thank you so much!

https://iguana-trout-6w5m.squarespace.com/projects

Screen Shot 2022-07-08 at 1.22.22 PM.png

Link to comment
On 7/8/2022 at 6:52 PM, misa2022 said:

I'd greatly appreciate if you can help me

The screenshot shows that the interactive 'Banner Slideshow' mode is being used. If you change this to 'Simple List' mode, the code will allow items to be clicked.

Edited by paul2009
edited for clarity

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 3 months later...
35 minutes ago, baileyeidahl said:

I tried your post with the code for making the list section images clickable and it is also not working for me.

There are no known issues so if it isn't working, do check that:

  • you are applying it to a "list section", not a summary block or similar
  • you've added it correctly to code injection footer

If it still isn't working please provide a working link to the page on the site so that we can take a look. See How to Post a Forum Question if you need help with this.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
1 hour ago, baileyeidahl said:

It's the section" Latest plus products" on the homepage. 

Thank you for the link.

The "Latest Plus Products" list section is using the Carousel design option, and so it is not possible to use the code in this case.

When Carousel is used, the entire section can be clicked and dragged to allow users to scroll through the visible list and reveal more items. It is therefore not possible make these areas clickable to trigger the CTA. 

 image.png.35e025c6fb07803295eba53632f73ac1.png

I hope that helps to explain.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Thanks @paul2009. This is a great solution. I appreciate you responding to each of these posts as well.

I'm running into one issue: Even if I choose to have a URL open in a new window through the link editor, this solution opens the link in the same window. Is there a way to force links to open in new windows? Thanks in advance for the help. 

Link to comment
On 10/24/2022 at 7:13 PM, Swiftline said:

Even if I choose to have a URL open in a new window through the link editor, this solution opens the link in the same window.

Are you testing this whilst logged out of the website, or whilst logged in? Links set to Open in New Window will always open in the same tab when you're logged into your site. 

My solution was updated in June 2024 to improve performance and to respect the "open in new tab" checkbox!

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 2 weeks later...
On 10/24/2022 at 2:41 PM, paul2009 said:

Are you testing this whilst logged out of the website, or whilst logged in? Links set to Open in New Window will always open in the same tab when you're logged into your site. 

Thank you for sharing the linking solve. I am running into the same problem as  @Swiftline - my Simple List links that are toggled to "open in new window" are not opening in a new window. I've tested using other web browsers, logged out.

Link to comment
9 hours ago, MonicaW said:

my Simple List links that are toggled to "open in new window" are not opening in a new window.

If it isn't working as expected then I recommend contacting Squarespace Customer Care directly.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Hi @paul2009

Thanks for this awesome solution! Just a note on what others have mentioned re: opening links in new window. I've removed your script from code injection and "open in new window" works as expected, so the issue doesn't seem to be on the Squarespace end. I know you're providing this for free and "as is" (and am very grateful that you do), just wanted to let you know 🙂

Thanks again!

Link to comment
  • 4 months later...
On 6/1/2022 at 10:15 AM, paul2009 said:

You should be able to hide the buttons with CSS. For example, something like:

.list-item-content__button-wrapper {
  display: none;
}

 

Hi @paul2009 When I use this code, it will hide all the buttons on all list. I have one section with a simple list "behandlungen" on several pages. How can I hide the buttons on all these sections without the other list above with buttons. I tried several .simple-list css but it is always hiding all list style buttons. 
This is the website: https://cyan-lizard-tswx.squarespace.com/
This is the password: onlyyou2see
Many thanks in advance! 

Bildschirmfoto 2023-03-15 um 15.48.34.png

Link to comment
On 3/16/2023 at 7:45 AM, DesignbyCaroline said:

When I use this code, it will hide all the buttons on all list.

Correct. It will apply to all buttons in all lists. If you want to limit this to one section, you'll need to identify the ID of that section and then prefix the CSS with this. For example, for the homepage, you can use this instead:

section[ data-section-id="63f357eea67eec7ce5b274c0"] .list-item-content__button-wrapper {
  display: none;
}

image.thumb.png.e33781b7edbfcb913858aa6f6a33876a.png

If you need help identifying section IDs, please take a look at my old guide for How to apply CSS to one Squarespace page.

Did this help? Please give feedback by clicking an icon below  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 1 month later...
On 3/17/2023 at 10:22 AM, paul2009 said:

Correct. It will apply to all buttons in all lists. If you want to limit this to one section, you'll need to identify the ID of that section and then prefix the CSS with this. For example, for the homepage, you can use this instead:

section[ data-section-id="63f357eea67eec7ce5b274c0"] .list-item-content__button-wrapper {
  display: none;
}

image.thumb.png.e33781b7edbfcb913858aa6f6a33876a.png

If you need help identifying section IDs, please take a look at my old guide for How to apply CSS to one Squarespace page.

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi @paul2009
The css with display none is working fine now! 
The website is live now, but I'm facing another issue and I would like to ask your help again? 
 

https://www.akupunkturpraxis-luzern.ch/anwendungen-tcm
On the 3rd section I have a simple list and on the bottom of the page I have a simple list. 
I want to exclude the first simple list with the 8 tiles from clicking on the tile. When I hover on desktop with the mouse I can click on each of them. I want to remove this. What exclusion would I need to add?

Many thanks in advance! 

Bildschirmfoto 2023-04-18 um 07.52.49.png

Link to comment
On 4/17/2023 at 10:57 PM, DesignbyCaroline said:

I want to exclude the first simple list with the 8 tiles from clicking on the tile. When I hover on desktop with the mouse I can click on each of them. I want to remove this. What exclusion would I need to add?

Add the following to Design > Custom CSS.

[ data-section-id="63f781dcf209a7224ce4e387" ] .user-items-list-simple .list-item {

  pointer-events : none;
  
  }

[ data-section-id="63f781dcf209a7224ce4e387" ] .user-items-list-simple .list-item[data-is-card-enabled="true"] .list-item-content__description a {

  pointer-events : auto;
  
  }

Let us know how it goes.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
13 hours ago, creedon said:

Add the following to Design > Custom CSS.

[ data-section-id="63f781dcf209a7224ce4e387" ] {

  pointer-events : none;
  
  }

Let us know how it goes.

Hi @creedon
Thank you for checking! Well, now the function is gone, but I have links in each box that are not working any more now. 

I believe I need to exclude this section (data-section-id="63f781dcf209a7224ce4e387")  from not using the added code https://sf.digital/squarespace-solutions/make-squarespace-list-items-clickable

Any idea how to do that? 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.