How to make slide image clickable with link

Roland6
Tourist
9 0 2

Hello , i want to ask the experts how can you make an image to be clickable on the debute theme , i dont want to have the text in the middle and the button on the image so i removed them , but i cannot see any option to link the image to a link .

My website: https://ultrabass.myshopify.com/

Password: 1234

Thankyou !

Replies 23 (23)

Michael_Gaines
Shopify Partner
9 0 1

Hi Roland,

Just took a look at your site . Which images ate you trying to add a link to? Everything on the homepage should have that feature built in already and you can change those links through thr customizer tool. If you can point me in the right spot illI be happy to let you know what code you'll need changed.

 

Thanks,

Get a small job done for $20 - Same day delivery.
lillydarcy
Visitor
1 0 0

Hi Michael, I have the same problem could I have your email and I will send you an email about your service you may still provide?

 

Roland6
Tourist
9 0 2

I am trying to add a like to the slide images , at the slide there are 4 images that change every 5 seconds , i want to add link to those 4 images.

Michael_Gaines
Shopify Partner
9 0 1

Roland,

What I would recommend, since you're not using the button or text overlay which come standard on this theme, would be to alter the code in your hero.liquid and slideshow.liquid files to pull the link url from the "Button Link" field in your customization settings. This will make it easy to change the link as you change/update the individual slides/photos in the future rather than hard coding that information in. Of course, you'd have to change the code to apply the link to the hero image itself, and not the button.


This would require a solid understanding of html, css and liquid to change. I'm happy to help get this done for you if you need further assistance. Feel free to drop me an email.

Thanks,

Get a small job done for $20 - Same day delivery.

Roland6
Tourist
9 0 2

I have basic understanding in html , so if someone can point out for me what to edit in code , i can do it, so can you explain what do i have to edit in the slideshow.liquid ?

Roland6
Tourist
9 0 2

I tried to add the following code into the hero.liquid : 

 <script>
  $(function(){
    $('.hero__slide')
      .css('cursor', 'pointer')
      .click(function(){ window.location.href = '/collections/all' });
  });
</script>

 

But sadly it doesnt do anything ...

Roland6
Tourist
9 0 2

Nobody had this problem ?

Roland6
Tourist
9 0 2

Nobody ???

BeaconX
Tourist
4 0 4

I have this issue to Roland. Sorry no one has replied with a quick fix and not just someone looking to get paid. I am fine with people getting paid for their time but this should really be a default option in shopify. Crazy that it isn't. 

Misfit_Code_Dev
Shopify Partner
289 22 56

Hey there Roland.  I just sent you a collab invite.  I can not say 100% that this will be an easy change, but more than happy to take look for you.  NO charge 😉

Best Regards,
Duncan.
Isle of misfit code & development
http://ecomdev.ca

Carlos6
Shopify Partner
31 0 35

here it is in a video step by step

Aneesha1
Excursionist
50 0 3

Hey, 

So much for this!

I've just tried this - but i dont have '<div class="slideshow__image box' in my slideshow.liquid

i'm using Venture theme 

Do you have any advice or any update that I could use to make this work for me please? 

Thanks so much, 

Aneesha 

www.devti.co.uk

Bnb
Excursionist
19 0 1

Code from the video above, if anyone needs:

Part 1. 

 

{% if block.settings.image_link != blank %}
<a href="{{block.settings.image_link}}">
{% endif %}

 

</a>

 

Part 2.

{
"type": "url", 
"id": "image_link",
"label": "Image Link"
},

 

Bnb
Excursionist
19 0 1

Sadly, I have a debut theme and the second code was rejected as an error. Can you advice? Thank you

Denise12
Visitor
1 0 0

Thanks for the tutorial!

Somehow it didn't work for my theme, so I took a less clean solution instead.

 

I took the file "slider.liquid", there the slider is divied into several divs and also includes a <ul> list.

 

I placed a  hard coded link in the line above the opening <ul> tag.

Like this:

  • <a href="/collections/all">
  • <ul class=" ...

To close the link I placed the closing </a> tag in the line behind the closing </ul> tag.

  • </ul>
  • </a>
  • <noscript> ....

 

I know this solution is not very clean and cam make problems if someone else will work on the theme, but it works for now and I document all changes I make to the theme via screenshot just in case. 😉

 

- - - - -

Just in case anyone knows the solution:

