How to add two links to shopify split banner ( Clickable)

Kyracapri
Visitor
2 0 0

Hello, Im trying to fiqure out how to make Shopify double image banner where both side is clickable and has its own link attached.  I am using the Dawn theme. For Example say i have a banner thats split into two images on side is  blue the other red. When you click on the blue it takes you to the blue page and same for the red it takes you to the red page.

 

I've looked all over and I cant find any code or apps that will help.

Reply 1 (1)

BlackCro
Shopify Partner
36 7 6

If you're using an image banner section to get the split images, you can follow the steps below to add links to the two images.

 

Open image-banner.liquid and scroll down to the {% Schema %} towards the bottom of the page and look for image_picker with an id of image, and replace with this code.

 

"type": "image_picker",
"id": "image",
"label": "t:sections.image-banner.settings.image.label"
},
 {
  "type": "url",
  "id": "blue_image",
  "label": "Blue Image Link"
},

 

Now do the same for the second image_picker with id of image_2

 

"type": "image_picker",
"id": "image_2",
"label": "t:sections.image-banner.settings.image_2.label"
},
 {
  "type": "url",
  "id": "red_image",
  "label": "Red Image Link"
},

 

Now scroll up and and look for {%- if section.settings.image != blank -%} below that you will see <div class="banner__media media{% if....etc, paste the following code below this line. (just above {%-liquid) 

 

<a href="{{ section.settings.blue_image }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 999;"></a>

 

For the second image, scroll down to find {%- if section.settings.image_2 != blank -%} and again below <div class="banner__media media{% if...etc paste the following code.

 

<a href="{{ section.settings.red_image }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 999;"></a>

 

Hit Save and now you can go to Online Store, Customize. In the left hand menu click +Add Section, Image Banner and under the section settings on the right hand side, add the two images and select the pages you'd like each image to link to. 

 

Hope this helps

Simon

BlackCro.co.uk

A creative code agency