On image banner how do I make it so when people press on the image it leads them to the product page so they can buy it. My theme is dawn.
1 Like
Hi @Paige3man
This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
You can make an image banner on your Shopify store link to a product page so that customers can easily purchase the product by adding a link to the image. Here’s how you can do it:
-
In your Shopify admin panel, go to “Online Store” > “Themes” and then click on the “Customize” button.
-
Locate the banner section where you want to add the link and click on it.
-
Click on the image and then click on the “Link” button on the top right corner.
-
In the link field, paste the link to the product page or you can search the product by name.
-
If you want it to open in a new tab, check the box “Open in new tab”
-
Click “Save” and “Publish” to make the changes live on your store.
But how
Hello,
you need to some coding for make link image banner on Dawn theme because dawn theme isn’t provided the link image banner.
The base image-banner section in dawn does not have a link overlay, it only has a buttons block where you can show up to two buttons.
It could be customized to have that setting.
For DIY you can try in a custom-liquid block the following bandaid style that forces a button to be an overlay. Or add to bottom of base.css(without tags.
Keeping in mind it does not work with other text or multiple buttons.
This style will apply to ALL image banners on the same page , to target a specific one you need to find it’s ID selector.
If you need this CSS customized for you or have an overlay setting added then go ahead and contact me directly. Contact information in signature please provide context: store url, theme , post url and project details.
You need to manually update the code for that, here is how you can do it:
-
Go to themes and click on menu next to customize button and click on edit code
-
In the opened window, Search for image-banner.liquid file and open it to edit.
-
search for this line in the file:
- <div id="Banner-{{ section.id }}"
- Just above this line paste following:
- search for closing tag of div i.e. which will be right above {% schema %}. and add after that i.e.
- {% schema %}
-
Save and reload your shop, the banner should now be clickable
1 Like