Add A Customizable Clickable Image Section

Add A Customizable Clickable Image Section

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Compatible on most Shopify themes

Add a clickable hero image that can route to your store and even outside your store. Easy to customize. 

What are Customizable Clickable Image Section?

It focuses on creating a customizable clickable image section in a Shopify theme. This section would allow you to add an image with a link attached, enabling customers to click on the image and be directed to a specific product page, collection, or even an external website.

Why use Customizable Clickable Image Section?

There are several reasons to add a clickable image section:

  • Highlight Products: Draw attention to specific products or collections by featuring them with a visually appealing image and a clear call to action (clicking the image).
  • Promote Special Offers: Showcase ongoing sales or promotions with a clickable image directing customers to the relevant page.
  • Enhance Navigation: Improve user experience by offering visual shortcuts to key areas of your store.

Additional Considerations:

  • Choosing image size and style
  • Adding hover effects
  • Setting the link target (open in the same window or a new tab)
  •  

    What you are buying:

    • Clickable banner image
    • Options to change the size of images added
    • Change the background color of the section

    What makes our code better:

    • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
    • We do not leave or add codes use to advertise for our website
    • Our code is mobile friendly

    Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

    Steps on how to add Customizable Clickable Image Section

    Step #1. Open your code editor

    From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code

    Step #2. Create a new Section

    In Section folder, create a new section, name it "clickable image", then paste the code below

    Step #3. Save the changes

    Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.

    Step #4. Customize theme

    Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Make sure to SAVE once you are done customizing.

    Conclusion

    Adding a customizable clickable image section to your Shopify store can be a great way to visually enhance your product offerings and drive customer engagement. By incorporating high-quality images, clear calls to action, and a user-friendly design, you can effectively guide visitors towards your desired actions, whether it's browsing specific collections, learning more about a product, or making a purchase.

    Copied!
    Back to blog

    4 comments

    Is there a way to make the images multicolumn? I want two of them next to one another on my home page. Thanks!

    Kimberley

    Hi,

    Sorry about that. Just updated the code

    Made4Uo

    I would also like to know if this code still works. I have tried but it doesn’t seem to be working. I have it available as a selection but it doesn’t populate when selected. Any help you can give me would be great. Thanks

    Jennifer Evans

    Is this code valid or have an updated version?

    Dym

    Leave a comment