Sense theme - Make multicolumn clickable, either the entire column (I have 3) or the image in each

[talsworld]

I have been trying different code and it hasn't been working. On the homepage I have 3 products in a multicolumn. I want when someone clicks on them to go to their product pages. How? Store: https://4d0ae3.myshopify.com/ 

[theycallmemakka · Accepted solution]

Hi @talsworld ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const slides = [
    '/products/kale-krush',
    '/products/berry-boom',
    '/products/vanilla-vibes'
  ];

  for (let i = 1; i <= slides.length; i++) {
    const element = document.getElementById(`Slide-template--21264429285656__7e128d2b-e672-4718-9c70-1e4dea2102d4-${i}`);
    
    if (element) {
      element.style.cursor = 'pointer';
      element.addEventListener('click', function() {
        window.location.href = slides[i - 1];
      });
    }
  }
});

</script>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[talsworld]

This worked, and I cannot thank you enough as nothing else was. I truly appreciate it. Thank you!

[Pup_Planet]

Hi... I have the exact same issue, i followed the steps above but it didn't work... assuming it's site-specific? If so would you be able to help with my home page too please?

Store - pup-planet-6437.myshopify.com

[theycallmemakka]

Hi @Pup_Planet ,

The code is site specific. I revewed your site but colud not find any Multicolumn.

[Pup_Planet]

How odd... it says it is in the builder screen? I have got round the issue by having 'click here' under the tiles, but customers are saying they take a while to realize that's where they need to click as they try to click the picture first.

[theycallmemakka]

Can you private message me the issue?

[theycallmemakka]

If you are looking to make the multicolumn clickable you can add below code at the end of theme.liquid file just above </head>

<style>
#Slider-template--22418363842875__multicolumn_fcPUef .multicolumn-list__item{
    cursor: pointer;
}
</style>
<script>
document.querySelectorAll('#Slider-template--22418363842875__multicolumn_fcPUef .multicolumn-list__item')?.forEach(function(mc){
    mc.addEventListener('click', function(){
        window.location = mc.querySelector('a').getAttribute('href');     
    })
});
</script>

If possile can you make a another post regarding issue and accept this as the solution if it works. It will help me grow.

Thank you 

[Pup_Planet]

made a post called: 'Sense Theme - Making Multicolumn Clickable, for each image'. thank you so much for help.

[talsworld]

Hey, does this code work for any Sense theme? The solution above stopped working for me after a few weeks.

[theycallmemakka]

@talsworld ,

It looks like you made any changes to the secton[like removing items]? The previous code was hardcoded on the theme so any changes on the DOM element whill change the class reference. You can update the code to below code for it to work for current DOM.

<script>
document.addEventListener('DOMContentLoaded', function() {
  const slides = [
    '/products/kale-krush',
    '/products/berry-boom',
    '/products/vanilla-vibes'
  ];

  for (let i = 1; i <= slides.length; i++) {
    const element = document.getElementById(`Slide-template--22163513770264__7e128d2b-e672-4718-9c70-1e4dea2102d4-${i}`);
    
    if (element) {
      element.style.cursor = 'pointer';
      element.addEventListener('click', function() {
        window.location.href = slides[i - 1];
      });
    }
  }
});
</script>

If you want to make it dynamic so it doesnot stop working in the future, I will require access to the theme code. Please let me know if you want this changes.