How to Make a Clickable Banner in Shopify

If you've ever wanted to turn your Shopify banner into a fully clickable section instead of relying on a small button, you're not alone. By default, Shopify allows you to add a banner with a button, but only that button is clickable—clicking anywhere else on the banner does nothing. This isn’t the best user experience, especially on mobile devices where finding and tapping a small button can be tricky.

In this tutorial, we’ll walk you through how to remove that button and make the entire banner clickable, creating a more intuitive and visually clean design for your Shopify store.

Why Make the Banner Clickable?

There are several benefits to making your banner fully clickable:

• Better user experience: Customers are more likely to click on a full banner than a small button.
• Cleaner design: Removing the button creates a more streamlined and visually appealing layout.
• Increased click-through rate: More clickable space can lead to more engagement.
• Versatile usage: You can use banners to highlight new products, feature collections, or promote discounts during festivals or events.

Use Cases

You can use this clickable banner for:

• Highlighting new collections
• Promoting seasonal sales or discounts
• Linking to specific products
• Directing traffic to blogs or policy pages

For example, if you've launched a new product line, simply add a relevant banner image, link it to the corresponding collection, and visitors can easily access it with one click.

Step-by-Step: How to Add a Clickable Banner

1. Access the Code Editor

• From your Shopify admin, go to Online Store > Themes
• Click Actions > Edit Code
• Search for the file named slideshow.liquid (or similar)

2. Add the Required Code

You’ll need to paste a few lines of code in different sections:

• Step 1: Paste the first code snippet below the stylesheet_ tag.

<style>
  .posrel{position:relative;}
  .posrel .posoverlay{position:absolute; top:0; bottom:0; left:0; right:0;}
    </style>

• Step 2: Scroll down and paste the second snippet just after the placeholder double endif.

{% if block.settings.link %}
    <a href="{{ block.settings.link }}"></a>
{%- endif -%}

• Step 3: Update the code by adding posrel  as instructed.
• Step 4: Insert additional code under the class="slideshow__text".

{% if block.settings.link %}
    <a href="{{ block.settings.link }}" class="posoverlay"> </a>
{%- endif -%}

3. Save Your Changes

Once all the code is added, click Save to apply the updates.

Add and Customize Your Slideshow

1. Go to Theme Customizer

• Navigate to Online Store > Customize
• Add a new section named Slideshow
• Insert the section into your homepage

2. Remove Unwanted Blocks

• Delete extra elements like headings, subheadings, and the button label
• This ensures a clean and distraction-free banner

3. Add Your Banner Images

• Upload a banner image
• In the Button Link field, add the URL for your desired destination:

4. Add More Banners (Optional)

You can add multiple entries by repeating the steps. For example:

• First banner: Link to all products
• Second banner: Link to a specific collection (e.g., "Wooden Toys")

Test Your Clickable Banner

After setting up everything:

• Preview the changes on both desktop and mobile devices
• Use the browser’s Inspect Tool to switch to mobile view and verify functionality

You should see that both desktop and mobile banners are fully clickable and redirect to the correct pages.