How to make the image banner clickable [all free themes]

Are you trying to make your Dawn theme's banner section image clickable? Look no further! Although the Dawn's banner section comes with buttons that you can add links to, there is no way to make the image itself clickable. Well, up until now!

With this guide I'll teach you how you can make your banner clickable just by pasting some code into your theme.

Here is a live preview of how the end result will look like.

[noticebox]

Making a backup of your current theme

Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.

Adding the code to your theme

  1. From your Shopify Admin go to: online store > themes > actions > edit code
  2. Find the file named exactly "image-banner.liquid"
  3. In this file, press CTRL + F (or CMD + F on Mac) to open the search bar.

    Search for exactly this (quotes included):

    when 'buttons'
    
  4. The following line will be highlighted:

  5. A few lines below this highlighted line, find the > sign:


    
  6. Paste the following code below the > sign.

    Please check the images below for a clearer reference.

    gist





    
  7. Don't forget to click on the "save" button on the top right.

Checking if it's working

  1. From the "Customize" page, click on the "Image Banner" section and on "Buttons".


    
  2. Make sure that the "First button link" is populated. Click on the save button and it should be all good.

  3. You can use this clickable banner with or without the button. If you'd like to show the button up (like "Shop all"), just write it down in the "First button label" box. If you'd like to show no buttons, leave it empty.

    It's important to note that the second button's link will not be functional. Since the entire image is clickable, following basic UX's principles, it should lead to only one URL.
Back to blog

Related Articles