Make Your Shopify Craft Theme Image Banners Fully Clickable (No More Sizing Woes!)

Hey everyone,

Ever found yourself staring at your beautiful Shopify Craft theme image banner, wishing the whole thing was clickable, not just that little button? You’re definitely not alone! It’s a super common request, and honestly, a bit of a head-scratcher when you first try to implement it. I recently saw a fantastic discussion pop up in the Shopify Community that tackled this exact issue, and I wanted to share the goldmine of insights we uncovered.

Our fellow store owner, A_Fern, kicked off the thread, explaining a familiar pain: trying to make their Craft theme banner fully clickable led to either a massively blown-up image or a frustrating syntax error. Sound familiar? We've all been there, tinkering with code only to have things go sideways.

The Challenge: Why Banners Resist Full Clickability

The Craft theme, like many others, is designed to have its image banner button as the primary call to action. When you try to wrap the entire banner content or even just the image itself in an (anchor) tag, you often run into layout issues. As ahsandoesntcare wisely pointed out, the tag can sometimes become the layout element, causing the image to lose its original sizing and object-fit rules. This is exactly what caused A_Fern's image to "blow up massively."

Here's an example of what that sizing issue can look like:

Community Solutions: A Spectrum of Approaches

The beauty of the Shopify community is how different experts jump in with various angles. Some, like Mustafa_Ali and ahsandoesntcare, suggested wrapping only the tag directly to try and prevent sizing issues, adding CSS like display:block;height:100% to the anchor. While this can work in some contexts, it still requires careful handling to avoid unintended side effects.

Then there was a more elegant solution that truly stood out, thanks to Ploqo’s detailed breakdown. This approach not only makes the entire banner clickable but also integrates seamlessly into your theme's customization options, giving you more control without breaking your existing design. It even keeps your original button clickable, allowing it to link to a different destination if you wish!

The Best Fix: Ploqo's Robust Solution for Craft Theme Banners

Ploqo's method directly addresses the sizing problem by creating an invisible, full-coverage link that sits on top of your banner, rather than trying to wrap the image itself. This preserves your image's original sizing and styling. Plus, it introduces new settings in your theme customizer, making it super easy to manage the banner link without diving back into code every time.

Here's how to implement it, step-by-step. Remember, as always, duplicate your theme before making any code edits! This is your safety net, folks.

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

1. Access Your Theme Code:

• From your Shopify admin, go to Online Store > Themes.
• Find your Craft theme, click the … (three dots) button, and select Edit code.
• Open the file sections/image-banner.liquid.

Here’s what that looks like:

2. Insert the Liquid and CSS Code:

• Find this line (it’s usually around line 120, but might vary slightly depending on your 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 block does a few clever things:

• It creates an invisible tag that stretches across the entire banner (position: absolute; inset: 0; width: 100%; height: 100%;).
• It uses pointer-events: none; on the main banner content to ensure clicks go through to our new invisible link.
• Crucially, it re-enables pointer-events: auto; for any existing buttons or links within the banner, so they remain independently clickable!

3. Add New Settings to Your Schema:

• Scroll down in the same image-banner.liquid file until you find the {% schema %} block.
• Inside this block, look for the image_2 settings block (or any other setting block if you don't have a second image).
• Paste these two new settings directly after the image_2 block (or wherever makes sense logically within your schema's "blocks": [] or "settings": [] array):

  {
    "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 Save your changes!

4. Set Your Banner Link in the Customizer:

• Go back to your Shopify admin, then Online Store > Themes > Customize.
• Navigate to your Image banner section.
• You'll now see a new setting called Banner link. Simply set your desired link here!

Here’s what that new setting looks like:

And the beautiful result – a fully clickable banner, perfectly sized:

This method gives you the best of both worlds: a large, clickable area for your main promotion, and the flexibility to keep your existing buttons functional, perhaps for a secondary call to action or a different product collection.

A Simpler CSS-Only Alternative (with a caveat)

Ecom_swift_LLC also offered a clever, CSS-only workaround if you just want your existing button's link to cover the entire banner. Their idea was to stretch the button invisibly over the whole banner with CSS. You'd right-click your button on the live banner, "Inspect" to grab its class, and then add CSS similar to this in your theme's CSS file (e.g., Assets/theme.css or Assets/base.css):

.banner__buttons {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.banner__buttons a {
  position: absolute;
  inset: 0;
  opacity: 0;
}

This is a quick fix if you only have one button and don't need a separate link for the main banner vs. the button. However, Ploqo's solution offers more control and better accessibility with the dedicated banner_link setting.

Remember, when editing code, always double-check for unclosed quotes or tags that might cause syntax errors, as A_Fern experienced. One tiny mistake can indeed break the whole section!

It’s fantastic to see how the Shopify community comes together to solve these common challenges. With these insights, you can give your Craft theme banners that extra touch of interactivity and improve your store's user experience. Happy customizing!