I tried the solution in the tutorial before, although the theme is slightly different.

  • To get the "image_link" into the theme cofigurator worked. You could choose a link in the frontend configurator.
  • I had placed the " {% if block.settings.image_link != blank %}
    <a href="{{ block.settings.image_link }}">
    {% endif %}
    above a div containing the slider image, and also the closing </a> tag below.
    • I then changed "block.settings.image_link" to "blocks.settings.image_link" because it was named "blocks" in my theme instead of "block".
  • After that the slider image was clickable, but the link went to nowhere.
  • The image_link was empty although I placed a link in the frontend configurator.

If anyone knows where the error was, I'd be thankful but until then the hard coded link might work. 😉

ELandrumStudio
Tourist
10 0 6

I've been trying to get this code to work for the Narrative theme but I can't get the link to work. There is a place in the sections area to add a link, so that part of the code worked, but the image is not clickable. I'm sure that there is something I need to do differently since this is a different theme than the one in the video. 

Has anyone been able to get this to work for the Narrative theme?

KristinW
Excursionist
34 2 5

Hi @Carlos6 

Thank you for the video! I am on the Palo Alto theme and have quasi-gotten this to work. Both the desktop and mobile images link to the page that I would like, but for some reason the mobile section shows both the desktop and mobile version (vertically with the mobile on top). I've tried moving the </a>, adding the code to both the desktop image and mobile image sections and I cannot find a way for the link to work without also having the mobile image issue. Are you able to see what I'm doing wrong? We would really appreciate your advice! Thank you, Kristin 

<!-- /sections/slideshow.liquid -->

{%- assign transition = section.settings.transition -%}
{%- assign autoplay = section.settings.autoplay -%}
{%- assign duration = section.settings.duration | times: 1000 -%}
{%- assign content_alignment = section.settings.content_alignment -%}
{%- assign slide_height = section.settings.slide_height -%}
{%- assign slides_count = section.blocks.size -%}

