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

Solved

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

talsworld
Excursionist
29 0 6

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/ 

Accepted Solution (1)

theycallmemakka
Shopify Partner
1551 353 379

This is an 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

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 10 (10)

theycallmemakka
Shopify Partner
1551 353 379

This is an 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

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

talsworld
Excursionist
29 0 6

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

Pup_Planet
Tourist
6 0 1

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
Shopify Partner
1551 353 379

Hi @Pup_Planet ,

 

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Pup_Planet
Tourist
6 0 1

Pup_Planet_0-1712130493176.png

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
Shopify Partner
1551 353 379

Can you private message me the issue?

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

theycallmemakka
Shopify Partner
1551 353 379

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 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

Pup_Planet
Tourist
6 0 1

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

talsworld
Excursionist
29 0 6

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

theycallmemakka
Shopify Partner
1551 353 379

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com