How to Make a Section Clickable with JavaScript and Redirect to Any URL

Would you ever want to clicking a full partition of your website - not only buttons or links? It is especially useful in platforms like Shopify, WordPress, or any custom HTML / Javascript project.

In this tutorial, you will learn how to clicked any section and redirect the visitor to another page - no jquery or heavy plugin required.

Why Make a Section Clickable?

User experience Improve
Conversion rates increase (especially on product or landing pages)
Mobile usability

Example Use Case

Suppose you have a Shopify homepage section that displays a product collection. You want users to redirect on the collection page as they click anywhere on the section.

HTML Structure Following:

<div id="shopify-section-template--16642969796774__image_with_text_jfQ3Fm">
<h2>How to Make a Section Clickable with JavaScript and Redirect to Any URL</h2>
<p>Would you ever want to clicking a full partition of your website - not only buttons or links? It is especially useful in platforms like Shopify, WordPress, or any custom HTML / Javascript project.</p>
</div>

JavaScript Code Following:

This code snippet makes the section clickable and redirects users:

document.addEventListener("DOMContentLoaded", function () {
const section = document.getElementById("shopify-section-template--16642969796774__image_with_text_jfQ3Fm");
if (section) {
section.addEventListener("click", function () {
window.location.href = "example.com";
});
}
});

This JavaScript wait for the entire webpage load before running, ensures that all elements are available for interruptions. It looks like a special HTML partition using your unique ID, which appears to be a shopify partition (1664296979677429697967774__Mage_text_JFQ3FM). If this section gets on the page, the code connects a click event lizer with it. When a user clicks anywhere inside the part, they are redirected to "example.com". This functionality is usually used to work as a clicking link or banner of the webpage or banner. To work properly, it is recommended to use a full URL, such as "https://example.com".