<div data-section-id="{{ section.id }}"
	data-section-type="slider"
	data-slides-count="{{ section.blocks.size }}"
	data-autoplay="{{ autoplay }}"
	data-duration="{{ duration }}"
	data-image-height="{{ slide_height }}"
	data-page-dots="{{ section.settings.show_nav_dots }}"
	data-nav-arrows="{{ section.settings.show_nav_arrows }}"
	data-transition="{{ transition }}"
	data-slides="{{ slides_count }}">

	<div class="slider slider--{{ transition }} {% if section.settings.show_arrow_down %}slider--has-arrow{% endif %} slider--{{ content_alignment }}">
		{%- if section.blocks.size > 0 -%}
			{%- if section.settings.show_nav_arrows and section.blocks.size > 1 -%}
				<button class="slider__arrow slider__arrow--previous"><span class="custom-icon-arrow-right" aria-hidden="true"></span></button>
				<button class="slider__arrow slider__arrow--next"><span class="custom-icon-arrow-right" aria-hidden="true"></span></button>
			{%- endif -%}

			<div class="slide-block">
				<div class="flickity">
					{%- for block in section.blocks -%}

						{%- assign overlayOpacity = block.settings.overlay_opacity | times: 0.01 -%}

						{%- if block.settings.slide_btn_link != blank -%}
							{%- assign btn_link =  block.settings.slide_btn_link  -%}
						{%- else -%}
							{%- assign btn_link = "#" -%}
						{%- endif -%}

						{%- if block.settings.slide_btn_link_2 != blank -%}
							{%- assign btn_link_2 =  block.settings.slide_btn_link_2  -%}
						{%- else -%}
							{%- assign btn_link_2 = "#" -%}
						{%- endif -%}

						<div class="item item--{{ block.id }} item--{{ block.settings.text_color }} {{ slide_height }} initial-slide js-section-container" {{ block.shopify_attributes }} data-slide-position="{{ forloop.index }}" data-style="{{ block.settings.text_color }}">
							{%- if block.settings.slide_btn_text != blank or block.settings.slide_btn_text_2 != blank -%}
							{%- endif -%}

						 	<div class="overlay" style="opacity:{{ overlayOpacity }};"></div>

							{%- if slide_height == 'original-height' -%}

								{% comment %} Mobile image {% endcomment %}
								{%- unless block.settings.image_mobile == blank -%}
									{%- assign image = block.settings.image_mobile -%}
									{%- assign image_widths = '295,394,590,700,800,1000,1200,1500,1800,2000,2400' -%}
									{%- include 'theme-rias' -%}
									<div class="slide-image__container slide-image__container--mobile" style="padding-top: {{ 100 | divided_by: image.aspect_ratio | append: '%' }}">
										<img
											 class="{% if forloop.index == 1 %} lazyload{% else %} will-lazyload{% endif %}"
											 data-src="{{ image_url_pattern }}"
											 data-widths= "[{{ image_widths }}]"
											 data-aspectratio="{{image.aspect_ratio }}"
											 data-sizes="auto"
											 alt="{{ image.alt | escape }}">
										<noscript>
											<img src="{{ image | img_url: '2048x' }}" alt="{{ image.alt | escape }}">
										</noscript>
									</div>
								{%- endunless -%}

								{% comment %} Desktop image {% endcomment %}
								{%- unless block.settings.image == blank -%}
									{%- assign image = block.settings.image -%}
									{%- assign image_widths = '295,394,590,700,800,1000,1200,1500,1800,2000,2400' -%}
									{%- include 'theme-rias' -%}
                          			{% if block.settings.image_link !=blank %}
                                          <a href="{{ block.settings.image_link }}">
                                    {% endif %}	
									<div class="slide-image__container slide-image__container--desktop" style="padding-top: {{ 100 | divided_by: image.aspect_ratio | append: '%' }}">
										<img
											 class="{% if forloop.index == 1 %} lazyload{% else %} will-lazyload{% endif %}"
											 data-src="{{ image_url_pattern }}"
											 data-widths= "[{{ image_widths }}]"
											 data-aspectratio="{{image.aspect_ratio }}"
											 data-sizes="auto"
											 alt="{{ image.alt | escape }}">
										<noscript>
											<img src="{{ image | img_url: '2048x' }}" alt="{{ image.alt | escape }}">
										</noscript>                                      
									</div>
								{%- else -%}
									<div class="slide-image__container slide-image__container--desktop slide-image__container--placeholder">
										{{- 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg-filled' -}}
									</div>
								{%- endunless -%}
							{%- else -%}
                                            </a>
								{% comment %} Mobile image {% endcomment %}
								{%- unless block.settings.image_mobile == blank -%}
									<div class="slide--{{ block.id }} {{ block.settings.bg_position }} slide-background image-mobile{% if forloop.index == 1 %} lazyload{% else %} will-lazyload{% endif %}"
										data-bgset="{% include 'bgset', image: block.settings.image_mobile %}"
										data-sizes="auto"
										data-parent-fit="cover">
									</div>
									<noscript>
										<div class="slide--{{ block.id }} slide-background image-mobile" style="background-image: url({{ block.settings.image | img_url: '2048x' }});"></div>
									</noscript>
								{%- endunless -%}

								{% comment %} Desktop image {% endcomment %}
								{%- unless block.settings.image == blank -%}
									<div class="slide--{{ block.id }} {{ block.settings.bg_position }} slide-background image-desktop{% if forloop.index == 1 %} lazyload{% else %} will-lazyload{% endif %}"
										data-bgset="{% include 'bgset', image: block.settings.image %}"
										data-sizes="auto"
										data-parent-fit="cover">
									</div>
									<noscript>
										<div class="slide--{{ block.id }} slide-background image-desktop" style="background-image: url({{ block.settings.image | img_url: '2048x' }});"></div>
									</noscript>
								{%- else -%}
									<div class="slide-background slide-background--desktop slide-background--placeholder">
										{{- 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg-filled' -}}
									</div>
								{%- endunless -%}
							{%- endif -%}

							<div class="slider-text-block js-section-content">
								<div class="slider-text-block__wrapper">
									<div class="wrapper wrapper--small">
										{%- if block.settings.slide_heading != blank -%}
											<h1 class="slide__heading main-heading size--{{ block.settings.heading_font_size }}">{{ block.settings.slide_heading | escape }}</h1>
										{%- endif -%}
										{%- if block.settings.slide_subheading != blank -%}
											<h2 class="slide__caption main-subheading size--{{ block.settings.text_font_size }}">{{ block.settings.slide_subheading | escape | newline_to_br }}</h2>
										{%- endif -%}

										<div class="slider-cta">
											{%- if block.settings.slide_btn_text != blank -%}
												<a class="btn call-to-action slider-btn btn--{{ block.settings.slide_btn_style }}" href="{{ btn_link }}"{% if forloop.index > 1 %} tabindex="-1"{% endif %}>{{ block.settings.slide_btn_text | escape }}</a>
											{%- endif -%}
											{%- if block.settings.slide_btn_text_2 != blank -%}
												<a class="btn call-to-action slider-btn btn--{{ block.settings.slide_btn_style_2 }}" href="{{ btn_link_2 }}"{% if forloop.index > 1 %} tabindex="-1"{% endif %}>{{ block.settings.slide_btn_text_2 | escape }}</a>
											{%- endif -%}
											{%- if block.settings.video_btn_text != blank -%}
												<a class="video-text-link secondary-call-to-action" href="{{ block.settings.video_btn_link }}"{% if forloop.index > 1 %} tabindex="-1"{% endif %} data-play-button>
													<i class="custom-icon-play-button call-to-action-circle"></i>
													<span>{{ block.settings.video_btn_text }}</span>
												</a>
											{%- endif -%}
										</div>
									</div>
								</div>
							</div>
						</div>
					{%- endfor -%}
				</div>
			</div>
		{%- endif -%}

		{%- if section.settings.show_arrow_down -%}
			<a href="#" class="slider__scroll-down js-scroll-down" title="{{ 'homepage.onboarding.slideshow.scroll_down' | t }}"{% if forloop.index > 1 %} tabindex="-1"{% endif %}>
				{%- include 'icon-arrow-down' -%}
			</a>
		{%- endif -%}
	</div>
</div>

{% schema %}
{
	"name": "Slideshow LINK II",
	"max_blocks": 10,
	"class": "slideshow full-header",
	"settings": [
		{
			"type": "header",
			"content": "layout"
		},
		{
			"type": "select",
			"id": "slide_height",
			"label": "Height",
			"default": "one-hundred-height-hero",
			"options": [
				{
					"value": "one-hundred-height-hero",
					"label": "Full screen"
				},
				{
					"value": "original-height",
					"label": "Original"
				},
				{
					"value": "seven-fifty-height-hero",
					"label": "750px"
				},
				{
					"value": "sixty-fifty-height-hero",
					"label": "650px"
				},
				{
					"value": "five-fifty-height-hero ",
					"label": "550px"
				},
				{
					"value": "four-fifty-height-hero",
					"label": "450px"
				}
			]
		},
		{
			"type": "select",
			"id": "content_alignment",
			"label": "Content alignment",
			"default": "center",
			"options": [
				{ "value": "left", "label": "Left" },
				{ "value": "center", "label": "Center" },
				{ "value": "right", "label": "Right" },
				{ "value": "bottom-left", "label": "Bottom left" },
				{ "value": "bottom-right", "label": "Bottom right" }
			]
		},
		{
			"type": "checkbox",
			"id": "show_nav_dots",
			"label": "Show slide navigation dots",
			"default": true
		},
		{
			"type": "checkbox",
			"id": "show_nav_arrows",
			"label": "Show slide navigation arrows",
			"default": true
		},
		{
			"type": "checkbox",
			"id": "show_arrow_down",
			"label": "Show down arrow",
			"default": false
		},
		{
			"type": "header",
			"content": "Autoplay"
		},
		{
			"type": "checkbox",
			"id": "autoplay",
			"label": "Autoplay slideshow",
			"default": false
		},
		{
			"type": "range",
			"id": "duration",
			"min": 2,
			"max": 5,
			"step": 1,
			"unit": "sec",
			"label": "Change slides every",
			"default": 4
		},
		{
			"type": "select",
			"id": "transition",
			"label": "Transition style",
			"default": "slide",
			"options": [
				{ "label": "Slide", "value": "slide" },
				{ "label": "Fade", "value": "fade" },
				{ "label": "Zoom out", "value": "zoom-out" }
			]
		}
	],
	"blocks": [
		{
			"type": "image",
			"name": "Slide",
			"settings": [
			{
				"type": "header",
				"content": "Image"
			},
				{
					"type": "image_picker",
					"id": "image",
					"label": "Image",
					"info": "2048px width recommended"
				},
				{
					"type": "image_picker",
					"id": "image_mobile",
					"label": "Mobile image",
					"info": "Optional"
				},
				{
					"type": "url",
					"id": "image_link",
					"label": "Image link"
				},
				{
					"type": "select",
					"id": "bg_position",
					"label": "Position",
					"default": "bg-pos-center-center",
					"options": [
						{ "label": "Top", "value": "bg-pos-top-center" },
						{ "label": "Right", "value": "bg-pos-right-center" },
						{ "label": "Center", "value": "bg-pos-center-center" },
						{ "label": "Left", "value": "bg-pos-left-center" },
						{ "label": "Bottom", "value": "bg-pos-bottom-center" }
					]
				},
				{
					"type": "range",
					"id": "overlay_opacity",
					"label": "Overlay opacity",
					"min": 0,
					"max": 95,
					"step": 5,
					"unit": "%",
					"default": 20
				},
				{
					"type": "header",
					"content": "Text"
				},
				{
					"type": "select",
					"id": "text_color",
					"label": "Color",
					"default": "text-light",
					"options": [
						{
							"value": "text-light",
							"label": "Light"
						},
						{
							"value": "text-dark",
							"label": "Dark"
						}
					]
				},
				{
					"type": "text",
					"id": "slide_heading",
					"label": "Heading",
					"default": "Welcome to Palo Alto"
				},
				{
					"type": "range",
					"id": "heading_font_size",
					"label": "Heading size",
					"unit": "px",
					"step": 4,
					"min": 40,
					"max": 64,
					"default": 48
				},
				{
					"type": "textarea",
					"id": "slide_subheading",
					"label": "Subheading",
					"default": "This subheading helps you provide some more detail to the title above."
				},
				{
					"type": "range",
					"id": "text_font_size",
					"label": "Text size",
					"unit": "px",
					"step": 2,
					"min": 16,
					"max": 28,
					"default": 20
				},
				{
					"type": "header",
					"content": "Buttons"
				},
				{
					"type": "text",
					"id": "slide_btn_text",
					"label": "Button text",
					"default": "Welcome"
				},
				{
					"type": "url",
					"id": "slide_btn_link",
					"label": "Button URL"
				},
				{
					"type": "select",
					"id": "slide_btn_style",
					"label": "Button style",
					"default": "primary",
					"options": [
						{ "label": "Primary", "value": "primary" },
						{ "label": "Secondary", "value": "secondary" }
					]
				},
				{
					"type": "text",
					"id": "slide_btn_text_2",
					"label": "Second button text"
				},
				{
					"type": "url",
					"id": "slide_btn_link_2",
					"label": "Second button URL"
				},
				{
					"type": "select",
					"id": "slide_btn_style_2",
					"label": "Second button style",
					"default": "secondary",
					"options": [
						{ "label": "Primary", "value": "primary" },
						{ "label": "Secondary", "value": "secondary" }
					]
				},
				{
					"type": "text",
					"id": "video_btn_text",
					"label": "Video button text",
					"default": "Watch the Video"
				},
				{
					"type": "video_url",
					"id": "video_btn_link",
					"label": "Video URL",
					"accept": [
						"youtube",
						"vimeo"
					],
					"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc"
				}
			]
		}
	],
	"presets": [
		{
			"name": "Slideshow LINK II",
			"category": "Image",
			"blocks": [
				{
					"type": "image"
				},
				{
					"type": "image"
				}
			]
		}
	]
}
{% endschema %}

 

Cordevv
Tourist
7 0 4

Best video ever! thanks to it and the first comment I was finally available to add a link to the slideshow. THANK YOU SOO MUCH 💓

proshopmel
Visitor
2 0 0

what if I cant find slideshow_image

 

I have venture them but that code isnt there

 

Lost of Hero_image

 

 

 

ndahe
Visitor
2 0 0

Hello im using brooklyn template, tonight can clickable for image slideshow but cant clickable for now ? Can help me ? 

Thankyou 

DomumShop
Visitor
1 0 0

Bro, I do have de same problem as you, did you find a way to fix this it?

RaghavDev22
Tourist
9 0 1

You can watch the video and get some help.

 

MoneyProfits
Visitor
1 0 0

*Tutorial video below*

 

I know this thread is old but I came across it while searching for a solution to a similar issue. I am using Pop Shop Theme and have a features section with 4 different image icons. They weren't clickable and I could only add a url in the description section of the images when editing the store. However, I tried using some of these suggestions here and found they did not work. 

 

Luckily, I found this tutorial where OMG, she literally explains it all and it WORKS!. It should work for any theme.

 

https://youtu.be/6Jc3bmvI49Q 

I DO NOT OWN THIS VIDEO. JUST SHARING TO HELP OTHERS.

 

I was able to make my images clickable, and add a dynamic link so that each image points to a specific link. Now I don't need the link to be listed under the picture image. Plus the coding was actually easy. I figured I'd share it here for anyone else running into this issue and looking for help.

 

She has contact info on her page if anyone has further questions or need further help 🙂