Mastering Clickable Image Banners in Shopify's Craft Theme: A Community Guide

Hey fellow store owners! Let's talk about one of those common Shopify frustrations that can really make you scratch your head: getting your image banners to be fully clickable, especially when you're rocking a theme like Craft. You know the drill – you've got a gorgeous banner, maybe promoting a new collection, but only the tiny button in the middle is clickable. You want the whole thing to scream "Click me!" but the theme just isn't cooperating.

Recently, a fantastic discussion popped up in the Shopify community, initiated by A_Fern, who was running into this exact issue with their Craft theme. They'd tried some older code snippets, only to find their images blowing up in size or encountering syntax errors. It's a classic problem, and our community really came through with some brilliant insights and a solid solution.

The Craft Theme Banner Conundrum: Why It's Tricky

The core of the problem, as Moeed wisely pointed out early in the thread, is that Craft's Image Banner and Slideshow sections are inherently designed to only support links on the button element, not on the entire image. This means if you want the whole banner to act as one big link, you're going to need to dive into the theme's code.

One common pitfall, which ahsandoesntcare detailed in their initial breakdown and Ploqo visually demonstrated, is what happens when you try to simply wrap the entire image in an tag. While that sounds logical, it often leads to the image losing its carefully applied sizing and object-fit rules, resulting in that annoying "size blow-up." The tag essentially takes over the layout, disrupting the image's original wrapper.

The Community's Best Solution: Ploqo's Elegant Fix

While some suggested wrapping the image or using CSS to stretch an existing button (like Ecom_swift_LLC's approach), the most comprehensive and elegant solution came from Ploqo. This method not only makes the entire banner clickable but also preserves your image's sizing and allows any existing buttons within the banner to retain their own unique links. It's a win-win!

The key here is to create a separate, invisible anchor element that spans the entire banner, rather than trying to wrap the image itself. This keeps the image's native styling intact while providing the full-banner clickability you're after. Plus, it integrates a new setting directly into your theme's customizer, making it super easy to manage.

Step-by-Step: Making Your Craft Banner Fully Clickable

Before you touch any code, and this is a universal rule for any Shopify customization, please duplicate your theme! Go to Online Store > Themes, find your current theme, click the ... (actions) button, and select Duplicate. This way, if anything goes awry, you can revert instantly without impacting your live store.

1. Access Your Theme Code:

   From your Shopify admin, go to Online Store > Themes. Click the ... (actions) button on your active theme and select Edit code. Then, open the file sections/image-banner.liquid.

   

2. Insert the Liquid & CSS Block:

   Find the following line (it's usually around line 120, but might vary slightly depending on your Craft theme version):

   {%- if section.settings.banner_link != blank -%}
     {%- style -%}
       #Banner-{{ section.id }} .banner__link {
         display: block;
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: 2;
       }
       #Banner-{{ section.id }} .banner__content {
         pointer-events: none;
       }
       #Banner-{{ section.id }} .banner__box a,
       #Banner-{{ section.id }} .banner__box button {
         pointer-events: auto;
       }
     {%- endstyle -%}
     
   {%- endif -%}
   

   This code does a few clever things:

   • It creates a new tag that's absolutely positioned to cover the entire banner.
   • The inline CSS ensures it stretches across the whole area without affecting the image's dimensions.
   • Crucially, pointer-events: none; on the .banner__content ensures that the text and other elements don't interfere with the full banner link. Then, pointer-events: auto; is applied specifically to and elements within the banner content, so your original buttons still work!
   • The aria-label is a thoughtful touch for accessibility, making sure screen readers understand the link's purpose.
3. Add New Settings to the Schema:

   Scroll down in the same image-banner.liquid file until you find the {% schema %} block. Inside this block, locate the image_2 block (or a similar image setting if image_2 isn't present, just find a logical place among other settings). Paste these two new settings directly after it:

   {
     "type": "url",
     "id": "banner_link",
     "label": "Banner link"
   },
   {
     "type": "text",
     "id": "banner_link_label",
     "label": "Banner link description",
     "info": "Read out by screen readers.",
     "default": "Shop the collection"
   }
   

   Don't forget to click Save after adding these.

4. Configure in the Theme Customizer:

   Now, head back to your Shopify admin and go to Online Store > Themes, then click Customize. Navigate to your Image banner section. You'll now see a new setting labeled Banner link. Simply set the desired URL here!

   

The Result: Seamless Clickability!

After these steps, your entire banner will be clickable, just like you wanted! The image maintains its original size and crop, and any existing buttons on the banner still work independently, pointing to their own specific destinations. If you leave the new "Banner link" setting empty, the section will behave exactly as it did before, giving you full control.

This is a fantastic example of how powerful the Shopify community is. When you're running your own store, you'll inevitably hit these little customization bumps. Knowing there's a vibrant community ready to share solutions, like this one from Ploqo and the helpful guidance from Moeed, makes all the difference. It's why so many entrepreneurs choose to start their journey with Shopify – the support system is truly invaluable.

Always remember to test your changes thoroughly on a duplicated theme first. Happy customizing!