How To Make The Image Banner Clickable?
Welcome back to the channel for another power-packed tutorial. Today, we’re diving into the world of Shopify 2.0 themes, such as Dawn, Fresh, and Sten’s theme, where the default settings might not give you a clickable banner image. But fear not, because I’m here to guide you through the process! In this tutorial, you’ll discover how to add a clickable link to your entire banner image effortlessly. I’ll be using Dawn’s latest version 12.0.0 as an example to show you the magic of customization.
Clickable Banner Images in Shopify 2.0 Themes
By default, themes like Dawn, Fresh, and Sten’s in Shopify 2.0 lack a built-in clickable banner image section. While you can add a button to the image banner, the challenge arises when you want the entire banner to be a clickable link. In this tutorial, I’ll showcase overcoming this limitation and enhancing your user experience.
Non-Clickable Image Banner
Demonstrating the problem with the non-clickable image banner in the fresh Dawn theme.
Editing Code for Clickable Banner
Providing code snippets and guiding users through the process of making the banner image clickable.
Search For the following code:
id="Banner-{{ section.id }}"And add the following code:
onclick="location.href='{{ section.settings.banner_link }}';" style="cursor: pointer;"Add the following code below schema:
{
"type": "url",
"label": "Banner Link",
"id": "banner_link"
},Customization and Testing
Previewing the store, accessing customized settings, and linking the banner to a specific product.
Conclusion
Wrapping up the tutorial, encouraging feedback from viewers, and hinting at upcoming content, including Figma tutorials and video editing tips.
