How to: clickable home hero banner and change image for mobile

Store Design
1

I’m bit of a newbie when it comes to developing on Shopify, however, I was hoping someone would be able to assist.

I came across this website that sells travel journals, Journalfy (https://journalfy.co/) and noticed that their hero banner is clickable. So it looks like you can just press the ‘shop now’ button, but the whole image is clickable. I really love how they’ve done this as it means the button doesn’t get in the way of the hero image as the screen resizes. I also noticed that for mobile view, it’s a different image used.

Wondering if anyone knows how they did this? If the store sees this comment I’d love to hear back! It’s a beautiful website BTW, so well done.

Thanks in advance.

2

Hi @Surewhynotstore

You can create 2 Image banner sections, one for mobile, and one for desktop, then add code following this

Add this code to Custom CSS of the desktop image banner section to hide it on mobile

@media (max-width: 767px) {
.banner { display: none; }
}

Add this code to Custom CSS of the mobile image banner section to hide it on the desktop

@media (min-width: 768px) {
.banner { display: none; }
}

Related to making image clickable, you can follow this post

https://buymeacoffee.com/dandong910/how-make-image-banner-clickable-shopify-dawn-theme

3

Hi @Surewhynotstore ,

Please refer the below video to achieve the same